* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            -webkit-tap-highlight-color: transparent;
        }

        /* 下拉加载更多消息指示器 */
        .pull-to-load-indicator {
            text-align: center;
            padding: 12px 16px;
            color: var(--text-secondary, #9aa0a6);
            font-size: 13px;
            background: linear-gradient(to bottom, rgba(163, 177, 198, 0.1), rgba(163, 177, 198, 0));
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: opacity 0.2s ease;
            min-height: 44px;
        }

        .pull-to-load-indicator .pull-arrow {
            display: inline-block;
            transition: transform 0.2s ease;
            font-size: 14px;
        }

        .pull-to-load-indicator.ready .pull-arrow {
            transform: rotate(180deg);
        }

        .pull-to-load-indicator.loading {
            opacity: 0.7;
        }

        .pull-to-load-indicator.no-more {
            color: var(--text-tertiary, #b0b0b0);
            font-size: 12px;
        }

        [data-theme="dark"] .pull-to-load-indicator {
            color: var(--text-secondary, #8b949e);
            background: linear-gradient(to bottom, rgba(139, 148, 158, 0.15), rgba(139, 148, 158, 0));
        }

        [data-theme="dark"] .pull-to-load-indicator.no-more {
            color: var(--text-tertiary, #6e7681);
        }

        /* 聊天气泡弹窗样式 */
        .chat-bubble {
            position: fixed;
            top: calc(20px + var(--safe-inset-top, env(safe-area-inset-top)));
            left: 50%;
            transform: translateX(-50%);
            right: auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 50px; /* 胶囊样式 */
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
            padding: 8px 16px;
            max-width: 90%;
            z-index: var(--z-toast); /* 将聊天气泡 z-index 统一为 --z-toast */
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            animation: slideInDown 0.3s ease;
            backdrop-filter: blur(5px);
            transition: all 0.3s ease;
            will-change: transform, opacity;
        }
        
        .chat-bubble:active {
            transform: translate(-50%, 2px);
        }

        .chat-bubble.hide {
            animation: slideOutUp 0.3s ease forwards;
        }

        html.ua-android-opera .chat-bubble,
        html.ua-android-opera .mode-menu,
        html.ua-android-opera .persona-editor-modal {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        html.ua-android-opera .chat-bubble {
            background: rgba(255, 255, 255, 0.98) !important;
            will-change: auto !important;
        }
        
        /* 修复问题1：Opera中减少键盘弹起时的闪屏 */
        html.ua-android-opera body {
            /* 确保背景色始终存在，防止闪黑 */
            background-color: #f8f5f2 !important;
        }
        
        html.ua-android-opera .dialogue-page__bg {
            /* 确保背景层有背景色，防止闪黑 */
            background-color: #f8f5f2 !important;
        }
        
        html.ua-android-opera .dialogue-body {
            /* 确保聊天区域有背景色 */
            background-color: #f8f5f2 !important;
        }
        
        /* Opera下禁用可能导致闪屏的transition和will-change */
        html.ua-android-opera .main-content,
        html.ua-android-opera .dialogue-body {
            transition: none !important;
        }
        
        /* 修复1.1：确保Opera下主内容区正确显示 */
        html.ua-android-opera .main-content {
            display: flex !important;
            flex-direction: column !important;
            min-height: 0 !important;
            height: auto !important;
            max-height: var(--app-height, 100dvh) !important;
            /* 确保内容可见 */
            visibility: visible !important;
            opacity: 1 !important;
            /* 确保有背景色 */
            background-color: #f8f5f2 !important;
            /* 确保可以滚动 */
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch !important;
        }
        html.ua-android-opera .dialogue-page,
        html.ua-android-opera .app-full-page {
            will-change: auto !important;
            transform: none !important;
            right: auto;
            width: 100%;
            max-width: none;
            margin: 0;
            left: 100%;
            transition: left 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }
        html.ua-android-opera .chat-bubble,
        html.ua-android-opera .mode-menu,
        html.ua-android-opera .persona-editor-modal,
        html.ua-android-opera .menu-panel,
        html.ua-android-opera [will-change] {
            will-change: auto !important;
        }
        html.ua-android-opera .dialogue-page.active,
        html.ua-android-opera .app-full-page.active {
            left: 0;
        }

        /* 好友美化等滑入页：与 API 管理页一致，用 left 动画并确保在最上层 */
        html.ua-android-opera .app-slide-page {
            transform: none !important;
            right: auto;
            width: 100%;
            max-width: none;
            margin: 0;
            left: 100%;
            transition: left 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
            /* 删除硬编码 z-index，使用统一的 --z-view */
        }
        html.ua-android-opera .app-slide-page[style*="display: flex"],
        html.ua-android-opera .app-slide-page[style*="display:flex"] {
            left: 0;
        }

        .chat-bubble-avatar {
            width: 32px; /* 稍微调小一点适配胶囊 */
            height: 32px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 12px;
            font-weight: bold;
        }

        .chat-bubble-content {
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .chat-bubble-name {
            font-weight: 600;
            font-size: 14px;
            color: #333;
            white-space: nowrap;
        }

        .chat-bubble-text {
            font-size: 13px;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 150px;
        }

        @keyframes slideInDown {
            from { transform: translate(-50%, -100%); opacity: 0; }
            to { transform: translate(-50%, 0); opacity: 1; }
        }

        @keyframes slideOutUp {
            from { transform: translate(-50%, 0); opacity: 1; }
            to { transform: translate(-50%, -100%); opacity: 0; }
        }

        @keyframes slideUp {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }

        @keyframes slideDown {
            from { transform: translateY(0); }
            to { transform: translateY(100%); }
        }


        :focus-visible {
            outline: 2px solid #a3b1c6;
            outline-offset: 2px;
        }

        /* iOS Safari 滚动修复：完整的高度链 */
        html {
            height: 100%;
        }
        
        body {
            height: 100%;
            background-color: #f8f5f2;
            color: #5a5a5a;
            overflow: hidden; /* 锁定body，使用内部容器滚动 */
            /* 使用flex布局形成完整高度链 */
            display: flex;
            flex-direction: column;
            min-height: 100dvh;
            width: 100%;
            margin: 0;
            /* 移除硬编码的宽度和阴影，适配父容器 */
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
            /* iOS Safari 滚动优化 */
            -webkit-overflow-scrolling: touch;
        }

        @supports (min-height: 100svh) {
            body {
                min-height: 100svh;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            * {
                animation: none !important;
                transition: none !important;
                scroll-behavior: auto !important;
            }
        }
        
        /* 移除所有点击高亮 */
        button, input, textarea, a {
            -webkit-tap-highlight-color: transparent;
        }
        
        /* 顶部导航栏 */
        .header {
            flex-shrink: 0; /* 防止在flex布局中被压缩 */
            background-color: #a3b1c6;
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 12px;
            padding-top: calc(6px + var(--safe-inset-top, env(safe-area-inset-top)));
            height: calc(56px + var(--safe-inset-top, env(safe-area-inset-top)));
            box-shadow: 0 2px 10px rgba(163, 177, 198, 0.2);
            /* 确保在单页堆叠中可见 */
            position: relative;
            z-index: 1;
        }
        
        .header-title {
            font-size: 18px;
            font-weight: bold;
            letter-spacing: 0.5px;
        }
        
        .header-icons {
            display: flex;
            gap: 0;
        }

        .header-icons i {
            cursor: pointer;
        }

        .header-back {
            font-size: 18px;
            cursor: pointer;
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .header-back i {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
        }

        .header-icons i {
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
        }

        .header-icons i + i {
            margin-left: 8px;
        }

        .header-icons i:active,
        .header-back:active,
        .header-back i:active {
            background-color: rgba(255, 255, 255, 0.18);
        }
        
        /* 主内容区 - 使用flex布局 */
        .main-content {
            flex: 1;
            min-height: 0; /* 关键：允许flex子项收缩 */
            background-color: #f8f5f2;
            /* 底部padding避免被固定导航栏遮挡 */
            padding-bottom: calc(60px + var(--safe-inset-bottom, env(safe-area-inset-bottom)));
            /* iOS Safari 滚动优化 - 确保内部滚动正常 */
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            touch-action: pan-y;
            /* 确保层级关系：列表作为底层视图 */
            position: relative;
            z-index: 1;
        }
        
        /* 标签内容 */
        .tab-content {
            display: none;
            height: 100%;
        }
        
        .tab-content.active {
            display: block;
        }
        
        /* 修复1.2：确保Opera下激活的标签页正确显示 */
        html.ua-android-opera .tab-content.active {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            height: 100% !important;
            min-height: 100% !important;
            position: relative !important;
            /* 删除硬编码 z-index: 1 !important，使用默认堆叠上下文 */
        }
        
        /* 确保Opera下tab-content有正确的高度 */
        html.ua-android-opera .tab-content {
            position: relative !important;
            min-height: 0 !important;
        }
        
        /* 个人中心页面 */
        .profile-header {
            background-color: #fff;
            padding: 30px 15px 20px;
            padding-top: calc(30px + var(--safe-inset-top, env(safe-area-inset-top)));
            display: flex;
            align-items: center;
            border-bottom: 1px solid #e8e4e0;
            position: relative;
        }
        
        .profile-avatar {
            width: 70px;
            height: 70px;
            border-radius: 10px;
            margin-right: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: white;
            box-shadow: 0 5px 10px rgba(0,0,0,0.05);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            flex-shrink: 0;
        }
        
        .profile-avatar.has-custom {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        
        .avatar-edit-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            opacity: 0;
            transition: opacity 0.3s;
            border-radius: 10px;
        }
        
        .profile-avatar:hover .avatar-edit-overlay {
            opacity: 1;
        }
        
        .profile-info {
            flex: 1;
            min-width: 0;
        }
        
        .profile-name {
            font-size: 22px;
            font-weight: 500;
            margin-bottom: 5px;
            color: #5a5a5a;
            display: flex;
            align-items: center;
            cursor: pointer;
            padding: 2px 0;
            border-radius: 4px;
        }
        
        .profile-name:hover {
            background-color: #f0ede9;
        }
        
        .profile-name i {
            margin-left: 8px;
            font-size: 14px;
            color: #9a9a9a;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .profile-name:hover i {
            opacity: 1;
        }
        
        .profile-wechat-id {
            font-size: 14px;
            color: #7a7a7a;
            display: flex;
            align-items: center;
            cursor: pointer;
            padding: 2px 0;
            border-radius: 4px;
        }
        
        .profile-wechat-id:hover {
            background-color: #f0ede9;
        }
        
        .profile-wechat-id i {
            margin-left: 8px;
            font-size: 12px;
            color: #9a9a9a;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .profile-wechat-id:hover i {
            opacity: 1;
        }
        
        .profile-menu-item {
            padding: 15px;
            background-color: #fff;
            border-bottom: 1px solid #e8e4e0;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .profile-menu-item:hover {
            background-color: #f8f5f2;
        }
        
        .profile-menu-icon {
            width: 28px;
            height: 28px;
            margin-right: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: white;
            border-radius: 6px;
            flex-shrink: 0;
        }
        
        .profile-menu-text {
            flex: 1;
            font-size: 16px;
            color: #5a5a5a;
        }
        
        .profile-menu-arrow {
            color: #c0c0c0;
            font-size: 14px;
        }
        
        /* 全屏子页基础容器 (标准化) */
        .app-full-page,
        .friend-settings-page {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            max-width: 500px;
            margin: 0 auto;
            background-color: #f8f5f2;
            /* 移除 z-index，改用 DOM 顺序进行单页堆叠 */
            display: flex;
            flex-direction: column;
            transform: translateX(100%);
            transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            pointer-events: none;
            overflow: hidden;
        }

        .app-full-page.active,
        .friend-settings-page.active {
            transform: translateX(0);
            pointer-events: auto;
        }
        
        .settings-group {
            background-color: #fff;
            border-radius: 12px;
            margin-bottom: 20px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            border: 1px solid #e8e4e0;
        }
        
        .settings-item {
            padding: 15px;
            border-bottom: 1px solid #e8e4e0;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .settings-item:last-child {
            border-bottom: none;
        }
        
        .settings-item:hover {
            background-color: #f8f5f2;
        }
        
        .settings-item.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .settings-item.disabled:hover {
            background-color: transparent;
        }
        
        .settings-item-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background-color: #a3b1c6;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 12px;
            flex-shrink: 0;
        }
        
        .settings-item-content {
            flex: 1;
        }
        
        .settings-item-label {
            font-size: 16px;
            color: #5a5a5a;
            font-weight: 500;
        }
        
        .settings-item-desc {
            font-size: 12px;
            color: #9a9a9a;
            margin-top: 3px;
        }
        
        .settings-item-value {
            font-size: 14px;
            color: #9a9a9a;
            margin-right: 10px;
        }
        
        .settings-item-arrow {
            color: #c0c0c0;
            font-size: 14px;
        }

        /* 传讯页专用变量；z-index 以 css/core/z-index.css 为准，此处不覆盖 */
        :root {
            --wallet-grad-a: #a3b1c6;
            --wallet-grad-b: #c9b1be;
            /* 聊天页面底部padding - 用于消息列表底部留白，键盘占位由keyboard-spacer处理 */
            --dialogue-body-padding-bottom: calc(60px + env(safe-area-inset-bottom));
            --safe-inset-top: env(safe-area-inset-top);
            --safe-inset-bottom: env(safe-area-inset-bottom);
            --safe-inset-left: env(safe-area-inset-left);
            --safe-inset-right: env(safe-area-inset-right);
            --app-height: 100svh;

            /* Z-Index 层级变量 - 极简分层 */
            --z-base: 1;
            --z-view: 10;
            --z-mask: 50;       /* 遮罩层：低于面板，保证面板可点击 */
            --z-overlay: 100;   /* 面板/弹窗层 */
            --z-toast: 1000;    /* 系统通知 */
        }

        .wallet-summary-card {
            background: linear-gradient(135deg, var(--wallet-grad-a, #a3b1c6) 0%, var(--wallet-grad-b, #c9b1be) 100%);
            border-radius: 16px;
            padding: 16px;
            color: #fff;
            box-shadow: 0 10px 24px rgba(163, 177, 198, 0.25);
            margin-bottom: 14px;
        }

        .wallet-summary-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
        }

        .wallet-balance-label {
            font-size: 12px;
            opacity: 0.9;
            letter-spacing: 0.3px;
        }

        .wallet-balance-value {
            font-size: 28px;
            font-weight: 700;
            margin-top: 6px;
            line-height: 1.1;
        }

        .wallet-mini-btn {
            height: 36px;
            padding: 0 12px;
            border: 1px solid rgba(255, 255, 255, 0.35);
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            border-radius: 12px;
            font-size: 13px;
            cursor: pointer;
            flex-shrink: 0;
        }

        .wallet-mini-btn:active {
            background: rgba(255, 255, 255, 0.2);
        }

        .wallet-summary-actions {
            display: flex;
            gap: 10px;
            margin-top: 14px;
        }

        .wallet-primary-btn,
        .wallet-secondary-btn {
            flex: 1;
            height: 44px;
            border: none;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
        }

        .wallet-primary-btn {
            background: rgba(255, 255, 255, 0.92);
            color: #4b5563;
        }

        .wallet-primary-btn:active {
            background: rgba(255, 255, 255, 0.82);
        }

        .wallet-secondary-btn {
            background: rgba(255, 255, 255, 0.14);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.26);
        }

        .wallet-secondary-btn:active {
            background: rgba(255, 255, 255, 0.2);
        }

        .wallet-action-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 14px;
        }

        .wallet-action-btn {
            width: calc(50% - 5px);
            min-height: 56px;
            padding: 12px;
            border-radius: 14px;
            border: 1px solid #efe9e4;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
            cursor: pointer;
        }

        .wallet-action-btn:active {
            background: #f8f5f2;
        }

        .wallet-action-main {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }

        .wallet-action-ico {
            width: 36px;
            height: 36px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            flex-shrink: 0;
            font-size: 16px;
        }

        .wallet-action-title {
            font-size: 15px;
            font-weight: 600;
            color: #333;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .wallet-action-sub {
            font-size: 12px;
            color: #888;
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .wallet-action-text {
            min-width: 0;
        }

        .wallet-action-right {
            color: #c0c0c0;
            flex-shrink: 0;
        }

        .wallet-section-hd {
            padding: 12px 15px 6px 15px;
            font-size: 14px;
            font-weight: 600;
            color: #555;
        }

        .wallet-tx-list {
            padding: 0 6px 8px 6px;
        }

        .wallet-tx-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 12px 10px;
            border-radius: 12px;
            background: #fff;
            border: 1px solid #efe9e4;
            margin: 8px;
        }

        .wallet-tx-left {
            min-width: 0;
        }

        .wallet-tx-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
        }

        .wallet-tx-time {
            font-size: 12px;
            color: #888;
            margin-top: 2px;
        }

        .wallet-tx-amount {
            font-size: 15px;
            font-weight: 700;
            white-space: nowrap;
        }

        .wallet-tx-amount.in {
            color: #2d7d46;
        }

        .wallet-tx-amount.out {
            color: #b45309;
        }

        .wallet-empty {
            padding: 12px 15px 16px 15px;
            font-size: 13px;
            color: #999;
        }

        .wallet-modal {
            position: fixed;
            inset: 0;
            max-width: 500px;
            margin: 0 auto;
            z-index: var(--z-overlay); /* 将钱包模态框 z-index 统一为 --z-overlay */
            display: none;
        }

        .wallet-modal.active {
            display: block;
        }

        .wallet-modal-mask {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.35);
        }

        .wallet-modal-card {
            position: absolute;
            left: 12px;
            right: 12px;
            top: calc(16px + var(--safe-inset-top, env(safe-area-inset-top)));
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
            overflow-x: hidden;
            overflow-y: auto;
            max-height: calc(var(--app-height, 100svh) - 32px - var(--safe-inset-top, env(safe-area-inset-top)) - var(--safe-inset-bottom, env(safe-area-inset-bottom)));
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            touch-action: pan-y;
        }

        .wallet-modal-hd {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px;
            background: #f8f5f2;
            border-bottom: 1px solid #efe9e4;
        }

        .wallet-modal-title {
            font-size: 15px;
            font-weight: 700;
            color: #333;
        }

        .wallet-modal-close {
            width: 44px;
            height: 44px;
            border: none;
            border-radius: 12px;
            background: transparent;
            color: #777;
            cursor: pointer;
        }

        .wallet-modal-close:active {
            background: rgba(0, 0, 0, 0.05);
        }

        .wallet-code-box {
            padding: 14px 14px 16px 14px;
        }

        .wallet-code-bar {
            height: 64px;
            border-radius: 12px;
            background: repeating-linear-gradient(90deg, #111 0, #111 2px, #fff 2px, #fff 5px);
        }

        .wallet-code-num {
            margin-top: 10px;
            font-size: 18px;
            font-weight: 800;
            letter-spacing: 2px;
            text-align: center;
            color: #111;
        }

        .wallet-code-hint {
            margin-top: 8px;
            font-size: 12px;
            color: #777;
            text-align: center;
        }

        .wallet-card-list {
            padding: 10px 12px 14px 12px;
        }

        .wallet-card-item {
            border: 1px solid #efe9e4;
            border-radius: 14px;
            padding: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-top: 10px;
        }

        .wallet-card-name {
            font-size: 14px;
            font-weight: 700;
            color: #333;
        }

        .wallet-card-sub {
            font-size: 12px;
            color: #888;
            margin-top: 3px;
        }

        .wallet-card-remove {
            height: 36px;
            padding: 0 12px;
            border-radius: 12px;
            border: 1px solid #e8b0b0;
            background: #fff;
            color: #d66868;
            font-size: 13px;
            cursor: pointer;
            flex-shrink: 0;
        }

        .wallet-card-remove:active {
            background: #fff4f4;
        }

        .wallet-card-actions {
            display: flex;
            gap: 10px;
            padding: 0 12px 14px 12px;
        }

        .wallet-card-add {
            flex: 1;
            height: 44px;
            border: none;
            border-radius: 12px;
            background: #a3b1c6;
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
        }

        .wallet-card-add:active {
            filter: brightness(0.95);
        }
        
        .persona-card {
            display: flex;
            align-items: flex-start;
            padding: 10px 0;
            border-bottom: 1px solid #f0ece8;
        }

        .persona-card.manage {
            align-items: stretch;
        }

        /* 我的人设页面的人设卡片 */
        #my-persona-page .persona-card.pickable {
            padding: 12px;
            border: 1px solid #efe9e4;
            border-radius: 14px;
            background: #fff;
            margin-bottom: 12px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
        }
        
        #my-persona-page .persona-card.pickable:last-child {
            border-bottom: 1px solid #efe9e4;
        }

        .persona-card.pickable:last-child {
            border-bottom: 1px solid #efe9e4;
        }

        .persona-card.pickable.selected {
            border-color: #a3b1c6;
            box-shadow: 0 6px 14px rgba(163, 177, 198, 0.2);
        }

        .persona-card.pickable .persona-card-actions {
            display: none;
        }

        .persona-card.pickable .persona-card-tag.active {
            background-color: #a3b1c6;
            color: #fff;
        }

        .persona-card:last-child {
            border-bottom: none;
        }

        .persona-card-avatar {
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background-color: #c9b1be;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 22px;
            flex-shrink: 0;
            background-size: cover;
            background-position: center;
            margin-right: 12px;
        }

        .persona-card-main {
            flex: 1;
            min-width: 0;
        }

        .persona-card-name-row {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 4px;
        }

        .persona-card-name {
            font-size: 15px;
            font-weight: 600;
            color: #333;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .persona-card-tag {
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 999px;
            background-color: #f0f2f5;
            color: #999;
            flex-shrink: 0;
        }

        .persona-card-desc {
            font-size: 13px;
            color: #777;
            line-height: 1.5;
            max-height: 3.0em;
            overflow: hidden;
        }

        .persona-card-actions {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-left: 10px;
            align-items: flex-end;
        }

        .persona-card-actions button {
            min-width: 68px;
            padding: 4px 8px;
            border-radius: 999px;
            border: 1px solid #e0dcd8;
            background-color: #fff;
            font-size: 12px;
            color: #555;
            cursor: pointer;
        }

        .persona-card-actions button.danger {
            border-color: #e8b0b0;
            color: #d66868;
        }

        .persona-card-actions button:active {
            background-color: #f3f0ec;
        }

        .persona-card-edit-btn {
            width: 34px;
            height: 34px;
            border-radius: 12px;
            border: 1px solid #e0dcd8;
            background-color: #fff;
            color: #7d7d7d;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .persona-card-edit-btn:active {
            background-color: #f3f0ec;
        }

        .persona-editor-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: #c9b1be;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 22px;
            flex-shrink: 0;
            background-size: cover;
            background-position: center;
        }

        .persona-editor-upload-btn {
            border: none;
            border-radius: 999px;
            padding: 6px 14px;
            font-size: 13px;
            background-color: #a3b1c6;
            color: #fff;
            cursor: pointer;
        }

        .persona-editor-upload-hint {
            font-size: 11px;
            color: #aaa;
            margin-top: 4px;
        }

        .persona-editor-field {
            margin-top: 10px;
        }

        .persona-editor-field label {
            display: block;
            font-size: 13px;
            color: #666;
            margin-bottom: 4px;
        }

        .persona-editor-field input,
        .persona-editor-field textarea {
            width: 100%;
            border-radius: 10px;
            border: 1px solid #e0dcd8;
            padding: 8px 10px;
            font-size: 14px;
            outline: none;
            box-sizing: border-box;
            background-color: #fff;
        }

        .persona-editor-field textarea {
            resize: none;
            min-height: 80px;
            line-height: 1.6;
        }

        .persona-editor-actions {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            margin-top: 14px;
        }

        .persona-editor-actions button {
            min-width: 80px;
            height: 36px;
            border-radius: 999px;
            border: none;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
        }

        #persona-editor-cancel {
            background-color: #f0f2f5;
            color: #555;
        }

        #persona-editor-save {
            background-color: #a3b1c6;
            color: #fff;
            box-shadow: 0 3px 8px rgba(163, 177, 198, 0.4);
        }

        #persona-editor-remove {
            background-color: #f6f1ee;
            color: #c46b6b;
            border: 1px solid #efc9c9;
            min-width: 80px;
            height: 36px;
        }

        .persona-editor-modal {
            position: fixed;
            inset: 0;
            z-index: var(--z-overlay); /* 将角色编辑模态框 z-index 统一为 --z-overlay */
            display: none;
            align-items: flex-start;
            justify-content: center;
            padding: calc(10vh + var(--safe-inset-top, env(safe-area-inset-top))) calc(16px + env(safe-area-inset-right)) calc(18px + var(--safe-inset-bottom, env(safe-area-inset-bottom))) calc(16px + env(safe-area-inset-left));
            background: rgba(24, 16, 22, 0.45);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            touch-action: pan-y;
        }

        .persona-editor-modal.show {
            display: flex;
        }

        .persona-editor-sheet {
            width: min(420px, 100%);
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 18px 40px rgba(90, 58, 76, 0.2);
            max-height: calc(var(--app-height, 100svh) - 36px - var(--safe-inset-top, env(safe-area-inset-top)) - var(--safe-inset-bottom, env(safe-area-inset-bottom)));
            overflow-y: auto;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            touch-action: pan-y;
        }

        .persona-editor-sheet-body {
            padding: 14px 15px 16px 15px;
        }
        
        /* CSS美化设置页面 */
        #css-settings-page {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            max-width: 500px;
            margin: 0 auto;
            background-color: #f8f5f2;
            z-index: var(--z-overlay); /* 将CSS设置页面 z-index 统一为 --z-overlay */
            display: flex;
            flex-direction: column;
            transform: translateX(100%);
            transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            pointer-events: none;
            /* 确保未激活时完全隐藏，避免产生半透明虚影 */
            opacity: 1;
            visibility: visible;
        }

        #css-settings-page:not(.active) {
            /* 未激活时确保完全隐藏，避免产生虚影 */
            transform: translateX(100%) !important;
            pointer-events: none !important;
        }

        #css-settings-page.active {
            transform: translateX(0);
            pointer-events: auto;
        }
        
        .css-settings-header {
            background-color: #a3b1c6;
            color: white;
            display: flex;
            align-items: center;
            padding: 6px 12px;
            padding-top: calc(6px + var(--safe-inset-top, env(safe-area-inset-top)));
            height: calc(56px + var(--safe-inset-top, env(safe-area-inset-top)));
            box-shadow: 0 2px 10px rgba(163, 177, 198, 0.2);
            flex-shrink: 0;
        }
        
        .css-settings-back {
            font-size: 18px;
            margin-right: 6px;
            cursor: pointer;
            flex-shrink: 0;
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
        }

        .css-settings-back:active {
            background-color: rgba(255, 255, 255, 0.18);
        }
        
        .css-settings-title {
            font-weight: 500;
            font-size: 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
        }
        
        .css-settings-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            padding: 20px 15px;
            padding-bottom: calc(20px + env(safe-area-inset-bottom));
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            touch-action: pan-y;
        }
        
        .css-settings-section {
            margin-bottom: 30px;
        }
        
        .css-section-title {
            font-size: 18px;
            font-weight: 600;
            color: #5a5a5a;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e8e4e0;
        }
        
        .css-preset-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .css-preset-item {
            background-color: #fff;
            border-radius: 10px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }
        
        .css-preset-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .css-preset-item.active {
            border-color: #a3b1c6;
            background-color: rgba(163, 177, 198, 0.1);
        }
        
        .css-preset-preview {
            width: 60px;
            height: 60px;
            border-radius: 10px;
            margin: 0 auto 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
        }
        
        .css-preset-name {
            font-weight: 500;
            font-size: 14px;
            color: #5a5a5a;
            margin-bottom: 5px;
        }
        
        .css-preset-desc {
            font-size: 12px;
            color: #9a9a9a;
        }
        
        .css-custom-section {
            margin-top: 20px;
        }
        
        .css-input-group {
            margin-bottom: 15px;
        }
        
        .css-input-label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #5a5a5a;
            font-weight: 500;
        }
        
        .css-textarea {
            width: 100%;
            height: 150px;
            padding: 12px;
            border: 1px solid #e8e4e0;
            border-radius: 8px;
            background-color: #fff;
            color: #5a5a5a;
            font-size: 16px;
            line-height: 1.5;
            resize: vertical;
            outline: none;
            font-family: monospace;
        }
        
        .css-textarea:focus {
            border-color: #a3b1c6;
        }
        
        .css-hint {
            font-size: 12px;
            color: #9a9a9a;
            margin-top: 5px;
            line-height: 1.4;
        }
        
        .css-actions {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .css-user-preset-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .css-user-preset-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            background-color: #fff;
            border: 2px solid transparent;
            border-radius: 10px;
            padding: 10px;
            cursor: pointer;
            transition: background-color 0.2s ease, border-color 0.2s ease;
        }

        .css-user-preset-item.active {
            border-color: #a3b1c6;
            background-color: rgba(163, 177, 198, 0.1);
        }

        .css-user-preset-name {
            font-size: 14px;
            font-weight: 600;
            color: #5a5a5a;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
            min-width: 0;
        }

        .css-user-preset-actions {
            display: flex;
            gap: 8px;
            flex-shrink: 0;
        }

        .css-user-preset-btn {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            border: none;
            background-color: #e8e4e0;
            color: #5a5a5a;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .css-user-preset-btn:active {
            background-color: #d8d1c9;
        }

        .css-user-preset-btn.danger {
            background-color: rgba(216, 168, 168, 0.35);
            color: #7a4a4a;
        }

        .css-user-preset-btn.danger:active {
            background-color: rgba(216, 168, 168, 0.55);
        }
        
        .css-btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .css-btn.primary {
            background-color: #a3b1c6;
            color: white;
        }
        
        .css-btn.primary:hover {
            background-color: #8a9ba3;
        }
        
        .css-btn.secondary {
            background-color: #e8e4e0;
            color: #5a5a5a;
        }
        
        .css-btn.secondary:hover {
            background-color: #d8d1c9;
        }
        
        /* 个人资料编辑对话框 */
        .profile-edit-dialog {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: var(--z-overlay); /* 将个人资料编辑对话框 z-index 统一为 --z-overlay */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            padding: calc(16px + var(--safe-inset-top, env(safe-area-inset-top))) 12px calc(16px + var(--safe-inset-bottom, env(safe-area-inset-bottom)));
            box-sizing: border-box;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .profile-edit-dialog.show {
            opacity: 1;
            visibility: visible;
        }
        
        .profile-edit-content {
            background-color: #f8f5f2;
            border-radius: 15px;
            padding: 25px;
            width: 400px;
            max-width: 90%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            transform: translateY(50px) scale(0.8);
            opacity: 0;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                        opacity 0.4s ease;
            max-height: calc(var(--app-height, 100svh) - 32px - var(--safe-inset-top, env(safe-area-inset-top)) - var(--safe-inset-bottom, env(safe-area-inset-bottom)));
            overflow-y: auto;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
        }
        
        .profile-edit-dialog.show .profile-edit-content {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
        
        .profile-edit-title {
            font-size: 18px;
            font-weight: 600;
            color: #5a5a5a;
            text-align: center;
            margin-bottom: 20px;
        }
        
        .profile-edit-avatar-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .profile-edit-avatar {
            width: 80px;
            height: 80px;
            border-radius: 12px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: white;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        
        .profile-edit-avatar.has-custom {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        
        .profile-edit-avatar-text {
            font-weight: bold;
        }
        
        .profile-edit-upload-hint {
            font-size: 12px;
            color: #9a9a9a;
            margin-top: 5px;
            text-align: center;
        }
        
        .profile-edit-upload-hint i {
            margin-right: 5px;
        }
        
        .profile-color-options {
            display: flex;
            gap: 10px;
            margin-top: 10px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .profile-color-option {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.3s ease;
        }
        
        .profile-color-option:hover {
            transform: scale(1.1);
        }
        
        .profile-color-option.selected {
            border-color: #5a5a5a;
            box-shadow: 0 0 0 2px white, 0 0 0 4px #a3b1c6;
        }
        
        .profile-edit-input-group {
            margin-bottom: 15px;
        }
        
        .profile-edit-label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #5a5a5a;
            font-weight: 500;
        }
        
        .profile-edit-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #e8e4e0;
            border-radius: 8px;
            background-color: #fff;
            color: #5a5a5a;
            font-size: 16px;
            outline: none;
        }
        
        .profile-edit-input:focus {
            border-color: #a3b1c6;
        }
        
        .profile-edit-hint {
            font-size: 12px;
            color: #9a9a9a;
            margin-top: 5px;
        }
        
        .profile-edit-actions {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        
        .profile-edit-btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .profile-edit-btn.save {
            background-color: #a3b1c6;
            color: white;
        }
        
        .profile-edit-btn.save:hover {
            background-color: #8a9ba3;
        }
        
        .profile-edit-btn.cancel {
            background-color: #e8e4e0;
            color: #5a5a5a;
        }
        
        .profile-edit-btn.cancel:hover {
            background-color: #d8d1c9;
        }
        
        .profile-edit-upload {
            display: none;
        }
        
        /* 空状态提示 */
        .empty-view {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 70%;
            color: #9a9a9a;
            text-align: center;
            padding: 20px;
            padding-bottom: calc(20px + env(safe-area-inset-bottom));
        }
        
        .empty-icon {
            font-size: 60px;
            margin-bottom: 20px;
            color: #c9b1be;
            opacity: 0.7;
        }
        
        .empty-text {
            font-size: 16px;
            line-height: 1.5;
            max-width: 80%;
        }
        
        /* 聊天列表项 */
        .chat-item {
            display: flex;
            padding: 15px;
            background-color: #fff;
            border-bottom: 1px solid #e8e4e0;
            cursor: pointer;
            transition: background-color 0.3s;
            position: relative;
        }
        
        .chat-item:hover {
            background-color: #f0ede9;
        }

        .chat-item:active,
        .contact-item:active,
        .profile-menu-item:active,
        .settings-item:active,
        .friend-settings-item:active {
            background-color: #f0ede9;
        }
        
        .chat-avatar {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            overflow: hidden;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
            box-shadow: 0 3px 6px rgba(0,0,0,0.05);
            flex-shrink: 0;
        }
        
        .chat-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 2px 0;
            min-width: 0;
        }
        
        .chat-name-time {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        
        .chat-name {
            font-weight: 500;
            font-size: 16px;
            color: #5a5a5a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 70%;
        }
        
        .chat-time {
            font-size: 12px;
            color: #9a9a9a;
            flex-shrink: 0;
        }
        
        .chat-last-msg {
            font-size: 14px;
            color: #7a7a7a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }
        
        /* 联系人列表项 */
        .contact-item {
            padding: 15px;
            background-color: #fff;
            border-bottom: 1px solid #e8e4e0;
            display: flex;
            align-items: center;
            cursor: pointer;
            /* iOS 长按防护 */
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
            touch-action: pan-y;
        }
        
        .contact-avatar {
            width: 45px;
            height: 45px;
            border-radius: 8px;
            margin-right: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: white;
            box-shadow: 0 3px 6px rgba(0,0,0,0.05);
            flex-shrink: 0;
        }

        .contact-avatar.has-custom {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .contact-item .contact-avatar.has-custom {
            background-size: cover !important;
            background-position: center !important;
        }

        .contact-avatar.has-custom::before {
            content: none !important;
        }
        
        .contact-name {
            font-size: 16px;
            color: #5a5a5a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
        }
        
        /* 对话页面：仅定位与滑入，不参与键盘高度；背景与内容拆层 */
        .dialogue-page {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            max-width: 500px;
            margin: 0 auto;
            height: var(--app-height, 100svh);
            /* 明确全屏页层级，确保覆盖列表和导航栏 */
            z-index: 10;
            transform: translateX(100%);
            transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            pointer-events: none;
            overflow: hidden;
        }

        .dialogue-page.active {
            transform: translateX(0);
            pointer-events: auto;
        }

        .dialogue-page.closing {
            transform: translateX(100%);
            pointer-events: none;
        }

        html.ua-android-opera .dialogue-page.closing {
            left: 100%;
        }

        /* 背景层：固定满屏，不随键盘变化，不参与 flex */
        .dialogue-page__bg {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background-image: var(--theme-bg-image, none);
            background-color: var(--theme-bg-color, #f8f5f2);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            /* 删除硬编码 z-index: 0，使用默认堆叠上下文 */
            pointer-events: none;
            transform: none;
            -webkit-transform: none;
            will-change: auto;
        }
        
        /* 确保背景层只在对话页激活时显示，避免覆盖主内容区 */
        .dialogue-page:not(.active) .dialogue-page__bg {
            display: none;
        }

        /* 内容层：随 --app-height 与 keyboard-spacer 收缩 */
        .dialogue-page__content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            /* 删除硬编码 z-index: 1，使用默认堆叠上下文 */
            transition: transform 0.2s ease-out;
            contain: layout style paint;
        }
        

        /* 全屏/standalone模式下的特殊处理 */
        html.standalone-mode .dialogue-page__content {
            will-change: transform;
        }
        
        /* 核心修复：键盘打开时，内容层使用visualViewport高度 */
        /* 必须设置 bottom: auto 才能让 height 生效 */
        html.standalone-mode .dialogue-page.keyboard-open .dialogue-page__content {
            bottom: auto;
            height: var(--app-vv-height, var(--app-height, 100svh));
            max-height: var(--app-vv-height, var(--app-height, 100svh));
        }
        
        /* 全屏模式下，键盘弹起时的顶部栏处理 */
        html.standalone-mode .dialogue-page.keyboard-open .dialogue-header {
            /* 确保顶部栏始终可见，不会被键盘推出去 */
            position: relative;
            /* 删除硬编码 z-index: 10，使用默认堆叠上下文 */
        }

        /* 相机/拍摄层：覆盖在内容层之上 */
        .dialogue-camera-layer {
            position: absolute;
            inset: 0;
            background: #000;
            z-index: var(--z-overlay); /* 将相机层 z-index 统一为 --z-overlay */
            display: none;
        }
        
        .dialogue-header {
            background-color: #a3b1c6;
            color: white;
            display: flex;
            align-items: center;
            padding: 6px 12px;
            padding-top: calc(6px + var(--safe-inset-top, env(safe-area-inset-top)));
            height: calc(56px + var(--safe-inset-top, env(safe-area-inset-top)));
            box-shadow: 0 2px 10px rgba(163, 177, 198, 0.2);
            flex-shrink: 0;
        }
        

        .dialogue-back {
            font-size: 18px;
            margin-right: 6px;
            cursor: pointer;
            flex-shrink: 0;
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
        }

        .dialogue-back:active {
            background-color: rgba(255, 255, 255, 0.18);
        }
        
        .dialogue-contact {
            display: flex;
            align-items: center;
            flex: 1;
            min-width: 0;
        }
        
        .dialogue-contact-avatar {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: white;
            flex-shrink: 0;
        }
        
        .dialogue-contact-name {
            font-weight: 500;
            font-size: 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        /* 聊天消息区域 */
        .dialogue-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            /* 增加底部内边距以适应绝对定位的输入框 (约64px高度 + 20px间距) */
            padding: 20px 15px 84px;
            /* 覆盖式键盘占位方案：padding-bottom会动态调整，确保内容不被键盘遮挡 */
            -webkit-overflow-scrolling: touch;
            display: flex;
            flex-direction: column;
            position: relative;
            /* iOS 滚动隔离 */
            overscroll-behavior-y: contain;
            touch-action: pan-y;
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
            will-change: scroll-position;
            /* 使用 contain 优化性能 */
            contain: layout style paint;
        }

        /* 键盘弹起时，输入框变为 relative，此时重置 padding-bottom */
        html.standalone-mode .dialogue-page.keyboard-open .dialogue-body {
            padding-bottom: 20px;
        }

        #dialogue-page {
            --ui-message-row-align-items: flex-end;
            --ui-avatar-size: 36px;
            --ui-avatar-radius: 25%;
            --ui-avatar-gap: 10px;
            --ui-avatar-me-display: none;
            --ui-avatar-other-display: flex;
            --ui-bubble-padding-y: 12px;
            --ui-bubble-padding-x: 15px;
            --ui-bubble-offset-top: 0px;
            --ui-bubble-min-height: 0px;
            --ui-bubble-radius: 18px;
            --ui-bubble-sent-tail-radius: 4px;
            --ui-bubble-recv-tail-radius: 4px;
            --ui-bubble-sent-bg: #d9e6f2;
            --ui-bubble-recv-bg: #ffffff;
            --ui-bubble-text: #5a5a5a;
            --ui-bubble-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            --ui-bubble-backdrop-filter: none;
            --ui-bubble-tail-display: none;
            --ui-bubble-tail-size: 8px;
            --ui-bubble-tail-offset: 10px;
            --ui-bubble-order: 1;
            --ui-quote-order: 0;
            --ui-time-order: 2;
            --ui-quote-margin-top: 0px;
            --ui-quote-margin-bottom: 8px;
        }
        
        .dialogue-body.empty {
            justify-content: center;
            align-items: center;
        }
        
        .dialogue-empty {
            text-align: center;
            color: #9a9a9a;
            padding: 40px;
            padding-bottom: calc(40px + env(safe-area-inset-bottom));
        }
        
        .dialogue-empty i {
            font-size: 60px;
            margin-bottom: 20px;
            color: #c9b1be;
            opacity: 0.7;
        }
        
        .dialogue-empty h3 {
            font-size: 18px;
            margin-bottom: 10px;
            color: #7a7a7a;
        }
        
        .dialogue-empty p {
            font-size: 14px;
            line-height: 1.5;
            max-width: 80%;
            margin: 0 auto;
        }
        
        /* 消息容器 */
        .message-container {
            /* iOS 长按防护 */
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
            touch-action: pan-y;
            display: flex;
            margin-bottom: 20px;
            animation: fadeIn 0.3s ease-out;
            max-width: 85%;
            align-self: flex-start;
            flex-direction: column; /* 改为纵向，内部再分行 */
            align-items: flex-start;
            touch-action: pan-y;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }
        
        .message-container.sent {
            align-self: flex-end;
            align-items: flex-end;
        }

        .message-container.system {
            align-self: center;
            max-width: 100%;
            margin-bottom: 12px;
        }

        .message-system {
            width: 100%;
            text-align: center;
            font-size: 12px;
            color: var(--text-secondary, #9aa0a6);
            padding: 6px 10px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.7);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
            user-select: text;
            -webkit-user-select: text;
            pointer-events: auto;
        }

        /* 新增：头像与气泡的水平行 */
        .message-avatar-bubble-row {
            display: flex;
            align-items: var(--ui-message-row-align-items, flex-end);
            width: 100%;
        }

        .message-container.sent .message-avatar-bubble-row {
            flex-direction: row-reverse;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .message-avatar {
            width: var(--ui-avatar-size, 36px);
            height: var(--ui-avatar-size, 36px);
            border-radius: var(--ui-avatar-radius, 6px);
            display: var(--ui-avatar-display, flex);
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
            margin-right: var(--ui-avatar-gap, 10px);
            flex-shrink: 0;
            transform: translateY(var(--ui-avatar-translate-y, 0px));
            align-self: flex-end; /* 默认底部对齐，配合 translateY */
            transition: border-radius 0.3s ease;
        }

        .message-avatar.me-avatar {
            display: var(--ui-avatar-me-display, none);
        }

        .message-avatar.other-avatar {
            display: var(--ui-avatar-other-display, flex);
        }

        .preview-avatar {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
            margin-right: 10px;
            flex-shrink: 0;
            align-self: flex-end;
            transition: border-radius 0.3s ease !important;
        }

        .preview-msg-row {
            display: flex;
            margin-bottom: 20px;
            animation: fadeIn 0.3s ease-out;
            max-width: 85%;
        }

        .preview-msg-row.recv {
            align-self: flex-start;
            flex-direction: column;
            align-items: flex-start;
        }

        .preview-msg-row.sent {
            align-self: flex-end;
            flex-direction: row-reverse;
            align-items: flex-end;
        }

        .preview-bubble-wrap {
            display: flex;
            flex-direction: column;
            max-width: 75%;
        }

        .preview-bubble {
            padding: 12px 15px;
            border-radius: 18px;
            position: relative;
            margin-top: 0px;
            min-height: 0px;
            line-height: 1.4;
            font-size: 15px;
            word-break: break-word;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

        .preview-msg-row.recv .preview-bubble {
            background-color: #ffffff;
            color: #5a5a5a;
            border-bottom-left-radius: 4px;
        }

        .preview-msg-row.sent .preview-bubble {
            background-color: #d9e6f2;
            color: #5a5a5a;
            border-bottom-right-radius: 4px;
        }

        .preview-quote {
            font-size: 12px;
            color: #888;
            padding-left: 4px;
            border-left: 2px solid #ddd;
            margin-bottom: 4px;
            display: none;
            max-width: 100%;
        }

        .preview-quote.preview-quote-top {
            display: block;
        }

        .preview-quote.preview-quote-bottom {
            display: none;
            margin-top: 4px;
            margin-bottom: 0;
            padding-left: 0;
            border-left: none;
        }

        .preview-msg-row.sent .preview-quote {
            padding-left: 0;
            padding-right: 4px;
            border-left: none;
            border-right: 2px solid #ddd;
            text-align: right;
        }

        .preview-msg-row.sent .preview-quote.preview-quote-bottom {
            margin-top: 4px;
            margin-bottom: 0;
            padding-right: 4px;
            border-right: 2px solid #ddd;
        }

        .message-container.sent .message-avatar {
            margin-right: 0;
            margin-left: var(--ui-avatar-gap, 10px);
        }
        
        .message-content-container {
            max-width: 100%;
            display: flex;
            flex-direction: column;
            min-width: 0;
            -webkit-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
        }

        /* 引用和时间不再受头像对齐影响 */
        .message-quote {
            max-width: 100%;
            margin-left: 0;
            -webkit-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
        }

        .message-container.sent .message-quote {
            margin-left: 0;
            margin-right: 0;
        }

        .quote-voice-row {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 2px;
        }

        .message-time {
            margin-left: 0;
        }

        .message-container.sent .message-time {
            margin-left: 0;
            margin-right: 0;
        }
        
        .message-content {
            padding: var(--ui-bubble-padding-y, 12px) var(--ui-bubble-padding-x, 15px);
            border-radius: var(--ui-bubble-radius, 18px);
            position: relative;
            margin-top: var(--ui-bubble-offset-top, 0px);
            min-height: var(--ui-bubble-min-height, 0px);
            line-height: 1.4;
            font-size: var(--ui-bubble-font-size, 15px);
            word-break: break-word;
            white-space: pre-wrap;
            box-shadow: var(--ui-bubble-shadow, 0 2px 5px rgba(0, 0, 0, 0.05));
            backdrop-filter: var(--ui-bubble-backdrop-filter, none);
            -webkit-backdrop-filter: var(--ui-bubble-backdrop-filter, none);
            -webkit-user-select: none;
            user-select: none;
            -webkit-touch-callout: none;
            touch-action: manipulation;
        }

        .message-content-container > .message-content {
            order: var(--ui-bubble-order, 1);
        }
        
        .message-content.voice-message {
            display: flex;
            flex-direction: column;
            gap: 6px;
            cursor: pointer;
            padding: 0;
            background-color: transparent;
            box-shadow: none;
        }
        
        .message-container.sent .message-content.voice-message,
        .message-container:not(.sent) .message-content.voice-message {
            background-color: transparent;
        }
        
        .message-container.sent .message-content.voice-message::after,
        .message-container:not(.sent) .message-content.voice-message::after {
            display: none;
        }

        .voice-message-row {
            display: inline-flex;
            align-items: flex-end;
            gap: 6px;
            max-width: 100%;
        }

        .message-container.sent .voice-message-row {
            flex-direction: row-reverse;
            justify-content: flex-start;
        }

        .voice-transcript-note {
            font-size: 11px;
            color: #8c8c8c;
            line-height: 1;
            white-space: nowrap;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 10px 4px;
            margin: -10px 0;
            display: flex;
            align-items: center;
            -webkit-tap-highlight-color: rgba(0,0,0,0.05);
            transition: opacity 0.2s;
        }

        .voice-transcript-note:active {
            opacity: 0.6;
        }
        
        .voice-message-main {
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            padding: 6px 10px;
            border-radius: var(--ui-bubble-radius, 18px);
            min-width: 100px;
        }
        
        .message-container.sent .voice-message-main {
            position: relative;
            background-color: var(--ui-bubble-sent-bg, #d9e6f2);
            border-bottom-right-radius: var(--ui-bubble-sent-tail-radius, 4px);
        }
        
        .message-container:not(.sent) .voice-message-main {
            position: relative;
            background-color: var(--ui-bubble-recv-bg, #ffffff);
            border-bottom-left-radius: var(--ui-bubble-recv-tail-radius, 4px);
        }

        .message-container.sent .voice-message-main::after {
            content: '';
            position: absolute;
            right: calc(-1 * var(--ui-bubble-tail-size, 8px));
            bottom: var(--ui-bubble-tail-offset, 10px);
            width: 0;
            height: 0;
            border-top: var(--ui-bubble-tail-size, 8px) solid transparent;
            border-bottom: var(--ui-bubble-tail-size, 8px) solid transparent;
            border-left: var(--ui-bubble-tail-size, 8px) solid var(--ui-bubble-sent-bg, #d9e6f2);
            display: var(--ui-bubble-tail-display, none);
        }

        .message-container:not(.sent) .voice-message-main::after {
            content: '';
            position: absolute;
            left: calc(-1 * var(--ui-bubble-tail-size, 8px));
            bottom: var(--ui-bubble-tail-offset, 10px);
            width: 0;
            height: 0;
            border-top: var(--ui-bubble-tail-size, 8px) solid transparent;
            border-bottom: var(--ui-bubble-tail-size, 8px) solid transparent;
            border-right: var(--ui-bubble-tail-size, 8px) solid var(--ui-bubble-recv-bg, #ffffff);
            display: var(--ui-bubble-tail-display, none);
        }
        
        .voice-wave {
            display: flex;
            align-items: flex-end;
            gap: 3px;
            height: 22px;
            flex-shrink: 0;
        }
        
        .voice-bar {
            width: 3px;
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.16);
            transform-origin: bottom;
        }
        
        .message-container.sent .voice-bar {
            background: rgba(255, 255, 255, 0.85);
        }

        .voice-duration {
            margin-left: 8px;
            font-size: 12px;
            color: #7a7a7a;
            opacity: 0.9;
        }

        .message-container.sent .voice-duration {
            color: #f5f5f7;
        }
        
        .voice-text {
            font-size: 13px;
            line-height: 1.6;
            color: #4b5563;
            background-color: #ffffff;
            border-radius: var(--ui-bubble-radius, 18px);
            padding: 8px 12px;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.25s ease, opacity 0.25s ease, margin-top 0.25s ease;
            margin-top: 0;
            width: 100%;
            box-sizing: border-box;
        }
        
        .message-container:not(.sent) .voice-text {
            margin-left: 0;
        }
        
        .message-container.sent .voice-text {
            background-color: #f3f4f6;
            color: #4b5563;
            margin-right: 0;
        }
        
        .message-container:not(.sent).has-avatar .voice-text {
            margin-left: calc(var(--ui-avatar-size, 36px) + var(--ui-avatar-gap, 10px));
            width: calc(100% - var(--ui-avatar-size, 36px) - var(--ui-avatar-gap, 10px));
        }
        
        .message-container.sent.has-avatar .voice-text {
            margin-right: calc(var(--ui-avatar-size, 36px) + var(--ui-avatar-gap, 10px));
            width: calc(100% - var(--ui-avatar-size, 36px) - var(--ui-avatar-gap, 10px));
        }
        
        .voice-text.expanded {
            max-height: 240px;
            opacity: 1;
            margin-top: 4px;
        }

        .message-content.transfer-message {
            padding: 10px 12px;
            min-width: 210px;
            max-width: 260px;
            background-color: #d5a37a;
        }

        .message-container.sent .message-content.transfer-message {
            background-color: #d5a37a;
        }

        .message-content.transfer-message.transfer-morandi-orange {
            background-color: #d4a07a;
        }

        .message-container.sent .message-content.transfer-message.transfer-morandi-orange {
            background-color: #d4a07a;
        }

        .transfer-morandi-orange .transfer-title {
            color: #2f241b;
        }

        .transfer-morandi-orange .transfer-status {
            color: rgba(47, 36, 27, 0.78);
        }

        .transfer-morandi-orange .transfer-amount {
            color: #1f150e;
        }

        .transfer-morandi-orange .transfer-remark {
            color: rgba(47, 36, 27, 0.9);
        }

        .transfer-morandi-orange .transfer-btn {
            background: rgba(255, 248, 242, 0.85);
            color: #3b2a20;
            border-color: rgba(47, 36, 27, 0.12);
        }

        .transfer-morandi-orange .transfer-btn.primary {
            background: #b98159;
            border-color: #b98159;
            color: #fff;
        }

        .transfer-morandi-orange .transfer-btn.link {
            color: rgba(47, 36, 27, 0.7);
        }

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

        .transfer-title {
            font-size: 13px;
            font-weight: 600;
            color: #332c26;
        }

        .transfer-status {
            font-size: 12px;
            color: rgba(51, 44, 38, 0.75);
            white-space: nowrap;
        }

        .transfer-amount {
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 0.2px;
            color: #1e1712;
            margin-bottom: 6px;
        }

        .transfer-remark {
            font-size: 12px;
            color: rgba(51, 44, 38, 0.88);
            line-height: 1.4;
            margin-bottom: 8px;
            word-break: break-word;
        }

        .transfer-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .transfer-btn {
            height: 34px;
            padding: 0 10px;
            border-radius: 10px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            background: rgba(255, 255, 255, 0.75);
            color: #333;
            font-size: 12px;
            cursor: pointer;
        }

        .transfer-btn:active {
            transform: translateY(1px);
        }

        .transfer-btn.primary {
            background: #a3b1c6;
            border-color: #a3b1c6;
            color: #fff;
        }

        .transfer-btn.link {
            background: transparent;
            border-color: transparent;
            color: #6b7280;
            padding: 0;
            height: 22px;
        }

        .message-content.mall-card {
            padding: 10px 12px;
            min-width: 210px;
            max-width: 260px;
            background-color: #f3ede7;
            border: 1px solid rgba(214, 199, 188, 0.7);
        }

        .message-container.sent .message-content.mall-card {
            background-color: #f3ede7;
        }

        .mall-card-title {
            font-size: 12px;
            color: rgba(72, 60, 52, 0.7);
            margin-bottom: 4px;
        }

        .mall-card-name {
            font-size: 14px;
            font-weight: 600;
            color: #3b302a;
            word-break: break-word;
        }

        .mall-card-brief {
            font-size: 12px;
            color: rgba(72, 60, 52, 0.7);
            margin-top: 4px;
            line-height: 1.4;
            word-break: break-word;
        }

        .mall-card-meta {
            margin-top: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .mall-card-price {
            font-size: 16px;
            font-weight: 700;
            color: #8b4c2f;
        }

        .message-content.mall-card.mall-product-share .mall-card-price {
            color: #7a4a35;
        }

        .message-content.mall-card.mall-pay-request .mall-card-price {
            color: #9a5b3d;
        }

        .mall-card-tag {
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.7);
            color: #6b4a3a;
            border: 1px solid rgba(107, 74, 58, 0.12);
            white-space: nowrap;
        }
        
        .message-image {
            max-width: 140px;
            max-height: 160px;
            width: auto;
            height: auto;
            border-radius: 8px;
            object-fit: contain;
            display: block;
        }

        .message-sticker {
            max-width: 140px;
            max-height: 160px;
            width: auto;
            height: auto;
            border-radius: 8px;
            object-fit: contain;
            display: block;
        }

        .message-flip-card {
            width: 140px;
            height: 160px;
            perspective: 800px;
            cursor: pointer;
            touch-action: manipulation;
            transform: translateZ(0);
        }

        .message-flip-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.4s ease;
            transform-style: preserve-3d;
        }

        .message-flip-card.flip-active .message-flip-inner {
            transform: rotateY(180deg);
        }

        .message-flip-face {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 8px;
            backface-visibility: hidden;
            overflow: hidden;
        }

        .message-flip-front {
            background: #f2f2f2;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .message-flip-front img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .message-flip-back {
            transform: rotateY(180deg);
            background: #f8f5f2;
            color: #5a5a5a;
            font-size: 12px;
            padding: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            line-height: 1.4;
            word-break: break-word;
            white-space: pre-wrap;
        }

        .message-flip-card:active {
            transform: scale(0.98);
        }

        html.ua-android-opera .message-flip-card {
            perspective: none !important;
            transform: none !important;
        }

        html.ua-android-opera .message-flip-inner {
            transform-style: flat !important;
            transition: none !important;
        }

        html.ua-android-opera .message-flip-card.flip-active .message-flip-inner {
            transform: none !important;
        }

        html.ua-android-opera .message-flip-back {
            transform: none !important;
            display: none;
        }

        html.ua-android-opera .message-flip-card.flip-active .message-flip-front {
            display: none;
        }

        html.ua-android-opera .message-flip-card.flip-active .message-flip-back {
            display: flex;
        }

        .sticker-content {
            background-color: transparent !important;
            padding: 0 !important;
            box-shadow: none !important;
            border-radius: 0 !important;
        }

        .sticker-content::after {
            display: none !important;
        }
        
        .message-container.sent .message-content {
            background-color: var(--ui-bubble-sent-bg, #d9e6f2);
            color: var(--ui-bubble-text, #5a5a5a);
            border-bottom-right-radius: var(--ui-bubble-sent-tail-radius, 4px);
        }
        
        .message-container:not(.sent) .message-content {
            background-color: var(--ui-bubble-recv-bg, #ffffff);
            color: var(--ui-bubble-text, #5a5a5a);
            border-bottom-left-radius: var(--ui-bubble-recv-tail-radius, 4px);
        }

        .message-container.sent .message-content::after {
            content: '';
            position: absolute;
            right: calc(-1 * var(--ui-bubble-tail-size, 8px));
            bottom: var(--ui-bubble-tail-offset, 10px);
            width: 0;
            height: 0;
            border-top: var(--ui-bubble-tail-size, 8px) solid transparent;
            border-bottom: var(--ui-bubble-tail-size, 8px) solid transparent;
            border-left: var(--ui-bubble-tail-size, 8px) solid var(--ui-bubble-sent-bg, #d9e6f2);
            display: var(--ui-bubble-tail-display, none);
        }

        .message-container:not(.sent) .message-content::after {
            content: '';
            position: absolute;
            left: calc(-1 * var(--ui-bubble-tail-size, 8px));
            bottom: var(--ui-bubble-tail-offset, 10px);
            width: 0;
            height: 0;
            border-top: var(--ui-bubble-tail-size, 8px) solid transparent;
            border-bottom: var(--ui-bubble-tail-size, 8px) solid transparent;
            border-right: var(--ui-bubble-tail-size, 8px) solid var(--ui-bubble-recv-bg, #ffffff);
            display: var(--ui-bubble-tail-display, none);
        }

        .message-container.sent .message-content.transfer-message.transfer-morandi-orange,
        .message-container:not(.sent) .message-content.transfer-message.transfer-morandi-orange {
            background-color: #d4a07a;
        }
        
        .message-time {
            order: var(--ui-time-order, 2);
            font-size: 12px;
            color: #9a9a9a;
            margin-top: 5px;
            text-align: right;
            padding: 0 5px;
        }
        
        .message-container:not(.sent) .message-time {
            text-align: left;
        }
        
        /* 引用功能样式 */
        .message-quote {
            order: var(--ui-quote-order, 0);
            background-color: rgba(0, 0, 0, 0.05);
            padding: 8px 12px;
            margin-top: var(--ui-quote-margin-top, 0px);
            margin-bottom: var(--ui-quote-margin-bottom, 8px);
            border-radius: var(--ui-bubble-radius, 18px);
            font-size: 13px;
            cursor: pointer;
            width: 100%;
            box-sizing: border-box;
        }

        .quote-content-wrapper {
            line-height: 1.6;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-word;
            /* 严格限制内容区域高度：3行 * 1.6倍行高 */
            max-height: calc(13px * 1.6 * 3);
        }
        
        .message-container.sent .message-quote {
            background-color: rgba(217, 230, 242, 0.3);
        }
        
        .quote-text-small {
            display: inline;
            white-space: normal;
            color: #7a7a7a;
        }
        
        .quote-sender {
            font-weight: 600;
            color: #a3b1c6;
            margin-right: 4px;
            display: inline;
        }
        
        .quote-image-thumb {
            width: 24px;
            height: 24px;
            object-fit: cover;
            vertical-align: sub;
            border-radius: 4px;
            margin: 0 2px;
            display: inline-block;
        }
        
        .message-container.sent .quote-sender {
            color: #8a9ba3;
        }
        
        /* 引用预览区域 */
        .quote-preview {
            display: none;
            background-color: #fff;
            border-radius: 12px 12px 0 0;
            padding: 12px 45px 12px 16px;
            margin-bottom: 0;
            border-bottom: 1px solid #e8e4e0;
            position: absolute;
            left: 0;
            right: 0;
            bottom: calc(64px + var(--safe-inset-bottom, env(safe-area-inset-bottom)));
            z-index: 2;
            max-height: 80px; /* 增加高度限制，确保能容纳2行文字 (14px * 1.5 * 2 + 24px padding = ~66px) */
            overflow: hidden;
            flex-shrink: 0;
        }
        
        .quote-preview.show {
            display: block;
        }
        
        .quote-preview .quote-content {
            font-size: 14px;
            color: #5a5a5a;
            line-height: 1.4;
        }
        
        .quote-preview .quote-text {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.5; /* 明确行高 */
            max-height: 3em; /* 2行 * 1.5 = 3em，确保高度匹配 */
        }
        
        .cancel-quote {
            position: absolute;
            top: 10px;
            right: 12px;
            background: none;
            border: none;
            color: #9a9a9a;
            font-size: 16px;
            cursor: pointer;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .cancel-quote:hover {
            background-color: #e8e4e0;
            color: #5a5a5a;
        }
        
        /* 时间分隔线 */
        .time-divider {
            text-align: center;
            margin: 20px 0;
            position: relative;
        }
        
        .time-divider span {
            background-color: #f8f5f2;
            padding: 5px 15px;
            border-radius: 12px;
            font-size: 13px;
            color: #9a9a9a;
            border: 1px solid #e8e4e0;
            position: relative;
        }
        
        .time-divider:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background-color: #e8e4e0;
            /* 删除硬编码 z-index: 0，使用默认堆叠上下文 */
        }
        
        /* 虚拟滚动提示：显示已渲染的消息数量 */
        .load-more-hint {
            text-align: center;
            margin: 15px 0;
            padding: 8px 15px;
            font-size: 12px;
            color: #9a9a9a;
            background-color: rgba(248, 245, 242, 0.6);
            border-radius: 12px;
            border: 1px solid rgba(232, 228, 224, 0.5);
        }
        
        /* 输入框区域 */
        .dialogue-input {
            background-color: #fff;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            gap: 0;
            border-top: 1px solid #e8e4e0;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            /* 改为绝对定位，贴底显示 */
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            /* 删除硬编码 z-index: 30，使用默认堆叠上下文 */
            /* 与功能菜单(.menu-panel)同一层级 */
            flex-shrink: 0;
            /* 移除底部安全区适配，直接贴底 */
            padding-bottom: 10px;
            transform: translateZ(0);
        }
        
        /* 全屏模式下，确保输入框正确显示 */
        html.standalone-mode .dialogue-page.keyboard-open .dialogue-input {
            /* 确保输入框在键盘上方可见 */
            position: relative;
            /* 删除硬编码 z-index: 9，使用默认堆叠上下文 */
        }

        .dialogue-input > * + * {
            margin-left: 6px;
        }
        
        .dialogue-input i {
            color: #a3b1c6;
            font-size: 22px;
            margin: 0;
            cursor: pointer;
            transition: color 0.3s;
            flex-shrink: 0;
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
        }
        
        .dialogue-input i:hover {
            color: #8a9ba3;
        }

        .dialogue-input i:active {
            background-color: #f0ede9;
        }
        
        .dialogue-input-box {
            flex: 1;
            background-color: #f0ede9;
            border-radius: 20px;
            padding: 10px 15px;
            border: 1px solid #e8e4e0;
            outline: none;
            font-size: 16px;
            color: #5a5a5a;
            transition: background-color 0.3s, border-color 0.3s;
            resize: none;
            min-height: 20px;
            max-height: 100px;
            line-height: 1.4;
            font-family: inherit;
        }
        
        .dialogue-input-box:focus {
            background-color: #e8e4e0;
            border-color: #a3b1c6;
        }
        
        .dialogue-input-box::placeholder {
            color: #9a9a9a;
        }
        
        /* 键盘占位元素 - 作为flex item在.dialogue-page__content内占据空间 */
        /* 放在输入框下方，确保键盘弹起时输入框在可视区域 */
        /* 平台适配器和fallback都使用flex布局（通过内联样式设置flex值） */
        /* 
        .dialogue-page .keyboard-spacer {
            flex: 0 0 0px;
            min-height: 0;
            max-height: 0;
            pointer-events: none;
            /* 删除硬编码 z-index: 1，使用默认堆叠上下文 */
            background: transparent;
            will-change: flex;
            transition: flex 0.2s ease-out;
            contain: layout style;
        }
        */

        /* Opera等浏览器特殊处理 */
        /* 
        html.ua-android-opera .dialogue-page .keyboard-spacer {
            will-change: auto;
            transform: none;
            -webkit-transform: none;
        }
        */
        
        /* 键盘高度CSS类控制（用于优化，减少inline style使用） */
        /* 
        .dialogue-page .keyboard-spacer.keyboard-height-small {
            flex: 0 0 150px;
        }
        
        .dialogue-page .keyboard-spacer.keyboard-height-medium {
            flex: 0 0 250px;
        }
        
        .dialogue-page .keyboard-spacer.keyboard-height-large {
            flex: 0 0 350px;
        }
        */
        
        /* 全屏模式下的键盘占位元素优化 */
        /* 
        html.standalone-mode .dialogue-page .keyboard-spacer {
            will-change: flex;
        }
        */
        
        /* 键盘打开时，对话页面保持全屏高度作为定位参考 */
        /* 
        html.standalone-mode .dialogue-page.keyboard-open {
            height: 100svh;
        }
        */
        
        /* 全屏模式下，对话内容区域优化 */
        html.standalone-mode .dialogue-body {
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            will-change: scroll-position;
            contain: layout style paint;
        }
        
        /* 菜单面板 */
        .menu-panel {
            position: absolute;
            bottom: 70px;
            left: 15px;
            right: 15px;
            background-color: rgba(255, 255, 255, 0.98);
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
            border: 1px solid #e8e4e0;
            z-index: var(--z-overlay); /* 与其他浮窗组件同级 */
            display: none;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        
        .menu-panel.show {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }
        
        .menu-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-auto-rows: 1fr;
            gap: 16px;
        }
        
        .menu-item {
            position: relative;
            background-color: #f8f5f2;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 16px 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid transparent;
            min-height: 90px;
        }

        .menu-status-dot {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 8px;
            height: 8px;
            background-color: #B8C9A9;
            border-radius: 50%;
            display: none;
            box-shadow: 0 0 0 2px #fff;
        }
        
        .menu-item:hover {
            background-color: #e8e4e0;
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            border-color: #e8e4e0;
        }
        
        .menu-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            transition: background-color 0.3s ease;
        }
        
        .menu-icon.photo { background-color: #A6B8A5; } /* 鼠尾草绿 */
        .menu-icon.camera { background-color: #C2B4A3; } /* 暖卡其 */
        .menu-icon.voice { background-color: #9FB8C2; } /* 雾霾蓝 */
        .menu-icon.sticker { background-color: #DBCBB5; } /* 奶咖色 */
        
        .menu-icon.custom { background-color: #9CA8B8; } /* 灰蓝 */
        .menu-icon.random { background-color: #A8B0B8; } /* 银灰 */
        .menu-icon.transfer { background-color: #C8B6C6; } /* 香芋紫 */
        .menu-icon.metrics { background-color: #B2B6BE; } /* 钛灰 */
        
        .menu-icon.topic-end { background-color: #B8A9C9; } /* 薰衣草 */
        .menu-icon.memory-restore { background-color: #A9C2C9; } /* 冰川蓝 */
        .menu-icon.memory-clear { background-color: #C9A9A9; } /* 枯玫瑰 */
        .menu-icon.time-awareness { background-color: #B8C9A9; } /* 抹茶绿 */
        
        .menu-icon.mode-switch { background-color: #B0B0B0; } /* 中灰 */
        .menu-icon.offline-mode { background-color: #9b8aa3; } /* 莫兰迪紫 */
        .menu-icon.chat-clear { background-color: #CC9999; } /* 浅红 */
        .menu-icon.others { background-color: #C0C0C0; } /* 浅灰 */
        
        .menu-icon i {
            font-size: 20px;
        }
        
        .menu-label {
            font-size: 12px;
            color: #5a5a5a;
            text-align: center;
            line-height: 1.3;
        }
        
        /* 菜单遮罩（已废弃：menuPanel 不再需要遮罩） */
        .menu-overlay {
            display: none;
        }
        
        /* 添加好友弹窗样式 */
        .add-friend-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: flex-start;
            justify-content: center;
            z-index: var(--z-overlay); /* 将添加好友弹窗 z-index 统一为 --z-overlay */
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            padding: calc(10vh + var(--safe-inset-top, env(safe-area-inset-top))) 12px calc(16px + var(--safe-inset-bottom, env(safe-area-inset-bottom)));
            box-sizing: border-box;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .add-friend-modal.show {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        
        .add-friend-card {
            background-color: #f8f5f2;
            border-radius: 16px;
            padding: 25px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            max-width: 90%;
            width: 400px;
            position: relative;
            transform: translateY(0) scale(0.8);
            opacity: 0;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                        opacity 0.4s ease;
            max-height: 60vh;
            overflow-y: auto;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
        }
        
        .add-friend-modal.show .add-friend-card {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e8e4e0;
        }
        
        .modal-title {
            font-size: 18px;
            font-weight: 600;
            color: #5a5a5a;
        }
        
        .close-modal {
            background: none;
            border: none;
            color: #9a9a9a;
            font-size: 20px;
            cursor: pointer;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .close-modal:hover {
            background-color: #e8e4e0;
            color: #5a5a5a;
        }
        
        .avatar-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 25px;
        }
        
        .avatar-preview {
            width: 80px;
            height: 80px;
            border-radius: 12px;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: #5a5a5a;
            margin-bottom: 15px;
            border: 2px solid #e8e4e0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .avatar-preview:hover {
            transform: scale(1.05);
            border-color: #a3b1c6;
        }
        
        .avatar-preview.has-custom {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        
        .avatar-placeholder {
            font-size: 12px;
            color: #9a9a9a;
            text-align: center;
            margin-top: 5px;
        }
        
        .avatar-placeholder i {
            margin-right: 5px;
        }
        
        .input-group {
            margin-bottom: 20px;
        }
        
        .input-label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #5a5a5a;
            font-weight: 500;
        }
        
        .input-label span {
            color: #d8a8a8;
            margin-left: 3px;
        }
        
        .text-input {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #e8e4e0;
            border-radius: 8px;
            background-color: #fff;
            color: #5a5a5a;
            font-size: 16px;
            outline: none;
            transition: border-color 0.3s ease;
        }
        
        .text-input:focus {
            border-color: #a3b1c6;
        }
        
        .text-input::placeholder {
            color: #9a9a9a;
        }
        
        .error-message {
            color: #d8a8a8;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }
        
        .modal-actions {
            display: flex;
            gap: 12px;
            margin-top: 30px;
        }
        
        .modal-btn {
            flex: 1;
            padding: 14px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 15px;
        }
        
        .modal-btn.primary {
            background-color: #a3b1c6;
            color: white;
        }
        
        .modal-btn.primary:hover:not(:disabled) {
            background-color: #8a9ba3;
            transform: translateY(-2px);
        }
        
        .modal-btn.secondary {
            background-color: #e8e4e0;
            color: #5a5a5a;
        }
        
        .modal-btn.secondary:hover {
            background-color: #d8d1c9;
            transform: translateY(-2px);
        }
        
        .modal-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
        }
        
        .avatar-upload {
            display: none;
        }
        
        /* 头像颜色选项 */
        .avatar-colors {
            display: flex;
            gap: 10px;
            margin-top: 10px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .avatar-color-option {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.3s ease;
        }
        
        .avatar-color-option:hover {
            transform: scale(1.1);
        }
        
        .avatar-color-option.selected {
            border-color: #5a5a5a;
            box-shadow: 0 0 0 2px white, 0 0 0 4px #a3b1c6;
        }
        
        /* 浮窗统一：视口定位、不随内容流；类型 card=居中卡片 sheet=底部抽屉 page=全屏 */
        /* 使用 inset:0 确保相对视口铺满，不依赖主页/键盘压缩；外层不滚动，仅内部卡片可滚动 */
        .card-overlay[data-overlay="card"],
        .card-overlay {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: var(--z-overlay); /* 将卡片浮窗遮罩 z-index 统一为 --z-overlay */
            /* 使用高z-index确保浮窗覆盖内容层内的所有元素 */
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            padding: calc(16px + var(--safe-inset-top)) 12px calc(16px + var(--safe-inset-bottom));
            box-sizing: border-box;
            overflow: hidden;
        }
        
        .card-overlay.show {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        
        .custom-replies-card {
            background-color: #f8f5f2;
            border-radius: 20px;
            padding: 25px;
            padding-bottom: calc(25px + var(--safe-inset-bottom));
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            max-width: 90%;
            max-height: 60vh;
            width: 500px;
            position: relative;
            transform: translateY(50px) scale(0.8);
            opacity: 0;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                        opacity 0.4s ease;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
        }
        
        .card-overlay.show .custom-replies-card {
            transform: translateY(0) scale(1);
            opacity: 1;
        }

        .friend-status-card {
            width: min(92vw, 520px);
            max-width: 92vw;
            height: auto;
            max-height: 82vh;
            overflow: hidden;
            background: #f8f5f2;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .friend-status-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 6px;
            margin-bottom: 14px;
            padding-bottom: 12px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            text-align: center;
        }

        .friend-status-avatar {
            width: 64px;
            height: 64px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: 700;
            color: #fff;
            background-color: #a3b1c6;
            background-size: cover;
            background-position: center;
            margin-bottom: 4px;
            flex-shrink: 0;
        }

        .friend-status-avatar.has-custom {
            background-color: transparent;
        }

        .friend-status-avatar-text {
            display: block;
        }

        .friend-status-title {
            font-size: 13px;
            font-weight: 700;
            color: #5a5a5a;
            letter-spacing: 0.08em;
        }

        .friend-status-name {
            font-size: 22px;
            font-weight: 800;
            color: #3f3f3f;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }

        .friend-status-content {
            flex: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 4px 2px 6px;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .friend-status-line {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
        }

        .friend-status-line--favor {
            align-items: center;
        }

        .friend-status-block {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .friend-status-key {
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.02em;
            color: #6a6a6a;
        }

        .friend-status-val {
            font-size: 14px;
            font-weight: 600;
            color: #3f3f3f;
            min-width: 0;
            text-align: right;
            word-break: break-word;
        }

        .friend-status-val--favor {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            text-align: right;
        }

        .friend-status-favor-text {
            white-space: nowrap;
        }

        .friend-status-val--prose {
            text-align: left;
            font-weight: 500;
            line-height: 1.65;
            white-space: pre-wrap;
            background: rgba(255, 255, 255, 0.75);
            border: 1px solid rgba(0, 0, 0, 0.04);
            border-radius: 14px;
            padding: 12px 12px;
            box-shadow: 0 10px 24px rgba(40, 40, 40, 0.06);
        }

        .friend-status-meter {
            width: clamp(92px, 30vw, 140px);
            height: 8px;
            border-radius: 99px;
            background: rgba(163, 177, 198, 0.22);
            overflow: hidden;
            flex: 0 0 auto;
        }

        .friend-status-meter-bar {
            display: block;
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, rgba(163, 177, 198, 0.95), rgba(140, 155, 180, 0.95));
            border-radius: 99px;
            transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .capture-card {
            gap: 16px;
        }

        .capture-title {
            font-size: 18px;
            font-weight: 600;
            color: #5a5a5a;
            text-align: center;
            margin-top: 10px;
        }

        .capture-actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .capture-actions.inline {
            justify-content: space-between;
        }

        .capture-option {
            flex: 1;
            min-width: 120px;
            min-height: 44px;
            padding: 14px 16px;
            border-radius: 12px;
            border: none;
            background: #e8e4e0;
            color: #5a5a5a;
            font-size: 15px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            transition: transform 0.2s ease, background 0.2s ease;
        }

        .capture-option.primary {
            background: #a3b1c6;
            color: #fff;
        }

        .capture-option:active {
            transform: scale(0.98);
        }

        .capture-note {
            font-size: 12px;
            color: #9a9a9a;
            text-align: center;
            line-height: 1.4;
        }

        .capture-input {
            min-height: 120px;
            resize: none;
        }
        
        .custom-replies-card .card-close {
            position: absolute;
            top: 15px;
            right: 15px;
            background: none;
            border: none;
            font-size: 20px;
            color: #9a9a9a;
            cursor: pointer;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .custom-replies-card .card-close:hover {
            background-color: #e8e4e0;
            color: #5a5a5a;
        }
        
        /* 自定义回复选项卡 */
        .custom-tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 2px solid #e8e4e0;
        }
        
        .custom-tab {
            flex: 1;
            padding: 14px 12px;
            background: none;
            border: none;
            color: #5a5a5a;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            border-bottom: 3px solid transparent;
        }
        
        .custom-tab.active {
            color: #a3b1c6;
            border-bottom-color: #a3b1c6;
        }
        
        .custom-tab:hover:not(.active) {
            background-color: #e8e4e0;
        }
        
        .custom-tab-content {
            display: none;
            flex: 1;
            overflow: hidden;
            min-height: 300px;
        }
        
        .custom-tab-content.active {
            display: flex;
            flex-direction: column;
            animation: fadeIn 0.3s ease;
        }
        
        .replies-list {
            flex: 1;
            min-height: 0; /* iOS Safari flex滚动必需 */
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            touch-action: pan-y;
            margin-bottom: 20px;
            border: 1px solid #e8e4e0;
            border-radius: 10px;
            padding: 10px;
            background-color: #fff;
        }
        
        .reply-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            margin-bottom: 8px;
            background-color: #f8f5f2;
            border-radius: 8px;
            border: 1px solid #e8e4e0;
            transition: all 0.3s ease;
        }
        
        .reply-item:hover {
            background-color: #e8e4e0;
            transform: translateX(5px);
        }
        
        .reply-item:last-child {
            margin-bottom: 0;
        }
        
        .reply-text {
            flex: 1;
            text-align: left;
            font-size: 14px;
            color: #5a5a5a;
            word-break: break-word;
            margin-right: 10px;
        }
        
        .reply-actions {
            display: flex;
            gap: 5px;
        }
        
        .reply-action {
            background: none;
            border: none;
            color: #9a9a9a;
            cursor: pointer;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .reply-action:hover {
            background-color: #a3b1c6;
            color: white;
        }
        
        .reply-action.edit:hover {
            background-color: #c9b1be;
        }
        
        .reply-action.delete:hover {
            background-color: #d8a8a8;
        }
        
        .add-reply-form {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .reply-input {
            flex: 1;
            padding: 14px 16px;
            border: 1px solid #e8e4e0;
            border-radius: 10px;
            background-color: #fff;
            color: #5a5a5a;
            font-size: 14px;
            outline: none;
            transition: border-color 0.3s ease;
        }
        
        .reply-input:focus {
            border-color: #a3b1c6;
        }
        
        .add-reply-btn {
            padding: 0 20px;
            height: 48px;
            background-color: #a3b1c6;
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .add-reply-btn:hover {
            background-color: #8a9ba3;
            transform: translateY(-2px);
        }
        
        .preset-controls {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;
            padding: 10px 0;
            border-bottom: 1px solid #e8e4e0;
        }
        
        .switch-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .switch-label {
            font-weight: 600;
            color: #5a5a5a;
        }
        
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 26px;
        }
        
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #e8e4e0;
            transition: .4s;
            border-radius: 34px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .slider {
            background-color: #a3b1c6;
        }
        
        input:checked + .slider:before {
            transform: translateX(24px);
        }
        
        .preset-hint {
            font-size: 12px;
            color: #9a9a9a;
            margin-top: 10px;
            font-style: italic;
        }
        
        .no-replies {
            text-align: center;
            padding: 30px;
            color: #9a9a9a;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .no-replies i {
            font-size: 40px;
            margin-bottom: 10px;
            display: block;
        }
        
        /* 消息统计卡片 */
        .metrics-title {
            font-size: 20px;
            font-weight: 600;
            color: #5a5a5a;
            text-align: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e8e4e0;
        }
        
        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .metric-item {
            background-color: #f8f5f2;
            border-radius: 12px;
            padding: 15px;
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid #e8e4e0;
            transition: all 0.3s ease;
        }
        
        .metric-item:hover {
            background-color: #e8e4e0;
            transform: translateY(-3px);
        }
        
        .metric-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background-color: #c9b1be;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
        }
        
        .metric-content {
            flex: 1;
        }
        
        .metric-value {
            font-size: 24px;
            font-weight: 700;
            color: #c9b1be;
            line-height: 1;
            margin-bottom: 4px;
        }
        
        .metric-label {
            font-size: 12px;
            color: #9a9a9a;
        }
        
        .metrics-hint {
            font-size: 12px;
            color: #9a9a9a;
            font-style: italic;
            text-align: center;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #e8e4e0;
        }
        
        /* 编辑对话框：遮罩固定到 viewport，不受键盘影响 */
        .edit-dialog {
            position: fixed;
            inset: 0;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: var(--z-overlay); /* 将编辑对话框 z-index 统一为 --z-overlay */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        
        .edit-dialog.show {
            opacity: 1;
            visibility: visible;
        }
        
        .edit-dialog-content {
            background-color: #f8f5f2;
            border-radius: 15px;
            padding: 25px;
            width: 400px;
            max-width: 90%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            transform: translateY(50px) scale(0.8);
            opacity: 0;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                        opacity 0.4s ease;
            max-height: min(80svh, calc(100svh - 32px - var(--safe-inset-top, env(safe-area-inset-top)) - var(--safe-inset-bottom, env(safe-area-inset-bottom))));
            overflow-y: auto;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
        }
        
        .edit-dialog.show .edit-dialog-content {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
        
        .edit-dialog-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .edit-dialog-title {
            font-size: 18px;
            font-weight: 600;
            color: #5a5a5a;
        }
        
        .close-edit {
            background: none;
            border: none;
            color: #9a9a9a;
            font-size: 20px;
            cursor: pointer;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .close-edit:hover {
            background-color: #e8e4e0;
            color: #5a5a5a;
        }
        
        .edit-textarea {
            width: 100%;
            height: 120px;
            padding: 15px;
            border: 1px solid #e8e4e0;
            border-radius: 10px;
            background-color: #fff;
            color: #5a5a5a;
            font-size: 14px;
            line-height: 1.5;
            resize: none;
            margin-bottom: 20px;
            outline: none;
            transition: border-color 0.3s ease;
        }
        
        .edit-textarea:focus {
            border-color: #a3b1c6;
        }
        
        .edit-dialog-buttons {
            display: flex;
            gap: 10px;
        }
        
        .edit-btn, .cancel-btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .edit-btn {
            background-color: #a3b1c6;
            color: white;
        }
        
        .edit-btn:hover {
            background-color: #8a9ba3;
            transform: translateY(-2px);
        }
        
        .cancel-btn {
            background-color: #e8e4e0;
            color: #5a5a5a;
        }
        
        .cancel-btn:hover {
            background-color: #d8d1c9;
            transform: translateY(-2px);
        }
        
        .friend-sticker-library {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
            gap: 10px;
            max-height: 300px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            padding: 10px;
            background: rgba(0,0,0,0.03);
            border-radius: 8px;
        }
        
        .friend-sticker-item {
            aspect-ratio: 1;
            border-radius: 6px;
            overflow: hidden;
            border: 2px solid transparent;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
        }
        
        .friend-sticker-item.selected {
            border-color: var(--primary-color);
            background: rgba(163, 177, 198, 0.1);
        }
        
        .friend-sticker-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .friend-sticker-item .remove-sticker {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 18px;
            height: 18px;
            background: rgba(255,0,0,0.6);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            opacity: 0;
            transition: opacity 0.2s;
        }
        
        .friend-sticker-item:hover .remove-sticker {
            opacity: 1;
        }

        /* 通知 */
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: #b1c2a9;
            color: white;
            padding: 12px 20px;
            border-radius: 8px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
            z-index: var(--z-toast); /* 将通知组件 z-index 统一为 --z-toast */
            display: flex;
            align-items: center;
            gap: 10px;
            opacity: 0;
            transform: translateX(150%);
            transition: opacity 0.3s ease, transform 0.3s ease;
            visibility: hidden;
            pointer-events: none;
        }
        
        .notification.show {
            opacity: 1;
            transform: translateX(0);
            visibility: visible;
            pointer-events: auto;
        }
        
        .notification i {
            font-size: 18px;
        }
        
        .notification.error {
            background-color: #d8a8a8;
        }
        
        .notification.info {
            background-color: #8a9ba3;
        }
        
        .notification.warning {
            background-color: #ffd04b;
        }
        
        /* 好友设置遮罩 (特殊处理，可能在主设置页内) */
        .friend-settings-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: var(--z-overlay);
            background-color: #f8f5f2;
            display: flex;
            flex-direction: column;
            max-width: 500px;
            margin: 0 auto;
        }
        
        /* 好友信息卡片 */
        .friend-info-card {
            background-color: #fff;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            border: 1px solid #e8e4e0;
        }
        
        .friend-settings-menu {
            position: relative;
            flex-shrink: 0;
        }
        
        .friend-settings-menu-btn {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            cursor: pointer;
            color: white;
            transition: all 0.2s;
        }
        
        .friend-settings-menu-btn:active {
            background-color: rgba(255, 255, 255, 0.18);
        }
        
        .friend-settings-menu-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            min-width: 150px;
            padding: 6px 0;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-5px);
            transition: all 0.2s ease;
            /* 删除硬编码 z-index: 100，使用默认堆叠上下文 */
        }
        
        .friend-settings-menu-dropdown.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(5px);
        }
        
        .friend-settings-menu-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            font-size: 14px;
            color: #5a5a5a;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .friend-settings-menu-item:active {
            background-color: #f5f5f5;
        }
        
        .friend-settings-menu-item.danger {
            color: #e57373;
        }
        
        .friend-settings-menu-item.danger:active {
            background-color: #ffebee;
        }
        
        .friend-info-main {
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }
        
        .friend-info-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            padding-top: 5px;
        }
        
        .friend-avatar-large {
            width: 70px;
            height: 70px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            color: white;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
            cursor: pointer;
            flex-shrink: 0;
        }
        .friend-avatar-large.has-custom::before {
    display: none !important;
}
        .friend-avatar-large.has-custom #friend-avatar-text {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    z-index: -1000 !important;
}


        
        .friend-avatar-text {
            font-weight: bold;
        }
        
        .avatar-change-hint {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            font-size: 12px;
            padding: 5px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .friend-avatar-large:hover .avatar-change-hint {
            opacity: 1;
        }
        
        .friend-name-display {
            font-size: 20px;
            font-weight: 600;
            color: #5a5a5a;
            margin-bottom: 4px;
            cursor: pointer;
            transition: opacity 0.2s;
            text-align: left;
        }
        
        .friend-name-display:active {
            opacity: 0.6;
        }
        
        .friend-wechat-id {
            font-size: 13px;
            color: #9a9a9a;
            cursor: pointer;
            transition: opacity 0.2s;
            text-align: left;
        }
        
        .friend-wechat-id:active {
            opacity: 0.6;
        }
        
        .friend-intro-display {
            font-size: 13px;
            color: #aaa;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
            transition: opacity 0.2s;
            margin-top: 15px;
        }
        
        .friend-intro-display:active {
            opacity: 0.6;
        }
        
        /* 设置项 */
        .friend-settings-group {
            background-color: #fff;
            border-radius: 12px;
            margin-bottom: 20px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            border: 1px solid #e8e4e0;
        }
        
        /* 我的人设页面不需要白色背景容器 */
        #my-persona-page .friend-settings-group {
            background-color: transparent;
            box-shadow: none;
            border: none;
            margin: 0;
        }
        
        .friend-settings-item {
            padding: 15px;
            border-bottom: 1px solid #e8e4e0;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .friend-settings-item:last-child {
            border-bottom: none;
        }
        
        .friend-settings-item:hover {
            background-color: #f8f5f2;
        }
        
        .friend-settings-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background-color: #a3b1c6;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            margin-right: 12px;
            flex-shrink: 0;
        }
        
        .friend-settings-icon.name { background-color: #c9b1be; }
        .friend-settings-icon.wechat-id { background-color: #8a9ba3; }
        .friend-settings-icon.intro { background-color: #a39b8a; }
        .friend-settings-icon.remark { background-color: #b1c2a9; }
        .friend-settings-icon.persona { background-color: #9ab3d5; }
        .friend-settings-icon.delete { background-color: #d8a8a8; }
        
        .friend-settings-content {
            flex: 1;
        }
        
        .friend-settings-label {
            font-size: 14px;
            color: #9a9a9a;
            margin-bottom: 3px;
        }
        
        .friend-settings-value {
            font-size: 16px;
            color: #5a5a5a;
            font-weight: 500;
        }
        
        .friend-settings-arrow {
            color: #c0c0c0;
            font-size: 14px;
            margin-left: 10px;
        }
        
        /* 修改对话框 */
        .edit-field-dialog {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: calc(var(--z-overlay) + 20); /* 确保在好友设置页之上 */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        
        .edit-field-dialog.show {
            opacity: 1;
            visibility: visible;
        }
        
        .edit-field-content {
            background-color: #f8f5f2;
            border-radius: 15px;
            padding: 25px;
            width: 400px;
            max-width: 90%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            transform: translateY(50px) scale(0.8);
            opacity: 0;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                        opacity 0.4s ease;
        }
        
        .edit-field-dialog.show .edit-field-content {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
        
        .edit-field-title {
            font-size: 18px;
            font-weight: 600;
            color: #5a5a5a;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .field-input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #e8e4e0;
            border-radius: 8px;
            background-color: #fff;
            color: #5a5a5a;
            font-size: 16px;
            margin-bottom: 15px;
            outline: none;
        }
        
        .field-input:focus {
            border-color: #a3b1c6;
        }
        
        .field-hint {
            font-size: 12px;
            color: #9a9a9a;
            margin-bottom: 20px;
        }
        
        .edit-field-buttons {
            display: flex;
            gap: 10px;
        }
        
        .edit-field-btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .edit-field-btn.save {
            background-color: #a3b1c6;
            color: white;
        }
        
        .edit-field-btn.save:hover {
            background-color: #8a9ba3;
            transform: translateY(-2px);
        }
        
        .edit-field-btn.cancel {
            background-color: #e8e4e0;
            color: #5a5a5a;
        }
        
        .edit-field-btn.cancel:hover {
            background-color: #d8d1c9;
            transform: translateY(-2px);
        }
        
        /* 头像选择器 */
        .avatar-selector {
            margin-bottom: 20px;
        }
        
        .avatar-selector-title {
            font-size: 16px;
            font-weight: 600;
            color: #5a5a5a;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .avatar-colors-selector {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            margin-bottom: 20px;
        }
        
        .avatar-color-selector-option {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.3s ease;
        }
        
        .avatar-color-selector-option:hover {
            transform: scale(1.1);
        }
        
        .avatar-color-selector-option.selected {
            border-color: #5a5a5a;
            box-shadow: 0 0 0 2px white, 0 0 0 4px #a3b1c6;
        }
        
        .avatar-upload-section {
            text-align: center;
        }
        
        .avatar-upload-btn {
            background-color: #e8e4e0;
            color: #5a5a5a;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        .avatar-upload-btn:hover {
            background-color: #a3b1c6;
            color: white;
        }
        
        .avatar-upload-hint {
            font-size: 12px;
            color: #9a9a9a;
            margin-top: 10px;
        }
        
        /* 删除确认对话框 */
        .delete-confirm-dialog {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: var(--z-overlay); /* 将删除确认对话框 z-index 统一为 --z-overlay */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        
        .delete-confirm-dialog.show {
            opacity: 1;
            visibility: visible;
        }
        
        .delete-confirm-content {
            background-color: #f8f5f2;
            border-radius: 15px;
            padding: 25px;
            width: 350px;
            max-width: 90%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            text-align: center;
            max-height: calc(var(--app-height, 100svh) - 32px - var(--safe-inset-top, env(safe-area-inset-top)) - var(--safe-inset-bottom, env(safe-area-inset-bottom)));
            overflow-y: auto;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
        }
        
        .delete-confirm-title {
            font-size: 18px;
            font-weight: 600;
            color: #5a5a5a;
            margin-bottom: 15px;
        }
        
        .delete-confirm-message {
            font-size: 14px;
            color: #5a5a5a;
            margin-bottom: 25px;
            line-height: 1.5;
        }
        
        .delete-confirm-buttons {
            display: flex;
            gap: 10px;
        }
        
        .delete-confirm-btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .delete-confirm-btn.confirm {
            background-color: #d8a8a8;
            color: white;
        }
        
        .delete-confirm-btn.confirm:hover {
            background-color: #c79595;
            transform: translateY(-2px);
        }
        
        .delete-confirm-btn.cancel {
            background-color: #e8e4e0;
            color: #5a5a5a;
        }
        
        .delete-confirm-btn.cancel:hover {
            background-color: #d8d1c9;
            transform: translateY(-2px);
        }

        .ui-dialog {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: calc(var(--z-overlay) + 10); /* 确保名片编辑浮窗在添加好友浮窗之上 */
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .ui-dialog.show {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .ui-dialog-content {
            background-color: #f8f5f2;
            border-radius: 15px;
            padding: 22px;
            width: 350px;
            max-width: 90%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            text-align: center;
            max-height: calc(var(--app-height, 100svh) - 32px - var(--safe-inset-top, env(safe-area-inset-top)) - var(--safe-inset-bottom, env(safe-area-inset-bottom)));
            overflow-y: auto;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
        }

        .ui-dialog-title {
            font-size: 18px;
            font-weight: 600;
            color: #5a5a5a;
            margin-bottom: 12px;
        }

        .ui-dialog-message {
            font-size: 14px;
            color: #5a5a5a;
            margin-bottom: 16px;
            line-height: 1.5;
            word-break: break-word;
        }

        .ui-dialog-input {
            width: 100%;
            padding: 12px 14px;
            border-radius: 10px;
            border: 1px solid #e8e4e0;
            background: rgba(255, 255, 255, 0.9);
            font-size: 16px;
            outline: none;
            color: #5a5a5a;
            margin-bottom: 18px;
            font-family: inherit;
        }

        .ui-dialog-textarea {
            min-height: 120px;
            resize: vertical;
            line-height: 1.6;
        }

        .ui-dialog-quick-actions {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
            flex-wrap: wrap;
        }

        .quick-action-btn {
            padding: 6px 12px;
            border-radius: 6px;
            border: 1px solid #e8e4e0;
            background: #f8f5f2;
            font-size: 13px;
            color: #7a7a7a;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .quick-action-btn:hover {
            background: #f0edea;
            border-color: #d8d4d0;
            color: #5a5a5a;
        }

        .quick-action-btn:active {
            transform: scale(0.95);
        }

        .ui-dialog-buttons {
            display: flex;
            gap: 10px;
        }

        .ui-dialog-btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .ui-dialog-btn:active {
            transform: scale(0.98);
        }

        .ui-dialog-btn.confirm {
            background-color: #a3b1c6;
            color: white;
        }

        .ui-dialog-btn.danger {
            background-color: #d8a8a8;
            color: white;
        }

        .ui-dialog-btn.cancel {
            background-color: #e8e4e0;
            color: #5a5a5a;
        }
        
        /* 底部导航栏 */
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            background-color: #fff;
            display: flex;
            justify-content: space-around;
            border-top: 1px solid #e8e4e0;
            height: calc(60px + var(--safe-inset-bottom, env(safe-area-inset-bottom)));
            padding-bottom: var(--safe-inset-bottom, env(safe-area-inset-bottom));
            /* 确保在列表之上 */
            z-index: 2;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        }

        .app-slide-page {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            max-width: 500px;
            margin: 0 auto;
            background-color: #f8f5f2;
            /* 移除 z-index，改用 DOM 顺序进行单页堆叠 */
            display: flex; /* iOS Safari: 必须显式声明 display: flex */
            flex-direction: column;
            transform: translateX(100%);
            transition: transform 0.3s ease;
            overflow: hidden;
            /* iOS Safari: 改为 pan-y 允许内部垂直滚动 */
            touch-action: pan-y;
            /* 默认禁用交互，防止页面切换期间的误触 */
            pointer-events: none;
        }
        
        .app-slide-page[style*="display: flex"],
        .app-slide-page[style*="display:flex"] {
            pointer-events: auto;
        }

        /* 标准化头部与主体：已通过 app-page-header, app-page-body 处理 */
        
        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #9a9a9a;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s;
            min-height: 60px;
        }

        .tab-item:active {
            background-color: #f8f5f2;
        }
        
        .tab-item.active {
            color: #a3b1c6;
        }
        
        .tab-icon {
            font-size: 22px;
            margin-bottom: 4px;
        }
        
        /* 未读消息标记 */
        .chat-avatar-container {
            position: relative;
            margin-right: 12px;
            flex-shrink: 0;
        }

        .new-count-dot {
            background-color: #d96e6e; /* 莫兰迪红 */
            color: #fff;
            border-radius: 50%; /* 保持圆形 */
            min-width: 16px;
            height: 16px;
            font-size: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 4px;
            position: absolute;
            top: 0;
            right: 0;
            transform: translate(-20%, -30%); /* 往左挪些 */
            /* 删除硬编码 z-index: 10，使用默认堆叠上下文 */
            box-sizing: border-box;
            line-height: 1;
        }
        
        /* 长按操作样式 */
        .message-longpress-menu {
            position: fixed;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
            z-index: var(--z-overlay); /* 将长按菜单 z-index 统一为 --z-overlay，删除 calc 动态计算 */
            display: none;
            flex-direction: column;
            padding: 4px 0;
            border: 1px solid #e8e4e0;
            min-width: 120px;
            transform: scale(0.8);
            opacity: 0;
            transition: transform 0.2s ease, opacity 0.2s ease;
        }
        
        .message-longpress-menu.show {
            display: flex;
            transform: scale(1);
            opacity: 1;
        }
        
        .longpress-menu-items {
            display: flex;
            flex-direction: column;
            padding: 0;
            margin: 0;
        }
        
        .longpress-menu-item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 10px 14px;
            min-width: 120px;
            font-size: 14px;
            color: #5a5a5a;
            cursor: pointer;
            transition: background-color 0.2s;
            border-bottom: 1px solid #e8e4e0;
            white-space: nowrap;
        }
        
        .longpress-menu-item:last-child {
            border-bottom: none;
        }
        
        .longpress-menu-item:hover {
            background-color: #f8f5f2;
        }
        
        .longpress-menu-item.delete:hover {
            color: #d8a8a8;
        }
        
        .longpress-menu-item.copy:hover {
            color: #a3b1c6;
        }

        .longpress-menu-item.edit:hover {
            color: #92a8d1;
        }
        
        /* 对话列表长按菜单样式 */
        .chat-longpress-menu {
            position: fixed;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            z-index: var(--z-overlay); /* 将对话长按菜单 z-index 统一为 --z-overlay，删除 calc 动态计算 */
            display: none;
            flex-direction: column;
            padding: 8px;
            border: 1px solid #e8e4e0;
            min-width: 150px;
            transform: scale(0.8);
            opacity: 0;
            transition: transform 0.2s ease, opacity 0.2s ease;
        }
        
        .chat-longpress-menu.show {
            display: flex;
            transform: scale(1);
            opacity: 1;
        }
        
        .chat-menu-items {
            padding: 0;
            margin: 0;
        }
        
        .chat-menu-item {
            display: flex;
            align-items: center;
            padding: 10px 12px;
            font-size: 14px;
            color: #5a5a5a;
            cursor: pointer;
            transition: background-color 0.2s;
            border-radius: 6px;
            gap: 10px;
        }
        
        .chat-menu-item:hover {
            background-color: #f8f5f2;
        }
        
        .chat-menu-item i {
            width: 20px;
            text-align: center;
            font-size: 16px;
        }
        
        .chat-menu-item.delete-chat i {
            color: #d8a8a8;
        }
        
        .chat-menu-item.copy:hover {
            color: #a3b1c6;
        }
        
        .chat-menu-item.top-chat i {
            color: #b1c2a9;
        }
        
        .chat-menu-item.mute-chat i {
            color: #8a9ba3;
        }
        
        .chat-menu-cancel {
            margin-top: 5px;
            padding: 10px 12px;
            background-color: #f8f5f2;
            border-radius: 6px;
            text-align: center;
            font-size: 14px;
            color: #5a5a5a;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .chat-menu-cancel:hover {
            background-color: #e8e4e0;
        }
        
        /* 暗色遮罩：固定到 viewport，不受键盘影响 */
        .dark-overlay {
            position: fixed;
            inset: 0;
            background-color: transparent;
            z-index: var(--z-overlay); /* 将暗色遮罩 z-index 统一为 --z-overlay */
            display: none;
            pointer-events: none;
        }
        
        .dark-overlay.show {
            display: block;
            pointer-events: auto;
        }
        
        /* 聊天置顶标记 */
        .chat-top-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #a3b1c6;
            color: white;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 3px;
        }
        
        .chat-top-badge i {
            font-size: 8px;
        }
        
        /* 聊天静音标记 */
        .chat-mute-badge {
            position: absolute;
            top: 40px;
            right: 10px;
            color: #9a9a9a;
            font-size: 12px;
        }
        
        /* 长按提示 */
        .longpress-hint {
            position: fixed;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            z-index: var(--z-toast); /* 将长按提示 z-index 统一为 --z-toast */
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .longpress-hint.show {
            opacity: 1;
        }
        
        /* 文件夹管理样式 */
        .folder-management {
            margin-bottom: 15px;
        }
        
        .folder-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .folder-title {
            font-weight: 600;
            color: #5a5a5a;
            font-size: 16px;
        }
        
        .folder-controls {
            display: flex;
            gap: 8px;
        }
        
        .folder-select {
            padding: 6px 12px;
            border-radius: 6px;
            border: 1px solid #e8e4e0;
            background-color: #fff;
            color: #5a5a5a;
            min-width: 120px;
            cursor: pointer;
        }
        
        .folder-actions {
            display: flex;
            gap: 8px;
        }
        
        .folder-action-btn {
            padding: 6px 12px;
            border-radius: 6px;
            background-color: #e8e4e0;
            color: #5a5a5a;
            border: none;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.3s ease;
        }
        
        .folder-action-btn:hover {
            background-color: #a3b1c6;
            color: white;
        }
        
        .folder-action-btn.primary {
            background-color: #a3b1c6;
            color: white;
        }
        
        .preset-folder {
            margin-bottom: 15px;
            border: 1px solid #e8e4e0;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .preset-folder-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            background-color: #f8f5f2;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .preset-folder-header:hover {
            background-color: #e8e4e0;
        }
        
        .preset-folder-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            color: #5a5a5a;
        }
        
        .preset-folder-actions {
            display: flex;
            gap: 5px;
        }
        
        .folder-switch {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 20px;
        }
        
        .folder-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .folder-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #e8e4e0;
            transition: .4s;
            border-radius: 34px;
        }
        
        .folder-slider:before {
            position: absolute;
            content: "";
            height: 14px;
            width: 14px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        .folder-switch input:checked + .folder-slider {
            background-color: #a3b1c6;
        }
        
        .folder-switch input:checked + .folder-slider:before {
            transform: translateX(20px);
        }
        
        .preset-folder-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        
        .preset-folder.expanded .preset-folder-content {
            max-height: 500px;
        }
        
        .preset-folder-content .replies-list {
            max-height: 250px;
            margin: 0;
            border: none;
            border-radius: 0;
            border-top: 1px solid #e8e4e0;
        }
        
        .folder-badge {
            font-size: 11px;
            background-color: #a3b1c6;
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            margin-left: 8px;
        }
        
        /* 批量导入浮窗：与 card-overlay 共用遮罩安全区与 z-index */
        .batch-import-overlay {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: calc(var(--z-overlay) + 20); /* 确保在好友设置页之上 */
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            padding: calc(16px + var(--safe-inset-top)) 12px calc(16px + var(--safe-inset-bottom));
            box-sizing: border-box;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .batch-import-overlay.show {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        
        .batch-import-card {
            background-color: #f8f5f2;
            border-radius: 20px;
            padding: 25px;
            padding-bottom: calc(25px + var(--safe-inset-bottom));
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            max-width: 90%;
            max-height: 60vh;
            width: 500px;
            position: relative;
            transform: translateY(50px) scale(0.8);
            opacity: 0;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                        opacity 0.4s ease;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-sizing: border-box;
        }
        
        .batch-import-overlay.show .batch-import-card {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
        
        .batch-import-card .card-close {
            position: absolute;
            top: 15px;
            right: 15px;
            background: none;
            border: none;
            font-size: 20px;
            color: #9a9a9a;
            cursor: pointer;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .batch-import-card .card-close:hover {
            background-color: #e8e4e0;
            color: #5a5a5a;
        }
        
        .batch-import-title {
            font-size: 20px;
            font-weight: 600;
            color: #5a5a5a;
            text-align: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e8e4e0;
        }
        
        .batch-import-content {
            display: flex;
            flex-direction: column;
            gap: 15px;
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .batch-import-textarea {
            width: 100%;
            height: 200px;
            padding: 15px;
            border: 1px solid #e8e4e0;
            border-radius: 10px;
            background-color: #fff;
            color: #5a5a5a;
            font-size: 14px;
            line-height: 1.5;
            resize: vertical;
            outline: none;
        }
        
        .batch-import-textarea:focus {
            border-color: #a3b1c6;
        }
        
        .batch-import-hint {
            font-size: 12px;
            color: #9a9a9a;
            line-height: 1.4;
        }
        
        .batch-import-actions {
            display: flex;
            gap: 10px;
            margin-top: 15px;
            flex-wrap: wrap;
        }

        .auto-reply-more-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            border-radius: 12px;
            background: #f3efe9;
            color: #5a5a5a;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.2s ease, transform 0.2s ease;
        }

        .auto-reply-more-toggle i {
            font-size: 14px;
            transition: transform 0.2s ease;
        }

        .auto-reply-more-toggle.is-open i {
            transform: rotate(180deg);
        }

        .auto-reply-more-panel {
            display: none;
            flex-direction: column;
            gap: 16px;
            padding: 12px;
            border-radius: 14px;
            background: #fff;
            border: 1px solid #eee6dc;
        }

        .auto-reply-more-panel.is-open {
            display: flex;
        }

        .auto-reply-range {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .auto-reply-range-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 13px;
            color: #5a5a5a;
        }

        .auto-reply-range-value {
            font-weight: 600;
            color: #a37f6f;
        }

        .auto-reply-range-input {
            width: 100%;
            height: 4px;
            border-radius: 999px;
            background: #e8e4e0;
            accent-color: #a3b1c6;
        }

        .auto-reply-range-desc {
            font-size: 12px;
            color: #9a9a9a;
            line-height: 1.4;
        }
        
        .import-template-btn {
            background-color: #e8e4e0;
            color: #5a5a5a;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .import-template-btn:hover {
            background-color: #a3b1c6;
            color: white;
        }
        
        .import-file-btn {
            background-color: #c9b1be;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .import-file-btn:hover {
            background-color: #b89ca8;
        }
        
        .import-execute-btn {
            background-color: #a3b1c6;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
        }
        
        .import-execute-btn:hover {
            background-color: #8a9ba3;
        }
        
        /* 文件夹对话框样式 */
        .folder-dialog {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: calc(var(--z-overlay) + 20); /* 确保在好友设置页之上 */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            padding: calc(16px + var(--safe-inset-top, env(safe-area-inset-top))) 12px calc(16px + var(--safe-inset-bottom, env(safe-area-inset-bottom)));
            box-sizing: border-box;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .folder-dialog.show {
            opacity: 1;
            visibility: visible;
        }
        
        .folder-dialog-content {
            background-color: #f8f5f2;
            border-radius: 15px;
            padding: 25px;
            width: 400px;
            max-width: 90%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            transform: translateY(50px) scale(0.8);
            opacity: 0;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                        opacity 0.4s ease;
            max-height: calc(var(--app-height, 100svh) - 32px - var(--safe-inset-top, env(safe-area-inset-top)) - var(--safe-inset-bottom, env(safe-area-inset-bottom)));
            overflow-y: auto;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
        }
        
        .folder-dialog.show .folder-dialog-content {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
        
        .folder-dialog-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .folder-dialog-title {
            font-size: 18px;
            font-weight: 600;
            color: #5a5a5a;
        }
        
        .close-folder-dialog {
            background: none;
            border: none;
            color: #9a9a9a;
            font-size: 20px;
            cursor: pointer;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .close-folder-dialog:hover {
            background-color: #e8e4e0;
            color: #5a5a5a;
        }
        
        .folder-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #e8e4e0;
            border-radius: 8px;
            background-color: #fff;
            color: #5a5a5a;
            font-size: 14px;
            margin-bottom: 15px;
            outline: none;
        }
        
        .folder-input:focus {
            border-color: #a3b1c6;
        }
        
        .folder-dialog-buttons {
            display: flex;
            gap: 10px;
        }
        
        .folder-dialog-btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .folder-dialog-btn.primary {
            background-color: #a3b1c6;
            color: white;
        }
        
        .folder-dialog-btn.secondary {
            background-color: #e8e4e0;
            color: #5a5a5a;
        }
        
        .folder-dialog-btn:hover {
            transform: translateY(-2px);
        }
        
        /* 文件夹管理器浮窗 */
        .folders-manager-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: calc(var(--z-overlay) + 20); /* 确保在好友设置页之上 */
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            padding: calc(16px + var(--safe-inset-top, env(safe-area-inset-top))) 12px calc(16px + var(--safe-inset-bottom, env(safe-area-inset-bottom)));
            box-sizing: border-box;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .folders-manager-overlay.show {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        
        .folders-manager-card {
            background-color: #f8f5f2;
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            max-width: 90%;
            max-height: 90%;
            max-height: calc(var(--app-height, 100svh) - 32px - var(--safe-inset-top, env(safe-area-inset-top)) - var(--safe-inset-bottom, env(safe-area-inset-bottom)));
            width: 400px;
            position: relative;
            overflow-y: auto;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
        }
        
        .folders-manager-card .card-close {
            position: absolute;
            top: 15px;
            right: 15px;
            background: none;
            border: none;
            font-size: 20px;
            color: #9a9a9a;
            cursor: pointer;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .folders-manager-card .card-close:hover {
            background-color: #e8e4e0;
            color: #5a5a5a;
        }
        
        .folders-list {
            max-height: 300px;
            overflow-y: auto;
            margin-bottom: 20px;
            border: 1px solid #e8e4e0;
            border-radius: 10px;
            padding: 10px;
            background-color: #fff;
            /* iOS 滚动隔离 */
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            touch-action: pan-y;
        }
        
        .folder-manager-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            margin-bottom: 8px;
            background-color: #f8f5f2;
            border-radius: 8px;
            border: 1px solid #e8e4e0;
            /* iOS 长按防护 */
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
            touch-action: pan-y;
            transition: all 0.3s ease;
        }
        
        .folder-manager-item:hover {
            background-color: #e8e4e0;
        }
        
        .folder-manager-name {
            flex: 1;
            font-size: 14px;
            color: #5a5a5a;
        }
        
        .folder-manager-count {
            font-size: 11px;
            background-color: #a3b1c6;
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            margin-left: 8px;
        }
        
        .folder-manager-actions {
            display: flex;
            gap: 5px;
        }
        
        /* 预设回复管理样式 */
        .preset-management {
            margin-bottom: 15px;
        }
        
        .preset-management-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .preset-management-title {
            font-size: 16px;
            font-weight: 600;
            color: #5a5a5a;
        }
        
        .preset-management-actions {
            display: flex;
            gap: 8px;
        }
        
        .batch-import-btn {
            background-color: #c9b1be;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 6px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .batch-export-btn {
            background-color: #a3b1c6;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 6px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .batch-import-btn:hover {
            background-color: #b89ca8;
        }

        .batch-export-btn:hover {
            background-color: #8a9ba3;
        }
        
        /* 莫兰迪色系定义 */
        .bg-mauve { background-color: #c9b1be; }
        .bg-dusty-rose { background-color: #d8a8a8; }
        .bg-sage { background-color: #b1c2a9; }
        .bg-stone { background-color: #a8a8a8; }
        .bg-clay { background-color: #b8a38d; }
        .bg-slate { background-color: #8a9ba3; }
        .bg-moss { background-color: #8a9d8a; }
        .bg-sand { background-color: #d9c7b4; }
        
        /* 响应式调整 - 已移除固定高度，使用flex布局 */
        
        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 5px;
        }
        
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        
        ::-webkit-scrollbar-thumb {
            background: rgba(163, 177, 198, 0.3);
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(163, 177, 198, 0.5);
        }
        
        .replies-list::-webkit-scrollbar {
            width: 4px;
        }
        
        .replies-list::-webkit-scrollbar-track {
            background: #f8f5f2;
            border-radius: 10px;
        }
        
        .replies-list::-webkit-scrollbar-thumb {
            background: rgba(163, 177, 198, 0.3);
            border-radius: 10px;
        }
        
        .replies-list::-webkit-scrollbar-thumb:hover {
            background: rgba(163, 177, 198, 0.5);
        }
        
        /* 移动端优化 */
        @media (max-width: 768px) {



            
            .batch-import-card {
                margin: 0 auto 20px;
                transform: scale(0.9);
            }
            
            .batch-import-overlay.show .batch-import-card {
                transform: scale(1);
            }

            .custom-replies-card {
                width: 90%;
                padding: 20px;
            }
            
            .edit-dialog-content {
                width: 90%;
            }
            
            .menu-grid {
                gap: 12px;
            }
            
            .menu-item {
                min-height: 80px;
                padding: 12px 6px;
            }
            
            .menu-icon {
                width: 36px;
                height: 36px;
            }
            
            .batch-import-card {
                width: 90%;
                padding: 20px;
            }
            
            .folder-dialog-content {
                width: 90%;
            }
            
            .add-friend-card {
                width: 90%;
                padding: 20px;
            }
            
            .message-longpress-menu,
            .chat-longpress-menu {
                max-width: 100%;
            }
            
            .longpress-hint {
                bottom: 100px;
                font-size: 12px;
                padding: 6px 12px;
            }
        }
        
        @media (max-width: 480px) {
            .menu-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: 10px;
            }
            
            .menu-item {
                min-height: 75px;
                padding: 10px 4px;
            }
            
            .menu-icon {
                width: 32px;
                height: 32px;
            }
            
            .menu-label {
                font-size: 11px;
            }
            
            .custom-replies-card {
                width: 95%;
                padding: 15px;
            }
            
            .add-reply-form {
                flex-direction: column;
            }
            
            .reply-input {
                width: 100%;
            }
            
            .add-reply-btn {
                width: 100%;
                padding: 12px;
            }
            
            .edit-dialog-buttons {
                flex-direction: column;
            }
            
            .batch-import-actions {
                flex-direction: column;
            }
            
            .folder-controls {
                flex-direction: column;
            }
            
            .folder-select {
                width: 100%;
            }
            
            .modal-actions {
                flex-direction: column;
            }
            
            .modal-btn {
                width: 100%;
            }
        }
        
        /* 自定义回复长按菜单 - 修复z-index问题 */
        .reply-longpress-menu {
            position: fixed;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            z-index: var(--z-overlay); /* 将自定义回复长按菜单 z-index 统一为 --z-overlay，删除 calc 动态计算 */
            display: none;
            flex-direction: column;
            padding: 8px;
            border: 1px solid #e8e4e0;
            min-width: 120px;
            transform: scale(0.8);
            opacity: 0;
            transition: transform 0.2s ease, opacity 0.2s ease;
        }
        
        .reply-longpress-menu.show {
            display: flex;
            transform: scale(1);
            opacity: 1;
        }
        
        .reply-menu-item {
            display: flex;
            align-items: center;
            padding: 10px 12px;
            font-size: 14px;
            color: #5a5a5a;
            cursor: pointer;
            transition: background-color 0.2s;
            border-radius: 6px;
            gap: 10px;
        }
        
        .reply-menu-item:hover {
            background-color: #f8f5f2;
        }
        
        .reply-menu-item i {
            width: 20px;
            text-align: center;
            font-size: 16px;
        }
        
        .reply-menu-item.edit i {
            color: #a3b1c6;
        }
        
        .reply-menu-item.delete i {
            color: #d8a8a8;
        }
        
        /* 文件夹长按菜单 */
        .folder-longpress-menu {
            position: fixed;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            z-index: var(--z-overlay); /* 将文件夹长按菜单 z-index 统一为 --z-overlay，删除 calc 动态计算 */
            display: none;
            flex-direction: column;
            padding: 8px;
            border: 1px solid #e8e4e0;
            min-width: 140px;
            transform: scale(0.8);
            opacity: 0;
            transition: transform 0.2s ease, opacity 0.2s ease;
        }
        
        .folder-longpress-menu.show {
            display: flex;
            transform: scale(1);
            opacity: 1;
        }
        
        .folder-menu-item {
            display: flex;
            align-items: center;
            padding: 10px 12px;
            font-size: 14px;
            color: #5a5a5a;
            cursor: pointer;
            transition: background-color 0.2s;
            border-radius: 6px;
            gap: 10px;
        }

        /* 表情包删除按钮 */
        .sticker-delete-btn {
            position: absolute;
            top: 0;
            right: 0;
            width: 20px;
            height: 20px;
            background-color: transparent;
            color: #ff4d4f; /* Positive Red */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px; /* Larger cross */
            cursor: pointer;
            /* 删除硬编码 z-index: 10，使用默认堆叠上下文 */
            text-shadow: 0 0 2px rgba(255,255,255,0.8);
        }

        .sticker-item.shake {
            position: relative; /* 确保删除按钮定位正确 */
            overflow: visible; /* 允许删除按钮超出边界 */
        }
        
        .sticker-item.shake img {
            border-radius: 8px; /* Force border radius inheritance/display */
            display: block; /* Ensure no extra space */
        }

        /* 优化后的编辑按钮 */
        .sticker-header .icon-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 5px;
            transition: all 0.3s ease;
            font-size: 16px;
        }
        
        .sticker-header .icon-btn:hover {
            transform: scale(1.1);
        }
        
        .folder-menu-item:hover {
            background-color: #f8f5f2;
        }
        
        .folder-menu-item i {
            width: 20px;
            text-align: center;
            font-size: 16px;
        }
        
        .folder-menu-item.edit i {
            color: #a3b1c6;
        }
        
        .folder-menu-item.delete i {
            color: #d8a8a8;
        }
        
        /* 修复自定义头像文字覆盖问题 - 添加的CSS */
.friend-avatar-large.has-custom.bg-mauve,
.friend-avatar-large.has-custom.bg-dusty-rose,
.friend-avatar-large.has-custom.bg-sage,
.friend-avatar-large.has-custom.bg-slate,
.friend-avatar-large.has-custom.bg-clay,
.friend-avatar-large.has-custom.bg-sand,
.friend-avatar-large.has-custom.bg-moss {
    background-color: transparent !important;
    background-image: var(--avatar-image) !important;
}

/* 确保头像中的文字元素也被隐藏 */
.profile-avatar.has-custom > div,
.contact-avatar.has-custom > div,
.chat-avatar.has-custom > div,
.dialogue-contact-avatar.has-custom > div,
.friend-avatar-large.has-custom > div,
.message-avatar.has-custom > div,
.profile-edit-avatar.has-custom > div,
.avatar-preview.has-custom > div {
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    z-index: -1 !important;
}

/* 修复聊天列表中的头像 */
.chat-item .chat-avatar.has-custom {
    background-size: cover !important;
    background-position: center !important;
}

.chat-item .chat-avatar.has-custom::before {
    content: none !important;
}

        /* 确保头像中的文字元素也被隐藏 */
        .profile-avatar.has-custom .avatar-edit-overlay,
        .contact-avatar.has-custom .avatar-edit-overlay,
        .chat-avatar.has-custom .avatar-edit-overlay,
        .dialogue-contact-avatar.has-custom .avatar-edit-overlay,
        .friend-avatar-large.has-custom .avatar-edit-overlay,
        .message-avatar.has-custom .avatar-edit-overlay,
        .profile-edit-avatar.has-custom .avatar-edit-overlay,
        .avatar-preview.has-custom .avatar-edit-overlay {
            color: white !important;
            text-indent: 0;
            position: absolute;
            /* 删除硬编码 z-index: 2，使用默认堆叠上下文 */
        }

        /* 修复聊天列表中的头像 */
        .chat-item .chat-avatar.has-custom {
            background-size: cover !important;
            background-position: center !important;
        }

        .chat-item .chat-avatar.has-custom::before {
            content: none !important;
        }
        /* Reply Mode Menu Styles */
        .mode-menu {
            position: absolute;
            top: 50px;
            right: 10px;
            background-color: rgba(255, 255, 255, 0.98);
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            padding: 8px;
            display: none;
            z-index: var(--z-base, 100);
            min-width: 150px;
            border: 1px solid #e8e4e0;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            animation: fadeIn 0.2s ease;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        
        .mode-menu.show {
            display: block;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        
        .mode-menu-item {
            padding: 12px 15px;
            display: flex;
            align-items: center;
            cursor: pointer;
            color: #5a5a5a;
            font-size: 14px;
            transition: all 0.2s;
            border-radius: 8px;
        }
        
        .mode-menu-item:hover {
            background-color: #f0ede9;
        }
        
        .mode-menu-item i:first-child {
            width: 20px;
            margin-right: 12px;
            color: #a3b1c6;
            text-align: center;
        }
        
        .mode-menu-item i:last-child {
            margin-left: auto;
            color: #a3b1c6;
            font-size: 12px;
        }
        
        .mode-menu-item.active {
            background-color: #f8f5f2;
            font-weight: 500;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-5px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Typing Indicator Styles */
        .typing-bubble {
            padding: 15px 20px !important;
            display: flex;
            align-items: center;
            gap: 4px;
            min-width: 60px;
            justify-content: center;
        }

        .typing-dot {
            width: 6px;
            height: 6px;
            background-color: #9a9a9a;
            border-radius: 50%;
            animation: typingBounce 1.4s infinite ease-in-out both;
        }

        .typing-dot:nth-child(1) {
            animation-delay: -0.32s;
        }

        .typing-dot:nth-child(2) {
            animation-delay: -0.16s;
        }

        @keyframes typingBounce {
            0%, 80%, 100% { 
                transform: scale(0);
                opacity: 0.5;
            }
            40% { 
                transform: scale(1);
                opacity: 1;
            }
        }

        /* Sticker Panel Styles */
        .sticker-panel-card {
            background: #fff;
            width: 100%;
            max-width: 500px;
            margin: 0 auto;
            height: calc(var(--app-height, 100svh) * 0.5);
            border-radius: 20px 20px 0 0;
            position: relative;
            display: flex;
            flex-direction: column;
            padding: 15px;
            padding-bottom: calc(15px + var(--safe-inset-bottom, env(safe-area-inset-bottom)));
            box-sizing: border-box;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            animation: slideUp 0.3s ease;
            z-index: var(--z-overlay); /* 将表情面板卡片 z-index 统一为 --z-overlay */
        }

        .sticker-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #f0f0f0;
            flex-shrink: 0; /* 防止头部被压缩 */
        }

        .sticker-header h3 {
            margin: 0;
            font-size: 16px;
            color: #333;
        }

        .sticker-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .sticker-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch; /* 开启 iOS 惯性滚动 */
            padding: 5px;
            flex: 1;
            align-content: start; /* 防止内容少时拉伸 */
            /* iOS 滚动隔离 */
            overscroll-behavior-y: contain;
            touch-action: pan-y;
        }

        @media (max-width: 480px) {
            .sticker-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        .sticker-item {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 100%; /* 1:1 Aspect Ratio using standard padding hack */
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.2s;
            border: 1px solid #eee;
            -webkit-tap-highlight-color: transparent; /* 移除点击高亮 */
            user-select: none; /* 防止快速点击时选中文本 */
            -webkit-user-select: none;
        }

        .sticker-item:active {
            transform: scale(0.95);
        }

        .sticker-item img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .sticker-item.add-sticker {
            border: 2px dashed #ccc;
            background: #f9f9f9;
        }

        .sticker-item.add-sticker::after {
            content: "+";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #ccc;
            font-size: 24px;
        }

        .sticker-item.add-sticker:hover {
            border-color: #aaa;
        }

        .sticker-item.add-sticker:hover::after {
            color: #aaa;
        }


        /* 好友个性化显示设置 */
        #dialogue-page.hide-bubbles .message-bubble {
            background: transparent !important;
            box-shadow: none !important;
            padding: 5px 0 !important;
        }
        #dialogue-page.hide-friend-avatar .message.received .message-avatar {
            display: none !important;
        }
        #dialogue-page.hide-user-avatar .message.sent .message-avatar {
            display: none !important;
        }
        #dialogue-page.hide-background .dialogue-page__bg {
            background: #fff !important;
            background-image: none !important;
        }
        #dialogue-page.hide-background .dialogue-body {
            background: #fff !important;
        }
        #dialogue-page.hide-topbar .dialogue-header {
            display: none !important;
        }
        #dialogue-page.hide-topbar .dialogue-body {
            padding-top: 10px !important;
            height: calc(100% - 70px) !important;
        }
        
        /* 背景已迁移至 .dialogue-page__bg，键盘起落时不变 */

        #dialogue-page .dialogue-body {
            background-image: none !important;
            background-color: transparent !important;
        }
        
        /* 预设背景色 */
        .bg-preset-item.active {
            border-color: #a3b1c6 !important;
            box-shadow: 0 0 0 2px rgba(163, 177, 198, 0.4);
            transform: scale(1.05);
            transition: all 0.2s ease;
        }
        
        /* Mobile Layout Fix for Keyboard */
        @media (max-width: 768px) {
            .card-overlay:not(.sheet-overlay), .batch-import-overlay {
                height: 100% !important;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0;
            }
            
            .custom-replies-card, .batch-import-card {
                transform: none !important;
                margin: 0 auto;
                max-height: 60vh;
                overflow-y: auto;
                width: 90%;
            }
            
            .card-overlay.show .custom-replies-card,
            .batch-import-overlay.show .batch-import-card {
                transform: none !important;
            }
        }
        /* 聊天模式选择面板样式 */
        .mode-option {
            display: flex;
            align-items: center;
            padding: 16px;
            background: #fff;
            border: 1px solid #eee;
            border-radius: 12px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .mode-option:hover {
            background: #f9f9f9;
        }

        .sheet-overlay {
            align-items: flex-end;
            justify-content: center;
            padding: 0;
            overflow: hidden;
        }

        .mode-option.active {
            border-color: #a3b1c6;
            background: #f0f4f8;
        }

        .mode-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color: #666;
            font-size: 1.2rem;
        }

        .mode-option.active .mode-icon {
            background: #a3b1c6;
            color: white;
        }

        .mode-info {
            flex: 1;
        }

        .mode-title {
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
            font-size: 1rem;
        }

        .mode-desc {
            font-size: 0.85rem;
            color: #888;
            line-height: 1.3;
        }

        .mode-check {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #a3b1c6;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .mode-option.active .mode-check {
            opacity: 1;
        }

        /* 菜单图标颜色 */
        .menu-icon.mode-switch i {
            color: #ffffff;
        }
        /* 提示词调整页面 */
        .prompt-adjustment-page {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            max-width: 500px;
            margin: 0 auto;
            background-color: #f7f7f7;
            z-index: var(--z-overlay); /* 将CSS设置页面 z-index 统一为 --z-overlay */
            display: flex;
            flex-direction: column;
            transform: translateX(100%);
            transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            pointer-events: none;
            /* 确保未激活时完全隐藏，避免横屏时漏出 */
            visibility: visible;
        }

        .prompt-adjustment-page:not([style*="display: flex"]):not([style*="display:flex"]) {
            /* 未激活时确保完全隐藏，避免横屏时漏出 */
            transform: translateX(100%) !important;
            pointer-events: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
        }

        .prompt-adjustment-page[style*="display: flex"],
        .prompt-adjustment-page[style*="display:flex"] {
            transform: translateX(0);
            pointer-events: auto;
        }

        /* 确保所有页面在未激活时完全隐藏，避免横屏时漏出 */
        .settings-page:not(.active),
        #css-settings-page:not(.active),
        .friend-settings-page:not(.active),
        .dialogue-page:not(.active),
        .app-slide-page:not([style*="display: flex"]):not([style*="display:flex"]) {
            transform: translateX(100%) !important;
            pointer-events: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
        }

        /* 关闭动画中的页面保持可见，避免 not(.active) 规则吞掉侧滑过渡 */
        .app-full-page.closing,
        .settings-page.closing,
        #css-settings-page.closing,
        .friend-settings-page.closing,
        .api-journal-page.closing,
        .app-slide-page.closing {
            transform: translateX(100%) !important;
            pointer-events: none !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

        html.ua-android-opera .app-full-page.closing,
        html.ua-android-opera .settings-page.closing,
        html.ua-android-opera #css-settings-page.closing,
        html.ua-android-opera .friend-settings-page.closing,
        html.ua-android-opera .api-journal-page.closing,
        html.ua-android-opera .app-slide-page.closing {
            left: 100% !important;
        }

        .prompt-adjustment-header {
            height: var(--header-height);
            background-color: #fff;
            display: flex;
            align-items: center;
            padding: 0 15px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            flex-shrink: 0;
            padding-top: var(--safe-inset-top);
        }

        .prompt-adjustment-back {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #333;
            cursor: pointer;
        }

        .prompt-adjustment-title {
            flex: 1;
            text-align: center;
            font-size: 17px;
            font-weight: 600;
            color: #333;
        }

        .prompt-adjustment-header-actions {
            display: flex;
            align-items: center;
        }

        .prompt-header-btn {
            padding: 6px 14px;
            border: none;
            background: #576b95;
            color: #fff;
            font-size: 14px;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .prompt-header-btn:hover {
            background: #4a5d82;
        }

        .prompt-header-btn:active {
            background: #3d4e6f;
        }

        .prompt-adjustment-body {
            flex: 1;
            min-height: 0; /* iOS Safari flex滚动必需 */
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            touch-action: pan-y;
            padding: 18px;
            display: flex;
            flex-direction: column;
            gap: 18px;
        }
        
        .prompt-preset-strip {
            background: #fff;
            border-radius: 14px;
            border: 1px solid #e0e7ff;
            padding: 12px 12px;
            box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .prompt-preset-strip-main {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 10px;
        }
        
        .prompt-preset-strip-title {
            font-size: 14px;
            font-weight: 600;
            color: #111827;
        }
        
        .prompt-preset-strip-desc {
            font-size: 12px;
            color: #6b7280;
            flex: 1;
            text-align: right;
            line-height: 1.5;
        }
        
        .prompt-preset-buttons {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .prompt-preset-item {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 12px;
            border: 1px solid #e5e7eb;
            background: #f9fafb;
            cursor: pointer;
        }
        
        .prompt-preset-item:active {
            background: #e5e7eb;
        }
        
        .prompt-preset-item-main {
            flex: 1;
            min-width: 0;
        }
        
        .prompt-preset-item-title-row {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .prompt-preset-item-title {
            font-size: 14px;
            font-weight: 600;
            color: #111827;
        }
        
        .prompt-preset-item-tag {
            font-size: 11px;
            color: #6b7280;
            background: #e5e7eb;
            border-radius: 999px;
            padding: 0 8px;
            line-height: 1.6;
        }
        
        .prompt-preset-item-desc {
            font-size: 12px;
            color: #6b7280;
            margin-top: 2px;
            line-height: 1.5;
        }
        
        .prompt-preset-item-meta {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 4px;
            flex-shrink: 0;
        }
        
        .prompt-preset-active-badge {
            padding: 2px 6px;
            border-radius: 999px;
            background: #4f46e5;
            color: #fff;
            font-size: 10px;
        }
        
        .prompt-preset-item.is-active {
            border-color: #4f46e5;
            box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.06);
        }
        
        .prompt-preset-add-btn {
            align-self: flex-start;
            margin-top: 6px;
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px dashed #c4b5fd;
            background: #f5f3ff;
            color: #4f46e5;
            font-size: 12px;
            cursor: pointer;
        }
        
        .prompt-section {
            background: #fff;
            border-radius: 12px;
            border: 1px solid #e0e0e0;
            padding: 14px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        
        .prompt-section--secondary {
            background: #fafafa;
            border-color: #e5e5e5;
        }
        
        .prompt-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .prompt-group-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            min-height: 48px;
            cursor: pointer;
            user-select: none;
            background: #eef2ff;
            border-radius: 12px;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }
        
        .prompt-group-title {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: none;
            color: #374151;
        }
        
        .prompt-group-arrow {
            font-size: 11px;
            color: #9ca3af;
            transition: transform 0.25s ease;
        }
        
        .prompt-group.collapsed .prompt-group-arrow {
            transform: rotate(-90deg);
        }
        
        .prompt-group-content {
            display: flex;
            flex-direction: column;
            gap: 12px;
            transition: max-height 0.25s ease, opacity 0.25s ease;
            max-height: 1200px;
            opacity: 1;
        }
        
        .prompt-group.collapsed .prompt-group-content {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
        }
        
        .prompt-section-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--ui-text-primary);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    
    .regex-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 8px;
    }

    .regex-item {
        display: flex;
        gap: 4px;
        background: var(--ui-bg-card);
        padding: 4px;
        border-radius: 4px;
        border: 1px solid var(--ui-border);
    }

    .regex-input-group {
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: 2px;
    }

    .regex-input {
        font-family: monospace;
        font-size: 12px;
        padding: 4px;
        border: 1px solid var(--ui-border);
        border-radius: 4px;
        background: var(--ui-bg-main);
        color: var(--ui-text-primary);
    }

    .regex-flags {
        width: 40px;
        text-align: center;
    }

    .regex-remove-btn {
        width: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ff4d4f;
        cursor: pointer;
    }

    .add-regex-btn {
        width: 100%;
        padding: 6px;
        background: var(--ui-bg-card);
        border: 1px dashed var(--ui-border);
        border-radius: 4px;
        color: var(--ui-text-secondary);
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .add-regex-btn:hover {
        background: var(--ui-bg-main);
        color: var(--ui-primary);
        border-color: var(--ui-primary);
    }

    .prompt-order-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .prompt-order-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            border: 1px solid #eee;
            border-radius: 10px;
            background: #fafafa;
        }

        .prompt-order-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .prompt-order-title {
            font-size: 13px;
            font-weight: 600;
            color: #333;
        }

        .prompt-order-desc {
            font-size: 12px;
            color: #888;
        }

        .prompt-order-actions {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .prompt-order-item.is-disabled {
            opacity: 0.55;
        }

        .prompt-order-switch {
            width: 44px;
            height: 24px;
        }

        .prompt-order-switch .slider:before {
            width: 16px;
            height: 16px;
            left: 4px;
            bottom: 4px;
        }

        .prompt-order-switch input:checked + .slider:before {
            transform: translateX(20px);
        }

        .order-move-btn {
            width: 30px;
            height: 30px;
            border-radius: 8px;
            border: 1px solid #ddd;
            background: #fff;
            color: #555;
            font-size: 14px;
            cursor: pointer;
        }

        .order-move-btn:active {
            background: #f0f0f0;
        }

        .prompt-link {
            font-size: 12px;
            color: #1a73e8;
            text-decoration: none;
            padding: 4px 6px;
            border-radius: 6px;
        }

        .prompt-link:active {
            background: #eef2ff;
        }

        .prompt-system-input {
            width: 100%;
            min-height: 120px;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            padding: 12px;
            font-size: 13px;
            line-height: 1.6;
            resize: vertical;
            outline: none;
            color: #333;
        }

        .prompt-subtemplate-grid {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .prompt-subtemplate-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .prompt-subtemplate-label {
            font-size: 13px;
            color: #444;
        }

        .prompt-subtemplate-input {
            width: 100%;
            min-height: 72px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 9px;
            font-size: 13px;
            line-height: 1.6;
            resize: vertical;
            outline: none;
            color: #333;
            font-family: monospace;
        }

        .prompt-actions {
            display: flex;
            gap: 15px;
            margin-top: auto;
            padding-bottom: 20px;
        }

        .prompt-btn {
            flex: 1;
            height: 44px;
            border-radius: 8px;
            border: none;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .prompt-btn.primary {
            background-color: #b86b9a;
            color: #fff;
        }

        .prompt-btn.secondary {
            background-color: #e0e0e0;
            color: #333;
        }
        
        .variable-desc {
            width: 100%;
            font-size: 13px;
            color: #666;
            margin-bottom: 6px;
            line-height: 1.6;
        }

        /* 世界书相关样式 */
        .friend-settings-icon.worldbook { background-color: #673ab7; }
        .friend-settings-icon.summary { background-color: #5b8def; }

        .summary-card-track {
            display: flex;
            flex-direction: column;
            gap: 12px;
            overflow-y: auto;
            max-height: 300px;
            scroll-snap-type: y mandatory;
            -webkit-overflow-scrolling: touch;
        }

        .summary-card {
            flex: 0 0 auto;
            background: #fff;
            border-radius: 12px;
            padding: 12px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
            scroll-snap-align: start;
        }

        .summary-card.empty {
            flex: 1 0 100%;
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            box-shadow: none;
            background: transparent;
            border: 1px dashed #e0e0e0;
        }

        .summary-card-time {
            font-size: 11px;
            color: #999;
            margin-bottom: 6px;
        }

        .summary-card-text {
            font-size: 13px;
            color: #444;
            line-height: 1.6;
            white-space: pre-wrap;
            word-break: break-all;
        }

        .summary-add-action {
            width: 44px;
            height: 44px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #667085;
            background: #f1f1f1;
            flex-shrink: 0;
            cursor: pointer;
        }

        .summary-add-action:active {
            background: #e6e6e6;
        }

        /* 绑定列表页样式 */
        .worldbook-list-container {
            padding: 15px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .worldbook-empty-state {
            text-align: center;
            color: #999;
            padding: 40px 20px;
            font-size: 14px;
        }

        .worldbook-entry-card {
            background: #fff;
            border-radius: 12px;
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 5px rgba(0,0,0,0.03);
            position: relative;
        }

        .worldbook-entry-info {
            flex: 1;
        }

        .worldbook-entry-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin-bottom: 6px;
        }

        .worldbook-entry-tags {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        .worldbook-tag {
            font-size: 11px;
            color: #673ab7;
            background: rgba(103, 58, 183, 0.1);
            padding: 2px 6px;
            border-radius: 4px;
        }

        .worldbook-delete-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ff4d4f;
            background: rgba(255, 77, 79, 0.1);
            border-radius: 50%;
            cursor: pointer;
            margin-left: 10px;
        }

        .worldbook-add-fab {
            position: fixed;
            bottom: 30px;
            right: 20px;
            width: 56px;
            height: 56px;
            background: #673ab7;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            box-shadow: 0 4px 12px rgba(103, 58, 183, 0.4);
            cursor: pointer;
            z-index: var(--z-base, 100);
            transition: transform 0.2s;
        }

        .worldbook-add-fab:active {
            transform: scale(0.95);
        }

        /* 选择页样式 */
        .worldbook-category-header {
            padding: 12px 15px;
            background: #f0f2f5;
            font-size: 13px;
            color: #666;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }

        .worldbook-category-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .worldbook-category-checkbox {
            width: 18px;
            height: 18px;
            border: 2px solid #ddd;
            border-radius: 4px;
            appearance: none;
            -webkit-appearance: none;
            background: #fff;
            position: relative;
            margin: 0;
        }

        .worldbook-category-checkbox:checked {
            background: #673ab7;
            border-color: #673ab7;
        }

        .worldbook-category-checkbox:checked::after {
            content: '✓';
            position: absolute;
            color: #fff;
            font-size: 12px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .worldbook-category-header .count {
            font-weight: normal;
            background: #ddd;
            padding: 1px 6px;
            border-radius: 10px;
            font-size: 11px;
        }

        .worldbook-category-content {
            display: none;
        }

        .worldbook-category-content.expanded {
            display: block;
        }

        .worldbook-selector-item {
            padding: 15px;
            background: #fff;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .worldbook-selector-checkbox {
            width: 20px;
            height: 20px;
            border: 2px solid #ddd;
            border-radius: 4px;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .worldbook-selector-item.selected .worldbook-selector-checkbox {
            background: #673ab7;
            border-color: #673ab7;
        }

        .worldbook-selector-item.selected .worldbook-selector-checkbox::after {
            content: '✓';
            color: white;
            font-size: 12px;
        }

        .worldbook-selector-item.disabled {
            opacity: 0.5;
            pointer-events: none;
        }

        .worldbook-selector-actions {
            position: sticky;
            bottom: 0;
            padding: 12px 15px calc(12px + env(safe-area-inset-bottom));
            background: #f8f5f2;
            border-top: 1px solid rgba(0, 0, 0, 0.05);
        }

        .worldbook-selector-save-btn {
            width: 100%;
            height: 44px;
            border: none;
            border-radius: 12px;
            background: #673ab7;
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
        }

        /* 模式切换浮窗样式 */
        .mode-switch-popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: var(--z-overlay); /* 将模式切换浮窗 z-index 统一为 --z-overlay */
            display: none;
        }

        .mode-switch-popup.show {
            display: block;
        }

        .mode-switch-content {
            position: absolute;
            top: calc(60px + var(--safe-inset-top, env(safe-area-inset-top)));
            right: 15px;
            width: 280px;
            background: rgba(255, 255, 255, 0.98);
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            padding: 16px;
            animation: modeSlideIn 0.3s ease;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        html.ua-android-opera .mode-switch-content {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            background: rgba(255, 255, 255, 0.99) !important;
        }

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

        .mode-switch-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 12px;
            padding-bottom: 10px;
            border-bottom: 1px solid #e8e4e0;
        }

        .mode-option {
            display: flex;
            align-items: center;
            padding: 14px 12px;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s;
            margin-bottom: 8px;
            border: 2px solid transparent;
        }

        .mode-option:hover {
            background-color: #f8f5f2;
        }

        .mode-option.active {
            background-color: rgba(163, 177, 198, 0.1);
            border-color: #a3b1c6;
        }

        .mode-option-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-right: 12px;
        }

        #modeNoApi .mode-option-icon {
            background-color: #a3b1c6;
            color: white;
        }

        #modeApi .mode-option-icon {
            background-color: #b1c2a9;
            color: white;
        }

        .mode-option-text {
            flex: 1;
            min-width: 0;
        }

        .mode-option-name {
            font-size: 15px;
            font-weight: 600;
            color: #333;
            margin-bottom: 2px;
        }

        .mode-option-desc {
            font-size: 12px;
            color: #888;
        }

        .mode-option-check {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            background-color: #a3b1c6;
            font-size: 12px;
        }

        .mode-switch-mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: -1;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .mode-switch-popup.show .mode-switch-mask {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        #mode-switch-btn {
            color: #a3b1c6;
        }

        #mode-switch-btn.api-active {
            color: #b1c2a9;
        }

        /* 消息高亮样式 */
        .message-highlight {
            animation: messageHighlight 2s ease-out;
        }

        @keyframes messageHighlight {
            0% {
                background-color: rgba(163, 177, 198, 0.3);
            }
            100% {
                background-color: transparent;
            }
        }

        .message-highlight .message-content {
            box-shadow: 0 0 0 2px rgba(163, 177, 198, 0.5), 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        /* ========== API Journal Page Styles ========== */
        .api-journal-page {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #f5f5f5;
            /* 移除 z-index，改用 DOM 顺序进行单页堆叠 */
            display: none;
            flex-direction: column;
            overflow: hidden;
        }
        .api-journal-page.active {
            display: flex;
        }
        .api-journal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 20px;
            background: white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            flex-shrink: 0;
        }
        .api-journal-back {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #666;
        }
        .api-journal-title {
            font-size: 17px;
            font-weight: 600;
            color: #333;
        }
        .api-journal-export {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #666;
        }
        .api-journal-summary {
            display: flex;
            justify-content: space-around;
            padding: 15px;
            background: white;
            margin: 10px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            flex-shrink: 0;
        }
        .api-journal-summary-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }
        .api-journal-summary-item .summary-label {
            font-size: 12px;
            color: #999;
        }
        .api-journal-summary-item .summary-value {
            font-size: 18px;
            font-weight: 600;
            color: #333;
        }
        .api-journal-list {
            flex: 1;
            overflow-y: auto;
            padding: 0 10px 10px;
        }
        .api-journal-date-group {
            margin-bottom: 15px;
        }
        .api-journal-date-header {
            font-size: 13px;
            color: #999;
            padding: 10px 5px 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .api-journal-date-header .date-count {
            font-size: 12px;
            color: #bbb;
        }
        .api-journal-card {
            background: white;
            border-radius: 12px;
            padding: 12px 15px;
            margin-bottom: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }
        .api-journal-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }
        .api-journal-card-time {
            font-size: 13px;
            color: #666;
        }
        .api-journal-card-purpose {
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 10px;
            background: #e8f4fd;
            color: #1976d2;
        }
        .api-journal-card-purpose.chat { background: #e3f2fd; color: #1565c0; }
        .api-journal-card-purpose.summary { background: #f3e5f5; color: #7b1fa2; }
        .api-journal-card-purpose.milestone { background: #fff3e0; color: #e65100; }
        .api-journal-card-purpose.repair { background: #fce4ec; color: #c2185b; }
        .api-journal-card-purpose.test { background: #e8f5e9; color: #2e7d32; }
        .api-journal-card-purpose.admin { background: #f5f5f5; color: #616161; }
        .api-journal-card-purpose.other { background: #fafafa; color: #9e9e9e; }
        .api-journal-card-api {
            font-size: 12px;
            color: #999;
            margin-bottom: 8px;
        }
        .api-journal-card-tokens {
            display: flex;
            gap: 15px;
            font-size: 13px;
        }
        .api-journal-card-tokens span {
            color: #666;
        }
        .api-journal-card-tokens .token-total {
            color: #333;
            font-weight: 600;
        }
        .api-journal-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid #f0f0f0;
            font-size: 12px;
            color: #999;
        }
        .api-journal-card-status {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .api-journal-card-status.success { color: #4caf50; }
        .api-journal-card-status.fail { color: #f44336; }
        .api-journal-card-status i {
            font-size: 10px;
        }
        .api-journal-empty {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #999;
            gap: 15px;
        }
        .api-journal-empty i {
            font-size: 48px;
            color: #ddd;
        }
        .api-journal-load-more {
            padding: 15px;
            text-align: center;
        }
        .api-journal-load-more button {
            padding: 10px 30px;
            background: white;
            border: 1px solid #ddd;
            border-radius: 20px;
            font-size: 14px;
            color: #666;
            cursor: pointer;
        }
        .api-journal-daily-subtotal {
            background: #fafafa;
            padding: 8px 15px;
            margin: 5px 0 10px;
            border-radius: 8px;
            font-size: 12px;
            color: #666;
            display: flex;
            justify-content: space-between;
        }
        
        /* Dark mode for API Journal */
        [data-theme="dark"] .api-journal-page {
            background: #121212;
        }
        [data-theme="dark"] .api-journal-header {
            background: #1e1e1e;
        }
        [data-theme="dark"] .api-journal-title {
            color: #fff;
        }
        [data-theme="dark"] .api-journal-back,
        [data-theme="dark"] .api-journal-export {
            color: #aaa;
        }
        [data-theme="dark"] .api-journal-summary {
            background: #1e1e1e;
        }
        [data-theme="dark"] .api-journal-summary-item .summary-label {
            color: #888;
        }
        [data-theme="dark"] .api-journal-summary-item .summary-value {
            color: #fff;
        }
        [data-theme="dark"] .api-journal-card {
            background: #1e1e1e;
        }
        [data-theme="dark"] .api-journal-card-time {
            color: #aaa;
        }
        [data-theme="dark"] .api-journal-card-api {
            color: #888;
        }
        [data-theme="dark"] .api-journal-card-tokens span {
            color: #aaa;
        }
        [data-theme="dark"] .api-journal-card-tokens .token-total {
            color: #fff;
        }
        [data-theme="dark"] .api-journal-card-footer {
            border-top-color: #333;
            color: #888;
        }
        [data-theme="dark"] .api-journal-empty {
            color: #888;
        }
        [data-theme="dark"] .api-journal-empty i {
            color: #444;
        }
        [data-theme="dark"] .api-journal-load-more button {
            background: #1e1e1e;
            border-color: #444;
            color: #aaa;
        }
        [data-theme="dark"] .api-journal-daily-subtotal {
            background: #252525;
            color: #aaa;
        }
        [data-theme="dark"] .api-journal-card-purpose { background: rgba(255,255,255,0.1); color: #aaa; }
        [data-theme="dark"] .api-journal-card-purpose.chat { background: rgba(21, 101, 192, 0.3); color: #90caf9; }
        [data-theme="dark"] .api-journal-card-purpose.summary { background: rgba(123, 31, 162, 0.3); color: #ce93d8; }
        [data-theme="dark"] .api-journal-card-purpose.milestone { background: rgba(230, 81, 0, 0.3); color: #ffab91; }
        [data-theme="dark"] .api-journal-card-purpose.repair { background: rgba(194, 24, 91, 0.3); color: #f48fb1; }
        [data-theme="dark"] .api-journal-card-purpose.test { background: rgba(46, 125, 50, 0.3); color: #a5d6a7; }
        [data-theme="dark"] .api-journal-card-purpose.admin { background: rgba(97, 97, 97, 0.3); color: #bdbdbd; }
        [data-theme="dark"] .api-journal-card-purpose.other { background: rgba(158, 158, 158, 0.3); color: #bdbdbd; }
        
        /* Touch optimization for API Journal */
        .api-journal-back,
        .api-journal-export {
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            min-width: 44px;
            min-height: 44px;
        }
        .api-journal-back:active,
        .api-journal-export:active {
            opacity: 0.6;
        }
        .api-journal-card {
            -webkit-tap-highlight-color: transparent;
            touch-action: pan-y;
        }
        .api-journal-load-more button {
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            min-height: 44px;
        }
        .api-journal-load-more button:active {
            opacity: 0.7;
            background: #f5f5f5;
        }
        [data-theme="dark"] .api-journal-load-more button:active {
            background: #333;
        }

        /* ==================== 主动消息设置样式 ==================== */

        .friend-settings-icon.active-message {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .unit-btn {
            transition: all 0.2s ease;
        }

        .unit-btn.active {
            background: #667eea !important;
            color: #fff !important;
            border-color: #667eea !important;
        }

        .unit-btn:hover:not(.active) {
            background: #f5f5f5;
        }

        [data-theme="dark"] .unit-btn {
            background: #2a2a2a;
            border-color: #444;
            color: #ddd;
        }

        [data-theme="dark"] .unit-btn.active {
            background: #764ba2 !important;
            border-color: #764ba2 !important;
        }

        [data-theme="dark"] .unit-btn:hover:not(.active) {
            background: #333;
        }

        .text-input {
            box-sizing: border-box;
        }