:root {
    /* 定义常用变量，方便统一修改 */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --header-base-height: 15px;
    --footer-base-height: 20px;
    --keyboard-height: 0px;
    --bg-color: #F5F5F5;
    --card-bg: #ffffff;
    --tab-active-bg: #333333;
    --tab-active-text: #ffffff;
    --accent-color: #666666;
    --custom-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", sans-serif;
    
    /* --- 第1层：基础内容层 (1-99) --- */
    --z-base: 1;
    --z-content: 10;
    --z-card: 20;
    
    /* --- 第2层：浮动元素层 (100-199) --- */
    --z-sticky: 100;
    --z-dropdown: 150;
    
    /* --- 第3层：覆盖层 (200-999) --- */
    --z-overlay: 200;
    --z-header: 250;
    
    /* --- 第4层：二级页面层 (1000-1999) --- */
    --z-page-secondary: 1000;
    
    /* --- 第5层：聊天室专用层 (2000-2999) --- */
    --z-chatroom: 2000;
    --z-chatroom-header: 2100;
    --z-chatroom-footer: 2200;
    --z-chatroom-panel: 2300;
    
    /* --- 第6层：设置页面层 (3000-3999) --- */
    --z-settings: 3000;
    --z-settings-sub: 3500;
    
    /* --- 第7层：底部弹出层 (4000-4999) --- */
    --z-sheet: 4000;
    --z-sheet-content: 4100;
    
    /* --- 第8层：模态框层 (5000-5999) --- */
    --z-modal-backdrop: 5000;
    --z-modal: 5100;
    --z-modal-dropdown: 5200;
    
    /* --- 第9层：气泡菜单层 (6000-6999) --- */
    --z-popover: 6000;
    
    /* --- 第10层：全局浮层 (7000-7999) --- */
    --z-toast: 7000;
    --z-tooltip: 7500;
    
    /* --- 第11层：音乐/媒体面板 (8000-8999) --- */
    --z-media-backdrop: 8000;
    --z-media-panel: 8100;
    --z-media-dropdown: 8200;
    
    /* --- 第12层：最高优先级 (9000+) --- */
    --z-critical: 9000;
    --z-max: 9999;
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    -webkit-tap-highlight-color: transparent;
    outline: none; 
    font-family: inherit;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh; 
    overflow: hidden; 
    background-color: var(--bg-color); 
    -webkit-text-size-adjust: 100%;
    -webkit-user-select: none;
    user-select: none;
    overscroll-behavior: none;
}

.phone-frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color); 
    z-index: var(--z-base);
}

body.has-wallpaper .phone-frame {
    background-color: transparent !important;
}

body.has-wallpaper {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; 
}

.scroll-y {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.scroll-y::-webkit-scrollbar { display: none; }

.safe-pt {
    padding-top: calc(15px + var(--safe-top)) !important;
}
.safe-pb {
    padding-bottom: calc(10px + var(--safe-bottom)) !important;
}

/* --- 消息气泡基础 --- */
.msg-bubble { 
    padding: 10px 14px;
    font-size: 15px; 
    line-height: 1.5; 
    position: relative; 
    word-wrap: break-word; 
    max-width: 100%;
}

.message-row.other .msg-bubble { 
    background: #fff; 
    color: #333;
    border-radius: 18px 18px 18px 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.message-row.self .msg-bubble { 
    background: #e0e0e0;
    color: #000; 
    border-radius: 18px 18px 4px 18px;
    box-shadow: none !important; 
    outline: none !important;
    border: none !important;
}

.msg-time { 
    font-size: 10px; 
    color: #999; 
    margin: 0 6px;
    align-self: flex-end;
    white-space: nowrap;
}

/* 主屏幕内容容器 */
.screen-content {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-top: var(--safe-top); 
    padding-bottom: calc(90px + var(--safe-bottom)); 
}
.screen-content::-webkit-scrollbar { display: none; }

.profile-section {
    width: 90%; 
    /* 核心修改：负边距 -60px，让玻璃卡片往上叠在图片上 */
    margin: -60px auto 10px auto; 
    position: relative;
    z-index: var(--z-content);
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.avatar { 
    width: 80px; 
    height: 80px; 
    border-radius: 50%; 
    /* 头像边框保持半透明白 */
    border: 3px solid rgba(255, 255, 255, 0.8); 
    object-fit: cover; 
    
    position: absolute; 
    top: -40px; /* 头像位置 */
    left: 50%; 
    transform: translateX(-50%);
    
    z-index: var(--z-card); 
    /* 投影改为弥散光 */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); 
    background: #ddd; 
    cursor: pointer; 
}

.info-card { 
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    width: 100%; 
    border-radius: 24px; 
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 45px; 
    padding-bottom: 15px; 
    text-align: center;
    box-shadow: none;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

.kaomoji { 
    font-size: 17px; 
    font-weight: 800; 
    /* 纯深色文字，无白色描边 */
    color: #1a1a1a; 
    margin: 4px 0; 
    cursor: pointer; 
    padding: 2px 10px; 
    border-radius: 10px;
    letter-spacing: 0.5px;
    /* 已删除 text-shadow */
} 
.kaomoji:active { opacity: 0.6; }

.text-group { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin-top: 2px; 
}

.editable-text { 
    cursor: pointer; 
    padding: 2px 5px; 
    border-radius: 4px; 
} 
.editable-text:active { background: rgba(255,255,255,0.2); }

.handle { 
    font-size: 11px; 
    font-weight: 600;
    color: #333; 
    margin-bottom: 2px; 
    /* 已删除 text-shadow */
}

.bio { 
    font-size: 12px; 
    color: #222; 
    font-weight: 500;
    margin-bottom: 2px; 
    width: 90%;
    line-height: 1.3;
}

.location { 
    font-size: 11px; 
    color: #999; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 4px; 
    cursor: pointer; 
    padding: 2px 5px; 
    border-radius: 4px;
} 
.location:active { background: #f0f0f0; }

.section-title { 
    font-size: 12px; 
    font-weight: 600; 
    color: #333; 
    width: 92%; 
    text-align: center; 
    z-index: var(--z-base); 
    flex-shrink: 0; 
    cursor: pointer; 
    margin: 15px auto 8px auto; 
}

/* Layout */
.main-layout-row { 
    width: 100%; 
    padding: 0 4%; 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    flex-shrink: 0; 
    margin-bottom: 10px; 
}

.kawaii-wrapper { 
    width: 47%; 
    min-width: 140px; 
    position: relative; 
    z-index: var(--z-base); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin-top: 5px; 
}

.avatar-row { 
    display: flex; 
    justify-content: center; 
    gap: 12px; 
    margin-bottom: 12px; 
    z-index: var(--z-card); 
    position: relative; 
    top: 5px; 
}

.kawaii-avatar { 
    width: 46px; 
    height: 46px; 
    border-radius: 50%; 
    object-fit: cover; 
    background: #ddd; 
    cursor: pointer; 
}

.kawaii-card { 
    background: #F3F3F3; 
    width: 100%; 
    border-radius: 20px; 
    padding: 8px 5px 10px 5px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    position: relative; 
}

.kawaii-text { 
    font-size: 10px; 
    color: #666; 
    font-weight: 500; 
    margin-bottom: 6px; 
    cursor: pointer; 
    white-space: nowrap; 
    transform: scale(0.95); 
}

.kawaii-white-box { 
    background: #ffffff; 
    width: 94%; 
    border-radius: 14px; 
    padding: 8px 4px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

.k-time-text { font-size: 20px; font-weight: 400; color: #333; }
.k-date-text { font-size: 9px; color: #999; margin-bottom: 6px; }
.k-icons-row { display: flex; gap: 8px; justify-content: center; }

.k-icon-btn { 
    width: 28px; 
    height: 28px; 
    border-radius: 50%; 
    background-color: #F3F3F3; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #555; 
}
.k-icon-btn i { font-size: 12px; }
.bluetooth-icon { font-size: 15.5px !important; }

.kawaii-bottom-text { 
    font-size: 14px; 
    font-weight: 700; 
    color: #333; 
    margin-top: 18px; 
    cursor: pointer; 
    text-align: center; 
    width: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.right-column { 
    width: 47%; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    padding-top: 0; 
}

.right-apps-row { 
    display: flex; 
    justify-content: space-between; 
    width: 100%; 
    padding: 0 5px; 
}

.mini-app-item { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 5px; 
    cursor: pointer; 
}

.mini-app-icon { 
    width: 55px; 
    height: 55px; 
    background: #fff; 
    border-radius: 18px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.03); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 20px; 
    color: #ccc; 
    overflow: hidden; 
}
.mini-app-icon img { width: 100%; height: 100%; object-fit: cover; }
.mini-app-label { font-size: 10px; color: #666; }

.camera-widget { 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    position: relative; 
}

.captcha-top { 
    background: #fff; 
    border: 1px solid #dcdcdc; 
    border-radius: 4px; 
    padding: 4px 8px; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    width: 80%; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
    margin-bottom: 8px; 
    z-index: calc(var(--z-base) + 1);
}

.captcha-checkbox { 
    width: 16px; 
    height: 16px; 
    border: 2px solid #c1c1c1; 
    border-radius: 2px; 
    background: #fff; 
}

.captcha-label { 
    font-size: 11px; 
    font-weight: 500; 
    color: #333; 
    cursor: pointer; 
}

.captcha-body { 
    background: #fff; 
    border: 1px solid #dcdcdc; 
    padding: 8px; 
    border-radius: 6px; 
    width: 100%; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
    z-index: var(--z-base);
    position: relative; 
}

.captcha-body::before { 
    content: ''; 
    position: absolute; 
    top: -6px; 
    left: 20px; 
    width: 10px; 
    height: 10px; 
    background: #fff; 
    border-left: 1px solid #dcdcdc; 
    border-top: 1px solid #dcdcdc; 
    transform: rotate(45deg); 
    z-index: calc(var(--z-base) + 1);
}

.captcha-input-row { display: flex; gap: 5px; height: 24px; }

.captcha-input { 
    flex: 1; 
    border: 1px solid #dcdcdc; 
    font-size: 10px; 
    padding: 0 5px; 
    color: #999; 
    display: flex; 
    align-items: center; 
    cursor: pointer; 
}

.captcha-verify-btn { 
    background: #555; 
    color: #fff; 
    font-size: 10px; 
    font-weight: bold; 
    padding: 0 8px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 2px; 
}

.captcha-content-row { display: flex; gap: 5px; height: 80px; }

.captcha-img-container { 
    flex: 1; 
    border: 1px solid #eee; 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
}

.captcha-img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    filter: none; 
}

.captcha-icons-col { 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 
    gap: 8px; 
    width: 16px; 
    padding: 2px 0; 
}

.c-icon { font-size: 14px; color: #999; text-align: center; }

.search-pill-container { 
    width: 100%; 
    display: flex; 
    justify-content: center; 
    margin-top: 20px; 
}

.search-pill { 
    background: #fff; 
    padding: 6px 18px; 
    border-radius: 30px; 
    font-size: 12px; 
    color: #888; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 6px; 
    border: none; 
    width: auto; 
}

/* 主屏幕 Dock 栏 */
.dock-capsule {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 420px;
    height: 70px;
    bottom: 25px;
    margin-bottom: 0 !important;
    
    /* 【修改点】大幅降低不透明度 (0.85 -> 0.45)，让它更通透 */
    background-color: rgba(255, 255, 255, 0.45);
    
    /* 【修改点】增加 saturate(150%) 提升通透感，类似 iOS 原生效果 */
    backdrop-filter: blur(25px) saturate(150%);
    -webkit-backdrop-filter: blur(25px) saturate(150%);
    
    /* 【新增】增加一个极细的半透明边框，让它不那么“肉”，增加精致感 */
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    border-radius: 35px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    z-index: var(--z-sticky);
    
    /* 【修改点】阴影扩散范围变大，颜色变淡，显得更浮空 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.dock-btn { 
    width: 45px; 
    height: 45px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    transition: transform 0.1s; 
}
.dock-btn:active { transform: scale(0.9); }
.dock-btn img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    border-radius: 12px; 
}

.popover-menu { 
    position: absolute; 
    background: #fff; 
    border-radius: 12px; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.15); 
    padding: 6px; 
    display: none; 
    flex-direction: column; 
    width: 130px; 
    z-index: var(--z-max) !important; 
    animation: fadeIn 0.2s ease-out; 
}

@keyframes fadeIn { 
    from { opacity: 0; transform: scale(0.95); } 
    to { opacity: 1; transform: scale(1); } 
}

.menu-item { 
    padding: 10px; 
    font-size: 13px; 
    color: #333; 
    border-radius: 8px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}
.menu-item:hover { background-color: #f5f5f7; }

@media screen and (max-height: 750px) { 
    .info-card { padding-top: 40px; } 
    .section-title { margin-top: 10px; } 
}

/* App 覆盖层、聊天室、设置页面 - 统一基础样式 */
.app-overlay, 
.chat-room,
.api-settings-page,
.chat-settings-page,
.wb-settings-page {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: var(--bg-color);
    z-index: var(--z-settings);
    display: flex;
    flex-direction: column;
    overflow: hidden; 
    overscroll-behavior: none;
}

.app-overlay {
    top: 0 !important; 
    left: 0 !important; 
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    z-index: var(--z-overlay);
    padding-top: 0 !important;
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    visibility: hidden;
}

.app-overlay.active { 
    opacity: 1; 
    visibility: visible; 
    pointer-events: auto; 
    transform: translateX(0); 
}

.chat-container { 
    width: 100%; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    position: relative; 
    overflow: hidden; 
    padding-top: 0;
    box-sizing: border-box;
    padding-bottom: calc(55px + env(safe-area-inset-bottom, 0px));
}

.tab-view {
    display: none;
    flex-direction: column;
    flex: 1;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: calc(10px + var(--safe-top)) !important; 
    padding-bottom: calc(60px + var(--safe-bottom)) !important; 
    overscroll-behavior-y: contain;
}

.tab-view.active { 
    display: flex; 
}

/* 微信头部 */
.wechat-top-bar {
    padding-top: calc(5px + var(--safe-top));
}
.wechat-header-title { font-size: 16px; font-weight: 600; color: #000; }
.wechat-plus-btn { 
    position: absolute; 
    right: 20px; 
    top: 50%; 
    transform: translateY(-50%); 
    font-size: 18px; 
    color: #333; 
    cursor: pointer; 
    padding-top: 5px; 
}

.wechat-search-container { 
    width: 100%; 
    padding: 5px 0; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    gap: 12px; 
    background: transparent; 
    position: relative; 
    flex-shrink: 0; 
}

.search-row-wrapper { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    cursor: pointer; 
    width: 100%; 
}

.search-circle-btn { 
    width: 20px; 
    height: 20px; 
    background-color: #333333; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}
.search-circle-btn i { color: #fff; font-size: 10px; }

.search-text-label { 
    font-size: 15px; 
    font-weight: 600; 
    color: #333; 
    position: relative; 
    line-height: 1.2; 
}
.search-text-label::after { 
    content: ''; 
    position: absolute; 
    bottom: -4px; 
    left: 0; 
    width: 100%; 
    height: 3px; 
    background-color: #333333; 
    border-radius: 2px; 
}

.wechat-pill-tabs { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 2px; 
    background-color: #fff; 
    padding: 4px; 
    border-radius: 50px; 
    width: fit-content; 
    margin: 0 auto; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.03); 
}

.wechat-tab-btn { 
    padding: 6px 14px; 
    font-size: 13px; 
    font-weight: 600; 
    color: #888; 
    border-radius: 40px; 
    cursor: pointer; 
    white-space: nowrap; 
    transition: all 0.2s; 
    background: transparent; 
}
.wechat-tab-btn.active { 
    background-color: #e0e0e0; 
    color: #333333; 
}

.chat-dropdown { 
    position: absolute; 
    background: #fff; 
    border-radius: 10px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); 
    padding: 5px; 
    display: none; 
    flex-direction: column; 
    width: 120px; 
    z-index: var(--z-modal-dropdown); 
    top: 50px; 
    right: 15px; 
}

.chat-dropdown-item { 
    padding: 10px 12px; 
    font-size: 13px; 
    color: #333; 
    border-radius: 8px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}
.chat-dropdown-item:hover { background-color: #f5f5f7; }

.chat-list-container { flex: 1; width: 100%; padding: 10px 20px 0 20px; }

.pinned-section, .normal-section { 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    background: #fff; 
    border-radius: 18px; 
    padding: 4px 0; 
    margin-bottom: 20px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    overflow: hidden;
}

.chat-item-wrapper { 
    position: relative; 
    width: 100%; 
    height: 72px; 
    overflow: hidden; 
    background-color: #fff; 
    border-radius: 0 !important; 
    flex-shrink: 0; 
}

.chat-item-content { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: #fff; 
    z-index: var(--z-content); 
    display: flex; 
    align-items: center; 
    padding: 0 15px; 
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); 
    cursor: pointer; 
    box-shadow: 0 0 0 1px #fff; 
}
.chat-item-content:active { background-color: #f9f9f9; }

.chat-actions-right { 
    position: absolute; 
    top: 0; 
    right: 8px; 
    height: 100%; 
    display: flex; 
    z-index: var(--z-base);
}

.action-btn { 
    font-size: 13px; 
    color: #fff; 
    width: 70px; 
    cursor: pointer; 
    font-weight: 500; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 100%; 
    transition: background 0.2s; 
}
.btn-cancel { background-color: #999999; } 
.btn-pin { background-color: #666666; } 
.btn-del { background-color: #333333; } 

.chat-item-avatar { 
    width: 48px; 
    height: 48px; 
    border-radius: 10px; 
    object-fit: cover; 
    margin-right: 12px; 
    flex-shrink: 0; 
}

.chat-item-text { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    overflow: hidden; 
    pointer-events: none; 
}

.chat-item-top { 
    display: flex; 
    justify-content: space-between; 
    align-items: baseline; 
    margin-bottom: 4px; 
}

.chat-item-name { font-size: 15px; font-weight: 600; color: #000; }
.chat-item-time { font-size: 11px; color: #999; }
.chat-item-msg { 
    font-size: 13px; 
    color: #888; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    min-height: 18px; 
}
.chat-item-msg img {
    display: none !important;
}

/* --- 我页面样式 --- */
#view-me { position: relative; }

.me-header-container { 
    position: relative; 
    width: 92%; 
    margin: 10px auto 20px auto; 
    background: #fff; 
    border-radius: 25px; 
    height: 180px; 
    display: flex; 
    flex-direction: column; 
    flex-shrink: 0; 
}

.me-banner { 
    width: 100%; 
    height: 120px; 
    border-radius: 25px 25px 0 0; 
    object-fit: cover; 
    cursor: pointer; 
}

.me-avatar { 
    position: absolute; 
    bottom: 15px; 
    left: 25px; 
    width: 80px; 
    height: 80px; 
    border-radius: 50%; 
    border: 4px solid #fff; 
    object-fit: cover; 
    cursor: pointer; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
    z-index: var(--z-content); 
}

.me-slogan { 
    position: absolute; 
    top: 15px; 
    right: 15px; 
    background: rgba(255,255,255,0.9); 
    padding: 4px 10px; 
    border-radius: 15px; 
    font-size: 12px; 
    font-weight: bold; 
    color: #333; 
    font-family: 'Courier New', Courier, monospace; 
    cursor: pointer; 
}

.me-list-container { width: 92%; margin: 0 auto; flex-shrink: 0; }

.me-card-list { 
    background: #fff; 
    border-radius: 25px; 
    padding: 5px 0; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.02); 
    display: flex; 
    flex-direction: column; 
}

.me-list-item { 
    background: transparent; 
    padding: 16px 25px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    font-size: 15px; 
    color: #333; 
    font-weight: 500; 
    cursor: pointer; 
    border-bottom: 1px solid #f7f7f7; 
}
.me-list-item:last-child { border-bottom: none; }
.me-list-item:active { background-color: #f9f9f9; }

.me-item-left { display: flex; align-items: center; gap: 12px; }
.me-item-icon { font-size: 16px; color: #666; width: 24px; text-align: center; }
.me-arrow { color: #ddd; font-size: 12px; }

/* 字体设置页面样式 */
.font-preview-box {
    background: #fff;
    color: #000;
    padding: 30px 20px;
    border-radius: 15px;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid #eee;
    transition: all 0.3s;
}
.font-text-cn { font-size: 18px; font-weight: bold; word-break: break-all; }
.font-text-en { font-size: 14px; color: #666; word-break: break-all; }

.font-scheme-item {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    border: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.2s;
}
.font-scheme-item:active { transform: scale(0.98); background: #f9f9f9; }

.font-scheme-left { display: flex; align-items: center; gap: 15px; }

.font-preview-char { 
    font-size: 24px; 
    width: 50px; 
    height: 50px; 
    background: #f5f5f5; 
    border-radius: 8px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #333;
}

.font-scheme-info { display: flex; flex-direction: column; }
.font-scheme-name { font-size: 15px; font-weight: 600; color: #333; }
.font-scheme-src { 
    font-size: 11px; 
    color: #999; 
    max-width: 150px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.font-del-btn { padding: 8px; color: #ccc; }
.font-del-btn:hover { color: #ff3b30; }

/* 设置页面 */
.api-settings-page { 
    z-index: var(--z-settings);
    transform: translateX(100%); 
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); 
    padding-top: env(safe-area-inset-top, 0px); 
    box-sizing: border-box;
}
.api-settings-page.active { transform: translateX(0); }

.api-header { 
    height: 50px; 
    background: transparent; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0 15px; 
    color: #000; 
    margin-top: 10px; 
    flex-shrink: 0; 
}

.api-back-btn { font-size: 20px; cursor: pointer; width: 40px; }
.api-title { font-size: 17px; font-weight: 600; }

.api-content { 
    flex: 1; 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: env(safe-area-inset-bottom, 10px);
}

.api-input-group { display: flex; flex-direction: column; gap: 8px; }
.api-input-group label { font-size: 13px; color: #666; font-weight: 500; margin-left: 5px; }

.api-input { 
    width: 100%; 
    padding: 14px; 
    border: 1px solid #ddd; 
    border-radius: 12px; 
    font-size: 15px; 
    background: #fff; 
    outline: none; 
    transition: border 0.2s; 
}
.api-input:focus { border-color: #333; }

.api-row-flex { display: flex; gap: 10px; align-items: center; }

.api-btn-small { 
    padding: 14px 20px; 
    background-color: #EDEDED !important;
    color: #AAAAAA !important;
    border-radius: 12px; 
    font-size: 14px; 
    font-weight: 600; 
    cursor: pointer; 
    border: none !important; 
    white-space: nowrap; 
}

.dock-preview-wrapper { 
    background: #e0e0e0; 
    padding: 20px; 
    border-radius: 20px; 
    display: flex; 
    justify-content: center; 
    margin-bottom: 10px; 
}

.dock-preview { 
    width: 90%; 
    height: 65px; 
    background-color: rgba(255, 255, 255, 0.9); 
    border-radius: 40px; 
    display: flex; 
    justify-content: space-evenly; 
    align-items: center; 
}
.dock-preview .dock-btn img { border-radius: 12px; }

.app-preview-wrapper { 
    display: flex; 
    gap: 25px; 
    justify-content: center; 
    margin-bottom: 10px; 
    padding: 10px; 
    background: #ffffff; 
    border-radius: 15px; 
}

.app-preview-icon { 
    width: 55px; 
    height: 55px; 
    background: #fff; 
    border-radius: 18px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 20px; 
    color: #ccc; 
    overflow: hidden; 
}
.app-preview-icon img { width: 100%; height: 100%; object-fit: cover; }

.edit-grid { 
    display: grid !important; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
    width: 100%;
    margin-bottom: 25px;
}

.edit-card { 
    background: #fff; 
    padding: 12px; 
    border-radius: 15px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 8px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.03); 
}

.edit-card-title { font-size: 13px; font-weight: 600; color: #333; }
.edit-btns-row { display: flex; gap: 5px; width: 100%; }

.edit-btn { 
    flex: 1; 
    padding: 6px 0; 
    font-size: 10px; 
    background: #f2f2f7; 
    border-radius: 8px; 
    text-align: center; 
    cursor: pointer; 
    border: none; 
    color: #333; 
}

#wallpaperPreviewBox, 
#wcWallpaperPreviewBox,
#chatRoomWallpaperPreviewBox {
    width: 100px !important;       
    height: 180px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
    border: 2px solid #fff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    background-color: #f2f2f2;
    margin: 0 auto 5px auto !important;
}

#wallpaperPreviewImg, 
#wcWallpaperPreviewImg,
#chatRoomWallpaperPreviewImg {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; 
    display: block;
    background-color: transparent !important;
}

/* Generic Modals */
.placeholder-page { 
    width: 100%; 
    height: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    color: #ccc; 
    font-size: 18px; 
    font-weight: bold; 
}

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

 .modal-overlay { 
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.5); 
    z-index: var(--z-modal-backdrop);
    display: none; 
    justify-content: center; 
    align-items: flex-end;
    opacity: 0; 
    transition: opacity 0.3s; 
    backdrop-filter: blur(5px); 
    -webkit-backdrop-filter: blur(5px); 
}

.modal-overlay.show { opacity: 1; }

.modal-box { 
    background: #fff; 
    width: 100%; 
    max-height: 85vh; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
    border-radius: 20px 20px 0 0; 
    padding: 25px 25px 20px 25px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    box-shadow: 0 -10px 40px rgba(0,0,0,0.1); 
    transform: translateY(100%); 
    transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1); 
}
.modal-overlay.show .modal-box { transform: translateY(0); }

.modal-title { font-size: 18px; font-weight: 700; margin-bottom: 20px; color: #333; }

.modal-avatar { 
    width: 80px; 
    height: 80px; 
    border-radius: 50%; 
    border: 3px solid #f0f0f0; 
    object-fit: cover; 
    margin-bottom: 10px; 
    cursor: pointer; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
}

.modal-avatar-hint { font-size: 11px; color: #999; margin-bottom: 20px; }
.modal-input-group { width: 100%; margin-bottom: 15px; }
.modal-label { font-size: 13px; color: #666; margin-bottom: 6px; display: block; font-weight: 500; }

.modal-input { 
    width: 100%; 
    padding: 12px; 
    border: 1px solid #eee; 
    border-radius: 12px; 
    font-size: 15px; 
    background: #f9f9f9; 
    outline: none; 
    transition: border 0.2s; 
}
.modal-input:focus { border-color: #333; background: #fff; }
textarea.modal-input { height: 80px; resize: none; }

.world-book-selector { 
    width: 100%; 
    padding: 12px; 
    border: 1px solid #eee; 
    border-radius: 12px; 
    font-size: 14px; 
    background: #fff; 
    color: #888; 
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    transition: background 0.2s, border-color 0.2s; /* 新增过渡 */
}
.world-book-selector:active {
    background-color: #f5f5f5; /* 点击时变灰，增加反馈感 */
    border-color: #ccc;
}
.world-book-selector.has-value { color: #333; font-weight: 500; } /* 加重已有值的颜色 */

.modal-btns { width: 100%; display: flex; gap: 10px; margin-top: 10px; }

.modal-btn { 
    flex: 1; 
    padding: 14px; 
    border-radius: 14px; 
    font-size: 15px; 
    font-weight: 600; 
    cursor: pointer; 
    text-align: center; 
    border: none; 
}
.btn-cancel-modal { background: #f2f2f7; color: #333; }
.btn-confirm-modal { background: #000; color: #fff; }

.wb-modal-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.3); 
    z-index: var(--z-popover);
    display: none; 
    justify-content: center; 
    align-items: center; 
}

.wb-modal-box { 
    background: #fff; 
    width: 80%; 
    max-height: 60vh; 
    border-radius: 15px; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
    box-shadow: 0 5px 25px rgba(0,0,0,0.2); 
}

.wb-header { padding: 15px; border-bottom: 1px solid #eee; font-weight: bold; text-align: center; }
.wb-list { flex: 1; overflow-y: auto; padding: 10px; }

.wb-item { 
    padding: 10px; 
    border-bottom: 1px solid #f5f5f5; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    cursor: pointer; 
}

.wb-checkbox { width: 18px; height: 18px; accent-color: #000; }
.wb-confirm-btn { padding: 12px; background: #000; color: #fff; text-align: center; cursor: pointer; font-weight: bold; }

/* 聊天室 */
.chat-room {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-top: env(safe-area-inset-top) !important;
    z-index: var(--z-chatroom) !important;
    background-color: var(--bg-color) !important;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow: hidden !important;
    overscroll-behavior: none;
}

.chat-room.active { 
    transform: translateX(0); 
}

.room-header { 
    height: 50px; 
    background: transparent; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0 15px; 
    font-size: 16px; 
    font-weight: 600; 
    color: #000; 
    z-index: var(--z-content); 
    margin-top: 10px; 
    flex-shrink: 0; 
}

.room-back-btn { font-size: 20px; cursor: pointer; width: 40px; }
.room-header-right { display: flex; gap: 15px; width: 60px; justify-content: flex-end; }
.room-header-icon { font-size: 18px; cursor: pointer; }

/* 聊天室内消息列表 */
.room-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding: 15px 5px;
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 0) 100%);
    border-top-right-radius: 20px;
    border-top-left-radius: 0;
    position: relative;
    z-index: var(--z-content);
    box-shadow: 2px -2px 10px rgba(0,0,0,0.02);
}

.date-divider { 
    align-self: center; 
    background: rgba(0,0,0,0.1); 
    color: #fff; 
    padding: 4px 10px; 
    border-radius: 12px; 
    font-size: 11px; 
    margin: 10px 0; 
}

/* Miu气泡样式 */
.Miu-miu {
    display: flex;
    width: 100%;
    padding: 0 10px;
    margin-bottom: 2px !important; 
    overflow: visible !important;
    align-items: center !important;
}

.Miu-miu .bubble-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 75%;
    position: relative;
    overflow: visible !important;
    margin-top: 6px !important; 
}

.Miu-miu.user .content,
.Miu-miu.ai .content {
    --top-left: 18px;
    --top-right: 18px;
    --bottom-right: 18px;
    --bottom-left: 18px;
    padding: 6px 11px !important; 
    font-size: 12px !important;    
    line-height: 1.3;
    position: relative;
    word-wrap: break-word;
    z-index: var(--z-base);
    white-space: pre-wrap;
}

.Miu-miu.user {
    justify-content: flex-end;
}

.Miu-miu.user .content {
    background-color: #929292;
    color: #fff;
    border-radius: var(--top-left) var(--top-right) var(--bottom-right) var(--bottom-left);
    box-shadow: none;
}

.Miu-miu.ai {
    justify-content: flex-start;
}

.Miu-miu.ai .content {
    background-color: #fff;
    color: #000;
    border-radius: var(--top-left) var(--top-right) var(--bottom-right) var(--bottom-left);
    box-shadow: none;
}

.Miu-miu.user .content::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 15px;
    bottom: -15px;
    right: 6px;
    background-color: #929292;
    clip-path: path("M 15,13 Q 12,0 2,2 Q 7,3 5,22 L 13,12");
    z-index: var(--z-base);
    transform: rotate(-2deg) scale(-1);
    transform-origin: top right;
    box-sizing: border-box;
}

.Miu-miu.ai .content::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 15px;
    bottom: -15px;
    left: -7px;
    background-color: #fff;
    clip-path: path("M 11,16 Q 10,0 1,1 Q 6.6,3 1,19 L 19,16");
    z-index: var(--z-base);
    transform: rotate(19deg) scaleY(-1); 
    transform-origin: top left;
    box-sizing: border-box;
}

.Miu-miu .avatar-img {
    width: 35px;
    height: 35px;
    border-radius: 12px;
    margin-top: 0;
    flex-shrink: 0;
}
.Miu-miu.ai .avatar-img { margin-right: 8px; }
.Miu-miu.user .avatar-img { margin-left: 8px; }

.Miu-miu .time {
    font-size: 10px;
    color: #999;
    margin-bottom: 2px;
    white-space: nowrap;
}

.Miu-miu .content.voice-bubble {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    min-width: 100px;
    padding-left: 14px !important;
    padding-right: 14px !important;
    width: auto !important;
    display: inline-flex !important;
}

.Miu-miu .content.voice-bubble .voice-icon,
.Miu-miu .content.voice-bubble .voice-duration {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.Miu-miu.ai .content.voice-bubble .voice-icon,
.Miu-miu.ai .content.voice-bubble .voice-duration {
    color: #ffffff;
}

.Miu-miu.user .content.voice-bubble .voice-icon,
.Miu-miu.user .content.voice-bubble .voice-duration {
    color: #ffffff;
}

/* 顶部图片卡片 */
.bubble-image-wrapper {
    position: relative;
    width: 90% !important;
    min-height: 140px;
    height: calc(175px + env(safe-area-inset-top, 0px));
    margin-top: calc(0px - env(safe-area-inset-top, 0px)) !important;
    margin-right: auto !important;
    margin-bottom: 15px !important;
    margin-left: auto !important;
    border-radius: 25px 25px 0 0;
    overflow: hidden; 
    transform: translateZ(0); 
    z-index: var(--z-base);
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: env(safe-area-inset-top, 0px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.bubble-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 25px 25px 0 0;
}

/* 聊天设置页修复 */
.chat-settings-page { 
    z-index: var(--z-settings);
    transform: translateX(100%); 
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); 
    padding-top: env(safe-area-inset-top, 0px); 
    box-sizing: border-box;
}
.chat-settings-page.active { transform: translateX(0); }

.settings-header { 
    height: 50px; 
    background: transparent; 
    display: flex; 
    align-items: center; 
    padding: 0 15px; 
    font-size: 17px; 
    font-weight: 600; 
    color: #000; 
    margin-top: 10px; 
    flex-shrink: 0; 
}

.settings-back-btn { font-size: 20px; margin-right: 15px; cursor: pointer; }

.settings-content { 
    padding: 20px; 
    flex: 1; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding-bottom: env(safe-area-inset-bottom, 10px);
}

.settings-profile-row { 
    display: flex; 
    justify-content: space-around; 
    width: 100%; 
    margin-bottom: 30px; 
}

.settings-profile-col { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    width: 45%; 
}

.settings-avatar { 
    width: 80px; 
    height: 80px; 
    border-radius: 20px; 
    object-fit: cover; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
    margin-bottom: 10px; 
    cursor: pointer; 
    flex-shrink: 0;
}

.settings-real-name-display { font-size: 14px; font-weight: bold; color: #666; margin-bottom: 5px; }

.settings-display-name { 
    font-size: 16px; 
    font-weight: bold; 
    color: #000; 
    cursor: pointer; 
    padding: 4px 8px; 
    border-radius: 8px; 
    background: rgba(0,0,0,0.03); 
}

.settings-menu { width: 100%; background: #fff; border-radius: 15px; overflow: hidden; }

.settings-card-box {
    background: #fff;
    width: 100%;
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.settings-label {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    margin-left: 5px;
}

.settings-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #eee;
    border-radius: 12px;
    font-size: 14px;
    background: #f9f9f9;
    outline: none;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.code-font {
    font-size: 12px;
    color: #333;
    background: #f5f5f5;
    min-height: 150px;
}

/* --- 聊天设置页：按钮并排布局容器 (新增) --- */
.settings-btns-row {
    display: flex;           /* 启用 Flex 布局 */
    gap: 15px;               /* 按钮之间的间距 */
    width: 100%;             /* 占满宽度 */
    margin-top: 20px;        /* 顶部间距 */
}

/* --- 保存按钮 (修改：找到原有的 .save-float-btn 进行替换或覆盖) --- */
.save-float-btn {
    flex: 1;                 /* 关键：让按钮占据一半宽度 */
    background: #000;
    color: #fff;
    padding: 12px;
    border-radius: 12px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    margin-top: 0;           /* 去掉原有的顶部间距，由容器控制 */
    border: none;            /* 确保无边框 */
}
.save-float-btn:active {
    opacity: 0.8;
}

/* --- 清除聊天按钮 (新增) --- */
.clear-chat-btn {
    flex: 1;                 /* 关键：让按钮占据一半宽度 */
    background: #FFF2F2;     /* 浅红色背景，表示警示 */
    color: #FF3B30;          /* 红色文字 */
    border: 1px solid #FFD6D6; /* 浅红色边框 */
    padding: 12px;
    border-radius: 12px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.clear-chat-btn:active {
    background: #FFE0E0;     /* 点击时的深色反馈 */
    transform: scale(0.98);  /* 点击微缩效果 */
}

.settings-spacer { height: 10px; }

.settings-item { 
    padding: 15px; 
    border-bottom: 1px solid #f0f0f0; 
    display: flex; 
    justify-content: space-between; 
    cursor: pointer; 
    font-size: 15px; 
}
.settings-item:last-child { border-bottom: none; }
.settings-item.danger { color: #ff3b30; }

/* World Book 设置页 */
.wb-settings-page { 
    z-index: var(--z-settings);
    transform: translateX(100%); 
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); 
    padding-top: env(safe-area-inset-top, 0px); 
    box-sizing: border-box;
}
.wb-settings-page.active { transform: translateX(0); }

.wb-main-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 15px 20px; 
    flex-shrink: 0; 
}

.wb-main-title { font-size: 22px; font-weight: 700; color: #000; }
.wb-add-icon { font-size: 20px; cursor: pointer; padding: 5px; }

.wb-filter-section { padding: 10px 20px; flex-shrink: 0; }

.wb-filter-card { 
    background: #fff; 
    border-radius: 18px; 
    padding: 15px; 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.02); 
}

.wb-filter-label { font-size: 12px; font-weight: 600; color: #666; }

.wb-filter-trigger { 
    border: 1px solid #eee; 
    border-radius: 12px; 
    padding: 12px; 
    font-size: 14px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    cursor: pointer; 
    background-color: #f9f9f9; 
    color: #333; 
    font-weight: 500; 
}
.wb-filter-trigger:active { background-color: #f0f0f0; }

.wb-content-area { flex: 1; overflow-y: auto; padding: 10px 20px 50px 20px; }

.wb-group-card { 
    background: #fff; 
    border-radius: 18px; 
    padding: 5px 0; 
    margin-bottom: 15px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.02); 
    overflow: hidden; 
}

.wb-group-title { 
    padding: 10px 15px; 
    font-size: 12px; 
    font-weight: 600; 
    color: #999; 
    border-bottom: 1px solid #f9f9f9; 
}

.wb-book-item { 
    padding: 15px; 
    border-bottom: 1px solid #f7f7f7; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    font-size: 15px; 
}
.wb-book-item:last-child { border-bottom: none; }

.sheet-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.4); 
    z-index: var(--z-sheet); 
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.3s; 
    backdrop-filter: blur(2px); 
    -webkit-backdrop-filter: blur(2px); 
}
.sheet-overlay.active { opacity: 1; pointer-events: auto; }

.bottom-sheet { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    background: #fff; 
    border-radius: 20px 20px 0 0; 
    transform: translateY(100%); 
    transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1); 
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
}
.sheet-overlay.active .bottom-sheet { transform: translateY(0); }

.sheet-header { 
    padding: 15px; 
    text-align: center; 
    font-size: 14px; 
    color: #999; 
    font-weight: 500; 
    border-bottom: 1px solid #eee; 
}

.sheet-option { 
    padding: 10px 20px; 
    font-size: 16px; 
    color: #333; 
    text-align: center; 
    border-bottom: none; 
    cursor: pointer; 
}
.sheet-option:active { background-color: #f5f5f5; }

.sheet-option.selected { 
    color: #000; 
    font-weight: bold; 
    position: relative; 
}
.sheet-option.selected::after { 
    content: '✓'; 
    position: absolute; 
    right: 40px; 
    color: #000; 
}

.sheet-cancel { margin-top: 8px; border-top: 6px solid #f5f5f5; font-weight: bold; }

.wb-create-modal { 
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(255,255,255,0.6); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px); 
    z-index: var(--z-settings-sub);
    display: none; 
    flex-direction: column; 
    align-items: center; 
    padding-top: calc(50px + env(safe-area-inset-top, 0px)); 
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
}
.wb-create-modal.show { display: flex; }

.wb-create-card { 
    width: 90%; 
    max-width: 400px; 
    background: #fff; 
    border-radius: 25px; 
    padding: 25px 20px; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.1); 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    margin-bottom: 20px; 
    border: 1px solid #eee; 
}

.wb-create-title { font-size: 18px; font-weight: 700; text-align: center; }

.wb-field { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.wb-field-label { font-size: 12px; font-weight: 600; color: #888; }

.wb-field-input { 
    width: 100%; 
    padding: 12px; 
    border: 1px solid #eee; 
    border-radius: 12px; 
    font-size: 14px; 
    outline: none; 
    background: #f9f9f9; 
    box-sizing: border-box; 
}

.wb-row-space { display: flex; justify-content: space-between; align-items: center; }

.wb-toggle { 
    width: 40px; 
    height: 24px; 
    background: #eee; 
    border-radius: 20px; 
    position: relative; 
    cursor: pointer; 
    transition: background 0.2s; 
}
.wb-toggle.checked { background: #000; }

.wb-toggle-knob { 
    width: 20px; 
    height: 20px; 
    background: #fff; 
    border-radius: 50%; 
    position: absolute; 
    top: 2px; 
    left: 2px; 
    transition: transform 0.2s; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
}
.wb-toggle.checked .wb-toggle-knob { transform: translateX(16px); }

.wb-manage-link { font-size: 12px; color: #007aff; cursor: pointer; text-decoration: none; }
.wb-sub-btn { font-size: 12px; padding: 5px 10px; background: #f0f0f0; border-radius: 8px; cursor: pointer; }

.wb-entries-list { display: flex; flex-direction: column; gap: 15px; margin-top: 10px; width: 100%; }

.wb-entry-row { 
    display: flex; 
    flex-direction: column; 
    gap: 5px; 
    background: #f9f9f9; 
    padding: 6px; 
    border-radius: 8px; 
    position: relative; 
    margin-bottom: 5px; 
}

.wb-entry-input { 
    width: 100%; 
    padding: 10px; 
    border: 1px solid #e0e0e0; 
    border-radius: 8px; 
    font-size: 13px; 
    background: #fff; 
    box-sizing: border-box; 
}
textarea.wb-entry-input { height: 80px; resize: none; font-family: inherit; }

.wb-del-entry { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    color: #ccc; 
    cursor: pointer; 
    padding: 5px; 
}

.wb-entry-add-btn { 
    text-align: center; 
    padding: 10px; 
    background: #f9f9f9; 
    border-radius: 12px; 
    font-size: 13px; 
    color: #666; 
    cursor: pointer; 
    margin-top: 10px; 
    font-weight: 600; 
}

.wb-save-btn { 
    width: 100%; 
    padding: 15px; 
    background: #000; 
    color: #fff; 
    border-radius: 15px; 
    font-weight: 600; 
    text-align: center; 
    cursor: pointer; 
    margin-top: 10px; 
}

.wb-cancel-btn { 
    width: 100%; 
    padding: 15px; 
    background: transparent; 
    color: #999; 
    text-align: center; 
    cursor: pointer; 
    font-size: 14px; 
}

.wb-popover { 
    position: absolute; 
    top: 60px; 
    right: 20px; 
    background: #fff; 
    border-radius: 12px; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.15); 
    display: none; 
    flex-direction: column; 
    width: 150px; 
    z-index: var(--z-page-secondary); 
}

.wb-pop-item { 
    padding: 12px 15px; 
    font-size: 14px; 
    border-bottom: 1px solid #f7f7f7; 
    cursor: pointer; 
}
.wb-pop-item:last-child { border-bottom: none; }

.wb-mini-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.3); 
    z-index: var(--z-sheet-content); 
    display: none; 
    justify-content: center; 
    align-items: center; 
}

.wb-mini-box { 
    background: #fff; 
    width: 80%; 
    border-radius: 15px; 
    padding: 15px; 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    box-shadow: 0 5px 30px rgba(0,0,0,0.2); 
}

.wb-mini-list { max-height: 200px; overflow-y: auto; }

.wb-mini-item { 
    padding: 10px; 
    border-bottom: 1px solid #eee; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.wb-mini-del { color: red; font-size: 12px; cursor: pointer; }

@keyframes shakeMode {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(0.2deg); }
    75% { transform: rotate(-0.2deg); }
    100% { transform: rotate(0deg); }
}

.wb-group-card.shaking {
    animation: shakeMode 0.25s infinite linear;
    transform: scale(0.95);
    margin: 10px 5px;
    overflow: visible !important;
    border: 1px solid #ddd;
    cursor: default;
}

.wb-del-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    background: #ff3b30;
    border-radius: 50%;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    cursor: pointer;
}
.wb-del-badge::before { content: '×'; font-weight: bold; margin-top: -2px; }

/* 记忆设置卡片样式 */
.mem-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    width: 100%;
}

.mem-input-small {
    width: 60px;
    padding: 6px;
    border: 1px solid #eee;
    border-radius: 8px;
    text-align: center;
    background: #f9f9f9;
    font-size: 13px;
    outline: none;
    font-family: inherit;
}

.plump-btn {
    background: #ffffff;
    color: #333;
    border: 1px solid #e0e0e0;
    border-bottom: 4px solid #dcdcdc;
    border-radius: 15px;
    padding: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 5px;
}
.plump-btn:active {
    transform: translateY(2px);
    border-bottom: 2px solid #dcdcdc;
}

.mem-bank-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5px;
    cursor: pointer;
    margin-top: 5px;
    border-radius: 8px;
    transition: background 0.2s;
}
.mem-bank-header:active { background: #f5f5f5; }

.mem-bank-arrow {
    transition: transform 0.3s;
    font-size: 12px;
    color: #ccc;
}
.mem-bank-header.open .mem-bank-arrow { transform: rotate(90deg); }

#memSummaryContainer {
    display: none;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    padding: 5px;
    background: #f8f8fa;
    border-radius: 12px;
}

.mem-summary-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mem-card-date { font-size: 10px; color: #999; }

.mem-card-textarea {
    width: 100%;
    border: none;
    font-size: 13px;
    color: #333;
    resize: vertical;
    min-height: 60px;
    outline: none;
    font-family: inherit;
    background: transparent;
}

.mem-card-actions {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #f9f9f9;
    padding-top: 5px;
}

.mem-del-btn-text { font-size: 11px; color: #ff3b30; cursor: pointer; padding: 2px 5px; }

.mem-stats-bar {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
    font-size: 11px;
    color: #999;
    font-family: monospace;
}

.mem-stat-item { display: flex; align-items: center; gap: 4px; }

/* 编辑按钮样式 (与删除按钮类似但颜色不同) */
.mem-edit-btn-text { 
    font-size: 11px; 
    color: #007aff; /* 蓝色 */
    cursor: pointer; 
    padding: 2px 8px; 
    margin-right: 5px;
    border-right: 1px solid #eee; /* 加个分割线 */
}

/* 优化文本框在“不可编辑”状态下的显示 */
.mem-card-textarea:disabled {
    background: transparent;
    color: #666;
    border: none;
    cursor: default;
    opacity: 1; /* iOS Safari 修正 */
    -webkit-text-fill-color: #666;
}

/* 激活编辑时的文本框样式 */
.mem-card-textarea:not(:disabled) {
    background: #fff;
    border: 1px solid #007aff; /* 编辑时显示蓝框 */
    color: #000;
    box-shadow: 0 0 5px rgba(0,122,255,0.2);
}

/* 聊天室头部 */
.folder-header-container {
    height: 54px;
    display: flex;
    align-items: flex-end;
    position: relative;
    z-index: var(--z-card);
    padding-left: 0;
    margin-bottom: -1px; 
}

.folder-tab {
    position: relative;
    background-color: #fff;
    width: auto;
    min-width: 120px;
    height: 44px;
    border-radius: 16px 16px 0 0; 
    display: flex;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
    gap: 8px;
    box-shadow: -2px -4px 10px rgba(0,0,0,0.05); 
    z-index: var(--z-card);
}

.folder-curve-connector {
    position: absolute;
    bottom: 0;
    right: -20px;
    width: 20px;
    height: 20px;
    background: transparent;
    box-shadow: -10px 0 0 0 #fff;
    border-bottom-left-radius: 16px;
    z-index: var(--z-card);
}

.folder-back-btn {
    font-family: Arial, sans-serif;
    font-size: 26px;
    color: #666;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
    margin-top: -2px;
    padding: 5px;
}

.folder-title {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    white-space: nowrap;
}

.folder-right-space {
    flex: 1;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 15px;
    padding-bottom: 10px;
}

.folder-menu-btn {
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08); 
    cursor: pointer;
    color: #333;
    font-size: 14px;
}

/* 颜色选择器 */
.color-selector-wrapper {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 5px 2px;
    margin-bottom: 15px;
    scrollbar-width: none;
}
.color-selector-wrapper::-webkit-scrollbar { display: none; }

.color-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.2s;
    min-width: 40px;
}
.color-option:active { transform: scale(0.9); }

.color-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.c-half-left { position: absolute; left: 0; top: 0; width: 50%; height: 100%; }
.c-half-right { position: absolute; right: 0; top: 0; width: 50%; height: 100%; }

.color-name { font-size: 11px; color: #666; font-weight: 500; }

/* 气泡预览 */
.img-preview-wrapper {
    position: relative;
    width: 100%;
    overflow: visible; 
    border-radius: 12px;
    margin-top: 10px;
}

.img-preview-bg {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 12px; 
    pointer-events: none; 
}

.preview-overlay-box {
    position: absolute;
    max-width: 80%; 
    display: flex;
    flex-direction: column;
    z-index: var(--z-content);
}

.preview-pos-left {
    top: 50%;
    left: 15px;    
    align-items: flex-start;
}

.preview-pos-right {
    top: 70%;
    right: 15px;   
    align-items: flex-end;
}

.img-preview-wrapper .Miu-miu {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    display: flex !important;
    align-items: flex-start !important;
    overflow: visible !important;
    margin-bottom: 5px !important;
}

.img-preview-wrapper .Miu-miu .content {
    font-size: 12px;
    padding: 6px 11px;
    white-space: normal;
    min-height: 0;
    line-height: 1.4;
    position: relative !important;
}

.img-preview-wrapper .Miu-miu.user .content::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 15px;
    bottom: -15px !important; 
    right: 6px !important;    
    clip-path: path("M 15,13 Q 12,0 2,2 Q 7,3 5,22 L 13,12"); 
    z-index: var(--z-base);
    transform: rotate(-2deg) scale(-1);
    transform-origin: top right;
    box-sizing: border-box;
}

.img-preview-wrapper .Miu-miu.ai .content::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 15px;
    bottom: -15px !important; 
    left: -7px !important;    
    clip-path: path("M 11,16 Q 10,0 1,1 Q 6.6,3 1,19 L 19,16");
    z-index: var(--z-base);
    transform: rotate(19deg) scaleY(-1);
    transform-origin: top left;
    box-sizing: border-box;
}

.img-preview-wrapper .avatar-img {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    object-fit: cover;
    display: block !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    flex-shrink: 0;
    margin-top: 0 !important;
}

.img-preview-wrapper .Miu-miu.ai .avatar-img { margin-right: 8px !important; }
.img-preview-wrapper .Miu-miu.user .avatar-img { margin-left: 8px !important; }

.bubble-preview-container .Miu-miu { margin-bottom: 0 !important; }

/* 预设管理器 */
.preset-manager-toggle {
    margin-top: 15px;
    background: #fff;
    border: 1px solid #eee;
    padding: 12px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    font-weight: 600;
    transition: background 0.2s;
}
.preset-manager-toggle:active { background: #f9f9f9; }

.preset-manager-body {
    display: none;
    background: #f8f8f8;
    margin-top: 5px;
    border-radius: 12px;
    padding: 15px;
    flex-direction: column;
    gap: 12px;
    animation: fadeIn 0.3s ease-out;
    border: 1px solid #eee;
}

.preset-select-row select {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ddd;
    outline: none;
    background: #fff;
    font-size: 13px;
    color: #333;
    height: 40px;
}

.preset-btn-row {
    display: flex;
    gap: 10px;
    width: 100%;
}

.preset-btn {
    flex: 1;
    padding: 12px 0;
    border-radius: 8px;
    border: none;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    text-align: center;
    transition: opacity 0.2s;
}
.preset-btn:active { opacity: 0.8; }
.btn-save-new { background-color: #EFEFEF; }
.btn-update   { background-color: #EFEFEF; }
.btn-delete   { background-color: #EFEFEF; }

.preset-hint {
    font-size: 11px;
    color: #999;
    text-align: center;
    margin-top: 5px;
}

/* 聊天室底部输入栏 */
.room-footer {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: #fff;
    z-index: var(--z-chatroom-footer) !important;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 10px 15px;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    border-top: 0.5px solid #eee;
    gap: 10px;
    transition: bottom 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.room-footer.keyboard-open {
    bottom: var(--keyboard-height, 0px);
}

.room-footer.tools-active {
    bottom: 0 !important;
}

#plusIcon { transition: transform 0.3s; }
.room-footer.tools-active #plusIcon { 
    transform: rotate(45deg); 
    color: #333;
}

.footer-btn-side {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    cursor: pointer;
}
.footer-btn-side:active { background: #f5f5f5; }

.msg-input {
    flex: 1;
    min-width: 0;
    background: #f2f2f2;
    border: none;
    border-radius: 20px;
    padding: 10px 15px;
    font-size: 15px;
    color: #333;
    outline: none;
    min-height: 38px;
    max-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
    word-break: break-all;
    resize: none;
    box-sizing: border-box;
}

/* 液态玻璃悬浮面板 */
.chat-tools-panel {
    position: absolute !important;
    bottom: 80px !important;
    left: 15px !important;
    right: 15px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 400px !important;
    background: rgba(245, 245, 247, 0.65) !important;
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 0.8);
    padding: 15px !important;
    z-index: var(--z-chatroom-header) !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden !important;
}

.chat-tools-panel:has(.sticker-panel.active) {
    height: 350px !important;
    padding: 0 !important;
}

.chat-tools-panel.sticker-mode {
    height: 350px !important;
    padding: 0 !important;
}

.chat-tools-panel.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}

/* --- 工具栏布局 (修正版：一行5个，自动换行) --- */
.tools-grid {
    display: grid !important;
    /* ★★★ 核心：强制一行5列，每个占1份宽度 ★★★ */
    grid-template-columns: repeat(5, 1fr) !important; 
    /* 垂直间距15px，水平间距10px (保持原有疏密感) */
    gap: 15px 10px !important; 
    width: 100%;
    padding: 10px 5px !important;
    overflow: visible !important; /* 不再需要横向滚动 */
    box-sizing: border-box;
}

.tool-item {
    width: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    margin: 0 auto; /* 在各自的格子力居中 */
}

/* 之前添加的隐藏耳机线代码，确认一下还在不在，不在的话加上 */
.vc-wire {
    display: none !important;
}

.tool-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 18px !important;
    background: linear-gradient(145deg, rgba(255,255,255,0.7), rgba(240,240,245,0.4)) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 
        5px 5px 10px rgba(163, 177, 198, 0.15), 
        -5px -5px 10px rgba(255, 255, 255, 0.8),
        inset 2px 2px 4px rgba(255, 255, 255, 0.5) !important;
    color: #666 !important;
    font-size: 20px !important;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.tool-icon-box:active {
    transform: scale(0.92);
    box-shadow: 
        inset 3px 3px 6px rgba(163, 177, 198, 0.15), 
        inset -3px -3px 6px rgba(255, 255, 255, 0.8) !important;
}

.tool-name {
    font-size: 11px;
    color: #888;
    font-weight: 500;
}

/* 表情包面板 */
.sticker-panel {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 350px !important;
    max-height: 350px !important;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.sticker-panel.active {
    display: flex !important;
}

/* 表情包顶部导航栏 */
.sticker-nav-tabs {
    order: 1 !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 15px !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    flex-shrink: 0 !important;
    height: 44px !important;
    z-index: var(--z-content) !important;
}

.sticker-tab-item {
    font-size: 14px;
    color: #666;
    cursor: pointer;
    font-weight: 500;
}
.sticker-tab-item.active {
    color: #000;
    font-weight: 700;
}

/* 表情包头部 */
.sticker-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 40px;
    background: transparent !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    padding: 0 5px !important;
    margin-bottom: 5px;
    flex-shrink: 0;
    z-index: var(--z-content);
    order: 1;
}

.sticker-header-item {
    font-size: 14px;
    color: #333;
    padding: 5px 8px;
    cursor: pointer;
    font-weight: 500;
}

.sticker-header-title {
    font-weight: 700;
    font-size: 15px;
}

/* 表情包滚动区域 */
.sticker-scroll-area {
    order: 2 !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 5px !important;
    position: relative !important;
    padding-bottom: 80px;
}

.sticker-scroll-area::-webkit-scrollbar {
    width: 4px;
}

.sticker-scroll-area::-webkit-scrollbar-track {
    background: transparent;
}

.sticker-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.sticker-scroll-area::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* 表情包网格布局 */
.sticker-grid-layout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px 10px; 
    padding: 10px 5px;
    align-items: start; 
}

/* 表情包单元格 */
.sticker-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* 表情包图片容器 */
.sticker-item-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: rgba(255,255,255,0.4);
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* 表情包图片 */
.sticker-img-content {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 表情包名字 */
.sticker-name {
    font-size: 10px;
    color: #666;
    margin-top: 5px;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 14px; 
    line-height: 14px;
}

/* 表情包选中状态 */
.sticker-select-circle {
    display: none;
    position: absolute;
    top: 5px;
    right: 5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: rgba(0,0,0,0.2);
    z-index: var(--z-content);
}

.sticker-panel.edit-mode .sticker-select-circle {
    display: block;
}

.sticker-select-circle.selected {
    background: #007aff;
    border-color: #007aff;
}
.sticker-select-circle.selected::after {
    content: '✓';
    color: #fff;
    font-size: 10px;
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 底部分类栏 */
.sticker-category-nav {
    order: 3 !important;
    display: flex !important;
    gap: 8px;
    padding: 10px 12px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    border-top: 1px solid rgba(0,0,0,0.05) !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
    background: transparent;
    z-index: var(--z-content);
    max-height: 50px;
    box-sizing: border-box;
}

.sticker-category-nav::-webkit-scrollbar { 
    display: none; 
}

.cat-pill {
    padding: 5px 12px;
    background: #f2f2f7;
    border-radius: 15px;
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

.cat-pill.active {
    background: #000;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.cat-pill.edit-mode {
    position: relative;
    padding-right: 18px;
    display: inline-flex;
    align-items: center;
}

.cat-pill .cat-pill-text {
    white-space: nowrap;
}

.cat-pill .cat-delete-x {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    background: #ff3b30;
    color: #fff;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: var(--z-content);
}

.cat-pill .cat-delete-x:active {
    transform: scale(0.9);
}

/* 编辑模式底部操作栏 */
.sticker-action-bar {
    display: none !important;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    gap: 12px;
    z-index: var(--z-overlay);
}

.sticker-panel.edit-mode .sticker-action-bar {
    display: flex !important;
    animation: popUpBar 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes popUpBar {
    from { transform: translate(-50%, 40px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

.edit-action-btn {
    flex: 1;
    height: 44px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    gap: 6px;
    transition: transform 0.1s;
}
.edit-action-btn:active { transform: scale(0.96); }

.btn-category {
    background: #333;
    color: #fff;
}

.btn-delete-confirm {
    background: #ff3b30;
    color: #fff;
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.3);
}

/* 分类管理弹窗样式 */
.category-popup-box {
    width: 85%;
    max-width: 320px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    animation: zoomIn 0.2s ease-out;
    max-height: 60vh;
}

@keyframes zoomIn { 
    from { transform: scale(0.9); opacity: 0; } 
    to { transform: scale(1); opacity: 1; } 
}

.cat-popup-header { 
    text-align: center; 
    font-weight: 700; 
    font-size: 16px; 
    margin-bottom: 15px; 
    color: #333; 
}

.cat-list-scroll { 
    max-height: 200px; 
    overflow-y: auto; 
    margin-bottom: 15px; 
}

.cat-option-item {
    padding: 12px;
    border-radius: 12px;
    background: #f9f9f9;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
}
.cat-option-item.selected {
    background: #eef6ff;
    border-color: #007aff;
    color: #007aff;
    font-weight: bold;
}

.cat-check { 
    width: 18px; 
    height: 18px; 
    border: 2px solid #ddd; 
    border-radius: 50%; 
}
.cat-option-item.selected .cat-check { 
    border-color: #007aff; 
    background: #007aff; 
}

.new-cat-row { 
    display: flex; 
    gap: 8px; 
    margin-top: 5px; 
    padding-top: 15px; 
    border-top: 1px solid #eee; 
}

.new-cat-input { 
    flex: 1; 
    padding: 10px; 
    border-radius: 10px; 
    border: 1px solid #eee; 
    background: #f5f5f5; 
    outline: none; 
    font-size: 13px;
}

.btn-create-cat { 
    background: #000; 
    color: #fff; 
    padding: 0 15px; 
    border-radius: 10px; 
    font-size: 13px; 
    display: flex; 
    align-items: center; 
    cursor: pointer; 
    font-weight: 600;
}

.cat-popup-footer { 
    display: flex; 
    gap: 10px; 
    margin-top: 15px; 
}

.cat-btn { 
    flex: 1; 
    padding: 12px; 
    border-radius: 12px; 
    text-align: center; 
    font-weight: bold; 
    font-size: 14px; 
    cursor: pointer; 
}
.cat-btn-cancel { background: #f2f2f2; color: #333; }
.cat-btn-confirm { background: #007aff; color: #fff; }

/* 通用二级弹窗遮罩 */
.glass-popup-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: var(--z-critical) !important;
    display: none;
    justify-content: center !important;
    align-items: center !important;
}

.glass-popup-overlay.show {
    display: flex !important;
}

#stickerCategoryOverlay {
    display: none !important;
}

#stickerCategoryOverlay.show {
    display: flex !important;
}

/* 弹窗本体 - 液态风格 */
.glass-popup-box {
    width: 75%;
    max-width: 320px;
    padding: 25px 20px;
    background: rgba(245, 245, 247, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    box-shadow: 
        0 20px 40px rgba(0,0,0,0.1),
        inset 0 1px 1px rgba(255,255,255,0.8);
    display: flex;
    flex-direction: column;
    gap: 15px;
    animation: popupScale 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: var(--z-modal);
}

@keyframes popupScale {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.glass-popup-title {
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.glass-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.glass-input-label {
    font-size: 12px;
    color: #888;
    margin-left: 5px;
}

.glass-input {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.05);
    background: rgba(255,255,255,0.6);
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}

.glass-input:focus {
    background: #fff;
    border-color: rgba(0,0,0,0.1);
}

.glass-btn-row {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.glass-btn {
    flex: 1;
    display: flex !important;
    justify-content: center !important; /* 水平居中 */
    align-items: center !important;     /* 垂直居中 */
    padding: 0 !important;              /* 去掉 padding，靠 flex 居中 */
    height: 44px !important;            /* 固定高度，确保统一 */
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.glass-btn-cancel {
    background: rgba(0,0,0,0.05);
    color: #666;
}

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

/* ★★★ 纯表情包气泡 - 移除背景 ★★★ */
#roomMessages .Miu-miu .content.sticker-only,
.Miu-miu.user .content.sticker-only,
.Miu-miu.ai .content.sticker-only {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

/* 移除小尾巴 */
#roomMessages .Miu-miu.user .content.sticker-only::after,
#roomMessages .Miu-miu.ai .content.sticker-only::before {
    display: none !important;
    content: none !important;
    background: transparent !important;
}

/* 表情包图片大小 */
.chat-sticker-img {
    max-width: 85px !important;
    max-height: 85px !important;
    width: auto !important;
    height: auto !important;
    border-radius: 8px;
    display: block;
}


.msg-action-menu {
    position: absolute; 
    z-index: var(--z-popover);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-radius: 12px; /* 圆角稍微改大一点更圆润 */
    display: none; 

    /* ★★★ 核心修改：宽度改小，间距自然就小了 ★★★ */
    width: 216px;           
    padding: 4px;           
    gap: 0;                 /* 必须是0 */
    
    flex-wrap: wrap;       
    flex-direction: row; 
    align-items: flex-start;
    justify-content: flex-start;
    
    transform-origin: center bottom;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.msg-action-menu.active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

.msg-action-item {
    position: relative;
    
    /* 保持 33.33% 确保一行3个 */
    width: 33.33%; 
    flex-shrink: 0;
    
    /* 上下内边距稍微加大一点，方便手指点击 */
    padding: 8px 0;           
    
    /* 字体稍微改小，适配紧凑布局 */
    font-size: 12px;          
    font-weight: 500;
    border-radius: 8px;       
    
    text-align: center;
    justify-content: center;
    display: flex;
    color: #333; 
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.msg-action-item:active {
    background: rgba(0,0,0,0.06);
}

/* [修改] 竖线分隔符 - 必须隐藏 */
.msg-action-item:not(:last-child)::after {
    display: none; 
 
    content: '';
    position: absolute;
    right: 0;
    top: 25%;    
    height: 50%; 
    width: 1px;
    background: rgba(0,0,0,0.15); 
}

/* 移除之前的图标样式，防止残留 */
.msg-action-icon, .msg-action-text {
    display: contents; 
}

.msg-action-item:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; } 
.msg-action-item:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; } 
/* --- 语音气泡样式 (竖条波纹版) --- */
.voice-inner-container {
    display: inline-flex;
    flex-direction: column;
    cursor: pointer;
}

.voice-main-row {
    display: inline-flex;
    align-items: center; 
    justify-content: center;
    /* 关键：强制设为 row，保证动画永远在左，数字永远在右 */
    flex-direction: row !important; 
}

/* 动画容器 */
.voice-animate-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px; /* 竖条之间的间距 */
    height: 16px;
    flex-shrink: 0;
    margin-right: 6px; /* 动画和数字之间的间距 */
}

/* 竖条样式 */
.voice-line {
    width: 2.8px; 
    background-color: currentColor; 
    border-radius: 2px;
    animation: voice-wave 1s infinite ease-in-out;
    height: 6px; /* 默认静止高度 */
}

/* 4根竖条分别设置延迟，形成波浪感 */
.voice-line:nth-child(1) { animation-delay: 0.1s; }
.voice-line:nth-child(2) { animation-delay: 0.3s; }
.voice-line:nth-child(3) { animation-delay: 0.5s; }
.voice-line:nth-child(4) { animation-delay: 0.2s; }

/* 波纹律动动画 */
@keyframes voice-wave {
    0%, 100% { height: 6px; opacity: 0.6; }
    50% { height: 14px; opacity: 1; }
}

/* 数字时长 */
.voice-duration {
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1;
    opacity: 0.9;
}

/* 隐藏旧图标 */
.voice-icon { display: none !important; }

/* 转文字结果框 (保持不变) */
.voice-trans-result {
    display: none;
    margin-top: 6px;
    padding: 5px 8px;
    background: rgba(0, 0, 0, 0.05); /* 半透明黑，适配各种底色 */
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.4;
    word-break: break-all;
    max-width: 180px;
    text-align: left;
}
.voice-trans-result.show { display: block !important; }

.Miu-miu.ai .voice-animate-icon {
    transform: rotate(0deg);
}

.Miu-miu.user .voice-animate-icon {
    transform: scaleX(-1);
}

.voice-icon {
    font-size: 14px !important;
}

.voice-duration {
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1;
}

.voice-trans-result {
    display: none;
    margin-top: 6px;
    padding: 5px 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.4;
    word-break: break-all;
    max-width: 180px;
}

.voice-trans-result.show {
    display: block !important;
}

/* 连续消息隐藏尾巴 */
.Miu-miu.user.no-tail .content::after {
    display: none !important;
    content: none !important;
}

.Miu-miu.ai.no-tail .content::before {
    display: none !important;
    content: none !important;
}

.Miu-miu.user.no-tail .content {
    --bottom-right: 18px;
}

.Miu-miu.ai.no-tail .content {
    --bottom-left: 18px;
}

/* 列表样式 */
.group-card {
    background: var(--card-bg);
    border-radius: 8px;
    padding: 4px 8px;
    margin: 10px auto;
    width: 94%;
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.group-item {
    flex: 1;
    text-align: center;
    font-size: 13px;
    padding: 6px 0;
    border-radius: 6px;
    color: #888;
    transition: all 0.2s;
    cursor: pointer;
}

.group-item.active {
    background-color: var(--tab-active-bg);
    color: var(--tab-active-text);
    font-weight: 600;
}

#chat-list-container {
    width: 100%;
    padding: 10px 0; 
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
}

.chat-list-group {
    background: white;
    border-radius: 18px;
    /* 核心修改：上下间距保持，左右自动居中，宽度改为94% */
    margin: 0 auto 15px auto; 
    width: 94%; 
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.chat-swipe-row {
    position: relative;
    width: 100%;
    height: 72px;
    overflow: hidden;
    background: #f5f5f5;
    border-bottom: 0.5px solid #f0f0f0;
}
.chat-swipe-row:last-child { border-bottom: none; }

.chat-swipe-actions {
    position: absolute;
    top: 0; 
    right: 0; 
    height: 100%;
    display: flex; 
    z-index: var(--z-base);
}

.swipe-btn {
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: white; 
    font-size: 13px; 
    font-weight: 500;
    width: 65px; 
    height: 100%; 
    cursor: pointer;
}
.btn-cancel { background-color: #C7C7CC; }
.btn-pin { background-color: #FF9500; }
.btn-delete { background-color: #ff3b30; }
.btn-edit { background-color: #007aff; }

.chat-avatar { 
    width: 48px; 
    height: 48px; 
    border-radius: 10px; 
    background: #eee; 
    margin-right: 12px; 
    object-fit: cover; 
    flex-shrink: 0; 
}

.chat-info { 
    flex: 1; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}

.chat-name-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: baseline; 
    margin-bottom: 4px; 
}

.chat-name { font-size: 15px; font-weight: 600; color: #333; }
.chat-time { font-size: 11px; color: #b2b2b2; }
.chat-preview { 
    font-size: 13px; 
    color: #999; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

/* "我的" 页面 */
.me-main-card {
    background: white; 
    border-radius: 30px; 
    margin: 10px auto;
    width: 94%; 
    height: 260px; 
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
    overflow: hidden;
    flex-shrink: 0;
}

.music-area { 
    width: 85%; 
    height: 100%; 
    padding: 25px; 
    display: flex; 
    flex-direction: column; 
    position: relative; 
    z-index: calc(var(--z-base) + 1);
}

.player-top { display: flex; align-items: center; }

.player-avatar {
    width: 90px; 
    height: 90px; 
    background: #f5f5f5; 
    border-radius: 18px; 
    margin-right: 18px; 
    position: relative; 
    cursor: pointer; 
    overflow: hidden; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.player-info { flex: 1; cursor: pointer; }

.song-name { 
    font-size: 20px; 
    font-weight: bold; 
    color: #333; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
}

.artist-name { font-size: 14px; color: #999; margin-top: 5px; }

.player-controls { margin-top: auto; padding-bottom: 5px; width: 100%; }

.progress-container {
    width: 100%; 
    height: 20px; 
    display: flex; 
    align-items: center; 
    margin-bottom: 15px; 
    cursor: pointer;
}

.progress-bar-bg { 
    flex: 1; 
    height: 4px; 
    background: #eee; 
    border-radius: 2px; 
    position: relative; 
}

.progress-fill { 
    height: 100%; 
    background: var(--accent-color); 
    width: 0%; 
    border-radius: 2px; 
}

.progress-dot {
    position: absolute; 
    width: 12px; 
    height: 12px; 
    background: var(--accent-color); 
    border-radius: 50%;
    top: 50%; 
    transform: translate(-50%, -50%); 
    left: 0%; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.control-btns { 
    display: flex; 
    gap: 20px; 
    align-items: center; 
    justify-content: flex-start; 
}

.nav-btn-svg { 
    width: 32px; 
    height: 32px; 
    cursor: pointer; 
    fill: #bbb; 
    transition: fill 0.2s; 
}
.nav-btn-svg:active { fill: var(--accent-color); }

.play-btn-wrapper {
    width: 55px; 
    height: 55px; 
    background: white; 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1), inset 0 1px 2px white;
    cursor: pointer; 
    transition: transform 0.2s, box-shadow 0.2s; 
    margin: 0 5px;
}
.play-btn-wrapper:active { transform: scale(0.92); }

.play-icon { width: 28px; height: 28px; fill: #444; margin-left: 4px; }
.pause-icon { width: 26px; height: 26px; fill: #444; display: none; }

.playing .play-icon { display: none; }
.playing .pause-icon { display: block; }
.playing .play-btn-wrapper { box-shadow: 0 4px 12px rgba(255, 142, 158, 0.3); }

.doll-deco {
    position: absolute; 
    right: -20px; 
    bottom: -20px; 
    width: 160px; 
    height: 160px;
    background-image: url('../image/image.png');
    background-size: contain; 
    background-repeat: no-repeat;
    background-position: bottom right; 
    pointer-events: none; 
    z-index: var(--z-base);
}

.api-card { 
    background: white; 
    border-radius: 30px; 
    padding: 12px 20px; 
    margin: 15px auto; 
    width: 94%; 
    font-size: 15px; 
    font-weight: 500; 
    display: flex; 
    align-items: center; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.03); 
    cursor: pointer;
}

.icon-img { 
    width: 26px; 
    height: 26px; 
    margin-right: 7px; 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 
}
.icon-api { background-image: url('../image/image1.png'); }
.icon-theme { background-image: url('../image/image2.png'); }

.settings-list { 
    background: white; 
    border-radius: 25px; 
    margin: 10px auto; 
    width: 94%; 
    padding: 10px 0; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.03); 
}

.setting-item { 
    padding: 12px 20px; 
    font-size: 15px; 
    display: flex; 
    align-items: center; 
    border-bottom: none; 
    cursor: pointer; 
    color: #333;
}
.setting-item:active { background: #f9f9f9; }

/* 音乐面板 */
#music-panel-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(0,0,0,0.3); 
    z-index: var(--z-media-backdrop);
    display: none; 
    opacity: 0; 
    transition: opacity 0.3s;
}

#music-panel {
    position: fixed; 
    bottom: -70%; 
    left: 0; 
    width: 100%; 
    height: auto; 
    min-height: 40%;
    background: white; 
    border-radius: 30px 30px 0 0;
    z-index: var(--z-media-panel); 
    padding: 25px 20px;
    padding-bottom: calc(25px + env(safe-area-inset-bottom, 0px));
    transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; 
    flex-direction: column;
    box-shadow: 0 -5px 30px rgba(0,0,0,0.1);
}

.panel-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding-bottom: 15px;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 10px;
    flex-shrink: 0;
    position: relative;
}

.panel-title { font-size: 18px; font-weight: 700; color: #333; }

.panel-plus { 
    font-size: 28px; 
    color: #333;
    font-weight: 300;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    line-height: 1;
}
.panel-plus:active { opacity: 0.6; }

.music-list-scroll { 
    flex: 1; 
    overflow-y: auto; 
    max-height: 50vh; 
    scrollbar-width: none;
}
.music-list-scroll::-webkit-scrollbar { display: none; }

.music-list-item {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 12px 5px; 
    border-bottom: 0.5px solid #f2f2f2;
    transition: background 0.2s;
}
.music-list-item:active { background-color: #f9f9f9; }

.list-info { 
    flex: 1; 
    cursor: pointer; 
    overflow: hidden;
    margin-right: 10px;
}

.list-song { 
    font-size: 15px; 
    color: #333; 
    font-weight: 500; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-artist { font-size: 12px; color: #999; margin-top: 3px; }

.list-delete { 
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc; 
    font-size: 20px; 
    cursor: pointer;
    border-radius: 50%;
}
.list-delete:active {
    background-color: #f0f0f0;
    color: #ff3b30;
}

/* 微信底部导航 */
#wechat-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: var(--z-sticky) !important;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    box-sizing: border-box;
    padding-top: 8px;
    padding-bottom: max(15px, env(safe-area-inset-bottom)) !important;
    border-top: 0.5px solid rgba(0,0,0,0.05);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #bbb;
    font-size: 10px;
    cursor: pointer;
    padding: 2px 0;
}

.nav-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 2px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../image/icon.png');
    filter: grayscale(100%) opacity(0.4);
}

.nav-item.active .nav-icon {
    filter: none;
    opacity: 1;
}
.nav-item.active { color: #333; }

/* 音乐面板小菜单 */
.music-plus-dropdown {
    position: absolute;
    top: 50px;
    right: 0px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    width: 110px;
    display: none;
    flex-direction: column;
    z-index: var(--z-max);
    border: 1px solid #f0f0f0;
    animation: fadeIn 0.2s ease-out;
}

.music-plus-dropdown.active {
    display: flex;
}

.mp-item {
    padding: 12px 0;
    text-align: center;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    font-weight: 500;
}

.mp-item:active {
    background-color: #f9f9f9;
    border-radius: 12px;
}

.mp-line {
    height: 1px;
    background: #f5f5f5;
    width: 100%;
}

/* 语音输入独立液态弹窗 */
#voice-overlay {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: var(--z-max);
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

#voice-overlay.show {
    display: flex;
}

#voice-overlay .glass-box {
    width: 75%;
    max-width: 320px;
    padding: 25px 20px;
    background: rgba(245, 245, 247, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    box-shadow: 
        0 20px 40px rgba(0,0,0,0.1),
        inset 0 1px 1px rgba(255,255,255,0.8);
    display: flex;
    flex-direction: column;
    gap: 15px;
    animation: voicePopupScale 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes voicePopupScale {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

#voice-overlay textarea {
    width: 100%;
    height: 120px;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid rgba(0,0,0,0.05);
    background: rgba(255,255,255,0.6);
    font-size: 15px;
    color: #333;
    outline: none;
    resize: none;
    font-family: inherit;
    line-height: 1.5;
    box-sizing: border-box;
}

#voice-overlay textarea:focus {
    background: #fff;
    border-color: rgba(0,0,0,0.1);
}

#voice-overlay .btn-row {
    display: flex;
    gap: 12px;
    margin-top: 5px;
}

#voice-overlay .v-btn {
    flex: 1;
    padding: 14px 0;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-align: center;
    transition: opacity 0.2s;
}

#voice-overlay .v-btn:active { opacity: 0.7; }

#voice-overlay .btn-cancel {
    background: rgba(0,0,0,0.05);
    color: #666;
}

#voice-overlay .btn-send {
    background: #000;
    color: #fff;
}

/* API 进度条滑块 */
#apiTemp {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: #f0f0f0;
    border-radius: 10px;
    outline: none;
    border: none !important;
    margin: 15px 0;
    accent-color: #FFFFFF !important; 
}

#apiTemp::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px; 
    height: 22px;
    background: #FFFFFF; 
    border-radius: 50%;
    cursor: pointer;
    box-shadow: none !important;
    position: relative;
    z-index: calc(var(--z-base) + 1);
}

#apiTemp::-moz-range-progress {
    background-color: #FFFFFF;
    height: 6px;
    border-radius: 10px;
}

#apiTemp::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: #FFFFFF;
    border-radius: 50%;
}

#apiModel {
    color: #AAAAAA !important; 
}

.sticker-grid {
    padding-bottom: 0 !important;
    max-height: 250px;
    overflow-y: auto;
}

/* --- 引用回复系统 v3 (修复版) --- */

/* 1. 输入框上方的预览条 (无左侧竖线) */
.reply-bar-container {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    background-color: #f2f2f2;
    padding: 8px 15px;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-radius: 18px 18px 0 0; 
    z-index: var(--z-content);
    box-sizing: border-box;
    box-shadow: 0 -1px 5px rgba(0,0,0,0.02);
    margin-bottom: -1px;
}
.reply-bar-container.show { display: flex; }

.reply-bar-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 5px;
    margin-right: 15px;
    overflow: hidden;
}

.reply-bar-title {
    font-size: 12px;
    font-weight: bold;
    color: #333;
    margin-bottom: 2px;
}

.reply-bar-text {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 2. 消息垂直堆叠容器 (关键修复：用来包住主气泡和回复气泡) */
.msg-stack {
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

/* 己方靠右，对方靠左 */
.Miu-miu.user .msg-stack { align-items: flex-end; }
.Miu-miu.ai .msg-stack { align-items: flex-start; }

/* 3. 独立回复小气泡样式 (统一灰色) */
.reply-tiny-bubble {
    font-size: 11px;
    color: #888;
    background-color: #f7f7f7; /* 统一用浅灰 */
    padding: 5px 10px;
    border-radius: 10px;
    margin-top: 4px; /* 在主气泡下方留出间隙 */
    max-width: 100%;
    width: fit-content;
    line-height: 1.3;
    cursor: pointer;
    position: relative;
    z-index: var(--z-base);
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

/* 4. 修复：确保 bubble-wrapper 恢复水平排列 (让时间回到侧边) */
.Miu-miu .bubble-wrapper {
    flex-direction: row !important; 
    align-items: flex-end !important; /* 底部对齐，保证时间在气泡旁边 */
}

/* 5. 确保 no-tail 样式生效 */
.Miu-miu.user.no-tail .content::after { display: none !important; }
.Miu-miu.ai.no-tail .content::before { display: none !important; }

/* --- START: 消息编辑通用弹窗 (新增) --- */
#edit-msg-overlay {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: var(--z-modal); /* 确保在聊天室之上 */
    display: none; /* 默认隐藏 */
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

#edit-msg-overlay.active {
    display: flex;
    opacity: 1;
}

/* 弹窗主体 - 液态玻璃风格 */
.edit-glass-box {
    width: 78%;
    max-width: 320px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    box-shadow: 
        0 20px 50px rgba(0,0,0,0.15),
        inset 0 1px 2px rgba(255,255,255,0.9);
    display: flex;
    flex-direction: column;
    gap: 15px;
    transform: scale(0.95);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#edit-msg-overlay.active .edit-glass-box {
    transform: scale(1);
}

.edit-header-title {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

/* 动态内容容器 */
#edit-dynamic-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 1. 纯文本编辑模式样式 */
.edit-text-area {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.05);
    background: rgba(255,255,255,0.5);
    font-size: 15px;
    color: #333;
    outline: none;
    resize: none;
    font-family: inherit;
    line-height: 1.5;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.02);
}
.edit-text-area:focus {
    background: #fff;
    border-color: rgba(0,0,0,0.1);
}

/* 2. 语音编辑模式样式 */
.edit-voice-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.edit-voice-label {
    font-size: 13px;
    color: #888;
    width: 40px;
}
.edit-voice-input {
    flex: 1;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.05);
    background: rgba(255,255,255,0.5);
    font-size: 14px;
    text-align: center;
    outline: none;
}

/* 3. 图片/表情包预览样式 */
.edit-img-preview-box {
    width: 100%;
    height: 120px;
    border-radius: 16px;
    background: rgba(0,0,0,0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px dashed rgba(0,0,0,0.1);
    position: relative;
    cursor: pointer;
}
.edit-preview-img {
    height: 100%;
    width: auto;
    object-fit: contain;
}
.edit-img-hint {
    position: absolute;
    bottom: 5px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    backdrop-filter: blur(4px);
}

/* 底部按钮栏 */
.edit-btn-row {
    display: flex;
    gap: 12px;
    margin-top: 5px;
}

.edit-btn {
    flex: 1;
    padding: 12px 0;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-align: center;
    transition: opacity 0.2s, transform 0.1s;
}
.edit-btn:active { transform: scale(0.98); }

.edit-btn-cancel {
    background: rgba(0,0,0,0.05);
    color: #666;
}
.edit-btn-confirm {
    background: #000;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* --- END: 消息编辑通用弹窗 --- */
/* --- START: 多选删除模式 (Batch Delete Mode) --- */

/* 1. 顶部多选操作栏 (覆盖原标题栏) */
.multi-select-navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px; /* 与原 header 高度一致 */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: var(--z-chatroom-header); /* 确保覆盖在聊天室头部之上 */
    display: none; /* 默认隐藏 */
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    padding-top: env(safe-area-inset-top, 0px); /* 适配刘海屏 */
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
    animation: slideDownFade 0.2s ease-out;
}

/* 激活状态 */
.chat-room.multi-select-mode .multi-select-navbar {
    display: flex;
}

/* 隐藏原有的头部和底部输入框 */
.chat-room.multi-select-mode .room-header,
.chat-room.multi-select-mode .room-footer {
    display: none !important;
}

/* 顶部按钮样式 */
.ms-nav-btn {
    font-size: 16px;
    cursor: pointer;
    padding: 10px 5px;
}

.ms-nav-cancel {
    color: #333;
    font-weight: 500;
}

.ms-nav-title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
}

.ms-nav-delete {
    color: #ff3b30; /* 警示红 */
    font-weight: 700;
}

.ms-nav-delete.disabled {
    color: #ccc;
    pointer-events: none;
}

/* 2. 消息气泡复选框样式 (修正版：更小、沉底对齐) */
.msg-checkbox {
    width: 18px;  /* 改小尺寸 */
    height: 18px; /* 改小尺寸 */
    border-radius: 50%;
    border: 1.5px solid #C5C5C5; /* 边框稍微细一点 */
    background: transparent;
    display: none; 
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0 8px; /* 间距缩小，更紧凑 */
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* ★★★ 关键：让勾选框沉底对齐，位于气泡下角 ★★★ */
    align-self: flex-end; 
    margin-bottom: 5px; /* 稍微抬高一点点，对齐气泡底部视觉 */
}

/* 多选模式下显示 */
.chat-room.multi-select-mode .msg-checkbox {
    display: flex;
    animation: scaleIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 选中状态 */
.Miu-miu.ms-selected .msg-checkbox {
    background-color: #444444; /* 灰黑色 */
    border-color: #444444;
}

/* 勾号图标 (配合 18px 的圈圈缩小尺寸) */
.msg-checkbox::after {
    content: '';
    width: 6px;       /* 缩小 */
    height: 3.5px;    /* 缩小 */
    border-left: 1.5px solid #fff;   /* 变细 */
    border-bottom: 1.5px solid #fff; /* 变细 */
    transform: rotate(-45deg) translate(0.5px, -1px); /* 微调位置 */
    opacity: 0;
    transition: opacity 0.2s;
}

.Miu-miu.ms-selected .msg-checkbox::after {
    opacity: 1;
}

/* 3. 布局调整：让复选框出现在气泡尾部 */
/* 这里的逻辑是：
   AI (左侧消息): 头像 -> 气泡 -> 复选框
   User (右侧消息): 复选框 -> 气泡 -> 头像 (因为是flex-end, order越小越靠左)
*/

/* 确保消息行可以容纳复选框 */
.chat-room.multi-select-mode .Miu-miu {
    cursor: pointer; /* 整个区域可点 */
}

/* AI 消息：复选框在最右侧 (Order 3) */
.Miu-miu.ai .msg-checkbox {
    order: 3;
}

/* User 消息：复选框在最左侧 (Order 0) */
.Miu-miu.user .msg-checkbox {
    order: 0; 
}

/* 简单的动画定义 */
@keyframes slideDownFade {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

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

/* --- END: 多选删除模式 --- */

/* --- 撤回消息样式 (最终合并修正版) --- */
.recall-notice-row {
    width: 100%;
    clear: both;
    margin: 10px 0;      /* 上下留距 */
    text-align: center;  /* 让内部胶囊居中 */
    display: block;      /* 块级容器 */
}

.recall-pill {
    /* ★★★ 核心修复：必须是 inline-block，才能是小胶囊大小，不会铺满整行 ★★★ */
    display: inline-block !important; 
    
    /* 颜色还原：经典浅灰色 */
    background-color: #f7f7f7; 
    
    /* 形状还原：圆润的胶囊 */
    border-radius: 10px;   
    padding: 3px 12px;     
    
    /* 文字样式 */
    font-size: 11px;
    color: #888;
    
    /* 清除多余特效，保持干净 */
    box-shadow: none;
    backdrop-filter: none;
    transform: none;
}

.recall-link {
    color: #576b95; /* 微信蓝 */
    font-weight: 600;
    cursor: pointer;
    margin-left: 4px; /* 文字和链接的间距 */
}

/* --- API 配置管理美化 (新增) --- */

/* 1. 配置管理的整体容器 */
.api-preset-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
    width: 100%;
}

/* 2. 标题文字 "选择配置" - 保持与上方灰色小字一致 */
.api-preset-label {
    font-size: 13px;
    color: #666; /* 灰色 */
    font-weight: 500;
    margin-left: 5px;
}

/* 3. 操作行：包含选择框和删除按钮 */
.api-preset-row {
    display: flex;
    align-items: center;
    gap: 10px; /* 两个控件之间的间距 */
    width: 100%;
}

/* 4. 选择框 (模拟 iOS 按钮风格) */
.api-preset-select {
    flex: 1; /* 占满剩余空间 */
    -webkit-appearance: none; /* 去除浏览器默认丑陋的边框 */
    appearance: none;
    
    background-color: #fff; /* 白色背景 */
    border: 1px solid #ddd; /* 细微的边框 */
    border-radius: 12px; /* 圆角 */
    
    padding: 12px 15px; /* 内部填充 */
    padding-right: 30px; /* 给右边的箭头留位置 */
    
    font-size: 15px;
    color: #333;
    outline: none;
    font-family: inherit;
    
    /* 自定义右侧的小箭头图标 */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23CCCCCC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    
    transition: border-color 0.2s, background-color 0.2s;
    cursor: pointer;
}

/* 点击时的效果 */
.api-preset-select:active, .api-preset-select:focus {
    border-color: #333;
    background-color: #f9f9f9;
}

/* 占位符颜色 (如果没有选中值) */
.api-preset-select:invalid {
    color: #aaa;
}

/* 5. 删除按钮 */
.api-preset-del-btn {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-color: #FFF2F2; /* 浅红色背景 */
    border: 1px solid #FFD6D6;
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    
    /* 垃圾桶图标 (SVG) */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FF3B30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='3 6 5 6 21 6'%3e%3c/polyline%3e%3cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3e%3c/path%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    
    transition: transform 0.1s, background-color 0.2s;
}

/* 删除按钮点击反馈 */
.api-preset-del-btn:active {
    transform: scale(0.92);
    background-color: #FFE0E0;
}

/* --- icity 风格日记页面样式 --- */

 #view-diary {
    padding: 0 !important;
    background-color: #F2F3F5;
    
    /* --- 修改开始：改为绝对定位全屏覆盖 --- */
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 核心：提高层级，覆盖底部的 Dock 栏 (Dock层级通常为100) */
    z-index: var(--z-page-secondary); 
    /* --- 修改结束 --- */

    overflow: hidden;
    
    /* 确保如果有 tab-view 类也不会被 padding 挤压 */
    box-sizing: border-box; 
}

/* 1. 通用层样式：默认全部藏到右边去，防止遮挡 */
.diary-layer {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #F2F3F5;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    
    /* ★★★ 关键修复：默认让所有层都躲到屏幕右侧，不遮挡视线 ★★★ */
    transform: translateX(100%); 
    
    z-index: var(--z-content); 
}

/* 2. 选人层特例：必须永远停留在屏幕中间，作为“底座” */
#diary-selection-layer {
    background-color: #ffffff; 
    z-index: var(--z-base); /* 层级最低 */
    
    /* ★★★ 关键修复：强制让选人层始终可见 ★★★ */
    transform: translateX(0) !important; 
}

/* 3. 激活状态：当通过JS加上active类时，滑入屏幕中间 */
.diary-layer.active {
    transform: translateX(0); /* 滑进来 */
    z-index: var(--z-card);   /* 层级变高，盖在选人层上面 */
}


.diary-page-header {
    /* 保持上一步修改的 padding (紧贴灵动岛) */
    padding: calc(5px + var(--safe-top)) 20px 10px 20px; 
    
    background: #ffffff; 
    
    /* ★★★ 修改布局方式 ★★★ */
    display: flex;
    justify-content: space-between; /* 两端对齐：箭头在左，图标在右 */
    align-items: center;
    
    position: relative; /* 关键：为标题的绝对定位提供基准 */
    z-index: var(--z-sticky); 
    border-bottom: none;
}

.diary-app-name {
    font-size: 20px;
    font-weight: 800;
    color: #333;
    letter-spacing: 0.5px;
    
    /* ★★★ 核心修改：绝对居中 ★★★ */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    
    /* 防止文字换行或太长 */
    white-space: nowrap;
    text-align: center;
}

.diary-header-icons {
    display: flex;
    gap: 18px;
    color: #888;
    font-size: 18px;
    z-index: var(--z-content);
}

.diary-grid-title {
    padding: 20px 20px 10px 20px;
    font-size: 13px;
    color: #999;
    font-weight: 500;
}

.diary-home-back-btn {
    font-size: 24px;   /* 大小 */
    color: #333;       /* 颜色 */
    cursor: pointer;
    padding: 5px 10px 5px 0; /* 增加一点点击区域 */
    margin-left: -5px; /* 微调位置，对齐边缘 */
    display: flex;
    align-items: center;
}

.diary-selection-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 0 15px;
    overflow-y: auto;
}

.diary-selector-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.diary-sel-avatar {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    background: #fff;
    border: 2px solid #fff;
}

.diary-sel-name {
    font-size: 12px;
    color: #333;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.diary-navbar-sticky {
    /* 原来是: calc(35px + var(--safe-top)) ... */
    /* 修改为: 5px */
    padding: calc(5px + var(--safe-top)) 15px 15px 15px;
    
    background: #F2F3F5; 
    backdrop-filter: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    border-bottom: none;
    font-size: 17px;
    font-weight: 600;
    z-index: var(--z-sticky);
}

.diary-scroll-container {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    padding-bottom: 80px; 
    -webkit-overflow-scrolling: touch;
}

/* 核心卡片容器 */
.icity-card {
    background: transparent;
    border-radius: 8px;
    padding: 0;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
    border: none;
    z-index: var(--z-base);
}

.icity-header {
    background-color: #F7F8FA;
    padding: 8px 20px;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 1px dashed #e0e0e0;
}

.icity-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icity-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #f5f5f5;
}

.icity-meta-col {
    display: flex;
    flex-direction: column;
}

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

.icity-handle {
    font-size: 11px;
    color: #999;
    font-weight: 400;
}

.icity-date {
    font-size: 11px;
    color: #aaa;
    letter-spacing: 0.5px;
}

.icity-content {
    background-color: #ffffff;
    font-size: 15px;
    line-height: 1.6;
    color: #222;
    text-align: justify;
    word-break: break-all;
    white-space: pre-wrap;
    padding: 20px 20px 10px 20px;
    margin-bottom: 0;
}

.icity-footer {
    background-color: #ffffff;
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    padding: 5px 20px 15px 20px;
    border-top: none;
}

.icity-action {
    color: #ccc;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.icity-action:hover { color: #ff8e9e; }
.icity-action span { font-size: 11px; }

/* 删日记按钮 */
.diary-del-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #eee;
    font-size: 12px;
    padding: 5px;
    z-index: var(--z-content); 
}

/* --- START: 照片功能样式 (Photo Function) - 修复版 --- */

/* 1. 照片输入弹窗 (保持不变) */
#photo-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: var(--z-max);
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

#photo-overlay.show {
    display: flex;
    opacity: 1;
}

#photo-overlay .glass-box {
    width: 78%;
    max-width: 320px;
    padding: 20px;
    background: rgba(245, 245, 247, 0.85);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    box-shadow: 
        0 20px 50px rgba(0,0,0,0.15),
        inset 0 1px 2px rgba(255,255,255,0.9);
    display: flex;
    flex-direction: column;
    gap: 15px;
    transform: scale(0.95);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#photo-overlay.show .glass-box {
    transform: scale(1);
}

.photo-modal-title {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

#photo-desc-input {
    width: 100%;
    height: 100px;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid rgba(0,0,0,0.05);
    background: rgba(255,255,255,0.6);
    font-size: 15px;
    color: #333;
    outline: none;
    resize: none;
    font-family: inherit;
    line-height: 1.5;
    box-sizing: border-box;
}

#photo-desc-input:focus {
    background: #fff;
    border-color: rgba(0,0,0,0.1);
}

#photo-overlay .btn-row {
    display: flex;
    gap: 12px;
    margin-top: 5px;
}

#photo-overlay .p-btn {
    flex: 1;
    padding: 12px 0;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-align: center;
    transition: opacity 0.2s;
}

#photo-overlay .p-btn:active { opacity: 0.7; }

#photo-overlay .btn-cancel {
    background: rgba(0,0,0,0.05);
    color: #666;
}

#photo-overlay .btn-send {
    background: #000;
    color: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

/* --- 修复版：照片气泡样式 (完美去除所有边距) --- */

/* 1. 针对所有照片气泡的基础重置 */
.Miu-miu .content.photo-only {
    padding: 0 !important;             /* 核心：去除内边距 */
    margin: 0 !important;
    background: transparent !important; /* 去除背景色 */
    background-color: transparent !important;
    box-shadow: none !important;        /* 去除阴影 */
    border: none !important;            /* 去除边框 */
    border-radius: 0 !important;        /* 去除圆角 */
    overflow: visible !important;
    min-width: 0 !important;
    width: auto !important;
    display: block !important;          /* 块级显示，消除行内间隙 */
}

/* 2. ★★★ 特别加强：针对 AI 和 User 的分别强制重置 ★★★ */
.Miu-miu.ai .content.photo-only,
.Miu-miu.user .content.photo-only {
    padding: 0 !important;
    background: transparent !important;
}

/* 3. 去除小尾巴 (气泡尖角) */
.Miu-miu.user .content.photo-only::after,
.Miu-miu.ai .content.photo-only::before {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* 4. 图片本体样式 */
.photo-msg-img {
    width: 110px;        /* 图片大小 */
    height: 110px;
    object-fit: cover;
    border-radius: 0;    /* ★★★ 按照你的要求：不做圆角（直角） ★★★ */
    display: block;      /* 消除图片底部的微小缝隙 */
    margin: 0;           /* 确保无外边距 */
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
/* 3. 查看描述弹窗 (保持不变) */
#photo-desc-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: var(--z-toast); 
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.2s;
}

#photo-desc-overlay.show {
    display: flex;
    opacity: 1;
}

.photo-desc-box {
    width: 70%;
    max-width: 280px;
    background: #fff;
    border-radius: 18px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    animation: popIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.photo-desc-text {
    font-size: 15px;
    color: #333;
    line-height: 1.5;
    word-break: break-all;
    text-align: left;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.photo-desc-close {
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
    color: #007aff;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}

@keyframes popIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
/* --- END: 照片功能样式 --- */
/* --- START: 相册 (Album) 功能完整样式 --- */

/* 1. 隐藏系统原生的文件选择控件 */
#native-file-input {
    display: none !important;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    z-index: var(--z-negative);
    pointer-events: none;
}

/* 2. 相册图标样式 (您发的这段) */
.icon-album-bg {
    width: 100%;
    height: 100%;
    /* 经典的相册图标：方框、山峰、太阳 */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='3' y='3' width='18' height='18' rx='4' stroke='%23666666' stroke-width='2'/%3e%3ccircle cx='8.5' cy='8.5' r='1.5' stroke='%23666666' stroke-width='2'/%3e%3cpath d='M21 15l-5-5L5 21' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px; 
    opacity: 0.8;          
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 3. 点击时的图标反馈动画 */
.tool-icon-box:active .icon-album-bg {
    transform: scale(0.9); 
    opacity: 1;            
}

/* 1. 图片本体样式 */
.album-msg-img {
    width: auto !important;
    height: auto !important;
    /* ★ 还原小尺寸 */
    max-width: 125px !important;  
    max-height: 180px !important; 
    object-fit: contain !important;
    
    /* ★ 直角 + 无阴影 */
    border-radius: 0 !important; 
    box-shadow: none !important;
    
    display: block;
    cursor: pointer;
    margin: 0;
}

/* 2. 核心修复：强制去除气泡容器的所有背景、边框和阴影 */
.Miu-miu .content.album-only,
.Miu-miu.ai .content.album-only,
.Miu-miu.user .content.album-only {
    padding: 0 !important;              /* 去内边距 */
    background: transparent !important; /* 去背景色 */
    background-color: transparent !important;
    box-shadow: none !important;        /* 去气泡阴影 */
    border: none !important;            /* 去边框 */
    width: auto !important;
    max-width: none !important;
    display: block !important;
}

/* 3. 彻底隐藏小尾巴 */
.Miu-miu.user .content.album-only::after,
.Miu-miu.ai .content.album-only::before {
    display: none !important;
    content: none !important;
    border: none !important;
    background: transparent !important;
}

/* --- START OF MOMENT APP STYLES --- */

/* 1. Moment 页面容器 - 全屏覆盖 */
#view-moment {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-page-secondary); /* 与日记页同级 */
    background-color: #000; /* 默认底色，防透 */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transform: translateX(100%); /* 默认隐藏在右侧 */
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#view-moment.active {
    transform: translateX(0);
}

/* 2. 动态背景层 - 这里的图片可以通过JS更改 */
.moment-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://i.postimg.cc/8z6M7W7M/moment-bg.jpg'); /* 默认背景图，可JS替换 */
    background-size: cover;
    background-position: center;
    z-index: var(--z-background);
    filter: brightness(0.9); /* 稍微压暗一点背景，突出前景 */
}

/* 3. 核心悬浮玻璃卡片 */
.moment-glass-card {
    position: relative;
    width: 94%;
    height: 92%; /* 上下留出空隙 */
    margin-top: calc(10px + var(--safe-top)); /* 避开灵动岛/刘海 */
    margin-bottom: calc(10px + var(--safe-bottom));
    
    background: rgba(255, 255, 255, 0.65); /* 半透明白底 */
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 裁剪内部内容 */
    z-index: var(--z-base);
}

/* 4. 顶部 Banner 区域 */
.moment-header-banner {
    width: 100%;
    height: 180px;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}

.moment-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.95);
    cursor: pointer; /* 点击可更换 */
}

/* 5. 个人信息区域 (头像、名字、关注按钮) */
.moment-profile-section {
    position: relative;
    padding: 0 20px;
    padding-top: 50px; /* 为头像留出空间 */
    padding-bottom: 15px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
}

/* 悬浮头像 - 核心视觉点 */
.moment-avatar-container {
    position: absolute;
    top: -45px; /* 一半在banner上，一半在下面 */
    left: 20px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    padding: 4px;
    background: rgba(255, 255, 255, 0.3); /* 头像外光环 */
    backdrop-filter: blur(10px);
    z-index: calc(var(--z-base) + 1);
    cursor: pointer;
}

.moment-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 名字和关注按钮行 */
.moment-name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.moment-handle {
    font-size: 13px;       /* 比名字稍小 */
    color: #8899a6;        /* 经典的推特灰，或者用 #999 */
    font-weight: normal;   /* 即使名字是粗体，这个也保持正常粗细 */
    margin-left: 6px;      /* 与名字保持距离 */
    vertical-align: baseline;
}

.moment-user-name {
    font-size: 20px;
    font-weight: 800;
    color: #333;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}

.moment-follow-btn {
    padding: 6px 20px;          /* 增加左右内边距，使其更长 */
    background: #ffffff;        /* 纯白背景 */
    border-radius: 50px;        /* 完全圆角 */
    font-size: 14px;            /* 字体大小 */
    font-weight: 500;           /* 字体不要太粗 */
    color: #333;                /* 深色文字 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 极淡的投影 */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;                   /* 图标和文字的间距 */
    transition: transform 0.1s;
    border: 1px solid rgba(0,0,0,0.05); /* 可选：极细的边框增加质感 */
}

.moment-follow-btn:active {
    transform: scale(0.95);
    background: #f5f5f5;
}

/* 用户 Handle (@xxxx) */
.moment-handle {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
    font-weight: 600;
}

/* 简介文字 */
.moment-bio-text {
    margin-top: 15px !important;
    margin-bottom: 15px;
    font-size: 13px;
    color: #444;
    line-height: 1.5;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 6. 导航 Tab 栏 */
.moment-tab-bar {
    display: flex;
    border-top: 1px solid rgba(255,255,255,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.2);
    padding: 5px 10px;
    flex-shrink: 0;
}

.moment-tab-item {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
    color: #777;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}

.moment-tab-item.active {
    color: #333;
    font-weight: 700;
}

/* 选中状态的小横条 */
.moment-tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: #333;
    border-radius: 2px;
}

/* 7. 滚动内容区域 (Feed流) */
.moment-scroll-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
    background: rgba(255, 255, 255, 0.3); /* 内容区稍微亮一点 */
}

/* 单条动态卡片 */
.moment-post-card {
    padding: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.03);
    display: flex;
    gap: 12px;
    transition: background 0.2s;
}
.moment-post-card:active { background: rgba(255,255,255,0.4); }

.mp-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.mp-content-col {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mp-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

/* [新增] 名字组容器：包裹名字和Handle，让它们在左侧横向排列 */
.mp-name-group {
    display: flex;
    align-items: baseline; /* 底部对齐，让小字对齐大字底部 */
    gap: 10px;              /* 名字和@之间的距离 */
    overflow: hidden;
    max-width: 80%;        /* 防止过长挤到时间 */
}

/* [新增] Handle (@xxx) 的样式 */
.mp-post-handle {
    font-size: 12px;       /* 比名字小 */
    color: #999;           /* 灰色，与黑色名字区分 */
    font-weight: 400;      /* 字重正常，不要太粗 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-name { font-size: 15px; font-weight: 700; color: #222; }
.mp-time { font-size: 11px; color: #999; }

.mp-text {
    font-size: 15px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 10px;
    white-space: pre-wrap;
}

/* 动态图片网格 */
.mp-img-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.mp-img-item {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.05);
}
.mp-img-item.single {
    width: 180px;
    height: auto;
    max-height: 240px;
}

/* 底部操作栏 (点赞/评论) */
.mp-actions {
    display: flex;
    gap: 20px;
    margin-top: 5px;
}

.mp-action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #888;
    font-size: 12px;
    cursor: pointer;
}
.mp-action-btn i { font-size: 16px; }
.mp-action-btn:active { color: #ff8e9e; }
.mp-action-btn.liked { color: #ff3b30; }

/* 8. 发布动态/说说 弹窗样式 */
/* 复用并改造 glass-popup-box 样式 */
.moment-publish-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: var(--z-modal);
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.moment-publish-modal.show {
    display: flex;
    opacity: 1;
}

.moment-publish-box {
    width: 85%;
    max-width: 340px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(25px);
    border-radius: 24px;
    padding: 25px 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    gap: 15px;
    transform: scale(0.9);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.moment-publish-modal.show .moment-publish-box {
    transform: scale(1);
}

.mp-modal-title {
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: #333;
}

.mp-input-area {
    width: 100%;
    height: 120px;
    padding: 15px;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    background: #f7f7f7;
    font-size: 15px;
    color: #333;
    outline: none;
    resize: none;
    font-family: inherit;
}

.mp-image-selector {
    width: 100%;
    height: 50px;
    border: 1px dashed #ccc;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 13px;
    cursor: pointer;
    gap: 8px;
}
.mp-image-selector:active { background: #f0f0f0; }

.mp-btn-row {
    display: flex;
    gap: 12px;
    margin-top: 5px;
}

.mp-btn {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.mp-btn-cancel { background: #f2f2f2; color: #666; }
.mp-btn-pub { background: #000; color: #fff; }

/* 回到主页的关闭按钮 (Moment左上角) */
.moment-close-btn {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: var(--z-content);
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.moment-close-btn i { font-size: 18px; color: #333; }

/* 右上角发布按钮 (FAB) */
.moment-fab-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    background: rgba(0,0,0,0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: var(--z-content);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.moment-fab-btn i { font-size: 16px; color: #fff; }

/* --- 朋友圈评论样式修正 (黑色人名 + 显眼输入框) --- */

/* 1. 人名颜色改为黑色 */
.mp-cmt-name {
    color: #333 !important; /* 强制黑色，不再用深蓝 */
    font-weight: 400;       /* 稍微加粗一点点区分 */
    cursor: pointer;
}

/* 2. 内容颜色 */
.mp-cmt-content {
    color: #333;
}

/* 3. 评论区容器 */
.mp-comments-box {
    background-color: #F7F7F7;
    border-radius: 6px;
    padding: 8px 10px;
    margin-top: 10px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 4. 输入框样式 (复刻图2效果) */
.inline-input-row {
    margin-top: 5px;
    padding-top: 5px;
}

.inline-moment-input {
    width: 100%;
    height: 36px;
    background: #fff;       /* 纯白背景 */
    border: 1px solid #ddd; /* 浅灰边框 */
    border-radius: 4px;     /* 小圆角 */
    padding: 0 8px;
    font-size: 14px;
    color: #333;
    outline: none;
    caret-color: #07c160;   /* 微信绿光标 */
    font-family: inherit;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02); /* 微弱投影增加立体感 */
}

.inline-moment-input::placeholder {
    color: #aaa;
    font-size: 13px;
}

.font-slider-wrapper {
    width: 100%;
    padding: 15px 5px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.font-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;
}

.font-slider-label {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

.font-slider-value {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

/* 滑动条轨道样式 */
#fontSizeSlider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: #e0e0e0; /*稍微深一点的灰色，增加对比度*/
    border-radius: 10px;
    outline: none;
    border: none !important;
    margin: 10px 0;
    cursor: pointer;
}

/* 滑块圆钮样式 (Webkit / iOS / Chrome) */
#fontSizeSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px; 
    height: 24px;
    background: #FFFFFF; 
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    z-index: calc(var(--z-base) + 1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05); 
    transition: transform 0.1s ease;
}

/* 按下时的微动效 */
#fontSizeSlider::-webkit-slider-thumb:active {
    transform: scale(1.1);
}

/* 兼容 Firefox 的样式 (以防万一) */
#fontSizeSlider::-moz-range-progress {
    background-color: #999; /* 进度条颜色 */
    height: 6px;
    border-radius: 10px;
}

#fontSizeSlider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: #FFFFFF;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* --- 心声 (Heart Voice) 功能样式 --- */

/* 1. 隐形按钮 (位于右上角设置按钮左侧) */
.invisible-heart-btn {
    position: absolute;
    right: 50px; /* 位于菜单按钮左侧 */
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    z-index: var(--z-card);
    cursor: pointer;
    background-color: transparent; 
}

/* 2. 弹窗遮罩 */
#heart-voice-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    z-index: var(--z-modal);
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#heart-voice-overlay.show {
    display: flex;
    opacity: 1;
}

/* 1. 心声卡片本体 */
.heart-card-box {
    width: 82vw;
    max-width: 380px;
    min-height: 500px;
    height: auto;
    
    background-color: #ffffff;
    border-radius: 0px !important;
    box-shadow: none;
    
    position: relative;
    /* 顶部内边距减小，让整体内容往上提 */
    padding: 25px 30px 40px 30px; 
    
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333;
    
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: visible; 
}

/* 2. 头像 (稍微放大) */
.hv-avatar {
    width: 72px;        /* 从 65px 改为 72px */
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: none !important;
    box-shadow: none !important;
    margin-top: 0;       
    margin-bottom: 10px; /* 间距缩小 */
    z-index: calc(var(--z-base) + 1);
    filter: grayscale(30%); 
}

/* 3. 关注按钮 (尺寸不变，大幅减少下方间距) */
.hv-follow-btn {
    background-color: #000;
    color: #fff;
    font-size: 11px;
    width: 80px;
    padding: 4px 0;
    border-radius: 50px;
    
    margin-bottom: 15px; /* ★ 大幅减小 (原30px)，把下面内容提上来 */
    
    cursor: pointer;
    box-shadow: none;
    text-align: center;
    letter-spacing: 1px;
    font-weight: 400;
}

/* 4. 分区标题 <关于我> */
.hv-section-title {
    font-size: 10px;
    color: #b0b0b0;
    font-weight: 400;
    margin: 0 0 8px 0;   /* 间距缩小 */
    letter-spacing: 1px;
}

/* 5. 名字 */
.hv-line-hi {
    font-size: 15px;
    font-weight: 500;
    color: #555555;
    margin-bottom: 4px;  /* 间距缩小 */
    letter-spacing: 0.5px;
}

/* 6. 标签 (ISTP) */
.hv-tags {
    font-size: 11px;
    color: #999999;
    margin-bottom: 10px; /* 间距缩小 */
    font-weight: 400;
}

/* 7. 短句 (「...」) */
.hv-short-quote {
    font-size: 12px;
    color: #666666;
    font-weight: 500;
    margin-bottom: 15px; 
    text-align: center;
    width: 100%;
    letter-spacing: 0.5px;
}

/* 8. 长文本段落 (其实眼睛...) */
.hv-long-text {
    font-size: 12px;
    color: #7a7a7a;
    
    /* ★ 行距收紧，不再那么散 */
    line-height: 1.75;      /* 原来是 2.2，改小一点 */
    
    text-align: justify;
    text-align-last: center;
    
    margin-bottom: 20px;   /* 下方留白也减小，给底部文案腾地方 */
    width: 100%;
    word-break: break-all;
    font-weight: 400;
}

/* 9. 底部碎碎念/文案 (留出更多空间写这个) */
.hv-tiny-mutter {
    font-size: 11px;
    color: #999;
    margin-bottom: 5px;
    margin-top: auto;      /* 自动把这个元素推到底部 */
    letter-spacing: 2px;
    white-space: pre-wrap; /* 允许换行 */
    text-align: center;
}

/* 10. 底部签名 */
.hv-footer-sign {
    font-size: 13px;
    color: #ccc;
    font-weight: 400;
}

/* 心声卡片底部的额外文案样式 */
.hv-long-text.bottom-style {
    margin-top: 15px;       /* 与上面签名拉开距离 */
    padding-top: 15px;      /* 内部留白 */
    border-top: 1px dashed #eee; /* 可选：加一条虚线分割，像票据一样 */
    font-size: 12px;        /* 字号稍小 */
    color: #999;            /* 颜色更浅 */
    line-height: 1.6;
}

/* ========================================= */
/* ★★★ 转账卡片纯白修正版 (Pure White Fix) ★★★ */
/* ========================================= */

/* 1. 核心：让转账消息的 wrapper 不受宽度限制 */
.bubble-wrapper.transfer-wrapper {
    max-width: none !important;
    width: auto !important;
}

/* 2. 气泡容器强力重置 (清除所有默认气泡样式) */
.Miu-miu .content.transfer-msg,
.Miu-miu.user .content.transfer-msg,
.Miu-miu.ai .content.transfer-msg {
    all: unset !important; /* 强制清除继承属性 */
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
}

/* 去除所有小尾巴 */
.Miu-miu.user .content.transfer-msg::after,
.Miu-miu.ai .content.transfer-msg::before {
    display: none !important;
    content: none !important;
}

/* 3. 卡片本体：无论什么状态（转账、退还、已收）全是白底 */
.transfer-card,
.transfer-card.done,
.transfer-card.refund,
.transfer-card.received {
    background-color: #FFFFFF !important; /* 核心：永远纯白 */
    background: #FFFFFF !important;
    
    /* 统一边框颜色 */
    border: 1.5px solid #cfcfcf !important; 
    border-radius: 6px !important;
    
    /* 强制尺寸 */
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    height: auto !important;
    
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 230px !important;
    
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    
    /* 核心：移除透明度变化，防止变灰 */
    opacity: 1 !important; 
}

/* 4. 上半部分内容区 */
.transfer-top {
    background-color: #FFFFFF !important; /* 核心：永远纯白 */
    background: #FFFFFF !important;
    padding: 12px 15px 15px 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 1 !important;
}

.transfer-info-col {
    width: 100% !important;
    display: block !important;
}

/* 文字样式 */
.transfer-amount-text {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #000 !important;
    margin-bottom: 4px !important;
    display: block !important;
}

.transfer-status-text {
    font-size: 12px !important;
    color: #999999 !important;
    display: block !important;
}

/* 5. 分割线 */
.transfer-line {
    width: 100% !important;
    height: 1.5px !important;
    background-color: #cfcfcf !important;
    margin: 0 !important;
    display: block !important;
    opacity: 1 !important;
}

/* 6. 底部区域：无论什么状态全是白底 */
.transfer-footer {
    background-color: #FFFFFF !important; /* 核心：永远纯白 */
    background: #FFFFFF !important;
    padding: 6px 15px !important;
    font-size: 10px !important;
    color: #B2B2B2 !important;
    text-align: right !important;
    width: 100% !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
    flex-shrink: 0 !important;
    display: block !important;
}

#transfer-amount, #rc-amount {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 26px !important;
    font-weight: bold !important;
    color: #333 !important;
    padding: 0 5px !important;
    width: 140px !important;
    text-align: left !important;
    outline: none !important;
    height: 40px !important;
}

/* 8. 弹窗按钮 (保持黑/灰配色) */
.modal-btn, 
.btn-confirm-modal, 
.btn-cancel-modal, 
.action-btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    height: 44px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 0 !important;
    line-height: 1 !important; 
}

/* 黑色确认按钮 */
#transfer-action-overlay .modal-btn:last-child,
.btn-confirm-modal {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border: none !important;
}

/* 灰色取消按钮 */
.btn-cancel-modal,
#transfer-action-overlay .modal-btn:first-child {
    background-color: #F2F2F7 !important;
    color: #000000 !important;
}

/* 9. 图标 */
.icon-transfer-bg {
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 10h14l-4-4' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M17 14H3l4 4' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    opacity: 0.8;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tool-icon-box:active .icon-transfer-bg {
    transform: scale(0.9);
    opacity: 1;
}

/* --- 语音通话全屏界面样式 --- */
#voice-call-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-max); /* 最高层级 */
    background: #000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#voice-call-overlay.active {
    transform: translateY(0);
}

/* 动态模糊背景 */
#vc-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(5px) brightness(0.9); 
    z-index: var(--z-negative);
    transition: background-image 0.3s;
}

/* 顶部栏 */
.vc-header {
    padding-top: calc(10px + var(--safe-top));
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    z-index: var(--z-content);
}

.vc-minimize-btn {
    font-size: 20px;
    opacity: 0.8;
    cursor: pointer;
    padding: 5px;
}

.vc-char-name {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* 视觉区域 (头像+线) */
.vc-visual-area {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.vc-avatars-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* 头像间距 */
    position: relative;
    margin-bottom: 20px;
}

.vc-avatar-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
}

.vc-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.8);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    z-index: calc(var(--z-base) + 1); 
}

/* 中间律动波纹 */
.vc-wave-anim {
    display: flex;
    gap: 3px;
    height: 20px;
    align-items: center;
}
.vc-wave-anim span {
    width: 3px;
    background: rgba(255,255,255,0.8);
    border-radius: 2px;
    animation: wave 1s infinite ease-in-out;
}
.vc-wave-anim span:nth-child(1) { animation-delay: 0.0s; height: 10px; }
.vc-wave-anim span:nth-child(2) { animation-delay: 0.2s; height: 15px; }
.vc-wave-anim span:nth-child(3) { animation-delay: 0.4s; height: 10px; }

@keyframes wave {
    0%, 100% { transform: scaleY(1); opacity: 0.5; }
    50% { transform: scaleY(1.5); opacity: 1; }
}

.vc-status-text {
    font-size: 14px;
    color: rgba(255,255,255,0.9);
    font-weight: 500;
    margin-bottom: 5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.vc-timer-text {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
}

/* 滚动消息区 - 修复无法上滑的核心代码 */
.vc-scroll-content {
    flex: 1;
    width: 100%;
    /* ★★★ 关键修复：防止Flex子元素溢出卡死滚动 ★★★ */
    min-height: 0; 
    
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 25px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    
    /* ★★★ 关键修复：让iOS滚动更顺滑 ★★★ */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    
    scrollbar-width: none; 
    -ms-overflow-style: none;
    position: relative;
    z-index: var(--z-content);
}
.vc-scroll-content::-webkit-scrollbar { display: none; }

/* 通话界面的消息行 - 修复说完话消失 */
.vc-msg-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* ★★★ 关键修复：forwards 确保动画结束后保持显示状态，不会变回透明 ★★★ */
    animation: fadeIn 0.3s ease-out forwards;
    opacity: 0; 
    flex-shrink: 0;
}

.vc-msg-row.ai { align-items: flex-start; }
.vc-msg-row.self { align-items: flex-end; }

/* --- 统一通话气泡样式 (确保双方一致) --- */
.vc-msg-text {
    max-width: 85%;
    font-size: 15px;
    line-height: 1.5;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    background: rgba(0, 0, 0, 0.45) !important; 
    padding: 10px 14px;
    border-radius: 12px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.15) !important;
    word-wrap: break-word;
}

.vc-msg-row.self .vc-msg-text {
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
}

/* 底部输入区 */
.vc-footer-area {
    padding: 15px 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    width: 100%;
    z-index: var(--z-card);
}

/* 毛玻璃胶囊输入框 */
.vc-input-capsule {
    width: 100%;
    height: 50px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 25px; /* 圆角胶囊 */
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    padding: 5px; /* 内部留白 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

#vcInput {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    height: 100%;
    color: #fff;
    font-size: 15px;
    padding-left: 15px;
    padding-right: 10px;
}
#vcInput::placeholder {
    color: rgba(255,255,255,0.6);
}

/* 发送按钮 (圆形) */
.vc-send-circle {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}
.vc-send-circle:active {
    background: rgba(255,255,255,0.5);
}
.vc-send-circle i {
    color: #fff;
    font-size: 16px;
    margin-left: -2px; /* 视觉修正 */
    margin-top: 2px;
}
/* --- 朋友圈评论区美化 (左右分离版) --- */

/* 1. 评论单行容器：Flex布局，两端对齐 */
.mp-comment-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important; /* 防止多行文字时叉号跑偏 */
    padding: 2px 4px;
    border-radius: 4px;
    position: relative;
}

/* 点击时的灰色背景反馈 (仿微信) */
.mp-comment-item:active {
    background-color: #e5e5e5;
}

/* 2. 左侧文字区域：占满剩余空间 */
.mp-cmt-body {
    flex: 1; /* 霸占左边所有地盘 */
    margin-right: 10px; /* 跟右边的叉号保持距离 */
    cursor: pointer;
    word-break: break-all;
}

/* 3. 右侧删除按钮：平时隐身，悬停现身 */
.mp-cmt-del {
    color: #999;           /* 颜色深一点点 */
    font-size: 16px;
    font-family: Arial, sans-serif;
    cursor: pointer;
    padding: 0 8px;        /* 增大点击范围 */
    flex-shrink: 0;
    line-height: 1.4;
    
    /* ★★★ 核心修改：默认透明度为0 (看不见) ★★★ */
    opacity: 0;            
    transition: opacity 0.2s ease; /* 加个渐变动画 */
}

/* ★★★ 核心修改：只有当鼠标悬停在整行评论上时，叉号才显示 ★★★ */
.mp-comment-item:hover .mp-cmt-del {
    opacity: 1;
}

/* 点击叉号时变红 */
.mp-cmt-del:active {
    color: #ff3b30;
}

/* 4. (保持之前的) 发送按钮灰色样式 */
.inline-send-btn {
    background-color: #e5e5e5;
    color: #333;
    border: none;
    border-radius: 4px;
    padding: 0 12px;
    height: 36px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 500;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.inline-input-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 8px !important;
    width: 100% !important;
}
/* --- ★★★ 新增：语音通话悬浮小窗样式 ★★★ --- */

#vc-floating-window {
    position: absolute;
    top: 100px;        /* 默认悬浮位置：距离顶部 100px */
    right: 10px;       /* 靠右显示 */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: var(--z-max); /* 保证在所有页面之上 */
    display: none;     /* 默认隐藏 */
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    cursor: pointer;
    border: 2px solid #fff;
    transition: transform 0.2s;
}

#vc-floating-window:active {
    transform: scale(0.95);
}

/* 绿色呼吸光环（表示通话中） */
.vc-float-wave {
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: 50%;
    border: 2px solid #34c759; /* 微信绿 */
    animation: floatPulse 1.5s infinite;
    opacity: 0.6;
    pointer-events: none;
}

@keyframes floatPulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.2); opacity: 0; }
}

/* 悬浮窗内的头像 */
.vc-float-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    padding: 2px; /* 留白 */
    background: #fff;
}

/* 悬浮窗中间的跳动音柱（覆盖在头像上） */
.vc-float-status {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(0,0,0,0.3); /* 半透明黑底，让音柱更明显 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    backdrop-filter: blur(1px);
}

.vc-float-bar {
    width: 3px;
    background: #fff;
    border-radius: 2px;
    animation: voice-wave 1s infinite ease-in-out;
}
/* 复用之前的动画，但调整初始高度 */
.vc-float-bar:nth-child(1) { height: 10px; animation-delay: 0.1s; }
.vc-float-bar:nth-child(2) { height: 16px; animation-delay: 0.3s; }
.vc-float-bar:nth-child(3) { height: 12px; animation-delay: 0.5s; }

/* --- 全局消息通知 (Liquid Glass Toast) - 最终完美隐身版 --- */
#msg-notification-toast {
    position: fixed;
    /* 适配刘海屏，距离顶部有一点距离 */
    top: calc(10px + env(safe-area-inset-top)); 
    left: 50%;
    
    /* 默认位置：藏在屏幕上方外面，而且是不透明度为0，且不可见 */
    transform: translateX(-50%) translateY(-200%); 
    opacity: 0;            
    visibility: hidden;    
    pointer-events: none;  /* 隐身时完全无法点击，不会挡住后面的按钮 */
    
    width: 92%;
    max-width: 380px;
    z-index: var(--z-toast); /* 保证在最顶层 */
    
    /* 动画效果：平滑过渡 */
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); 
    
    cursor: pointer;
    display: flex;
    justify-content: center;
}

/* 激活状态：当JS加上 .show 类名时 */
#msg-notification-toast.show {
    /* 滑下来，变不透明，变可见，允许点击 */
    transform: translateX(-50%) translateY(0); 
    opacity: 1;
    visibility: visible;
    pointer-events: auto; 
}

/* 内部玻璃卡片样式 */
.toast-glass-content {
    width: 100%;
    background: rgba(255, 255, 255, 0.75); 
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-radius: 24px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.toast-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.toast-text-col {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.toast-name {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 2px;
}

.toast-msg {
    font-size: 13px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- START: 数据管理弹窗样式 (新增) --- */
#backup-modal { 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: var(--z-max);
    display: none; 
    align-items: center; 
    justify-content: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
}

.modal-card {
    background: white;
    padding: 25px;
    border-radius: 25px;
    width: 85%;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

.modal-btn {
    display: block;
    width: 100%;
    padding: 14px;
    margin: 10px 0;
    background: #f8f8f8;
    border-radius: 15px;
    color: #333;
    font-weight: 600;
    border: none;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
}

.modal-btn:active { background: #e5e5e5; }

/* 红色危险按钮 */
.modal-btn.danger {
    background: #FF3B30;
    color: white;
}
.modal-btn.danger:active { background: #d63229; }

/* 取消按钮 */
.modal-btn.cancel { color: #999; background: transparent; }
/* --- END: 数据管理弹窗样式 --- */

/* style.css */

/* 后台活动角色列表项 */
.auto-char-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 5px;
    border-bottom: 1px solid #f5f5f5;
}
.auto-char-item:last-child {
    border-bottom: none;
}

.auto-char-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auto-char-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: #eee;
}

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

/* 复选框样式 */
.auto-char-checkbox {
    width: 20px;
    height: 20px;
    accent-color: #000; /* 黑色勾选框 */
    cursor: pointer;
}
/* --- 1. 情侣空间全屏遮罩 (修改版：通透模糊背景) --- */
#couple-space-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: var(--z-modal);
    display: none;
    justify-content: center;
    align-items: center;
    
    /* 改动：去掉全屏粉色晕染，改为黑色半透明遮罩 + 高斯模糊 */
    background: rgba(0, 0, 0, 0.25); 
    backdrop-filter: blur(8px); /* 磨砂玻璃背景 */
    -webkit-backdrop-filter: blur(8px);
    
    opacity: 0;
    transition: opacity 0.3s ease;
}

#couple-space-overlay.active {
    display: flex;
    opacity: 1;
}

/* --- 2. 玻璃面板 (修改版：牛奶樱花粉，通透不突兀) --- */
.couple-glass-box {
    width: 85%;
    max-width: 360px;
    height: 70vh;
    
    /* 核心修改：改为从纯白 -> 极淡的粉白，去除深色杂质 */
    background: linear-gradient(180deg, 
        rgba(255, 255, 255, 0.98) 0%, 
        rgba(255, 252, 253, 0.95) 60%, 
        rgba(255, 240, 245, 0.9) 100%);
        
    /* 保持毛玻璃效果 */
    backdrop-filter: blur(40px) saturate(120%);
    -webkit-backdrop-filter: blur(40px) saturate(120%);
    
    /* 边框改为纯白高亮，增加精致感 */
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 30px;
    
    /* 修改投影：用淡淡的粉色光晕代替深色阴影 */
    box-shadow: 
        0 20px 40px rgba(255, 192, 203, 0.2), /* 很浅的粉色投影 */
        inset 0 -20px 60px rgba(255, 235, 240, 0.5); /* 内部底部泛起一点点嫩粉 */
        
    display: flex;
    flex-direction: column;
    padding: 20px;
    
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    position: relative;
    overflow: hidden;
}

/* 激活时的弹跳动画 */
#couple-space-overlay.active .couple-glass-box {
    transform: scale(1);
}

/* 3. 头部 */
.couple-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 10px;
}

.couple-header-title {
    font-size: 20px;
    font-weight: 800;
    color: #681528; /* 深红褐色 */
    font-family: 'Times New Roman', serif; /* 模仿图中的优雅字体 */
    letter-spacing: 1px;
    font-style: italic;
}

.couple-close-btn {
    font-size: 24px;
    color: #E33B65;
    cursor: pointer;
    line-height: 1;
}

/* 4. 列表区域 */
.couple-scroll-area {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.couple-section-title {
    font-size: 12px;
    color: #E33B65;
    font-weight: 600;
    margin-top: 10px;
    padding-left: 5px;
    opacity: 0.8;
}

.couple-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.couple-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.couple-avatar-box {
    position: relative;
    width: 60px;
    height: 60px;
}

.couple-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(227, 59, 101, 0.1);
}

/* 已开通的心形角标 */
.couple-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: #E33B65;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    border: 2px solid #fff;
}

/* 未开通的加号 */
.couple-plus {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E33B65;
    font-size: 20px;
    opacity: 0;
    transition: opacity 0.2s;
}
.couple-avatar-box:not(.opened):active .couple-plus { opacity: 1; }

.couple-name {
    font-size: 12px;
    color: #681528;
    font-weight: 500;
}
/* --- style.css 新版情侣卡片样式 (替换原来的) --- */

/* 1. 强制去除聊天气泡的默认背景和边距 */
.Miu-miu .content.couple-msg-bubble,
.Miu-miu.user .content.couple-msg-bubble,
.Miu-miu.ai .content.couple-msg-bubble {
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    display: block !important;
    /* 核心：宽度固定为 255px，不再让它自己撑大 */
    width: 255px !important;
    min-width: 255px !important;
    max-width: 255px !important;
}

/* 去除小尾巴 */
.Miu-miu.user .content.couple-msg-bubble::after,
.Miu-miu.ai .content.couple-msg-bubble::before {
    display: none !important;
    content: none !important;
}

/* 2. 卡片主体样式 */
.transfer-card.couple-card {
    /* 粉色渐变背景 */
    background: linear-gradient(135deg, #FAE7EC 0%, #FBE8ED 100%) !important;
    border: 1px solid #E33B65 !important;
    border-radius: 12px !important;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 15px rgba(227, 59, 101, 0.15) !important;
    margin: 5px 0 !important;
    
    /* 核心：固定卡片尺寸 */
    width: 255px !important;
    min-width: 255px !important;
    max-width: 255px !important;
    height: auto !important;
}

/* 3. 卡片上半部分 (紧凑排版) */
.couple-card-top {
    padding: 12px 15px !important; /* 内边距缩小 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    background: transparent !important;
}

/* 4. 图标样式 */
.couple-icon-row {
    font-size: 20px;
    color: #E33B65;
    margin-bottom: 2px;
}
.couple-icon-row i {
    font-size: 20px;
}

/* 5. 标题样式 (去掉那个夸张的 VIP 字体，改用更现代的衬线体或默认) */
.couple-title {
    font-size: 16px !important; /* 字号改小 */
    font-weight: 700 !important;
    color: #681528 !important; /* 深红 */
    letter-spacing: 0.5px;
    line-height: 1.4;
    font-family: inherit; /* 不强制 Times New Roman，看起来更亲切 */
}

/* 6. 副标题/内容样式 */
.couple-subtitle, .couple-msg-content {
    font-size: 11px !important;
    color: #E33B65 !important;
    opacity: 0.8;
}

/* 回复内容 */
.couple-msg-content {
    font-size: 12px !important;
    margin-top: 5px;
    color: #681528 !important;
    font-weight: 500;
}

/* 7. 分割线 */
.couple-line {
    width: 100% !important;
    height: 1px !important;
    background: rgba(227, 59, 101, 0.15) !important;
    margin: 0 !important;
}

/* 8. 底部小字 */
.couple-footer {
    padding: 6px 15px !important;
    font-size: 10px !important;
    color: #E33B65 !important;
    opacity: 0.6;
    text-align: right;
    background: rgba(255, 255, 255, 0.3) !important;
}

/* --- 状态变化颜色 --- */

/* 同意/已开通：背景略深一点的粉 */
.transfer-card.couple-card.accepted,
.transfer-card.couple-card.response-yes {
    background: linear-gradient(135deg, #FAE7EC 0%, #FFD1DC 100%) !important;
    border-color: #E33B65 !important;
}

/* 拒绝：灰色调 */
.transfer-card.couple-card.rejected,
.transfer-card.couple-card.response-no {
    background: #F8F8F8 !important;
    border-color: #DDD !important;
}
.transfer-card.couple-card.response-no .couple-title {
    color: #999 !important;
}
/* ========================================= */
/* ★★★ 情侣空间 (Couple Space) 完整修正版 ★★★ */
/* ========================================= */

/* 1. 详情页容器 (基础层) */
#couple-dashboard-view {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: var(--z-modal);
    background: #fff; 
    display: none;
    flex-direction: column;
    overflow: hidden;
}

/* 2. 动态背景层 (粉色背景) */
#cp-bg-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    background-image: linear-gradient(180deg, #FFFFFF 0%, #FFE6EA 60%, #FFD1DC 100%);
    z-index: var(--z-background);
}

/* 3. 顶部导航栏 (强制白色图标) */
.cp-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(10px + env(safe-area-inset-top)) 15px 10px 15px;
    
    /* ★ 改为白色文字和图标 ★ */
    color: #ffffff; 
    font-size: 17px;
    font-weight: 700;
    position: relative;
    z-index: var(--z-content);
    flex-shrink: 0;
    /* 加一点轻微阴影防止背景太亮看不清 */
    text-shadow: 0 1px 3px rgba(0,0,0,0.1); 
}

.cp-nav-header i {
    color: #ffffff !important; /* 图标强制白色 */
    font-size: 20px;
    cursor: pointer;
}

/* 4. 顶部卡片 (纯白、无光、无立体感) */
.cp-top-card {
    position: relative;
    z-index: var(--z-base);
    flex-shrink: 0;
    background-color: rgba(255, 255, 255, 0.85); 
    
    backdrop-filter: none !important;
    
    /* 去除所有边框和投影 */
    border: none !important;
    border-radius: 24px;
    
    /* 仅保留极淡的轮廓阴影 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    
    margin: 10px 20px 20px 20px;
    padding: 25px 30px;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

/* 头像容器 (彻底去除发光) */
.cp-avatar-wrap {
    width: 65px !important; 
    height: 65px !important;
    border-radius: 50%;
    padding: 0; 
    background: transparent;
    
    /* ★★★ 核心修复：强制去除阴影和发光 ★★★ */
    box-shadow: none !important; 
    border: none !important; 
    
    overflow: hidden;
    flex-shrink: 0;
}

.cp-head-img {
    width: 100%; 
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

/* 中间天数文字 (改为背景同款嫩粉色) */
.cp-days-info { 
    flex: 1; 
    text-align: center; 
    cursor: pointer; 
    z-index: var(--z-base);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cp-days-label { 
    font-size: 12px; 
    /* ★ 改为嫩粉色 (配合背景) ★ */
    color: #FFB7C5!important; 
    margin-bottom: 4px; 
    font-weight: 600; 
    letter-spacing: 1px;
    text-shadow: none !important;
}

.cp-days-count { 
    font-size: 36px; 
    font-weight: 800; 
    /* ★ 改为嫩粉色 (配合背景) ★ */
    color: #FFB7C5 !important; 
    font-family: 'Arial', sans-serif;
    line-height: 1;
    text-shadow: none !important;
}

/* 5. 底部菜单栏 (黑色图标 + 透明度变化) */
.cp-menu-bar {
    display: flex;
    justify-content: space-around;
    padding: 0 20px;
    margin-bottom: 15px;
    flex-shrink: 0;
    position: relative;
    z-index: var(--z-base);
}

.cp-menu-item { 
    /* ★ 默认浅色 (低不透明度) ★ */
    opacity: 0.4; 
    transition: all 0.2s; 
    cursor: pointer; 
}

/* ★ 选中或点击时变深 (完全不透明) ★ */
.cp-menu-item.active { 
    opacity: 1; 
    transform: scale(1.05); 
}

.cp-menu-icon {
    width: 44px; height: 44px;
    background: #ffffff; /* 白底 */
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    
    /* ★ 图标改为黑色 ★ */
    color: #000000; 
    
    /* 淡淡的阴影 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 6. 内容容器 */
.cp-content-container {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
    padding-bottom: 80px;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: var(--z-base);
}

/* --- 情侣相册网格 (表情包大小版) --- */

.cp-album-grid {
    display: grid;
    /* ★★★ 核心修改：这里改成 5，图片就会变小，一排挤5个 ★★★ */
    grid-template-columns: repeat(5, 1fr); 
    
    gap: 6px; /* 图片之间的间隙，6px 刚刚好 */
    padding: 10px 15px; /* 整体内边距 */
    width: 100%;
    box-sizing: border-box; /* 防止宽度溢出 */
}

.cp-album-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* 保持正方形 */
    border-radius: 6px;  /* 圆角稍微改小一点点，适配小图 */
    overflow: hidden;
    background: #f0f0f0;
    /* 加上淡淡的描边，更有表情包的感觉 */
    border: 1px solid rgba(0,0,0,0.05); 
}

.cp-album-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 删除按钮也要相应缩小一点，不然挡住图了 */
.cp-album-del {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px; /* 缩小 */
    height: 18px; /* 缩小 */
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px; /* 图标缩小 */
    color: #fff;
    cursor: pointer;
    z-index: var(--z-base);
}

/* 7. 动态卡片 & 评论区 (修复颜色) */
.cp-feed-item {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.cp-feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
}
.cp-feed-name { font-weight: 700; color: #333; }
.cp-feed-time { color: #ccc; font-size: 11px; }

/* 动态内容行 (包含垃圾桶) */
.cp-feed-row {
    display: flex;
    justify-content: space-between; /* 左右两端对齐 */
    align-items: flex-start;
    width: 100%;
    margin-bottom: 10px;
}

.cp-feed-text { 
    font-size: 15px; 
    color: #444; 
    line-height: 1.6; 
    flex: 1; 
    margin-right: 15px;
    white-space: pre-wrap; 
    word-break: break-all;
}

.cp-del-btn {
    color: #ddd; /* 浅灰垃圾桶 */
    font-size: 14px;
    cursor: pointer;
    padding: 2px 5px;
    flex-shrink: 0;
    margin-top: 2px;
}
.cp-del-btn:active { color: #ff3b30; }

/* ★★★ 评论区 (全灰修复) ★★★ */
.cp-comments-area {
    background: #F9F9F9;
    border-radius: 10px;
    padding: 10px 12px;
    margin-top: 5px;
    font-size: 13px;
    display: flex; 
    flex-direction: column; 
    gap: 6px;
    
    /* 强制整体变灰 */
    color: #999 !important; 
}

.cp-comment-row { 
    /* 评论内容灰色 */
    color: #999 !important; 
    line-height: 1.4; 
    word-break: break-all; 
}

.cp-cmt-user { 
    /* 评论名字稍微深一点的灰，不要黑色 */
    font-weight: 600; 
    color: #777 !important; 
    cursor: pointer; 
}

/* 8. 悬浮发布按钮 (+号) */
.cp-fab-btn {
    position: absolute;
    bottom: 40px; right: 25px;
    width: 50px; height: 50px;
    background: #000; 
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    z-index: var(--z-popover);
    transition: transform 0.1s;
    cursor: pointer;
}
.cp-fab-btn:active { transform: scale(0.9); }

/* 9. 输入弹窗 */
.cp-input-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(5px);
    z-index: var(--z-max) !important;
    display: none;
    align-items: center; justify-content: center;
}

.cp-input-box {
    width: 80%;
    max-width: 320px;
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    animation: zoomIn 0.2s ease;
    display: flex;
    flex-direction: column;
}
.cp-input-title { font-weight: bold; margin-bottom: 15px; color: #333; text-align: center; font-size: 16px; }
#cp-input-text {
    width: 100%; height: 100px;
    border: 1px solid #eee; border-radius: 12px;
    padding: 10px; font-size: 15px; outline: none;
    background: #f9f9f9; resize: none; margin-bottom: 15px;
    box-sizing: border-box;
}
.cp-btn-row { display: flex; gap: 10px; }
.cp-btn { flex: 1; padding: 12px 0; text-align: center; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; }
.cp-btn.cancel { background: #f2f2f2; color: #666; }
.cp-btn.confirm { background: #000; color: #fff; }

@keyframes zoomIn { 
    from { opacity: 0; transform: scale(0.9); } 
    to { opacity: 1; transform: scale(1); } 
}
/* --- 情侣空间：经期日历样式 --- */

/* 日历头部 */
.cp-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5px;
    margin-bottom: 10px;
}
.cp-cal-month {
    font-size: 20px;
    font-weight: 800;
    color: #333;
}
.cp-cal-controls i {
    font-size: 18px;
    color: #333;
    padding: 5px 10px;
    cursor: pointer;
}

/* 星期抬头 */
.cp-week-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
}

/* 日历网格 */
.cp-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* 自动填充高度，使其铺满 */
    grid-auto-rows: 1fr; 
    gap: 8px 0;
    padding-bottom: 20px;
}

/* 日期单元格 */
.cp-date-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 50px;
    cursor: pointer;
    position: relative;
}

.cp-date-num {
    font-size: 16px;
    color: #333;
    z-index: var(--z-base);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 500;
}

/* 今天的特殊样式 (文字下面加个点或者圈) */
.cp-date-cell.is-today .cp-date-num {
    border: 1px solid #E33B65;
    color: #E33B65;
    font-weight: 700;
}

/* --- 状态颜色圆圈 (模仿图示) --- */

/* 1. 经期 (实心粉红) */
.cp-date-cell.status-period .cp-date-num {
    background-color: #FF5276;
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 82, 118, 0.4);
}

/* 2. 预测经期 (浅粉条纹或浅色) */
.cp-date-cell.status-predict .cp-date-num {
    background-color: #FFDce5; /* 浅粉 */
    color: #FF5276;
    /* 加上斜纹效果更像预测 */
    background-image: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.5) 2px,
      rgba(255, 255, 255, 0.5) 4px
    );
}

/* 3. 排卵期 (浅蓝) */
.cp-date-cell.status-fertile .cp-date-num {
    background-color: #5AC8FA;
    color: #fff;
}

/* 4. 排卵日 (紫色/深蓝) */
.cp-date-cell.status-ovulation .cp-date-num {
    background-color: #9d75ff; /* 紫色 */
    color: #fff;
    box-shadow: 0 2px 8px rgba(157, 117, 255, 0.4);
}

/* 心形小图标 (可选，放在日期下方) */
.cp-date-icon {
    font-size: 8px;
    margin-top: 2px;
    color: #FF5276;
    display: none;
}
.cp-date-cell.has-record .cp-date-icon { display: block; }

/* 底部图例 */
.cp-legend-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}
.cp-legend-item {
    display: flex;
    align-items: center;
    font-size: 11px;
    color: #666;
    gap: 4px;
}
.cp-dot { width: 8px; height: 8px; border-radius: 50%; display: block; }
.l-period { background: #FF5276; }
.l-predict { background: #FFDce5; }
.l-fertile { background: #5AC8FA; }
.l-ovulation { background: #9d75ff; }

/* 状态选择弹窗 */
.cp-period-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.cp-p-opt {
    padding: 12px;
    border-radius: 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
}
.cp-p-opt.period { background: #FF5276; }
.cp-p-opt.predict { background: #FFDce5; color: #FF5276; }
.cp-p-opt.fertile { background: #5AC8FA; }
.cp-p-opt.ovulation { background: #9d75ff; }
.cp-p-opt.clear { background: #f0f0f0; color: #666; }

/* --- 信箱 (Letter) 容器 --- */
.cp-letter-container {
    padding: 30px 20px;
    position: relative; /* 必须保留，作为连线的定位基准 */
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 50px; /* 增加卡片垂直间距，让连线稍微长一点，更好看 */
    min-height: 100%;
}

/* ❌ 删除中间的垂直时间轴线，因为你说不需要中间有竖线 */
.cp-letter-timeline-line {
    display: none; 
}

/* --- 卡片样式 (侦探线索板/拍立得风格) --- */
.cp-letter-card {
    position: relative;
    width: 46%; /* 左右交错 */
    background: #fff;
    /* 模仿纸张质感 */
    padding: 15px 15px 25px 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
    z-index: var(--z-base);
    cursor: pointer;
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
    gap: 8px;
    
    /* 稍微加一点纸张纹理背景 */
    background-image: linear-gradient(to bottom, #fafafa 0%, #fff 100%);
    border: 1px solid #eee;
}

.cp-letter-card:active {
    transform: scale(0.98) !important; /* 点击微缩 */
}

/* 左右交错布局 */
.cp-letter-card.left {
    align-self: flex-start;
    transform: rotate(-3deg); /* 向左歪一点 */
    margin-right: auto;
}

.cp-letter-card.right {
    align-self: flex-end;
    transform: rotate(2deg); /* 向右歪一点 */
    margin-left: auto;
}

/* --- 大头针 (Pin) 效果 --- */
.cp-letter-card::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #333; /* 黑色圆钉 */
    box-shadow: 1px 2px 4px rgba(0,0,0,0.3);
    z-index: var(--z-content);
    top: -6px; /* 钉在卡片正上方中间 */
    left: 50%;
    transform: translateX(-50%);
}

.cp-lines-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
    z-index: var(--z-background);
    overflow: visible;
}

/* 连线的样式 */
.cp-connection-line {
    stroke: #666;      /* 线条颜色：深灰，像棉线 */
    stroke-width: 1.5px; /* 线条粗细 */
    stroke-opacity: 0.6; /* 稍微透明一点，不抢眼 */
    fill: none;
    /* 如果想要虚线效果，可以加这句: stroke-dasharray: 5, 5; */
}

/* --- 卡片样式调整 --- */
.cp-letter-card {
    /* 保持原有的样式不变 */
    position: relative;
    width: 46%;
    background: #fff;
    padding: 15px 15px 25px 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
    z-index: var(--z-base);
    cursor: pointer;
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-image: linear-gradient(to bottom, #fafafa 0%, #fff 100%);
    border: 1px solid #eee;
}

/* 左右交错角度稍微大一点，增加不规则感 */
.cp-letter-card.left {
    align-self: flex-start;
    transform: rotate(-3deg); 
    margin-right: auto;
}

.cp-letter-card.right {
    align-self: flex-end;
    transform: rotate(3deg); 
    margin-left: auto;
}

/* --- 大头针 (Pin) --- */
.cp-letter-card::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #333;
    box-shadow: 1px 2px 4px rgba(0,0,0,0.3);
    z-index: var(--z-content);
    top: -6px; /* 钉在卡片正上方中间 */
    left: 50%;
    transform: translateX(-50%);
    /* 给这个钉子加个标记，方便JS找到它的位置 */
    pointer-events: none;
}

/* ❌ 彻底删除之前的 ::after 连线代码，我们现在用 JS 画真线 */
.cp-letter-card::after {
    display: none;
}


/* --- 卡片内部排版 --- */

/* 1. 第一行：数字 + 横线 */
.cp-l-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.cp-l-num {
    font-size: 24px;
    font-weight: 700; /* 粗体 */
    font-family: 'Times New Roman', serif; /* 衬线体更好看 */
    color: #333;
    line-height: 1;
}

/* 那个横线 */
.cp-l-sep-line {
    flex: 1; /* 占满剩余宽度 */
    height: 1px;
    background-color: #333; /* 黑线 */
    opacity: 0.8;
}

/* 2. 第二行：标题 */
.cp-l-title {
    font-size: 14px;
    font-weight: 700;
    color: #000;
    margin: 5px 0 10px 0;
    line-height: 1.4;
    text-align: left; /* 标题左对齐 */
    
    /* 最多显示两行标题，多了省略 */
    display: -webkit-box;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ❌ 隐藏正文预览 (核心要求) */
.cp-l-preview {
    display: none !important;
}

/* 3. 第三行：From 和 Date */
.cp-l-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: #999;
    font-family: serif; /* 衬线体 */
    margin-top: auto; /* 推到底部 */
}

.cp-l-from {
    font-style: italic;
    color: #666;
    font-weight: 600;
}

/* --- 写信弹窗样式 --- */
.cp-letter-input-title {
    width: 100%;
    border: none;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 600;
    outline: none;
    background: transparent;
    margin-bottom: 15px;
}

.cp-letter-input-area {
    flex: 1;
    width: 100%;
    border: none;
    background: #f9f9f9;
    border-radius: 12px;
    padding: 15px;
    font-size: 14px;
    line-height: 1.6;
    outline: none;
    resize: none;
}

/* --- 读信全屏样式 (Paper View) --- */
.cp-letter-paper-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(5px);
    z-index: var(--z-popover);
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
}
.cp-letter-paper-overlay.active { display: flex; opacity: 1; }

.cp-letter-paper {
    width: 90%;
    max-width: 400px;
    height: 85vh; /* 长信纸 */
    background: #fffdf5; /* 米黄色纸张 */
    border-radius: 2px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    padding: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cp-letter-paper-overlay.active .cp-letter-paper { transform: translateY(0); }

/* 纸张纹理 */
.cp-paper-texture {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(#e6e6e6 1px, transparent 1px);
    background-size: 100% 30px; /* 行间距 */
    opacity: 0.15;
    pointer-events: none;
}

.cp-paper-header {
    display: flex;
    justify-content: space-between;
    font-family: 'Times New Roman', serif;
    color: #999;
    font-size: 12px;
    margin-bottom: 20px;
}

.cp-paper-title {
    font-size: 20px;
    font-weight: 800;
    color: #333;
    text-align: center;
    margin-bottom: 10px;
    font-family: serif;
}

.cp-paper-line {
    width: 40px;
    height: 2px;
    background: #333;
    margin: 0 auto 20px auto;
}

.cp-paper-body {
    flex: 1;
    overflow-y: auto;
    font-size: 15px;
    line-height: 30px; /* 对齐网格线 */
    color: #444;
    white-space: pre-wrap;
    text-align: justify;
    padding-bottom: 20px;
    font-family: serif; /* 衬线体更有书信感 */
}

.cp-paper-footer {
    text-align: right;
    font-family: serif;
    font-size: 14px;
    color: #666;
    margin-top: 10px;
    font-style: italic;
}

.cp-paper-close {
    position: absolute;
    top: 15px; right: 15px;
    font-size: 20px;
    color: #ccc;
    cursor: pointer;
}
.cp-paper-close:hover { color: #333; }

/* --- 极简液态菜单专用样式 --- */

/* 1. 菜单容器：取消默认的白色大背景，改为透明布局容器 */
.simple-glass-menu {
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 12px; /* 上下两组按钮的间距 */
    animation: popupScale 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 2. 按钮组容器 (上面两个按钮包在一起) */
.sg-group {
    display: flex;
    flex-direction: column;
    /* 液态玻璃核心 */
    background: rgba(255, 255, 255, 0.75); 
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border-radius: 14px;
    overflow: hidden;
    /* 玻璃光泽边框 */
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* 3. 按钮通用样式 (纯文字包裹) */
.sg-btn {
    height: 56px; /* 按钮高度，方便点击 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #333; /* 默认黑色文字 */
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    /* 确保文字居中 */
    text-align: center;
}

/* 点击时的反馈 (变深一点) */
.sg-btn:active {
    background: rgba(255, 255, 255, 0.5);
}

/* 4. 分割线 (极细) */
.sg-line {
    height: 1px;
    background: rgba(0, 0, 0, 0.1); /* 很淡的黑线 */
    width: 100%;
}

/* 5. 危险操作 (解除关系) - 只有文字变红，没有其他花哨的 */
.sg-btn.danger {
    color: #ff3b30; 
    font-weight: 600;
}

/* 6. 取消按钮 (独立的一块玻璃) */
.sg-btn.cancel {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border-radius: 14px;
    color: #007aff; /* 蓝色文字表示取消 */
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* 覆盖可能存在的旧样式干扰 */
#couple-settings-modal .glass-popup-box {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    width: auto !important;
}

/* --- ★★★ 修复：情侣问答 (Questions) 缺失的样式 ★★★ --- */

/* 1. 问答列表容器 */
#cp-questions-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-bottom: 20px;
}

/* 2. 问题卡片主体 */
.cp-qa-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s;
    border: 1px solid rgba(0,0,0,0.02);
}
.cp-qa-card:active {
    transform: scale(0.99);
}

/* 3. 问题标题 */
.cp-qa-title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 6px;
    line-height: 1.4;
}

/* 4. 副标题 (标签、日期) */
.cp-qa-sub {
    font-size: 11px;
    color: #999;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

/* 5. 分割线 */
.cp-qa-line {
    width: 100%;
    height: 1px;
    background: #f5f5f5;
    margin-bottom: 12px;
}

/* 6. 回答区域块 */
.cp-qa-answer-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 7. 回答行 (名字+内容) */
.cp-qa-row {
    display: flex;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.6;
}

/* 名字样式 */
.cp-qa-name {
    font-weight: 700;
    white-space: nowrap;
    margin-right: 6px;
    min-width: fit-content;
}
.cp-qa-name.is-me { color: #666; }    /* 我的名字颜色 */
.cp-qa-name.is-char { color: #666; }     /* 对方名字颜色 */

/* 内容样式 */
.cp-qa-text {
    color: #555;
    word-break: break-all;
    flex: 1;
}

/* 8. 按钮容器 */
.cp-qa-btn-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
}

/* 9. 修改按钮 (小) */
.cp-qa-action-btn {
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 12px;
    background: #f7f7f7;
    color: #888;
    cursor: pointer;
    border: 1px solid #eee;
    transition: all 0.2s;
}
.cp-qa-action-btn:active {
    background: #e0e0e0;
    color: #333;
}

.cp-qa-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
}

/* 灰色输入框 */
.cp-qa-inline-input {
    flex: 1;
    background: #f5f5f5; /* 灰色背景 */
    border: 1px solid #eee;
    border-radius: 30px; /* 圆角胶囊状 */
    padding: 8px 12px;
    font-size: 13px;
    color: #333;
    outline: none;
    font-family: inherit;
    transition: background 0.2s;
}

.cp-qa-inline-input:focus {
    background: #fff;
    border-color: #ddd;
}

/* 发送按钮 */
.cp-qa-inline-btn {
    font-size: 13px;
    font-weight: 600;
    color: #333; /* 黑色文字 */
    padding: 6px 12px;
    background: #e0e0e0;
    border-radius: 15px;
    cursor: pointer;
    white-space: nowrap;
    border: none;
}

.cp-qa-inline-btn:active {
    background: #d0d0d0;
}

/* --- 问答左滑删除样式 --- */

/* 1. 外层包裹容器 (隐藏超出的删除按钮) */
.cp-qa-swipe-container {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden; /* 关键：隐藏右边的删除按钮 */
    border-radius: 18px; /* 保持圆角 */
    margin-bottom: 15px; /* 卡片间距 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

/* 2. 实际滑动的卡片层 */
.cp-qa-card-slider {
    position: relative;
    z-index: var(--z-base);
    background: #ffffff;
    width: 100%;
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); /* 平滑回弹 */
    /* 注意：要把原来 .cp-qa-card 的 margin 和 shadow 移到容器上，这里去掉 */
    box-shadow: none !important;
    margin-bottom: 0 !important;
    border-radius: 18px; /* 保持圆角 */
}

/* 3. 红色删除按钮 (定位在右侧) */
.cp-qa-delete-action {
    position: absolute;
    top: 0;
    right: 0;
    width: 70px;
    height: 100%;
    background-color: #ff3b30;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: var(--z-base);
    border-radius: 0 18px 18px 0;
    opacity: 0; 
    transition: opacity 0.2s ease;
}

/* --- 消息翻译功能样式 --- */

/* 分割线 */
.msg-trans-line {
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1); /* 淡淡的黑线 */
    margin: 8px 0;
    display: block;
}

/* 黑暗模式/深色气泡适配 (用户发的消息如果是深色背景) */
.Miu-miu.user .content .msg-trans-line {
    background-color: rgba(255, 255, 255, 0.2); /* 淡淡的白线 */
}

/* 翻译后的文字 */
.msg-trans-text {
    font-size: 12px; /* 比正文稍小 */
    line-height: 1.4;
    opacity: 0.85;   /* 稍微淡一点 */
    font-weight: 400;
}

/* 1. 列表容器：清理多余的内边距 */
.cp-mood-timeline {
    padding: 20px 15px; /* 给左右留点空隙 */
    padding-bottom: 50px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px; /* 每条日记之间的间距 */
    overflow-y: auto;
    overflow-x: hidden;
}

/* 2. 单条日记容器 */
.mood-node {
    display: flex;
    flex-direction: column; /* 垂直排列：上面是时间，下面是卡片 */
    width: 100%;
    margin-bottom: 5px;
}

/* 左右对齐逻辑 */
.mood-node.left {
    align-items: flex-start; /* 对方靠左 */
}
.mood-node.right {
    align-items: flex-end;   /* 我靠右 */
}

/* 3. 新增：时间日期标签样式 */
.mood-date-tag {
    font-size: 11px;
    color: #b0b0b0; /* 浅灰色，不抢眼 */
    margin-bottom: 6px;
    font-family: Arial, sans-serif;
    padding: 0 4px; /* 稍微跟边缘有点距离 */
}

/* 4. 直角卡片样式 (保持你喜欢的直角风格) */
.mood-unified-card {
    background: #ffffff;
    padding: 10px 14px;
    
    /* 直角 */
    border-radius: 2px !important; 
    
    /* 纸条边框 */
    border: 1px solid #e0e0e0 !important;
    
    /* 纸条投影 */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.03) !important;
    
    display: inline-flex;
    align-items: center; 
    gap: 10px; 
    max-width: 85%; /* 限制最大宽度，防止太长 */
}

/* 只有右侧(我)的消息，让贴图在右边，文字在左边 */
.mood-node.right .mood-unified-card {
    flex-direction: row-reverse; 
}

/* 贴图大小 */
.mood-sticker-img {
    width: 28px; 
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

/* 文字样式：手写感/日记感 */
.mood-text-content {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
    text-align: left;
    /* 字体建议，如果不喜欢可以去掉这行 */
    font-family: serif; 
}

/* 左侧 (Char) - 内容在左，往右对齐 */
.mood-node.left .mood-wrapper-side {
    justify-content: flex-end; 
    padding-right: 20px; /* 给圆点留空隙 */
}

/* 右侧 (Me) - 内容在右，往左对齐 */
.mood-node.right .mood-wrapper-side {
    margin-left: 50%;
    justify-content: flex-start;
    padding-left: 20px; /* 给圆点留空隙 */
}

/* 5. 核心：长条形文字框 (自适应高度) */
.mood-unified-card {
    background: #ffffff;
    
    /* 上下内边距，左右内边距 */
    padding: 8px 12px; 
    
    border-radius: 8px; /* 小圆角 */
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    
    display: inline-flex;
    align-items: center; /* 图标和文字垂直居中 */
    gap: 8px; 
    
    position: relative;
    z-index: var(--z-base);
    height: auto; 
    min-height: 36px;
    max-width: 100%; /* 防止撑破屏幕 */
}

/* 右侧(我)的消息，贴图在右，文字在左 */
.mood-node.right .mood-unified-card {
    flex-direction: row-reverse; 
}

/* 6. 内容元素微调 */
.mood-sticker-img {
    width: 32px; 
    height: 32px;
    object-fit: contain;
    flex-shrink: 0; /* 防止贴图被挤扁 */
}

.mood-text-content {
    font-size: 13px;
    color: #444;
    font-weight: 500;
    
    /* ★★★ 核心修复：允许换行，禁止省略号 ★★★ */
    white-space: pre-wrap;  /* 保留换行符，自动换行 */
    word-break: break-all;  /* 长单词强制换行 */
    overflow: visible;      /* 显示所有内容 */
    line-height: 1.5;       /* 增加行高，多行时更好看 */
    max-width: 130px;       /* 限制文字最大宽度，强制多行 */
    text-align: left;
}

/* 时间戳：放在卡片上方 */
.mood-time-label {
    position: absolute;
    top: -18px; 
    font-size: 10px;
    color: #ccc;
    font-family: Arial, sans-serif;
    white-space: nowrap;
}

/* 时间对齐微调 */
.mood-node.left .mood-time-label { right: 20px; }
.mood-node.right .mood-time-label { left: 20px; }

/* 7. ★★★ 恢复输入框样式 ★★★ */
/* 强制覆盖之前任何可能导致居中的样式 */
.cp-mood-input {
    width: 100%; 
    height: 100px;
    background: #f7f7f7 !important; 
    border: 1px solid #eee !important;
    border-radius: 12px; 
    padding: 12px !important;
    font-size: 14px !important; 
    color: #333 !important;
    outline: none; 
    resize: none;
    text-align: left !important; /* 核心：左对齐 */
    box-sizing: border-box;
    font-family: inherit;
}

/* 保持弹窗选图网格正常 */
.cp-mood-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
.cp-mood-option {
    display: flex; flex-direction: column; align-items: center;
}
.cp-mood-option img { width: 45px; height: 45px; }

/* ========================================= */
/* ★★★ 钱包功能样式 (完美复刻 SVG 版) ★★★ */
/* ========================================= */

#wallet-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: var(--z-page-secondary);
    display: none;
    flex-direction: column;
    background: #fff;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#wallet-overlay.active {
    transform: translateX(0);
}

/* 背景层 */
#wallet-bg-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #FFF2F4; 
    background-size: cover;
    background-position: center;
    z-index: var(--z-background);
}

/* 顶部导航容器 */
.wallet-nav-bar {
    position: relative;
    z-index: var(--z-content);
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-bottom: 5px; 
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-shadow: none;
    color: #333;
}

.wallet-nav-title {
    font-size: 18px;
    font-weight: 700;
}

/* 左侧：交换图标 (SVG 容器) */
.wallet-nav-icon-left {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    position: relative; /* 用于叠加 SVG */
    opacity: 1;
    transition: opacity 0.2s;
}

.wallet-nav-icon-left svg {
    /* 确保 SVG 颜色正确 */
    stroke: #2b91f0; 
}

.wallet-nav-icon-left:active { 
    opacity: 0.6; 
}

/* 右侧：装饰 (蓝色圆圈+白点) - 已缩小尺寸 */
.wallet-menu-circle {
    width: 24px;   /* 从 32px 改为 24px，更小巧 */
    height: 24px;  /* 从 32px 改为 24px */
    background-color: #007aff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px; /* 图标文字也相应调小 */
    box-shadow: 0 2px 5px rgba(0, 122, 255, 0.25);
    cursor: pointer;
}

/* 滚动区域 */
.wallet-scroll-content {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    position: relative;
    z-index: var(--z-base);
    -webkit-overflow-scrolling: touch;
}

/* 通用白色卡片 */
.w-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    margin-bottom: 15px;
}

/* 1. 净资产卡片 */
.w-asset-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.w-asset-label {
    font-size: 13px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 净资产大数字 */
.w-asset-num {
    font-size: 32px;
    font-weight: 800;
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
    letter-spacing: -0.5px;
    cursor: pointer; 
    border-bottom: none !important;
    display: inline-block;
    width: fit-content;
}
.w-asset-num:active { opacity: 0.6; }

/* 2. 收支概览行 */
.w-row-summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.w-summary-item {
    flex: 1;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.w-sum-label {
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
}

.w-sum-num {
    font-size: 18px;
    font-weight: 700;
    font-family: -apple-system, sans-serif;
    color: #000;
}

/* 3. 交易列表样式 - 日期栏上移 */
.w-date-header {
    font-size: 12px;
    color: #888;
    /* ★ 核心：上间距极小，让列表紧贴上方 */
    margin: 5px 5px 8px 5px !important; 
    font-weight: 500;
    display: flex;
    justify-content: space-between;
}

.w-trans-card-group {
    background: #ffffff;
    border-radius: 16px;
    padding: 5px 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    margin-bottom: 10px;
}

.w-trans-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f5f5f5;
}
.w-trans-item:last-child { border-bottom: none; }

/* 箭头图标容器 */
.w-arrow-box {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-right: 12px;
    flex-shrink: 0;
    font-size: 18px;
}
.w-arrow-box.expense { background-color: #555555; }
.w-arrow-box.income { background-color: #34C759; }

.w-trans-info { flex: 1; display: flex; flex-direction: column; }
.w-trans-name { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 2px; }
.w-trans-time { font-size: 11px; color: #aaa; }
.w-trans-amount { font-size: 16px; font-weight: 600; font-family: -apple-system, sans-serif; text-align: right; color: #333; }

#wallet-menu-overlay { z-index: var(--z-popover); }

/* --- 1. 亲属卡图标 (灰色线条风格) --- */
.icon-relative-bg {
    width: 100%;
    height: 100%;
    /* 使用灰色 (#666666) 绘制，卡片+爱心形状 */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='2' y='5' width='20' height='14' rx='2' stroke='%23666666' stroke-width='2'/%3e%3cpath d='M12 14.5C12 14.5 14 12.5 16 12.5C18 12.5 19 13.5 19 15' stroke='%23666666' stroke-width='1.5' stroke-linecap='round'/%3e%3cpath d='M7 10H10' stroke='%23666666' stroke-width='2' stroke-linecap='round'/%3e%3cpath d='M7 14H12' stroke='%23666666' stroke-width='2' stroke-linecap='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    opacity: 0.8;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tool-icon-box:active .icon-relative-bg {
    transform: scale(0.9);
    opacity: 1;
}

/* --- 2. 亲属卡气泡样式 (灰蓝莫兰迪色系) --- */

/* 卡片整体：灰蓝色背景，无发光 */
.transfer-card.relative-card {
    background: #F4F7F9 !important; /* 很淡的灰蓝 */
    background-color: #F4F7F9 !important;
    border: 1px solid #D8E0E8 !important; /* 淡蓝灰边框 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important; /* 极淡的阴影 */
}

/* 顶部区域透明 */
.transfer-card.relative-card .transfer-top {
    background: transparent !important;
}

/* 里面的图标 (深蓝灰色) */
.transfer-card.relative-card .couple-icon-row {
    color: #5C7080 !important; 
}

/* 标题 (深灰) */
.transfer-card.relative-card .couple-title {
    color: #333333 !important;
}

/* 副标题/金额 (浅灰) */
.transfer-card.relative-card .couple-subtitle {
    color: #8899A6 !important;
}

/* 分割线 (淡白/灰) */
.transfer-card.relative-card .transfer-line {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* 底部区域 (稍微深一点的灰蓝) */
.transfer-card.relative-card .transfer-footer {
    background-color: #EBF0F5 !important;
    color: #5C7080 !important;
    text-align: left !important; /* 文字靠左 */
    font-weight: 500 !important;
}

/* --- 状态变化颜色 (已领取/已退还) --- */
/* 保持一种更加低调的灰色 */
.transfer-card.relative-card.accepted,
.transfer-card.relative-card.rejected {
    background: #F8F8F8 !important;
    border-color: #EEEEEE !important;
}
.transfer-card.relative-card.accepted .couple-title,
.transfer-card.relative-card.rejected .couple-title {
    color: #999 !important;
}
.transfer-card.relative-card.accepted .transfer-footer,
.transfer-card.relative-card.rejected .transfer-footer {
    background-color: #F2F2F2 !important;
    color: #CCC !important;
}

/* style.css */

.mask-avatar-menu {
  position: fixed;
  display: none;
  flex-direction: column;
  width: 150px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(255,255,255,0.98);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  z-index: var(--z-max); 
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#userMaskPage {
    position: fixed !important; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-settings-sub) !important; 
    background-color: #FFF2F4 !important; 
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top);
    box-sizing: border-box;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#userMaskPage.active {
    transform: translateX(0);
}

/* style.css */

/* --- 快速格式修复面板样式 --- */
.quick-fix-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #eee;
    width: 100%;
}

.quick-fix-title {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
    margin-left: 2px;
    font-weight: 500;
}

.quick-fix-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 依然是一行3个 */
    gap: 8px; /* 间距 */
}

.fix-btn {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 8px 5px;
    display: flex;
    flex-direction: row; /* 图标文字横排 */
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.fix-btn:active {
    background-color: #e5e5e5;
    transform: scale(0.96);
}

.fix-btn i {
    font-size: 14px;
    color: #555;
    width: 16px;
    text-align: center;
}

.fix-btn span {
    font-size: 12px;
    color: #333;
    font-weight: 500;
}

/* --- style.css 末尾添加 --- */

/* 1. 全屏遮罩 (深色背景) */
#activation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000; /* 纯黑背景 */
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}

/* 2. 白色激活卡片 */
.activation-card {
    background: #ffffff;
    width: 80%;
    max-width: 320px;
    border-radius: 20px;
    padding: 30px 25px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(255, 255, 255, 0.1);
    animation: popIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes popIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* 3. 标题和文字 */
.act-title {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin: 0 0 10px 0;
}

.act-desc {
    font-size: 13px;
    color: #888;
    margin-bottom: 25px;
    line-height: 1.5;
}

/* 4. 设备码灰色区域 */
.device-code-box {
    background: #F5F5F7;
    border-radius: 10px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border: 1px solid #E5E5EA;
}

.dc-label {
    font-size: 13px;
    color: #333;
    font-weight: 500;
}

.dc-value {
    font-family: monospace;
    font-size: 14px;
    color: #007AFF; /* 蓝色 */
    font-weight: 700;
    letter-spacing: 0.5px;
}

.dc-copy-btn {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    transition: background 0.2s;
}
.dc-copy-btn:active { background: #eee; }

/* 5. 输入框 */
.act-input {
    width: 100%;
    height: 44px;
    border: 1px solid #E5E5EA;
    border-radius: 10px;
    text-align: center;
    font-size: 16px;
    color: #333;
    margin-bottom: 15px;
    outline: none;
    box-sizing: border-box; /* 防止撑破 */
    background: #fff;
}
.act-input:focus { border-color: #007AFF; }

/* 6. 激活按钮 */
.act-confirm-btn {
    width: 100%;
    height: 44px;
    background-color: #007AFF;
    color: white;
    border: none;
    border-radius: 22px; /* 圆润按钮 */
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}
.act-confirm-btn:active { transform: scale(0.96); }

/* 7. 底部小字 */
.act-footer-text {
    margin-top: 15px;
    font-size: 11px;
    color: #ccc;
}

/* ========================================= */
/* ★★★ 视频通话完整样式 (修复版：贴边+去白框+飞机靠右) ★★★ */
/* ========================================= */

/* 1. 视频通话全屏容器 */
#video-call-overlay {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    z-index: var(--z-modal); 
    background: #000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#video-call-overlay.active {
    transform: translateY(0);
}

/* 2. AI 全屏背景层 */
#video-bg-layer {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: var(--z-base); 
    filter: brightness(0.9); 
}

/* 3. 用户摄像头 (右上角无框贴边) */
.video-user-cam-box {
    position: absolute;
    /* 紧贴顶部安全区 + 5px 间隙 */
    top: calc(5px + var(--safe-top));   
    /* 紧贴右侧 */
    right: 5px; 
    
    width: 100px;
    height: 140px;
    
    /* 关键：去除背景色和边框 */
    background: transparent;
    border: none;
    box-shadow: none;
    
    border-radius: 12px;
    overflow: hidden;
    z-index: var(--z-popover); 
}

#user-cam-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1); /* 镜像 */
    background: transparent;
}

/* 4. 顶部栏 (Header) */
.vc-header {
    padding-top: calc(10px + var(--safe-top));
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    z-index: var(--z-header); 
}

.vc-minimize-btn {
    font-size: 20px;
    opacity: 0.8;
    cursor: pointer;
    padding: 5px;
}

.vc-char-name {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* 5. 屏幕中间的动作描写 (字幕风格) */
#video-status-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--z-header);
    
    font-size: 13px; 
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    
    /* 极淡背景，仅为了看清字 */
    background: rgba(0, 0, 0, 0.2); 
    padding: 4px 12px;              
    border-radius: 20px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    
    text-align: center;
    max-width: 85%;
    line-height: 1.4;
    pointer-events: none;
    
    display: none; 
    transition: opacity 0.2s;
}

/* 6. 滚动消息区 */
#videoScrollContent {
    flex: 1;
    overflow-y: auto;
    /* 顶部留白避开摄像头 */
    padding-top: 220px; 
    padding-bottom: 20px;
    padding-left: 15px;
    padding-right: 15px;
    z-index: var(--z-content); 
    
    /* 顶部渐变遮罩 */
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%);
    
    scrollbar-width: none;
}
#videoScrollContent::-webkit-scrollbar { display: none; }

.vc-msg-row {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 15px;
    flex-shrink: 0;
    animation: vcSlideIn 0.3s ease-out forwards;
}

@keyframes vcSlideIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.vc-msg-row.ai { align-items: flex-start; }
.vc-msg-row.self { align-items: flex-end; }

.vc-msg-text {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.5;
    color: #fff;
    word-wrap: break-word;
    
    background: rgba(0, 0, 0, 0.45); 
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 动作描写行 (居中) */
.vc-action-row {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 10px;
    animation: fadeIn 0.5s;
}
.vc-action-text {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    background: rgba(0,0,0,0.25);
    padding: 4px 10px;
    border-radius: 12px;
    font-style: italic;
}

/* 7. 底部输入区 (修复的核心) */
.vc-footer-area {
    padding: 15px 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    width: 100%;
    z-index: var(--z-card);
}

/* 胶囊容器：这里负责统一的半透明背景 */
.vc-input-capsule {
    width: 100%;
    height: 50px;
    
    /* 整体磨砂玻璃背景 */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    
    border-radius: 30px; 
    
    /* Flex 布局：保证左边输入框，右边按钮 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    padding: 5px 5px 5px 15px; /* 右边padding小一点让按钮贴边 */
    box-shadow: none;
}

/* 输入框：透明化，挤占空间 */
#videoInput {
    flex: 1; /* 占据所有剩余空间，把按钮挤到最右 */
    background: transparent;
    border: none;
    outline: none;
    height: 100%;
    color: #fff;
    font-size: 15px;
    padding: 0;
    margin-right: 10px;
}
#videoInput::placeholder {
    color: rgba(255,255,255,0.6);
}

/* 发送按钮 (小飞机) */
.vc-send-circle {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.2); /* 按钮自己的小圆底 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0; /* 防止被挤压 */
}
.vc-send-circle:active {
    background: rgba(255,255,255,0.4);
}
.vc-send-circle i {
    color: #fff;
    font-size: 16px;
    margin-left: -2px; 
    margin-top: 2px;
}