/* 1. 重置基础样式 */

  
   @font-face {
    font-family: 'CustomCute';
   @import url('https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap');
    font-weight: normal;
    font-style: normal;
}

        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        /* 2. 浏览器窗口样式 (背景台) */
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            
            /* ▼▼▼ 关键点1：把 body 背景改成深灰色，模拟桌子 ▼▼▼ */
            background: #2c3e50; 
            
            /* ▼▼▼ 关键点2：让手机容器在浏览器正中间 ▼▼▼ */
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden; /* 防止浏览器出现滚动条 */
        }
        
        /* 3. 手机容器样式 (限制范围) */
        .phone-screen {
            /* ▼▼▼ 关键点3：必须写 width 而不是 max-width，强制固定宽度 ▼▼▼ */
            width: 375px;
            height: 100vh; /* 或者写 812px 模拟 iPhone X 高度 */
            
            /* ▼▼▼ 关键点4：这里必须是 relative，它是所有内部悬浮元素的“爸爸” ▼▼▼ */
            position: relative; 
            
            /* ▼▼▼ 关键点5：壁纸搬家到这里来了 ▼▼▼ */
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            background-size: cover;
            background-position: center;
            
            /* 加点阴影让它像个手机 */
            box-shadow: 0 0 50px rgba(0,0,0,0.5);
            color: white;
            overflow: hidden;
            margin: 0 auto;
        }

        /* 4. 确保主屏幕占满手机容器 */
        .main-screen {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            overflow-y: auto; /* 允许主屏幕内部滚动 */
        }
        
        .user-info {
            text-align: center;
            padding: 60px 20px 40px;
            cursor: pointer;
        }
        
        .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255,255,255,0.3);
            overflow: hidden;
        }
        
        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .user-id {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 8px;
            text-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        
        .signature {
            font-size: 14px;
            opacity: 0.9;
            font-style: italic;
        }
        
.apps-grid {
    /* padding: 0 30px;  <-- 修改这一行 */
    padding: 0 15px;     /* 改小内边距 */
    
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    
    /* gap: 25px;        <-- 修改这一行 */
    gap: 15px;           /* 改小间距，原来的25px太宽了 */
    
    margin-bottom: 20px;
    
    /* ▼▼▼ 新增：让整个网格在容器里水平居中 ▼▼▼ */
    justify-content: center; 
}
        
             .app-icon-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        
     .app-icon {
    /* width: 65px;      <-- 修改这一行 */
    width: 58px;         /* 改成 58px，视觉上几乎看不出区别，但空间就够了 */
    
    /* height: 65px;     <-- 修改这一行 */
    height: 58px;        /* 保持正方形 */
    
    /* 下面的保持不变 */
    border-radius: 18px;
    cursor: pointer;
    transition: transform 0.3s ease;
    overflow: hidden;
}


        .app-icon:hover {
            transform: scale(1.05);
            background: rgba(255,255,255,0.25);
        }
        
        .app-icon:active {
            transform: scale(0.95);
        }
        
        .app-emoji {
            font-size: 24px;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .app-emoji img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
/* ▼▼▼ 强制覆盖样式，确保显示线条 ▼▼▼ */
.ins-icon-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important; /* 去掉背景色 */
}

.ins-icon-box svg {
    width: 32px !important;       /* 图标稍微大一点点 */
    height: 32px !important;
    stroke: #ffffff !important;   /* 强制纯白线条 */
    stroke-width: 1.5px !important;
    fill: none !important;        /* 强制去填充 */
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

        .app-name {
            font-size: 10px;
            text-align: center;
            opacity: 0.9;
            font-weight: 500;
        }

        
        .app-icon:hover {
            transform: scale(1.05);
            background: rgba(255,255,255,0.25);
        }
        
        .app-icon:active {
            transform: scale(0.95);
        }
        
        .app-emoji {
            font-size: 24px;
            margin-bottom: 4px;
        }
        
        .app-name {
            font-size: 10px;
            text-align: center;
            opacity: 0.9;
            font-weight: 500;
        }
        

.bottom-space {
    flex: 1;
    min-height: 20px; 
}
        
        /* 壁纸页面样式 */
        .wallpaper-screen {
            height: 100vh;
            background: white;
            color: #333;
            display: none;
            flex-direction: column;
        }
        
        .wallpaper-header {
            display: flex;
            align-items: center;
            padding: 20px;
            border-bottom: 1px solid #eee;
        }
        
        .back-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: transparent;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.2s;
            padding: 0;
        }
        
        .back-btn:hover {
            background: rgba(0,0,0,0.05);
        }

        /* 通用返回按钮SVG样式 */
        .back-btn svg {
            width: 24px;
            height: 24px;
            stroke: #333;
            stroke-width: 2.5;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        
        .header-title {
            flex: 1;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            margin-right: 40px;
        }
        
        .wallpaper-content {
            flex: 1;
            padding: 30px 20px;
        }
        
        .section-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 25px;
            color: #333;
        }
        
        .wallpaper-editor {
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }
        
        .preview-area {
            flex-shrink: 0;
        }
        
        .preview-phone {
            width: 120px;
            height: 200px;
            border-radius: 20px;
            border: 3px solid #ddd;
            overflow: hidden;
            position: relative;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .preview-phone img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .preview-label {
            text-align: center;
            margin-top: 10px;
            font-size: 12px;
            color: #666;
        }
        
        .input-area {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .tab-buttons {
            display: flex;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #ddd;
        }
        
        .tab-btn {
            flex: 1;
            padding: 10px;
            border: none;
            background: #f8f8f8;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
        }
        
        .tab-btn.active {
            background: #667eea;
            color: white;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .file-input-area {
            border: 2px dashed #ddd;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: border-color 0.3s;
        }
        
        .file-input-area:hover {
            border-color: #667eea;
        }
        
        .file-input-area input {
            display: none;
        }
        
      .url-input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 16px;  /* ← 改成16px */
    outline: none;
    transition: border-color 0.3s;
}
        
        .url-input:focus {
            border-color: #667eea;
        }
        
        .save-btn {
            background: #667eea;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.3s;
            align-self: flex-start;
            margin-top: 10px;
        }
        
        .save-btn:hover {
            background: #5a6fd8;
        }
        
        .save-btn:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        
/* ====== 朋友圈设置弹窗滚动布局 START ====== */
.moments-settings-modal {
    padding: 0;                 /* 由内部三段控制内边距 */
    max-height: 85vh;           /* 限制高度，适配移动端 */
    display: flex;
    flex-direction: column;
}

.moments-settings-header {
    padding: 18px 20px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
    background: #fff;
}

.moments-settings-body {
    padding: 18px 20px;
    overflow-y: auto;           /* 内容区滚动 */
    -webkit-overflow-scrolling: touch;
    flex: 1;
}

.moments-settings-footer {
    padding: 14px 20px 18px;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
    background: #fff;
}
/* ====== 朋友圈设置弹窗滚动布局 END ====== */

/* ====== 朋友圈设置弹窗移动端防溢出 START ====== */
.moments-settings-body {
    overflow-x: hidden; /* 禁止横向滚动条 */
}

.moments-settings-body .form-input {
    max-width: 100%;
    box-sizing: border-box;
}

/* 自动发布那一行：小屏自动换行 */
#momentsAutoPublishPanel > div:first-child {
    flex-wrap: wrap;
}

#momentsAutoPublishIntervalValue,
#momentsAutoPublishIntervalUnit {
    width: 100% !important;
    max-width: 100% !important;
}

/* 让 “每/发布一次” 两个文字也能对齐 */
#momentsAutoPublishPanel > div:first-child span {
    white-space: nowrap;
}
/* ====== 朋友圈设置弹窗移动端防溢出 END ====== */

/* 朋友圈发布 Loading 动画 */
.moments-loading-icon {
    width: 20px;
    height: 20px;
    animation: moments-spin 0.8s linear infinite;
    display: block;
}

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



        /* 弹窗样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        
        .modal {
            background: white;
            border-radius: 20px;
            padding: 30px;
            width: 320px;
            max-width: 90%;
            color: #333;
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        }
        
        .modal-title {
            font-size: 20px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 25px;
            color: #333;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #555;
        }
        /* 颜色选择器优化 */


.color-preview {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 2px solid #e1e5e9;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s;
    position: relative;
    overflow: hidden;
}


.color-preview:active {
    transform: scale(0.95);
}



        .form-input {
            width: 100%;
          max-width: 100%;
            padding: 12px;
            border: 2px solid #e1e5e9;
            border-radius: 10px;
            font-size: 16px;
            outline: none;
            transition: border-color 0.3s;
        }
        
        .form-input:focus {
            border-color: #667eea;
        }
        
        .avatar-preview {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: #f0f0f0;
            margin: 10px auto;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 2px solid #e1e5e9;
        }
        
        .avatar-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .file-input {
            display: none;
        }
        
        .file-button {
            background: #667eea;
            color: white;
            padding: 8px 16px;
            border-radius: 8px;
            cursor: pointer;
            display: inline-block;
            font-size: 14px;
            transition: background 0.3s;
        }
        
        .file-button:hover {
            background: #5a6fd8;
        }
        
        .modal-buttons {
            display: flex;
            gap: 15px;
            margin-top: 25px;
        }
        
        .btn {
            flex: 1;
            padding: 12px;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .btn-cancel {
            background: #f0f0f0;
            color: #666;
        }
        
        .btn-cancel:hover {
            background: #e0e0e0;
        }
        
        .btn-save {
            background: #667eea;
            color: white;
        }
        
        .btn-save:hover {
            background: #5a6fd8;
        }
/* 世界书页面样式 */
.worldbook-screen {
    height: 100vh;
    background: white;
    color: #333;
    display: none;
    flex-direction: column;
}

.worldbook-header {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.category-bar {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    overflow-x: auto;
    white-space: nowrap;
}

.category-tags {
    display: flex;
    gap: 10px;
}

.category-tag {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #ddd;
    background: #f8f8f8;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
    flex-shrink: 0;
}

.category-tag.active {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.worldbook-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.worldbook-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid #eee;
}

.card-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.card-preview {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
    line-height: 1.4;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-category {
    background: #f0f0f0;
    color: #666;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
}

.card-actions {
    display: flex;
    gap: 8px;
}

.action-btn {
    padding: 4px 8px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-edit {
    background: #667eea;
    color: white;
}

.btn-delete {
    background: #ff4757;
    color: white;
}

.add-btn {
   position: absolute;
    bottom: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #667eea;
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    transition: all 0.3s;
    z-index: 1000;
}

.add-btn:hover {
    transform: scale(1.1);
}
/* API设置页面样式 */
.api-screen {
    height: 100vh;
    background: white;
    color: #333;
    display: none;
    flex-direction: column;
}

.api-header {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
}

.api-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}



.btn-test, .btn-save, .btn-save-scheme {
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-test {
    background: #48dbfb;
    color: white;
}

.btn-test:hover {
    background: #0abde3;
}

.btn-save {
    background: #1dd1a1;
    color: white;
}

.btn-save:hover {
    background: #10ac84;
}

.btn-save-scheme {
    background: #667eea;
    color: white;
}

.btn-save-scheme:hover {
    background: #5a6fd8;
}
/* 聊天页面样式 */
.chat-screen {
    height: 100vh;
    background: #f8f9fa; 
    color: #333;
    display: none;
    flex-direction: column;
}

.chat-header {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
}

/* 朋友圈入口卡片 */

  .moments-card {
     margin: 10px 15px 15px;
    padding: 18px 20px;
    background: #ffffff; 
    border-radius: 18px;
    backdrop-filter: none;
    border: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s;
}

.moments-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

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

.moments-icon {
    font-size: 24px;
}

.moments-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.moments-title {
    font-size: 15px;
    font-weight: 600;
    color: #2c2c2c;
}

.moments-desc {
    font-size: 12px;
    color: #999;
}

.moments-arrow {
    font-size: 18px;
    color: #667eea;
}



/* 聊天列表区域 */
.chat-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 10px 15px 100px; 
    background: transparent; 
}
/* 底部分组栏 */
.chat-bottom-tabs {
    position: absolute;
    /* 距离底部悬浮 25px */
    bottom: 25px;
    /* 左右留空，居中 */
    left: 20px;
    right: 20px;
    max-width: 335px; /* 375 - 40 */
    margin: 0 auto;
    
    /* 高级毛玻璃背景 */
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    /* 去掉顶部边框，改用四周圆角 */
    border-top: none;
    border-radius: 30px; /* 全圆角胶囊状 */
    
    /* 强烈的悬浮投影 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    
    display: flex;
    justify-content: space-around; /* 图标分散对齐 */
    padding: 10px 10px;
    z-index: 101;
    border: 1px solid rgba(255,255,255,0.5); /* 极细内发光边框 */
}

.bottom-tab {
    filter: none !important; 
}

/* ============ 新增：SVG图标通用样式 ============ */
.ins-icon {
    width: 28px;
    height: 28px;
    stroke: #999;     /* 默认灰色线条 */
    stroke-width: 1.8px; /* 线条粗细 */
    fill: none;       /* 默认不填充 */
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 0.3s ease;
}

/* 朋友圈入口的图标稍微大一点，颜色深一点 */
.moments-icon .ins-icon {
    width: 32px;
    height: 32px;
    stroke: #333; /* 深灰色 */
    stroke-width: 1.5px;
}

/* ============ 修改：底部栏激活状态 ============ */
/* 底部栏图标默认状态 */
.bottom-tab .ins-icon {
    stroke: #999; /* 未选中是灰色 */
}

/* 底部栏激活状态 (active) */
.bottom-tab.active .ins-icon {
    stroke: #2c2c2c; /* 选中变深黑 */
    stroke-width: 2.5px; /* 选中线条变粗，更有质感 */
    /* 如果想做成选中变实心，可以在这里加 fill: #2c2c2c; 但线性风格通常是变粗 */
    transform: scale(1.05); /* 微微放大 */
}

/* 去掉之前可能存在的 grayscale 滤镜，因为现在直接控制 stroke 颜色 */
.bottom-tab {
    filter: none !important; 
}

.chat-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: white;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.3s ease;
    border: 1px solid #f0f0f0;
    position: relative; /* 确保这一行存在 */
    z-index: 2;
}


.chat-item:hover {
    background: #f8f8f8;
}

.chat-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    margin-right: 12px;
}

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

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

.chat-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.chat-time {
    font-size: 11px;
    color: #999;
}

.chat-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.chat-badge {
    background: #ff4757;
    color: white;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}


.add-btn {
   position: absolute;
    bottom: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #667eea;
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    transition: all 0.3s;
    z-index: 100;
    display: none; /* 默认隐藏 */
}

.add-btn:hover {
    transform: scale(1.1);
}

/* 在世界书和聊天页面显示 */
.worldbook-screen .add-btn,
.chat-screen .add-btn {
    display: block;
}

  /* 聊天页面的添加按钮位置上移 */
.chat-screen .add-btn {
    /* 提高位置，避开悬浮栏 */
    bottom: 100px; 
    right: 25px;
    
    /* 风格调整：Ins风渐变或纯黑 */
    background: #2c2c2c; /* 纯黑高级感 */
    /* 或者保留你原来的渐变，改为：background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
    
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    width: 50px;
    height: 50px;
    border-radius: 20px; /* 方圆形更符合现在的iOS设计 */
}
    /* 成员选择列表样式 */
.member-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.3s;
}

.member-item:hover {
    background: #f8f8f8;
}

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

.member-checkbox {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    cursor: pointer;
}

.member-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-right: 12px;
}

.member-name {
    font-size: 15px;
    color: #333;
}
/* 左滑操作相关样式 */
.chat-item-wrapper {
   
    margin-bottom: 12px;
    border-radius: 18px;
   
    overflow: visible; 
}

.chat-item {
    display: flex;
    align-items: center;
    padding: 15px;
    /* 纯白卡片背景 */
    background: #ffffff;
    /* 大圆角 */
    border-radius: 18px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s;
    /* 去掉之前的边框 */
    border: none;
    /* 极淡阴影 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    position: relative;
    z-index: 2;
}
.chat-item:hover {
    /* 悬停微上浮 */
    background: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.chat-actions {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    z-index: 1;
    transform: translateX(100%); /* 用transform隐藏 */
    transition: transform 0.3s ease;
     border-radius: 0 18px 18px 0; /* 只有右侧圆角 */
    overflow: hidden; /* 裁剪圆角 */
}
.action-btn-slide {
    width: 80px;
    border: none;
    color: white;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.action-pin {
    background: #667eea;
}

.action-pin:active {
    background: #5a6fd8;
}

.action-delete {
    background: #ff4757;
}

.action-delete:active {
    background: #ee5a6f;
}

.pin-badge {
    position: absolute;
    top: 0;
    right: 0;
    color: #667eea;
    font-size: 16px;
    z-index: 3;
    padding: 0px 0px;
 
    border-bottom-left-radius: 12px;
    border-top-right-radius: 12px;
}
/* 聊天详情页面样式 */
.chat-detail-screen {
    height: 100vh;
    background: white;
    display: none;
    flex-direction: column;
}

.chat-detail-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 0.5px solid #f0f0f0;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 10;
}
/* 右上角"更多"按钮样式（只针对最右边的按钮） */
.chat-detail-header button:last-child,
.chat-detail-header .action-icon-btn:last-child {
    width: auto !important;
    height: 32px !important;
    padding: 6px 14px !important;
    background: transparent !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin-left: auto !important;
}

.chat-detail-header button:last-child:hover,
.chat-detail-header .action-icon-btn:last-child:hover {
    background: #f8f8f8 !important;
}

/* 隐藏右边按钮内的所有内容（图标、图片等） */
.chat-detail-header button:last-child > *,
.chat-detail-header .action-icon-btn:last-child > * {
    display: none !important;
}

/* 显示"更多"文字 */
.chat-detail-header button:last-child::before,
.chat-detail-header .action-icon-btn:last-child::before {
    content: "更多" !important;
    display: block !important;
}



/* 聊天页面的返回按钮特殊处理：透明背景，SVG适配 */
.chat-detail-header .back-btn {
    margin-right: 5px;
}

.header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-right: 10px;
    background: #f0f0f0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 1px solid rgba(0,0,0,0.05);
    flex-shrink: 0;
}

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

.chat-detail-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    line-height: 1.2;
    text-align: left;
    margin: 0;
}

.character-status {
    font-size: 13px;
    color: #999;
    text-align: left;
    margin-top: 2px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 2px;
    
 
}
/* 状态圆点 */
.character-status::before {
    content: '';
    display: inline-block;
    width: 8px !important;
    height: 8px !important;
    background: #10ac84;
    border-radius: 50%;
}


.chat-name .status-tag {
    font-size: 11px;
    color: #667eea;
    font-weight: normal;
    margin-left: 6px;
}

.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #fafafa; /* 更淡的灰，接近白色 */
}


.load-more-btn {
    width: 100%;
    padding: 10px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    color: #666;
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 15px;
    transition: all 0.3s;
}

.load-more-btn:hover {
    background: #f8f8f8;
}

/* 消息气泡 */
.message-item {
    display: flex;
    margin-bottom: 15px;
    align-items: flex-end;
}

.message-item.me {
    flex-direction: row-reverse;
}

.message-bubble {
    max-width: 70%;
    padding: 4px 8px; /* 稍微大一点 */
    border-radius: 18px; /* 更圆润 */
    background: #ffffff; /* AI消息用纯白 */
    color: #1a1a1a;
    word-wrap: break-word;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04); /* 极淡阴影 */
    border: 0.5px solid #f5f5f5; /* 极细边框 */
}
/* 用户消息气泡 */
.message-item.me .message-bubble {
    background: #1a1a1a; /* 深黑色 */
    color: #fff;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}


.message-time {
    font-size: 11px;
    color: #999;
    margin: 0 8px;
    white-space: nowrap;
}





.chat-input:focus {
    background: #e8e8e8;
    box-shadow: none;
}

.chat-input::placeholder {
    color: #999;
}

/* 输入框右侧图标组 */
.input-icons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-icon-btn {
    width: 28px;
    height: 28px;
    border: 1.5px solid #999;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    color: #666;
    transition: all 0.2s;
}

.input-icon-btn:active {
    transform: scale(0.9);
    background: #f0f0f0;
}

/* 发送按钮 */
.send-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #007aff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.send-btn svg {
    width: 16px;
    height: 16px;
    fill: white;
    transform: rotate(-45deg);
}

.send-btn:active {
    transform: scale(0.9);
}

.send-btn:disabled {
    background: #ccc;
}


.chat-input:focus {
    border-color: #1a1a1a; /* 聚焦时变深黑 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* 隐藏textarea的所有箭头和滚动条按钮 */
.chat-input::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

.chat-input::-webkit-scrollbar-button {
    display: none !important;
    height: 0;
    width: 0;
}

.chat-input::-webkit-scrollbar-thumb {
    background: transparent;
}

.chat-input::-webkit-scrollbar-track {
    background: transparent;
}

.chat-input::-webkit-inner-spin-button,
.chat-input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    display: none !important;
    margin: 0;
}


.chat-input:focus {
    border-color: #667eea;
}
.chat-input:disabled {
    background: #f5f5f5;
    color: #999;
    cursor: not-allowed;
}



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

.action-icon-btn svg {
    width: 20px;
    height: 20px;
    stroke: #666;
    stroke-width: 1.5;
    fill: none;
}


/* WhatsApp风格输入框聚焦效果 */
.chat-input:focus {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.chat-input::placeholder {
    color: #999;
}
/* ============ 图标与输入栏最终美化 ============ */

/* 1. 上方图标行样式 */
.emoji-btn-wrapper {
    padding: 5px 15px;
    background: transparent; /* 背景透明 */
    display: flex;
    align-items: center;
    gap: 12px;
}

.emoji-btn {
    width: 28px;
    height: 28px;
    background: transparent; /* 按钮背景透明 */
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.emoji-btn:active {
    transform: scale(0.9);
}

.emoji-btn svg {
    stroke: #333; /* 黑色图标线条 */
    stroke-width: 1.5;
}

/* 2. 下方粉色输入栏样式 */
.chat-input-bar {
    display: flex;
    align-items: center;
   padding: 10px 10px 15px;
    background: #ffffff;
    gap: 0px;
    border-top: none; /* 移除原来的上边框 */
}

/* 中间白色输入框 */
.chat-input-bar .chat-input {
    flex: 1;
    height: 30px;
  padding: 10px 10px 15px;
    border: 1.5px solid #a9a7a7;
    border-radius: 22px;
    font-size: 15px;
      resize: none;
    resize: none;
    outline: none;
    background: #ffffff;
    font-family: inherit;
    line-height: 1.4;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.chat-input-bar .chat-input:focus {
    border-color: #f08080;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

/* 左侧+号 和 右侧发送/接收 按钮的通用样式 */
.cute-icon-btn,
.chat-input-bar .action-icon-btn {
    background: transparent; /* 按钮背景透明 */
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.2s;
    display: flex;           /* 启用Flex布局 */
    align-items: center;     /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    width: 40px;             /* 固定宽度 */
    height: 40px;            /* 固定高度 (与输入框一致) */
    flex-shrink: 0;    
}

.cute-icon-btn:active,
.chat-input-bar .action-icon-btn:active {
    transform: scale(0.9);
}

/* 左侧+号的特定样式 */
.cute-icon-btn.plus-btn {
    background-image: var(--chat-icon-plus-bg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 对 + 号按钮进行精确微调 */
.cute-icon-btn.plus-btn {
    position: relative;
    top: -4px; /* 向上微调2像素，你可以改成-3px或-1px来找到最佳位置 */
}
/* 右侧发送/接收按钮的SVG图标样式 */
.chat-input-bar .action-icon-btn svg {
    width: 28px;
    height: 28px;
    stroke: #000; /* 黑色图标线条 */
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 移除旧图片样式 */
.chat-input-bar .action-icon-btn img {
    display: none;
}


/* 系统消息 */
.system-message {
    text-align: center;
    color: #999;
    font-size: 12px;
    margin: 10px 0;
}
/* 禁用消息文本选择 */
.message-bubble {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

/* 消息操作菜单按钮 */
.message-menu-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    margin-bottom: 10px;
    transition: all 0.3s;
    background: white;
    border: 1px solid #e0e0e0;
}

.message-menu-btn:hover {
    background: #f8f8f8;
}

.message-menu-btn:last-child {
    margin-bottom: 0;
}

/* 撤回消息样式 */
.revoked-message {
    color: #999;
    font-style: italic;
    cursor: pointer;
    user-select: none;
}

.revoked-message:hover {
    text-decoration: underline;
}

.revoked-content {
    display: none;
    margin-top: 8px;
    padding: 8px;
    background: #f5f5f5;
    border-radius: 6px;
    font-size: 13px;
    color: #666;
}

.revoked-content.show {
    display: block;
}
/* 多选模式相关样式 */
.message-item.multi-select-mode {
    padding-left: 50px;
    position: relative;
}

.message-checkbox {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.multi-select-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: white;
    border-top: 1px solid #eee;
}

.selected-count {
    font-size: 14px;
    color: #333;
}

.multi-select-actions {
    display: flex;
    gap: 10px;
}

.btn-multi-cancel {
    padding: 8px 20px;
    background: #f0f0f0;
    color: #666;
    border: none;
    border-radius: 16px;
    font-size: 14px;
    cursor: pointer;
}

.btn-multi-delete {
    padding: 8px 20px;
    background: #ff4757;
    color: white;
    border: none;
    border-radius: 16px;
    font-size: 14px;
    cursor: pointer;
}




/* 角色信息页面 */
.character-info-screen {
    height: 100vh;
    background: white;
    display: none;
    flex-direction: column;
}

.character-info-content {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 30px;
}

.character-profile-section {
    text-align: center;
    padding: 30px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
}

.character-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #e0e0e0;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    cursor: pointer; /* 新增 */
    transition: transform 0.3s; /* 新增 */
    overflow: hidden; /* 新增 */
}
.character-avatar:hover {
    transform: scale(1.05);
}
.character-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.character-name {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
   cursor: pointer; /* 新增 */
}

.character-location {
    font-size: 14px;
    color: #666;
    margin-bottom: 25px;
    cursor: pointer; /* 新增 */
}
.character-location:hover {
    color: #667eea;
}
.character-stats {
    display: flex;
    justify-content: space-around;
    max-width: 300px;
    margin: 0 auto;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 20px;
    font-weight: 600;
    color: #667eea;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 13px;
    color: #999;
}

.character-edit-form {
    padding: 20px;
}

/* 防止日期选择器超出容器 */
.character-edit-form input[type="date"] {
    max-width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}


.gender-options {
    display: flex;
    gap: 15px;
}

.gender-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
}

.gender-option input {
    cursor: pointer;
}

.save-character-btn {
    width: 100%;
    padding: 14px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    margin-top: 20px;
    transition: background 0.3s;
}

.save-character-btn:hover {
    background: #5a6fd8;
}

.app-icon-editor {
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s;
}

.app-icon-editor:hover {
    transform: scale(1.05);
}

.app-icon-preview {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto;
    overflow: hidden;
}

.app-icon-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 日记页面样式 */
.diary-screen {
    height: 100vh;
    background: #f5f5f5;
    display: none;
    flex-direction: column;
}

/* 召唤卡片 */

.summon-card {
    margin: 20px;
    padding: 35px 25px;
    background: 
        linear-gradient(135deg, 
            #fff5f7 0%, 
            #ffe4ec 50%, 
            #ffd6e3 100%);
    border-radius: 25px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: visible;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 
        0 5px 20px rgba(255, 182, 193, 0.3),
        inset 0 -2px 10px rgba(255, 255, 255, 0.5);
    border: 3px dashed #ffb3d1;
}

/* 左上角小兔子 */
.summon-card::before {
    content: '🐰';
    position: absolute;
    top: -18px;
    left: 15px;
    font-size: 40px;
    animation: rabbitJump 2s ease-in-out infinite;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.1));
    z-index: 2;
}

/* 顶部中央信封 */
.summon-card::after {
    content: '💌';
    position: absolute;
    top: -15px;
    right: 15px;
    font-size: 38px;
    animation: envelopeSway 2.5s ease-in-out infinite;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.1));
}

@keyframes rabbitJump {
    0%, 100% { 
        transform: translateY(0) rotate(-8deg); 
    }
    50% { 
        transform: translateY(-12px) rotate(8deg); 
    }
}

@keyframes envelopeSway {
    0%, 100% { 
        transform: translateY(0) rotate(3deg); 
    }
    50% { 
        transform: translateY(-8px) rotate(-3deg); 
    }
}

.summon-card:hover {
    transform: scale(1.08) translateY(-5px);
    box-shadow: 
        0 10px 35px rgba(255, 105, 180, 0.4),
        inset 0 -3px 15px rgba(255, 255, 255, 0.6);
    border-color: #ff69b4;
}

.summon-card:active {
    animation: cardBounce 0.5s ease;
}

@keyframes cardBounce {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(0.95) rotate(-3deg); }
    50% { transform: scale(1.05); }
    75% { transform: scale(0.98) rotate(3deg); }
}

.summon-text {
    font-size: 17px;
    font-weight: 600;
    color: #ff1493;
    text-shadow: 
        0 2px 4px rgba(255,255,255,0.8),
        0 0 15px rgba(255, 105, 180, 0.3);
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
}

/* 底部小爪印 */
.stars-container {
    pointer-events: none;
}

.stars-container::before {
    content: '🐾';
    position: absolute;
    bottom: 5px;
    left: 20px;
    font-size: 22px;
    opacity: 0.5;
    animation: pawFade 2s ease-in-out infinite;
}

.stars-container::after {
    content: '🐾';
    position: absolute;
    bottom: 5px;
    right: 20px;
    font-size: 22px;
    opacity: 0.5;
    animation: pawFade 2s ease-in-out infinite 1s;
}

@keyframes pawFade {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

/* 星星特效容器 */
.stars-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    pointer-events: none;
}

.star {
    position: absolute;
    font-size: 20px;
    animation: starTwinkle 0.6s ease-out forwards;
    opacity: 0;
}

@keyframes starTwinkle {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(1.5) rotate(180deg);
    }
}

/* 写日记状态卡片 */
.writing-diary-card {
    margin: 20px;
    padding: 30px 20px;
    background: white;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.writing-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto 15px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.writing-text {
    font-size: 15px;
    color: #666;
    margin-bottom: 15px;
}

.pen-animation {
    font-size: 24px;
    animation: penWrite 1.5s ease-in-out infinite;
}

@keyframes penWrite {
    0%, 100% { transform: translateY(0) rotate(-10deg); }
    50% { transform: translateY(-5px) rotate(10deg); }
}

/* 日记列表容器 */
.diary-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 20px;
}

/* 日记卡片 */
.diary-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin: 15px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: all 0.3s;
}

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

.diary-title {
    font-size: 17px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.diary-time {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
}

.diary-preview {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.diary-tags {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.diary-tag {
    background: #f0f0ff;
    color: #667eea;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
}
/* ========== 日记详情页美化 ========== */

/* ▼▼▼ 修复与美化：日记页右上角删除按钮 (Ins精致线条风) ▼▼▼ */

.diary-detail-screen .chat-detail-header button:last-child,
.diary-detail-screen .chat-detail-header .action-icon-btn:last-child {
    /* 1. 位置布局：强制靠右 */
    margin-left: auto !important; 
    
    /* 2. 尺寸与形态：精致圆形 */
    width: 36px !important;       /* 比聊天页的按钮稍小，更显精致 */
    height: 36px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important; /* 正圆 */

    /* 3. Ins风核心：极细线条 + 透明感 */
    background: transparent !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important; /* 0.15透明度的黑线，非常高冷 */
    box-shadow: none !important;
    
    /* 动画 */
    transition: all 0.2s ease !important;
}

/* 4. 隐藏“更多”文字 (这是复用聊天页带来的副作用，必须隐藏) */
.diary-detail-screen .chat-detail-header button:last-child::before,
.diary-detail-screen .chat-detail-header .action-icon-btn:last-child::before {
    display: none !important;
}

/* 5. 强制显示内部的删除图标，并调整质感 */
.diary-detail-screen .chat-detail-header button:last-child > *,
.diary-detail-screen .chat-detail-header .action-icon-btn:last-child > * {
    display: block !important;
    width: 18px !important;      /* 图标尺寸 */
    height: 18px !important;
    opacity: 0.6 !important;     /* 默认微透，显高级 */
    filter: none !important;     /* 清除杂质 */
    object-fit: contain !important;
}

/* 6. 交互体验：悬停时微微变红 */
.diary-detail-screen .chat-detail-header button:last-child:hover,
.diary-detail-screen .chat-detail-header .action-icon-btn:last-child:hover {
    background: rgba(255, 71, 87, 0.05) !important; /* 极淡的红底 */
    border-color: #ff4757 !important;               /* 边框变红 */
    transform: scale(1.05);
}

.diary-detail-screen .chat-detail-header button:last-child:hover > *,
.diary-detail-screen .chat-detail-header .action-icon-btn:last-child:hover > * {
    opacity: 1 !important;       /* 图标变实 */
}

/* ▲▲▲ 修复结束，以下是日记详情页的基础样式 ▲▲▲ */

.diary-detail-screen {
    height: 100vh;
    background: #f0f2f5; /* 背景稍微深一点，突出纸张 */
    display: none;
    flex-direction: column;
}

.diary-detail-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px; /* 给纸张留出边距 */
}

/* 纸张容器 - 彩色便签纸风格 */
.diary-paper {
    /* 柔和的淡黄色便签底色（可换成粉色 #ffe4ec、蓝色 #e8f4fc 等） */
    background: #fffde7;
    
    padding: 25px 25px 30px 45px; /* 左侧留出装订线空间 */
    border-radius: 2px; /* 便签纸几乎是直角 */
    min-height: 70vh;
    position: relative;
    color: #4a4a4a;
    
    /* 便签纸阴影 - 右下角翘起感 */
    box-shadow: 
        2px 3px 8px rgba(0,0,0,0.08),
        5px 8px 20px rgba(0,0,0,0.05);
}

/* 左侧装订线 */
.diary-paper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 28px;
    bottom: 0;
    width: 2px;
    background: rgba(255, 150, 150, 0.35); /* 淡红色装订线 */
}

/* 左侧装订孔装饰 */
.diary-paper::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 10px;
    width: 12px;
    height: 12px;
    background: #f0f2f5; /* 背景色，模拟打孔 */
    border-radius: 50%;
    box-shadow: 
        0 40px 0 #f0f2f5,
        0 80px 0 #f0f2f5,
        0 120px 0 #f0f2f5,
        0 160px 0 #f0f2f5,
        0 200px 0 #f0f2f5,
        0 240px 0 #f0f2f5,
        0 280px 0 #f0f2f5,
        0 320px 0 #f0f2f5,
        0 360px 0 #f0f2f5,
        0 400px 0 #f0f2f5;
}


/* 日记标题 */
.diary-detail-title {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.4;
}

/* 元信息（日期、天气、心情） */
.diary-meta {
    text-align: center;
    font-size: 13px;
    color: #999;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee; /* 虚线分割 */
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.diary-meta-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* 板块样式 */
.diary-section {
    margin-bottom: 30px;
}

/* 板块标题 */
.diary-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #667eea; /* 主题色 */
    margin-bottom: 15px;
    padding-left: 10px;
    border-left: 4px solid #667eea; /* 左侧竖线装饰 */
    display: flex;
    align-items: center;
}

/* 板块内容列表 */
.diary-section-content {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    padding-left: 5px;
}

.diary-section-content ul {
    padding-left: 0; /* 去掉默认缩进 */
    list-style: none;
}

.diary-section-content li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px; /* 给自定义圆点留位置 */
}

/* 自定义圆点 */
.diary-section-content li::before {
    content: '•';
    color: #ddd;
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* 如果是待办事项，去掉前面的圆点，并减少左边距 */
.diary-section-content li.is-todo::before {
    display: none;
}

.diary-section-content li.is-todo {
    padding-left: 0; /* 不需要给圆点留位置了 */
    list-style: none;
}

/* 针对 OOTD 等不需要圆点的列表项 */
.diary-section-content li.no-dot::before {
    display: none;
}

.diary-section-content li.no-dot {
    padding-left: 0;
    list-style: none;
}

/* 特殊样式的列表项 */
.checkbox-done {
    color: #667eea;
    font-weight: bold;
    margin-right: 5px;
}

.checkbox-undone {
    color: #ccc;
    margin-right: 5px;
}

.strikethrough {
    text-decoration: line-through;
    color: #aaa;
}

/* 感悟段落 */
.diary-reflection p {
    text-indent: 2em;
    margin-bottom: 15px;
    text-align: justify; /* 两端对齐 */
}

/* 标签区域 */
.diary-tags {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #f5f5f5;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.diary-tag {
    background: #f0f0ff;
    color: #667eea;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
}


/* 删除线效果 */
.strikethrough {
    text-decoration: line-through;
    text-decoration-color: #8d6e63;
    opacity: 0.6;
}
/* 复选框样式 */
.checkbox-done {
    color: #81c784;
}
.checkbox-undone {
    color: #ccc;
}





.emoji-btn:active {
    transform: scale(0.9);
}

.emoji-btn:hover {
    background: #ebebeb;
}

/* 表情包面板 */
.emoji-panel {
    position: absolute; 
    bottom: 60px;
    left: 0;
    right: 0;
    max-width: 375px;
    margin: 0 auto;
    height: 60vh;
    background: white;
    border-top: 1px solid #eee;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    z-index: 100;
}

/* 顶部操作栏 */
.emoji-panel-header {
    display: flex;
    justify-content: space-around;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.emoji-header-btn {
    padding: 8px 16px;
    background: #f0f0f0;
    border: none;
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
}

.emoji-header-btn:hover {
    background: #667eea;
    color: white;
}

/* 搜索框 */
.emoji-search-box {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.emoji-search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    font-size: 14px;
    outline: none;
}

/* 分类标签栏 */
.emoji-category-bar {
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    overflow-x: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

.emoji-category-tag {
    display: inline-block;
    padding: 6px 14px;
    margin-right: 8px;
    background: #f0f0f0;
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
color: #333;
}

.emoji-category-tag.active {
    background: #667eea;
    color: white;
}

/* 表情包网格 */
.emoji-grid-container {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

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

.emoji-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: transform 0.2s;
}

.emoji-item:hover {
    transform: scale(1.1);
}

.emoji-item-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
}

.emoji-item-text {
    font-size: 11px;
    color: #666;
    text-align: center;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 删除模式 */
.emoji-item.delete-mode {
    position: relative;
}

.emoji-item.delete-mode .emoji-delete-icon {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    background: #ff4757;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
}

/* 图片消息样式 */
.message-image {
    width: 95px;  /* 固定宽度 */
    height: 95px;  /* 固定高度 */
    object-fit: cover;  /* 裁剪填充，保持比例 */
    border-radius: 8px;
    cursor: pointer;
    display: block;
}

/* 快捷金额按钮 */
.quick-amount-btn {
    flex: 1;
    padding: 8px 10px;
    background: #fff0f6;
    border: 1px solid #ffb3d9;
    border-radius: 8px;
    color: #ff69b4;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.quick-amount-btn:active {
    background: #ff69b4;
    color: white;
    transform: scale(0.95);
}


/* ============ 转账消息卡片 (美化红包版) ============ */
.transfer-card {
    display: flex !important;
    align-items: center !important;
    width: 280px !important;
    max-width: 100% !important;
    
    background: white !important;
    border-radius: 20px !important;
    padding: 18px !important;
    margin: 8px 0 !important;
    
    box-shadow: 0 5px 15px rgba(233, 61, 61, 0.08) !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.3s ease !important;
}

/* 装饰元素：右上角的圆圈 */
.transfer-card::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 235, 235, 0.5);
    top: -30px;
    right: -30px;
    z-index: 0;
    pointer-events: none;
}

.transfer-card:hover {
    transform: translateY(-3px) !important;
}

/* 左侧图标 */
.transfer-icon {
    display: flex !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%) !important;
    box-shadow: 0 5px 10px rgba(255, 154, 158, 0.3) !important;
    color: white !important;
    font-size: 24px !important;
    justify-content: center !important;
    align-items: center !important;
    margin-right: 15px !important;
    flex-shrink: 0 !important;
    z-index: 1;
}

/* 中间内容区域 */
.transfer-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    z-index: 1;
    min-width: 0 !important;
}

.transfer-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.transfer-from {
    font-size: 12px ;
    color: #999 !important;
    margin-bottom: 2px !important;
}

.transfer-remark {
    font-size: 11px !important;
    color: #bbb !important;
}

/* 右侧状态列 */
.transfer-status-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    margin-left: 12px !important;
    flex-shrink: 0 !important;
    z-index: 1;
}

.transfer-amount {
    font-size: 18px !important;
    font-weight: bold !important;
    color: #ff6b6b !important;
    margin-bottom: 4px !important;
}

.transfer-action {
    font-size: 11px !important;
    color: #ff6b6b !important;
    background: rgba(255, 107, 107, 0.1) !important;
    padding: 3px 10px !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

/* === 已领取状态 === */
.transfer-card.received {
    box-shadow: 0 5px 15px rgba(161, 196, 253, 0.1) !important;
}

.transfer-card.received::before {
    background: rgba(235, 245, 255, 0.5) !important;
}

.transfer-card.received .transfer-icon {
    background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%) !important;
    box-shadow: 0 5px 10px rgba(161, 196, 253, 0.3) !important;
}

.transfer-card.received .transfer-amount {
    color: #4dabf7 !important;
}

.transfer-card.received .transfer-action {
    color: #4dabf7 !important;
    background: rgba(77, 171, 247, 0.1) !important;
}


/* ============ 语音消息气泡样式 (QQ风格美化版) ============ */
.voice-bubble {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 18px;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    max-width: 240px;
    position: relative;
    border: none; /* 移除旧边框 */
}

.voice-bubble:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.voice-bubble:active {
    transform: scale(0.98);
}

/* 播放按钮圆圈 */
.voice-play-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    background-color: #f0f0f0;
    color: #555;
    transition: all 0.3s;
}

/* 语音波形容器 */
.voice-wave {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 20px;
    margin: 0 10px; /* 左右留间距 */
}

/* 波形竖条 */
.wave-bar {
    width: 3px;
    border-radius: 2px;
    background-color: #ccc;
    transition: all 0.3s ease;
    height: 6px; /* 默认高度 */
}

/* 语音时长 */
.voice-duration {
    font-size: 12px;
    color: #888;
    font-weight: 500;
    flex-shrink: 0;
}

/* === 播放中状态 (需要JS配合添加 .playing 类) === */
.voice-bubble.playing .voice-play-btn {
    background-color: #667eea; /* 使用你的主题色 */
    color: white;
}

.voice-bubble.playing .wave-bar {
    background-color: #667eea;
    animation: qqWave 1.2s ease-in-out infinite;
}

/* 波纹动画 */
@keyframes qqWave {
    0%, 100% { height: 6px; }
    50% { height: 16px; }
}/* ============ 语音消息气泡样式 (QQ风格美化版) ============ */
.voice-bubble {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 18px;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    max-width: 240px;
    position: relative;
    border: none; /* 移除旧边框 */
}

.voice-bubble:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.voice-bubble:active {
    transform: scale(0.98);
}

/* 播放按钮圆圈 - 修改为透明，去掉圆圈感 */
.voice-play-btn {
    width: 24px;              /* 稍微改小 */
    height: 24px;
    /* border-radius: 50%;    <-- 不需要圆角了 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;          /* 图标大小 */
    flex-shrink: 0;
    
    background-color: transparent; /* ▼▼▼ 关键：改成透明，去掉灰色背景 ▼▼▼ */
    color: #333;              /* 图标颜色加深 */
    transition: all 0.3s;
}


/* 语音波形容器 */
.voice-wave {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 20px;
    margin: 0 10px; /* 左右留间距 */
}

/* 波形竖条 - 修改颜色和高度 */
.wave-bar {
    width: 3px;
    border-radius: 2px;
    
    background-color: #555;   /* ▼▼▼ 关键：由 #ccc 改深灰色，否则看不清 ▼▼▼ */
    
    transition: all 0.3s ease;
    height: 10px;             /* ▼▼▼ 关键：默认高度调高一点，更像声波 ▼▼▼ */
}


/* 语音时长 */
.voice-duration {
    font-size: 12px;
    color: #888;
    font-weight: 500;
    flex-shrink: 0;
}

/* === 播放中状态 (需要JS配合添加 .playing 类) === */
.voice-bubble.playing .voice-play-btn {
    background-color: #667eea; /* 使用你的主题色 */
    color: white;
}

.voice-bubble.playing .wave-bar {
    background-color: #667eea;
    animation: qqWave 1.2s ease-in-out infinite;
}

/* 波纹动画 */
@keyframes qqWave {
    0%, 100% { height: 6px; }
    50% { height: 16px; }
}

/* 为波纹添加交错动画，产生起伏感 */
.voice-bubble.playing .wave-bar:nth-child(1) { animation-delay: 0s; }
.voice-bubble.playing .wave-bar:nth-child(2) { animation-delay: 0.1s; }
.voice-bubble.playing .wave-bar:nth-child(3) { animation-delay: 0.2s; }
.voice-bubble.playing .wave-bar:nth-child(4) { animation-delay: 0.3s; }
.voice-bubble.playing .wave-bar:nth-child(5) { animation-delay: 0.4s; }

/* === 区分“我”发送的消息 === */
/* 我发送的消息，布局反转：时长 -> 波纹 -> 按钮 */
.message-item.me .voice-bubble {
    flex-direction: row-reverse; 
    background: white; /* 保持白色卡片风格 */
}

/* 我发送的消息，波纹靠右对齐 */
.message-item.me .voice-wave {
    justify-content: flex-end;
}
/* === 波形条基础样式 === */
.voice-wave .wave-bar {
    width: 3px;
    height: 8px;
    background: #ccc;
    border-radius: 2px;
    transition: all 0.3s;
}

/* 播放时波形动画 */
.voice-bubble.playing .voice-wave .wave-bar {
    background: #667eea;
    animation: qqWave 1.2s ease-in-out infinite;
}

/* 波形交错动画 */
.voice-bubble.playing .voice-wave .wave-bar:nth-child(1) { animation-delay: 0s; }
.voice-bubble.playing .voice-wave .wave-bar:nth-child(2) { animation-delay: 0.15s; }
.voice-bubble.playing .voice-wave .wave-bar:nth-child(3) { animation-delay: 0.3s; }
.voice-bubble.playing .voice-wave .wave-bar:nth-child(4) { animation-delay: 0.45s; }
.voice-bubble.playing .voice-wave .wave-bar:nth-child(5) { animation-delay: 0.6s; }

/* 播放按钮图标样式 */
.voice-play-btn i {
    font-size: 10px;
}


/* 为波纹添加交错动画，产生起伏感 */
.voice-bubble.playing .wave-bar:nth-child(1) { animation-delay: 0s; }
.voice-bubble.playing .wave-bar:nth-child(2) { animation-delay: 0.1s; }
.voice-bubble.playing .wave-bar:nth-child(3) { animation-delay: 0.2s; }
.voice-bubble.playing .wave-bar:nth-child(4) { animation-delay: 0.3s; }
.voice-bubble.playing .wave-bar:nth-child(5) { animation-delay: 0.4s; }

/* === 区分“我”发送的消息 === */
/* 我发送的消息，布局反转：时长 -> 波纹 -> 按钮 */
.message-item.me .voice-bubble {
    flex-direction: row-reverse; 
    background: white; /* 保持白色卡片风格 */
}

/* 我发送的消息，波纹靠右对齐 */
.message-item.me .voice-wave {
    justify-content: flex-end;
}
/* 语音文字内容默认隐藏 */
.voice-text-content {
    display: none; 
    animation: fadeIn 0.2s ease;
    
    /* ▼▼▼ 新增：白底黑字卡片样式 ▼▼▼ */
    background: #ffffff;
    color: #333333;
    padding: 10px;
    border-radius: 10px;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
}


/* 只有加了 show 类名才显示 */
.voice-text-content.show {
    display: block;
}


/* 语音条容器 */
.voice-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
   /* ============ 通话页面样式 ============ */
.call-screen {
    height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: none;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}
/* 顶部状态区 */
.call-header {
    padding: 30px 20px 15px;
    text-align: center;
    flex-shrink: 0;
}

.call-name {
    font-size: 20px;
    font-weight: 600;
    color: white;
    margin-bottom: 5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.call-status {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
}


/* 对话区域容器 */
.call-messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 0 15px 10px;
}

.call-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 动作描写框 */
.call-action-desc {
    background: rgba(0,0,0,0.4);
    padding: 12px 20px;
    border-radius: 12px;
    font-style: italic;
    color: #ddd;
    font-size: 13px;
    text-align: center;
    margin: 10px auto;
    max-width: 85%;
    line-height: 1.5;
    backdrop-filter: blur(5px);
}

/* AI消息气泡 */
.call-message-ai {
    align-self: flex-start;
    background: rgba(255,255,255,0.9);
    color: #333;
    padding: 10px 14px;
    border-radius: 12px;
    max-width: 75%;
    font-size: 15px;
    line-height: 1.4;
    word-wrap: break-word;
}

/* 用户消息气泡 */
.call-message-user {
    align-self: flex-end;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 10px 14px;
    border-radius: 12px;
    max-width: 75%;
    font-size: 15px;
    line-height: 1.4;
    word-wrap: break-word;
}

/* 挂断按钮区域 */
.call-hangup-section {
    padding: 20px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.hangup-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #ff4757;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255,71,87,0.4);
    transition: all 0.3s;
}

.hangup-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(255,71,87,0.6);
}

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

/* ============ 小窗 (PIP - Picture in Picture) ============ */

/* 右上角小窗容器 */
.pip-window {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background: white;
    border: 2px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    overflow: hidden;
}

/* 小窗内的头像 */
.pip-avatar {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    overflow: hidden;
    background: #f0f0f0;
}

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

/* 显示小窗按钮 */
.pip-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    margin-right: 15px;
}

.pip-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.05);
}

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


/* ============ 通话输入栏 - WhatsApp 风格 ============ */

.call-input-bar {
    display: flex;
    align-items: flex-end;
    padding: 12px 15px 15px;
    background: #ffffff;
    gap: 10px;
    border-top: 1px solid #f0f0f0;
    flex-shrink: 0;
}

/* 输入框 */
.call-input-bar .chat-input {
    flex: 1;
    height: 36px;
    padding: 10px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    font-size: 15px;
    resize: none;
    outline: none;
    background: #ffffff;
    font-family: inherit;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.call-input-bar .chat-input:focus {
    border-color: #333;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.call-input-bar .chat-input:disabled {
    background: #f5f5f5;
    color: #999;
    cursor: not-allowed;
}

.call-input-bar .chat-input::placeholder {
    color: #999;
}

/* 发送/接收按钮 */
.call-input-bar .action-icon-btn {
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.call-input-bar .action-icon-btn:hover {
    transform: scale(1.05);
}

.call-input-bar .action-icon-btn:active {
    transform: scale(0.95);
}

.call-input-bar .action-icon-btn svg {
    width: 24px;
    height: 24px;
    stroke: #333;
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.call-input-bar .action-icon-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


 /* 通话设置按钮 */
.call-settings-btn {
    position: absolute;
    top: 30px;
    left: 20px; 
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(5px);
    transition: all 0.3s;
  font-size: 18px;
}

.call-settings-btn:hover {
    background: rgba(255,255,255,0.3);
    transform: scale(1.05);
}

.call-settings-btn:active {
    transform: scale(0.95);
}
/* ============ WhatsApp 风格气泡 + 主题切换 ============ */

/* 默认主题：白底黑字 */
.call-screen.light-theme .call-message-ai,
.call-screen.light-theme .call-message-user {
    background: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #f0f0f0;
}

/* 深色主题：黑底白字 */
.call-screen.dark-theme .call-message-ai,
.call-screen.dark-theme .call-message-user {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid #333333;
}

/* 默认应用浅色主题 */
.call-screen {
    --call-theme: light;
}

  /* 通话设置弹窗内的表单优化 */
#callSettingsModal .form-group {
    margin-bottom: 15px;
}

#callSettingsModal .form-label {
    font-size: 14px;
    margin-bottom: 8px;
}

#callSettingsModal .file-input-area {
    padding: 15px;
    font-size: 13px;
}

#callSettingsModal .api-btn {
    padding: 10px;
    font-size: 13px;
}

#callSettingsModal .modal-buttons {
    margin-top: 15px;
    gap: 10px;
}

#callSettingsModal .btn {
    padding: 10px;
    font-size: 14px;
}
/* 用户头像上传区域 */
#userAvatarArea {
    position: relative;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#userAvatarArea .avatar-upload-content {
    text-align: center;
    padding: 20px;
    background: rgba(255,255,255,0.9);
    border-radius: 8px;
}

/* 有预览图时隐藏文字 */
#userAvatarArea.has-preview .avatar-upload-content {
    display: none;
}


/* ============ 购物功能样式 ============ */
.shopping-screen {
    height: 100vh;
    background: white;
    display: none;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100; /* 提高层级 */
    max-width: 375px; /* 保持手机宽度 */
    margin: 0 auto;
}


.shopping-header {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
}
/* 修改位置：在 .shopping-header 下方 */

.shopping-search-area {
    padding: 10px 20px 20px; /* 调整间距 */
    background: #ffffff;     /* 改为纯白背景 */
    position: sticky;        /* 搜索栏吸顶 */
    top: 0;
    z-index: 10;
}

/* 搜索框容器：Ins风全圆角线框 */
.search-card {
    background: #ffffff;
    border-radius: 30px;      /* 全圆角胶囊状 */
    padding: 8px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: none;         /* 去除阴影 */
    border: 1.5px solid #f0f0f0; /* 极细灰色边框 */
    transition: border-color 0.3s;
     width: 100%;  /* ← 确保有这一行 */
    box-sizing: border-box;  /* ← 确保有这一行 */
}

.search-card:hover, 
.search-card:focus-within {
    border-color: #333;       /* 聚焦时变黑线 */
}

/* 搜索按钮：简约文字/图标 */
.search-btn {
    background: #333;         /* 黑色背景 */
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;      /* 圆角 */
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
    min-width: auto;
}

.search-btn:hover {
    background: #000;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 加载动画 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.search-btn.loading {
    pointer-events: none; /* 加载时禁止点击 */
}

.search-btn.loading::before {
    content: '⏳';
    display: inline-block;
    animation: spin 1s linear infinite;
    margin-right: 4px;
}

/* 加载时的旋转动画 (可选，会让等待过程很可爱) */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.search-btn.loading-mode {
    border-color: #ff9f43;
    color: #ff9f43;
    background: #fff8f0;
}

.search-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    background: transparent;
    padding: 0;
     min-width: 0;
}

.search-input::placeholder {
    color: #999;
}

.search-btn {
    background: white;
    color: #333;
    border: 1px solid #e0e0e0;
    padding: 8px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
}

.search-btn:hover {
    background: #f8f8f8;
    border-color: #d0d0d0;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.search-btn:active {
    transform: translateY(0);
    background: #f0f0f0;
}



.shopping-content {
    flex: 1;
    overflow-y: auto;
    padding: 15px 20px 80px;
}
/* 修改位置：在 .shopping-content 下方 */

/* 商品卡片：Ins风大圆角白块 */
.product-card {
    background: white;
    border-radius: 24px;      /* 大圆角 */
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03); /* 极淡的高级阴影 */
    border: 1px solid rgba(0,0,0,0.02);
    position: relative;
    transition: transform 0.2s;
}

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

.product-name {
    font-size: 17px;
    font-weight: 700;
    color: #333;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.product-description {
    font-size: 13px;
    color: #999;
    line-height: 1.5;
    margin-bottom: 15px;
    font-weight: 400;
}

.product-price {
    font-size: 20px;
    font-weight: 600;
    color: #333;          /* 价格改为深黑色，更显高级 */
    margin: 0;            /* 布局调整 */
    font-family: -apple-system, BlinkMacSystemFont, monospace; /* 数字字体 */
}

/* 底部操作区布局 */
.product-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #f5f5f5; /* 虚线分割 */
}

.product-actions {
    display: flex;
    gap: 10px;
}

/* 通用按钮样式：线框风格 */
.product-btn {
    flex: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent; /* 透明背景 */
}

/* 编辑按钮：灰线 */
.btn-edit {
    color: #333;
    border: 1.5px solid #e0e0e0;
    background: transparent;
}
.btn-edit:hover {
    border-color: #333;
    background: #fff;
}

/* 删除按钮：红线 */
.btn-delete {
    color: #ff4757;
    border: 1.5px solid #ffeaea;
    background: transparent;
}
.btn-delete:hover {
    border-color: #ff4757;
    background: #fff5f6;
}

/* 加入购物车：黑底实心 */
.btn-add-cart {
    background: #333;
    color: white;
    border: 1.5px solid #333;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.btn-add-cart:hover {
    background: #000;
    border-color: #000;
    transform: translateY(-2px);
}



/* 购物车徽章 */
.cart-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff4757;
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

.shopping-cart-screen {
    height: 100vh;
    background: white;
    display: none;
    flex-direction: column;
    position:absolute; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100; /* 提高层级 */
    max-width: 375px; /* 保持手机宽度 */
    margin: 0 auto;
}


.cart-content {
    flex: 1;
    overflow-y: auto;
    padding: 15px 20px;
}

/* 修改位置：在 .shopping-cart-screen 内部 */

.cart-item {
    background: white;
    border-radius: 24px;      /* 统一大圆角 */
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.02);
}

/* 数量加减按钮：线框圆圈 */
.quantity-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid #e0e0e0; /* 加粗一点 */
    background: white;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.quantity-btn:hover {
    border-color: #333;
    color: #333;
}


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

.cart-item-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    flex: 1;
}

.cart-item-price {
    font-size: 16px;
    font-weight: 700;
    color: #ff4757;
}

.cart-item-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quantity-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
}

.quantity-btn:hover {
    background: #f0f0f0;
}

.quantity-btn:active {
    transform: scale(0.9);
}

.quantity-number {
    font-size: 15px;
    font-weight: 600;
    min-width: 30px;
    text-align: center;
}

.cart-item-delete {
    color: #ff4757;
    font-size: 13px;
    cursor: pointer;
    padding: 5px 10px;
}

.cart-item-delete:hover {
    text-decoration: underline;
}

/* ============ 购物车底部布局 ============ */
.cart-footer {
    padding: 25px 20px 30px;
    border-top: 1px solid #f5f5f5;
    background: white;
    border-radius: 30px 30px 0 0; /* 顶部圆角 */
    box-shadow: 0 -5px 20px rgba(0,0,0,0.02);
}
/* 第一行：支付方式 + 总价 */
.cart-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}
/* 左侧：支付方式选择（横向紧凑） */
/* 左侧：支付方式选择（强制横向） */
.payment-options {
    display: flex;
    flex-direction: row !important;  /* 强制横向 */
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}
.payment-option {
    display: flex;
    align-items: center;
    padding: 5px 8px;  /* 缩小内边距 */
    background: white;
    border: 1.5px solid #e0e0e0;  /* 边框变细 */
    border-radius: 6px;  /* 圆角变小 */
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}
.payment-option:hover {
    border-color: #667eea;
    background: #f8f9ff;
}
.payment-option.selected {
    border-color: #667eea;
    background: #f0f4ff;
}
.payment-radio {
    width: 14px;   /* 缩小单选按钮 */
    height: 14px;
    margin-right: 4px;  /* 减小间距 */
    cursor: pointer;
    flex-shrink: 0;
}
.payment-label {
    cursor: pointer;
    font-size: 12px;  /* 缩小字体 */
    color: #333;
    font-weight: 500;
}
/* 右侧：总价 */
.cart-total-inline {
    font-size: 16px;  /* 稍微缩小 */
    font-weight: 600;
    color: #333;
}
.cart-total-inline span {
    color: #ff4757;
    font-size: 18px;  /* 稍微缩小 */
}
/* 第二行：结算按钮 */
.btn-checkout {
    width: 100%;
    padding: 15px;
    background: #333;        /* 黑色 */
    color: white;
    border: none;
    border-radius: 30px;     /* 全圆角 */
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}
.btn-checkout:hover {
    background: #000;
    transform: translateY(-2px);
}
.btn-checkout:active {
    transform: scale(0.98);
}
.btn-checkout:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

/* ============ 购物订单卡片样式（保持不变） ============ */
.shopping-order-card {
    max-width: 85%;
    padding: 12px 15px;
    border-radius: 12px;
    background: white;
    border: 2px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.3s;
    margin: 10px 0;
}

.shopping-order-card:hover {
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.order-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.order-icon {
    font-size: 20px;
}

.order-type-text {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.order-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.order-status {
    font-size: 13px;
    font-weight: 600;
}

.order-status.status-paid {
    color: #1dd1a1;
}

.order-status.status-pending {
    color: #ff9f43;
}

.order-status.status-rejected {
    color: #999;
}

.order-amount {
    font-size: 16px;
    font-weight: 700;
    color: #ff4757;
}

.order-view-detail {
    font-size: 12px;
    color: #667eea;
    text-align: center;
    margin-top: 5px;
    cursor: pointer;
    user-select: none;
}

.order-view-detail:hover {
    color: #5a6fd8;
    text-decoration: underline;
}

.order-detail {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e0e0e0;
    animation: fadeIn 0.3s ease;
}

.order-detail.show {
    display: block;
}

.order-detail-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.order-number {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
}

.order-items-list {
    margin-bottom: 10px;
}

.order-item-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #666;
    margin-bottom: 5px;
}

.order-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 10px 0;
}

.order-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.order-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
}


.cart-total {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    text-align: right;
}

.cart-total span {
    color: #ff4757;
    font-size: 22px;
}

.btn-checkout {
    width: 100%;
    padding: 14px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-checkout:hover {
    background: #5a6fd8;
}

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

/* 空状态样式 */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.empty-state-icon {
    font-size: 60px;
    margin-bottom: 15px;
}

.empty-state-text {
    font-size: 15px;
}
/* ========== 购物/外卖切换按钮样式 ========== */
/* 修改位置：在 .shopping-header 附近，或者直接搜索 shopping-switch-container */

.shopping-switch-container {
    display: flex;
    background: white;       /* 白底 */
    padding: 4px;
    border-radius: 30px;     /* 全圆角 */
    border: 1.5px solid #f0f0f0; /* 灰色边框 */
    margin: 0 auto;          /* 居中 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}

.shopping-switch-btn {
    border: none;
    background: transparent;
    padding: 8px 20px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    color: #999;             /* 默认灰色 */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 选中状态：百货（改为黑色高级感） */
.shopping-switch-btn.active {
    background: #333;        /* 黑色背景 */
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* 选中状态：外卖（保持原有的橙色区分，或者也改为黑色） */
/* 如果想统一黑白风，建议把下面 active-food 的 background 也改成 #333 */
.shopping-switch-btn.active-food {
    background: #333 !important; /* 强制统一为黑色 */
    color: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ========== 电商/外卖 进阶样式 ========== */

/* 商品标题：淘宝风 (两行显示，多出省略) */
.product-name.goods-title {
    font-size: 15px;
    font-weight: normal; /* 淘宝标题通常不加粗，但字多 */
    line-height: 1.4;
    color: #333;
    margin-bottom: 8px;
    
    /* 限制显示两行 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 外卖标题：美团风 (加粗，单行或双行) */
.product-name.food-title {
    font-size: 16px;
    font-weight: 700; /* 外卖强调菜名 */
    color: #333;
    margin-bottom: 6px;
}

/* 标签容器 */
.product-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

/* 标签通用样式 */
.product-tag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid transparent;
}

/* 🛍️ 百货标签风格 (红/橙色系) */
.tag-goods {
    color: #ff5000; /* 淘宝红 */
    background: #fff0e6;
    border-color: #ffdec2;
}
/* 第一个标签通常突出一点，我们可以用CSS选择器让它变实心 (可选) */
.tag-goods:first-child {
    background: linear-gradient(90deg, #ff9000 0%, #ff5000 100%);
    color: white;
    border: none;
    border-radius: 2px;
}

/* 🍱 外卖标签风格 (美团黄/灰) */
.tag-food {
    color: #666;
    background: #f4f4f4; /* 灰色底 */
}
/* 外卖的评分标签 (通常是第一个) 高亮 */
.tag-food:first-child {
    color: #ff9900; /* 评分黄 */
    background: #fff8e1;
    font-weight: bold;
}

/* 底部价格和按钮行 */
.product-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 5px;
}

.product-price {
    color: #ff5000; /* 淘宝红价格 */
    font-weight: 700;
    font-size: 18px;
}
/* 外卖模式价格颜色可以稍微不同 */
.food-title ~ .product-bottom-row .product-price {
    color: #ff4a4a; 
}

/* 迷你购买按钮 */
.btn-mini-add {
    background: linear-gradient(90deg, #ff9000 0%, #ff5000 100%);
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
}
/* 外卖模式按钮变黄 */
.food-title ~ .product-bottom-row .btn-mini-add {
    background: #ffd161; /* 美团黄 */
    color: #333;
    font-weight: 600;
}

.btn-text-only {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}
   /* ========== 钱包页面样式 (支付宝风) ========== */
.wallet-container {
    flex: 1;
    background: #fff; /* 整体白色背景 */
    overflow-y: auto;
    padding-bottom: 80px;
}

 /* ========== 钱包卡片美化 (Ins精致线条风) ========== */

/* 1. 卡片主体：去油腻，极简白 */
.alipay-card {
    /* 移除所有渐变和阴影，改为纯净布局 */
    background: transparent;
    border-radius: 0; 
    margin: 0;
    padding: 30px 25px 10px;
    color: #333;
    position: relative;
    text-align: center; /* 居中对齐更有杂志感 */
}

/* 移除之前的光效装饰 */
.alipay-card::after {
    display: none;
}

.balance-label {
    font-size: 13px;
    color: #999;
    text-transform: uppercase; /* 大写更高级 */
    letter-spacing: 1.5px;     /* 字间距增加 */
    font-weight: 500;
    margin-bottom: 5px;
}

.balance-amount {
    font-size: 42px; /* 更大更细 */
    font-weight: 300; /* 细字体 */
    margin-bottom: 25px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1a1a1a;
}

.wallet-actions {
    display: flex;
    justify-content: center; /* 按钮居中 */
    gap: 15px;
}

/* 2. 按钮美化：Ins风浅灰胶囊 */
.wallet-act-btn {
    background: #f2f2f2; /* 浅灰背景 */
    border: none;
    color: #1a1a1a;
    padding: 12px 35px; /* 更宽扁 */
    border-radius: 25px; /* 全圆角 */
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: none;
    backdrop-filter: none;
}

.wallet-act-btn:hover {
    background: #e5e5e5;
    transform: translateY(-1px);
}

.wallet-act-btn:active {
    transform: scale(0.98);
}

/* 3. 功能区：纯线条图标 */
.wallet-grid {
    display: flex;
    justify-content: space-around; /* 分散对齐 */
    padding: 15px 20px;
    border-bottom: 1px solid #f8f8f8; /* 极淡分割线 */
    margin-top: 10px;
}

.wallet-grid-item {
    flex: none; /* 防止拉伸 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    width: 60px;
}

.wallet-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px; /* 小圆角 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333; /* 图标颜色：深黑 */
    background: #f9f9f9; /* 极淡的灰色底，或者可以直接 transparent */
    border: 1px solid transparent; /* 预留边框位置 */
    transition: all 0.3s;
}
/* 悬停时图标略微变深 */
.wallet-grid-item:hover .wallet-icon {
    background: #f0f0f0;
    color: #000;
}

.wallet-text {
    font-size: 12px;
    color: #666;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* 4. 账单列表：杂志排版 */
.bill-section {
    padding: 0 25px;
}

.bill-header {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    padding: 25px 0 15px;
    border-bottom: none; /* 去掉分割线 */
    letter-spacing: -0.5px;
}

.bill-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #f8f8f8; /* 极细线 */
}

.bill-title {
    font-size: 15px;
    color: #333;
    font-weight: 500;
    margin-bottom: 4px;
}

.bill-time {
    font-size: 11px;
    color: #bbb; /* 更淡的时间颜色 */
    font-weight: 400;
}

.bill-amount {
    font-size: 16px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, monospace; /* 数字等宽更有质感 */
}

.amount-income { color: #1a1a1a; } /* 收入不用红色，用高级黑 */
.amount-expense { color: #999; }   /* 支出用灰色 */

/* ============ 购物车支付方式选择样式 ============ */
.cart-payment-section {
    padding: 15px 20px;
    background: #f8f8f8;
    border-top: 1px solid #eee;
}

.payment-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-option {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    background: white;
    border: 1.5px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    /* 确保没有 width: 100% 或 display: block */
}


.payment-radio {
    width: 12px !important;
    height: 12px !important;
    margin-right: 3px !important;
    cursor: pointer;
    flex-shrink: 0;
}

.payment-label {
    cursor: pointer;
    font-size: 11px !important;  /* 超小字体 */
    color: #333;
    font-weight: 500;
}


.payment-option:hover {
    border-color: #667eea;
    background: #f8f9ff;
}

.payment-option.selected {
    border-color: #667eea;
    background: #f0f4ff;
}

.payment-radio {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    cursor: pointer;
    flex-shrink: 0;
}

.payment-label {
    flex: 1;
    cursor: pointer;
}

.payment-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 3px;
}

.payment-desc {
    font-size: 12px;
    color: #999;
}

/* 结算按钮禁用状态 */
.btn-checkout:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

/* ============ 购物订单卡片样式 ============ */
.shopping-order-card {
    max-width: 85%;
    padding: 12px 15px;
    border-radius: 12px;
    background: white;
    border: 2px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.3s;
    margin: 10px 0;
}

.shopping-order-card:hover {
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.order-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.order-icon {
    font-size: 20px;
}

.order-type-text {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.order-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.order-status {
    font-size: 13px;
    font-weight: 600;
}

.order-status.status-paid {
    color: #1dd1a1;
}

.order-status.status-pending {
    color: #ff9f43;
}

.order-status.status-rejected {
    color: #999;
}

.order-amount {
    font-size: 16px;
    font-weight: 700;
    color: #ff4757;
}

.order-view-detail {
    font-size: 12px;
    color: #667eea;
    text-align: center;
    margin-top: 5px;
    cursor: pointer; /* 确保有这行 */
    user-select: none; /* 防止文字被选中 */
}
.order-view-detail:hover {
    color: #5a6fd8;
    text-decoration: underline;
}

/* 订单详情展开 */
.order-detail {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e0e0e0;
    animation: fadeIn 0.3s ease;
}

.order-detail.show {
    display: block;
}

.order-detail-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.order-number {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
}

.order-items-list {
    margin-bottom: 10px;
}

.order-item-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #666;
    margin-bottom: 5px;
}

.order-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 10px 0;
}

.order-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.order-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
}

.order-close-detail {
    text-align: center;
    font-size: 12px;
    color: #667eea;
    margin-top: 10px;
    cursor: pointer;
}

   /* ============ 新增：聊天列表合并大卡片样式 (已修复左滑溢出问题) ============ */

/* 1. 大容器：这是一个承载所有消息的大白块 */
.chat-group-card {
    background: #ffffff;
    border-radius: 20px; /* 大圆角 */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03); /* 整体的淡阴影 */
    overflow: hidden; /* 保证内部子元素不溢出圆角 */
    margin-bottom: 20px;
    /* ▼▼▼ 新增：确保大卡片本身也有相对定位，防止内部元素跑偏 ▼▼▼ */
    position: relative; 
    z-index: 1;
}

/* 2. 重置每一行的包装器 (核心修复区) */
.chat-item-wrapper {
    margin-bottom: 0 !important; /* 去掉行与行的间距 */
    border-radius: 0 !important; /* 去掉每一行的圆角 */
    background: transparent;
    border-bottom: 0.5px solid #f0f0f0; /* 添加极细分割线 */
    
    /* ▼▼▼ 关键修复点：加上这两句，按钮就被锁在每一行里了 ▼▼▼ */
    position: relative !important;  /* 让绝对定位的按钮以这一行为基准 */
    overflow: hidden !important;    /* 这一行多余的内容统统藏起来 */
    height: auto;                   /* 高度自适应 */
}

/* 最后一行去掉分割线，完美闭合 */
.chat-item-wrapper:last-child {
    border-bottom: none;
}

/* 3. 重置每一行的点击区域 */
.chat-item {
    border-radius: 0 !important; /* 去掉圆角 */
    box-shadow: none !important; /* 去掉单行阴影 */
    background: transparent !important; /* 背景透明，透出大卡片的白色 */
    padding: 18px 20px; /* 稍微增加内边距，更有呼吸感 */
    width: 100%; /* 确保占满宽度 */
    position: relative;
    z-index: 2; /* 确保内容在按钮上面 */
}

/* 4. 悬停效果改为背景变色，而不是上浮 */
.chat-item:hover {
    transform: none !important; /* 禁止上浮，防止和左滑冲突 */
    background: #f9f9f9 !important; /* 微微变灰 */
}

/* 5. 修正左滑按钮的定位 */
.chat-actions {
    border-radius: 0 !important; /* 去掉圆角，因为是直角的列表行 */
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0; /* 确保高度撑满整行 */
    height: 100%;
    z-index: 1; /* 在内容下面 */
    /* 保持原有的 Flex 布局 */
    display: flex;
}

/* ============ 新增：双组件布局样式 (Ins线条风) ============ */

/* 1. 组件行容器 */
.widgets-row {
    display: flex;
    justify-content: space-between; /* 左右贴边对齐 */
    padding: 0 25px; /* 和上面的APP网格边距保持视觉一致 */
    gap: 15px;       /* 两个组件之间的空隙 */
    margin-bottom: 20px;
    margin-top: 10px; /* 和上面APP拉开一点距离 */
}

/* 2. 组件通用盒子 (正方形) */
.widget-box {
    flex: 1; /* 两个平分宽度 */
    aspect-ratio: 1 / 1; /* 强制正方形 */
    
    /* === Ins高冷线条风格核心 === */
    background: rgba(255, 255, 255, 0.1); /* 极淡的透明白 */
    border: 1px solid rgba(255, 255, 255, 0.35); /* 精致的细白边框 */
    border-radius: 22px; /* 圆润的角 */
    
    position: relative;
    overflow: hidden;
    color: white;
    transition: transform 0.2s;
    cursor: pointer;
}

.widget-box:active {
    transform: scale(0.96); /* 点击时的微缩反馈 */
    background: rgba(255, 255, 255, 0.15);
}

/* === 左侧：音乐组件样式 === */
.music-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 音乐圆环 (模拟唱片/进度条) */
.music-ring {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    /* 使用锥形渐变模拟进度条效果 */
    background: conic-gradient(rgba(255,255,255,0.9) 0% 70%, rgba(255,255,255,0.2) 70% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* 微微的投影增加立体感 */
    position: relative;
}

/* 圆环中间的遮罩 (形成环状) */
/* 修改 .music-ring::after，让它只作为背景遮罩 */
.music-ring::after {
    content: '';
    position: absolute;
    width: 58px;
    height: 58px;
    background: rgba(255,255,255,0.1); 
    border-radius: 50%;
    backdrop-filter: blur(5px);
    z-index: 0; /* 放在底层 */
}

/* ▼▼▼ 新增：圆环内的封面图样式 ▼▼▼ */
.music-cover-img {
    position: absolute;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    z-index: 1; /* 在遮罩之上，但在图标之下 */
    opacity: 0.8; /* 稍微透明一点符合Ins风，想要清晰改成 1 */
}

/* 播放图标 */
.music-icon {
    font-size: 24px;
    z-index: 2; /* 浮在最上面 */
    color: white;
    text-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.widget-box {
    /* ...原有样式... */
    background-size: cover !important; /* 强制背景填满 */
    background-position: center !important;
}
.music-title {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.9;
    letter-spacing: 0.5px;
}

.music-desc {
    font-size: 10px;
    opacity: 0.6;
    margin-top: 2px;
    font-weight: 300;
}



/* ============ API页面：Ins精致线条风重制版 ============ */

/* 1. 背景与布局：极简灰白 */
.api-screen {
    background: #f9f9f9 !important; /* 整体背景改淡灰，突出卡片 */
}

.api-content {
    padding: 20px 20px 40px; /* 增加底部留白 */
}

/* 2. 卡片容器：悬浮感白块 */
.api-card {
    background: #ffffff;
    border-radius: 24px; /* 更大的圆角 */
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03); /* 极淡的高级阴影 */
    border: 1px solid rgba(0, 0, 0, 0.02);
}

/* 3. 标题：小字大写，间距拉开 */
.api-section-title {
    font-size: 12px;
    color: #999;
    font-weight: 600;
    letter-spacing: 1.5px; /* 字间距 */
    text-transform: uppercase;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 4. 输入框：去黑边，改用柔和线条 */
.ins-input-group {
    margin-bottom: 18px;
}

.ins-label {
    display: block;
    font-size: 13px;
    color: #333;
    font-weight: 600;
    margin-bottom: 8px;
    margin-left: 4px;
}

.ins-input {
    width: 100%;
    padding: 14px 16px;
    background: #f8f8f8; /* 极淡灰底 */
    border: 1px solid #eee; /* 极细边框 */
    border-radius: 16px; /* 圆润 */
    font-size: 15px;
    color: #333;
    outline: none;
    transition: all 0.3s ease;
}

.ins-input:focus {
    background: #fff;
    border-color: #333; /* 聚焦变黑线条 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.ins-input::placeholder {
    color: #ccc;
    font-size: 13px;
}

/* 5. 按钮：核心线条风格 */
.ins-btn-row {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

/* 通用线条按钮 */
.ins-line-btn {
    flex: 1;
    padding: 12px;
    background: transparent;
    border: 1.5px solid #e0e0e0; /* 默认灰线条 */
    border-radius: 30px; /* 胶囊状 */
    font-size: 13px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ins-line-btn:active {
    transform: scale(0.96);
}

/* 黑色实心按钮 (Primary) */
.ins-btn-black {
    background: #333;
    color: white;
    border: 1.5px solid #333;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.ins-btn-black:hover {
    background: #000;
}

/* 蓝色线条 (Action) */
.ins-btn-blue-line {
    color: #667eea;
    border-color: #667eea;
    background: #f0f4ff;
}
.ins-btn-blue-line:hover {
    background: #667eea;
    color: white;
}

/* 红色线条 (Delete) */
.ins-btn-red-line {
    color: #ff4757;
    border-color: #ff4757;
    background: #fff5f6;
}

/* 底部操作栏布局 */
.api-footer-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

/* ============ 壁纸/图标页面：Ins风重制版 ============ */

/* 1. 全局背景统一 */
.wallpaper-screen {
    background: #f9f9f9 !important;
}

/* 2. 顶部预览区卡片化 */
.ins-preview-card {
    background: white;
    border-radius: 24px;
    padding: 30px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.02);
}

/* 3. 手机预览框美化 */
.ins-phone-frame {
    width: 140px;
    height: 240px;
    border-radius: 24px;
    border: 6px solid #333; /* 模拟手机边框 */
    overflow: hidden;
    position: relative;
    background: #f0f0f0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    margin-bottom: 15px;
}

/* 4. 精致的分段控制器 (Tabs) */
.ins-tab-group {
    background: #f0f0f0;
    padding: 4px;
    border-radius: 12px;
    display: flex;
    width: 100%;
    margin-bottom: 20px;
}

.ins-tab-btn {
    flex: 1;
    padding: 8px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #999;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 激活状态：白色悬浮块 */
.ins-tab-btn.active {
    background: white;
    color: #333;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* 5. 极简上传区域 */
.ins-upload-area {
    border: 1.5px dashed #e0e0e0;
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: #fafafa;
}

.ins-upload-area:hover {
    border-color: #999;
    background: #f4f4f4;
}

.ins-upload-icon {
    font-size: 24px;
    margin-bottom: 8px;
    color: #ccc;
}

/* 6. 图标网格优化 */
.ins-icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding: 10px 0;
}

.ins-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s;
}

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

.ins-icon-preview-box {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: white;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    overflow: hidden;
}

/* ============ 世界书页面：Ins风重制版 ============ */

/* 1. 全局容器 */
.worldbook-screen {
    background: #f9f9f9 !important; /* 统一灰底 */
}

/* 2. 分类栏 (横向滚动) */
.ins-category-scroll {
    padding: 10px 20px 20px; /* 增加底部留白 */
    overflow-x: auto;
    white-space: nowrap;
    display: flex;
    gap: 12px;
    /* 隐藏滚动条 */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
.ins-category-scroll::-webkit-scrollbar {
    display: none;
}

/* 3. 分类标签 (胶囊风格) */
.ins-cat-pill {
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 500;
    color: #999;
    background: white;
    border: 1px solid #eee;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0; /* 防止挤压 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.ins-cat-pill.active {
    background: #333;
    color: white;
    border-color: #333;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 4. 世界书列表容器 */
.ins-book-list {
    padding: 0 20px 80px; /* 底部留出空间给悬浮按钮 */
}

/* 5. 世界书卡片 (核心样式) */
.ins-book-card {
    background: white;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.02);
    position: relative;
    transition: transform 0.2s;
}

.ins-book-card:active {
    transform: scale(0.98);
}

.ins-book-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.ins-book-title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    line-height: 1.4;
}

.ins-book-tag {
    font-size: 10px;
    padding: 4px 10px;
    background: #f4f4f4;
    color: #666;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.ins-book-preview {
    font-size: 13px;
    color: #888;
    line-height: 1.6;
    margin-bottom: 15px;
    /* 限制显示3行 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 6. 卡片底部操作栏 */
.ins-book-actions {
    display: flex;
    gap: 10px;
    border-top: 1px solid #f5f5f5;
    padding-top: 12px;
    justify-content: flex-end;
}

.ins-action-btn {
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    transition: all 0.2s;
}

.ins-btn-edit {
    color: #333;
    border: 1px solid #e0e0e0;
}
.ins-btn-edit:hover {
    background: #f0f0f0;
}

.ins-btn-del {
    color: #ff4757;
    border: 1px solid #ffeaea;
    background: #fffafa;
}
.ins-btn-del:hover {
    background: #ffe0e0;
    border-color: #ff4757;
}

/* 7. 悬浮添加按钮 (黑色高级版) */
.ins-float-add {
    position: absolute;
    bottom: 30px;
    right: 25px;
    width: 56px;
    height: 56px;
    background: #333;
    color: white;
    border-radius: 20px; /* 方圆形 */
    border: none;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25);
    cursor: pointer;
    z-index: 10;
    transition: transform 0.2s;
}

.ins-float-add:active {
    transform: scale(0.9);
}

/* ============ 角色信息页：Ins 极简风重制 ============ */

/* 1. 背景与容器 */
.ins-profile-screen {
    background: #f9f9f9 !important; /* 整体浅灰底 */
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 2. 顶部个人资料卡 */
.ins-profile-header {
    background: #fff;
    padding: 30px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 15px;
}

.ins-avatar-box {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 2px solid #f0f0f0; /* 外圈装饰线 */
    padding: 3px; /* 头像与圈的间距 */
    margin-bottom: 12px;
    cursor: pointer;
    transition: transform 0.3s;
}
.ins-avatar-box:active { transform: scale(0.95); }

.ins-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #e0e0e0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}
.ins-avatar-img img { width: 100%; height: 100%; object-fit: cover; }

.ins-char-name {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

/* 粉丝/日记 数据栏 */
.ins-stats-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    width: 100%;
}
.ins-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}
.ins-stat-num {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}
.ins-stat-label {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

/* 3. 设置列表组 (圆角白块) */
.ins-list-group {
    background: #fff;
    border-radius: 16px;
    margin: 0 15px 15px;
    padding: 0 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

/* 列表行 */
.ins-list-item {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 0.5px solid #f5f5f5; /* 极细分割线 */
}
.ins-list-item:last-child { border-bottom: none; }

/* 左侧图标 */
.ins-item-icon {
    width: 22px;
    height: 22px;
    stroke: #333;
    stroke-width: 1.5;
    fill: none;
    margin-right: 12px;
    flex-shrink: 0;
}

/* 标签文字 */
.ins-item-label {
    font-size: 15px;
    color: #333;
    font-weight: 500;
    flex: 1; /* 撑开空间 */
}

/* 右侧输入框/内容 */
.ins-item-input {
    border: none;
    text-align: right;
    font-size: 14px;
    color: #666;
    outline: none;
    background: transparent;
    width: 60%;
    font-family: inherit;
}
.ins-item-input::placeholder { color: #ccc; }

/* 箭头 */
.ins-arrow {
    color: #ccc;
    font-size: 18px;
    margin-left: 8px;
}

/* 4. 特殊控件样式 */
/* 文本域容器 */
.ins-textarea-box {
    width: 100%;
    margin-top: 10px;
}
.ins-textarea {
    width: 100%;
    border: 1px solid #f0f0f0;
    background: #f9f9f9;
    border-radius: 12px;
    padding: 12px;
    font-size: 14px;
    color: #666;
    resize: none;
    outline: none;
    line-height: 1.5;
}
.ins-textarea:focus { border-color: #667eea; background: #fff; }

/* 世界书选择框美化 */
#worldbookSelector {
    border: none !important;
    background: #f9f9f9;
    border-radius: 12px !important;
    padding: 5px !important;
}

/* 滑动条美化 */
input[type=range] {
    accent-color: #667eea; /* 滑块颜色 */
}

/* 底部大按钮 (居中胶囊版) */
.ins-save-btn {
    display: block;          /* 必须是块级元素 */
    width: 60%;              /* 宽度设为 60%，不要占满 */
    max-width: 200px;        /* 限制最大宽度，防止在大屏太宽 */
    margin: 30px auto 50px;  /* 关键：左右 auto 实现居中，下边距留够 */
    
    background: #333;        /* 高冷黑 */
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 30px;     /* 全圆角 */
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: transform 0.2s;
}
.ins-save-btn:active { transform: scale(0.95); }

/* ============ 城市弹窗美化 ============ */

/* 弹窗容器微调 */
#cityInfoModal .modal {
    background: #f9f9f9; /* 浅灰底色 */
    border-radius: 24px; /* 更圆润 */
    padding: 0;          /*以此接管内边距 */
    overflow: hidden;
}

/* 标题栏 */
.ins-modal-header {
    background: #fff;
    padding: 20px;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: #333;
    border-bottom: 0.5px solid #eee;
}

/* 滚动内容区 */
.ins-modal-body {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

/* 分组标题 */
.ins-group-title {
    font-size: 12px;
    color: #999;
    margin: 15px 15px 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.ins-group-title:first-child { margin-top: 0; }

/* 获取天气按钮 (蓝色文字链风格) */
.ins-fetch-btn {
    width: 100%;
    padding: 15px;
    margin-top: 10px;
    background: #fff;
    border: none;
    border-radius: 16px;
    color: #667eea;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.ins-fetch-btn:active { background: #f0f0f0; }

/* ============ 天气卡片：清新蓝天版 ============ */

.weather-preview-card {
    /* 背景：经典的“晴空蓝”渐变 */
    background: linear-gradient(160deg, #56CCF2 0%, #2F80ED 100%);
    
    border-radius: 20px;
    padding: 25px 22px;
    color: white;
    margin-top: 20px;
    /* 投影改成柔和的蓝色光晕 */
    box-shadow: 0 8px 25px rgba(47, 128, 237, 0.4);
    position: relative;
    overflow: hidden;
}

/* 装饰：右上角模拟一个小太阳的光晕 */
.weather-preview-card::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    filter: blur(15px);
}

/* 城市板块 */
.weather-section {
    position: relative;
    z-index: 1;
}

/* 上半部分分割线：改成柔和的白色半透明线 */
.weather-section.border-bottom {
    border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

/* 城市名称 */
.weather-city-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1); /* 文字加一点投影更清晰 */
}

/* 天气数据行 */
.weather-data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

/* "今天"的数据 */
.is-today {
    font-size: 15px;
    font-weight: 600;
}

/* "明天"的数据 */
.is-tomorrow {
    font-size: 13px;
    color: rgba(255,255,255,0.9); /* 明天稍微亮一点，不用那么灰 */
}

/* 更新时间脚标 */
.weather-update-time {
    text-align: center; /* 居中显示更好看 */
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    margin-top: 15px;
    background: rgba(0,0,0,0.1); /* 加个小背景条 */
    padding: 4px;
    border-radius: 10px;
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* 底部按钮栏 (居中版) */
.ins-modal-footer {
    background: #fff;
    padding: 20px 20px 30px; /* 底部空间留大一点 */
    display: flex;
    justify-content: center; /* ★ 关键：水平居中 */
    gap: 20px; /* 按钮之间的间距 */
    border-top: 0.5px solid #eee;
}

/* 按钮微调：让它稍微宽一点，看起来更稳重 */
.ins-modal-footer .btn {
    min-width: 100px; /* 限制最小宽度 */
    padding: 10px 20px;
}

/* ============ 记忆空间样式 ============ */
.memory-screen {
    height: 100vh;
    background: #f9f9f9;
    display: none;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 150;
}

.memory-header {
    display: flex;
    align-items: center;
    padding: 20px;
    background: white;
    border-bottom: 1px solid #eee;
}

.memory-header-actions {
    display: flex;
    gap: 15px; /* 按钮之间的间距 */
}

.memory-icon-btn {
    font-size: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    color: #333;
    transition: transform 0.2s;
}

.memory-icon-btn:active {
    transform: scale(0.9);
}

/* 顶部 Tab 切换 */
.memory-tabs {
    display: flex;
    background: white;
    padding: 10px 20px;
    gap: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.memory-tab-item {
    font-size: 15px;
    font-weight: 600;
    color: #999;
    padding-bottom: 8px;
    cursor: pointer;
    position: relative;
    transition: color 0.3s;
}

.memory-tab-item.active {
    color: #333;
  
}

.memory-tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: #667eea;
    border-radius: 2px;
}

/* 内容区域 */
.memory-content-area {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* --- 1. 印象标签样式 --- */
.memory-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-content: flex-start;
}

.mem-tag {
    padding: 8px 16px;
    background: white;
    border-radius: 20px;
    font-size: 14px;
    color: #333;
    border: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.mem-tag:active {
    transform: scale(0.95);
    background: #f5f5f5;
}

.mem-tag.pinned {
    border-color: #ffd700;
    background: #fffdf0;
}

.mem-tag-pin-icon {
    font-size: 10px;
    color: #ffa502;
}

/* --- 2. 时光相册样式 (时间轴) --- */
.memory-timeline {
    position: relative;
    padding-left: 20px;
}

/* 垂直线 */
.memory-timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 0;
    width: 2px;
    background: #e0e0e0;
    border-radius: 1px;
}

.timeline-item {
    margin-bottom: 25px;
    position: relative;
}

/* 时间轴上的圆点 */
.timeline-dot {
    position: absolute;
    left: -24px;
    top: 15px; /* 对齐卡片顶部 */
    width: 10px;
    height: 10px;
    background: #667eea;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 0 2px #e0e0e0;
}

.timeline-date {
    font-size: 12px;
    color: #999;
    margin-bottom: 6px;
    margin-left: 4px;
    font-weight: 500;
}

.timeline-card {
    background: white;
    border-radius: 12px;
    padding: 12px 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border: 1px solid #f0f0f0;
    font-size: 14px;
    line-height: 1.5;
    color: #444;
    position: relative;
}

.timeline-card:active {
    background: #fafafa;
}

.timeline-edit-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
    color: #ccc;
    cursor: pointer;
    padding: 5px;
}

/* 编辑/添加记忆弹窗样式微调 */
.mem-type-switch {
    display: flex;
    background: #f0f0f0;
    padding: 4px;
    border-radius: 10px;
    margin-bottom: 15px;
}

.mem-type-btn {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
}

.mem-type-btn.active {
    background: white;
    color: #333;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
/*记忆css结束*/

/* ============ 🆕 档案中心 (Archives) 样式 ============ */

/* 1. 顶部 Tab 栏重构 (三段式) */
.memory-tabs {
    justify-content: space-between; /* 分散对齐 */
    padding: 0 10px;
}

.memory-tab-item {
    flex: 1;
    text-align: center;
    font-size: 13px; /* 字体稍微改小一点显精致 */
    padding: 12px 0;
    color: #999;
    font-weight: 500;
    transition: all 0.3s;
    letter-spacing: 0.5px;
}

.memory-tab-item.active {
    color: #333;
    font-weight: 600;
}

/* 2. 档案页容器 (Tab 1) */
.archive-container {
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

/* A区：基础信息卡 (自动同步) */
.archive-card-base {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    margin-bottom: 20px;
    border: 1px solid rgba(0,0,0,0.02);
}

.archive-avatar {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    margin-right: 20px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    border: 3px solid rgba(255,255,255,0.8);
    box-shadow: 0 0 0 1px #eee; /* 细边框装饰 */
}
.archive-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.archive-base-info {
    flex: 1;
}

.archive-name {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.archive-meta-row {
    font-size: 12px;
    color: #999;
    display: flex;
    gap: 10px;
    font-family: -apple-system, sans-serif;
}

/* B区：私密数据网格 (拓展数据) */
.archive-grid-box {
    background: white;
    border-radius: 16px;
    overflow: hidden; /* 圆角裁剪 */
    border: 1px solid #f0f0f0;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列 */
    margin-bottom: 20px;
}

.archive-grid-item {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

/* 去掉偶数列的右边框 */
.archive-grid-item:nth-child(2n) {
    border-right: none;
}
/* 去掉最后一行的下边框 */
.archive-grid-item:nth-last-child(-n+2) {
    border-bottom: none;
}

.grid-label {
    font-size: 10px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.grid-value {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

/* C区：深度档案 (长文本) */
.archive-deep-section {
    margin-bottom: 20px;
}

.archive-section-title {
    font-size: 12px;
    color: #667eea; /* 主题色 */
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.archive-text-box {
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #555;
    border: 1px solid #f0f0f0;
}

/* 顶部 Header 的氛围感副标题 */
.archive-subtitle {
    text-align: center;
    font-size: 11px;
    color: #ccc;
    font-style: italic;
    margin: -10px 0 15px 0;
    font-family: serif; /* 衬线体显高级 */
}

/* 编辑按钮 (位于Tab 1右上角) */
.archive-edit-float {
    position: fixed;
    bottom: 30px;
    right: 25px;
    width: 50px;
    height: 50px;
    background: white;
    color: #333;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 100;
    border: 1px solid #f0f0f0;
    cursor: pointer;
    transition: transform 0.2s;
}
.archive-edit-float:active { transform: scale(0.95); }
/* === 档案卡片修正与分析按钮样式 === */

/* 1. 修正卡片基准定位 */
.archive-card-base {
    position: relative; /* 关键：为了让里面的按钮能绝对定位 */
    /* 原有样式保持不变 */
    display: flex;
    align-items: center;
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    margin-bottom: 20px;
    border: 1px solid rgba(0,0,0,0.02);
}

/* 2. 分析按钮样式 (Ins风黑底胶囊) */
/* 修改这一段 */
.archive-analyze-btn {
    position: absolute;
    
    /* ▼▼▼ 修改这里：从 top 改为 bottom ▼▼▼ */
    top: auto;        /* 必须重置 top */
    bottom: 15px;     /* 固定在右下角 */
    right: 15px;
    
    /* 样式保持不变 */
    background: #333;
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
}
.archive-analyze-btn:hover {
    transform: scale(1.05);
    background: #000;
}

.archive-analyze-btn:active {
    transform: scale(0.95);
}

.archive-analyze-btn.loading {
    background: #ccc;
    cursor: wait;
}
/* ============ 消息引用样式 (气泡外部显示) ============ */
.message-quoted-outside {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin-bottom: 4px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    font-size: 12px;
    color: #888;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    transition: background 0.2s;
}

.message-quoted-outside:hover {
    background: rgba(0, 0, 0, 0.08);
}

/* 引用的作者名 */
.quoted-author {
    color: #667eea;
    font-weight: 600;
    flex-shrink: 0;
}

/* 引用的内容文字 */
.quoted-text {
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* 我发送的消息，引用条靠右对齐 */
.message-item.me .message-quoted-outside {
    justify-content: flex-end;
    background: rgba(102, 126, 234, 0.1);
}

/* 移除 order 属性，保持正常顺序：作者在前，内容在后 */
.message-item.me .quoted-author {
    flex-shrink: 0;
}

.message-item.me .quoted-text {
    text-align: right;
}
/* ============ 引用消息预览框样式 ============ */
.quote-box {
    background: #f5f5f5;
    margin: 0 15px 10px;
    padding: 12px 15px;
    border-radius: 12px;
    position: relative;
}

.quote-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

#quoteAuthor {
    font-size: 12px;
    color: #333;
    font-weight: 600;
}

.quote-close {
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

.quote-close:hover {
    color: #ff4757;
}

#quoteContent {
    font-size: 13px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
/* ============ 礼物卡片样式 (INS极简风) ============ */
.gift-card {
    width: 140px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #eee;
    overflow: hidden;
}

.gift-card-main {
    padding: 20px 15px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.gift-card-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
}

.gift-card-icon svg {
    width: 100%;
    height: 100%;
    stroke: #333;
    stroke-width: 1.5;
    fill: none;
}

.gift-card-btn {
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ============ 小票弹窗样式 ============ */
.receipt-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.receipt-modal {
    background: #fff9f0;
    border-radius: 12px;
    width: 100%;
    max-width: 320px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: receiptSlideUp 0.3s ease;
}

@keyframes receiptSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.receipt-modal-header {
    background: #2c3e50;
    color: white;
    text-align: center;
    padding: 20px 15px;
    position: relative;
}

.receipt-modal-header h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 5px 0;
    letter-spacing: 2px;
}

.receipt-modal-header p {
    font-size: 12px;
    opacity: 0.85;
    margin: 0;
}

.receipt-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255,255,255,0.2);
    color: white;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.receipt-modal-body {
    padding: 20px;
    max-height: 50vh;
    overflow-y: auto;
}

.receipt-info-section {
    margin-bottom: 20px;
}

.receipt-info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px dotted #ddd;
}

.receipt-info-row:last-child {
    border-bottom: none;
}

.receipt-info-label {
    color: #666;
}

.receipt-info-value {
    color: #333;
    font-weight: 500;
}

.receipt-items-section {
    margin-bottom: 20px;
}

.receipt-items-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #2c3e50;
    margin-bottom: 10px;
}

.receipt-item-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
    color: #555;
    border-bottom: 1px dotted #ddd;
}

.receipt-total-section {
    border-top: 2px solid #2c3e50;
    padding-top: 15px;
}

.receipt-total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: #666;
}

.receipt-grand-total {
    display: flex;
    justify-content: space-between;
    padding: 12px 0 0;
    margin-top: 10px;
    border-top: 1px dashed #aaa;
    font-size: 16px;
    font-weight: 700;
    color: #e74c3c;
}

.receipt-modal-footer {
    text-align: center;
    padding: 20px;
    border-top: 1px dashed #ccc;
    background: #fff9f0;
}

.receipt-modal-footer p {
    margin: 0 0 8px 0;
    font-size: 12px;
    color: #888;
}

.receipt-barcode {
    font-family: monospace;
    font-size: 14px;
    letter-spacing: 3px;
    color: #333;
    margin: 10px 0;
}

.receipt-status-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.receipt-status-tag.paid {
    background: #d4edda;
    color: #155724;
}

.receipt-status-tag.pending {
    background: #fff3cd;
    color: #856404;
}

.receipt-action-btns {
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    background: #f5f5f5;
}

.receipt-action-btns button {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.receipt-btn-confirm {
    background: #2c3e50;
    color: white;
}

.receipt-btn-reject {
    background: #eee;
    color: #666;
}
/* ============ 状态监控模块样式 (纯按钮版·修复版) ============ */
.status-heartbeat-bar {
    position: absolute;      /* 关键：绝对定位，脱离文档流 */
    top: 80px;               /* 初始垂直位置 */
    right: 20px;             /* 初始水平位置 (靠右) */
    z-index: 1000;           /* 保证在最上层 */
    
    width: auto;             /* 宽度自适应内容 */
    padding: 0;              /* 去掉内边距 */
    background: transparent;
    border: none;
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;            /* 鼠标手势 */
    
    /* 关键：禁止移动端的默认滚动行为，保证拖动丝滑 */
    touch-action: none; 
    user-select: none;
    -webkit-user-select: none;
}
.status-heartbeat-bar:active {
    cursor: grabbing;
}
/* 2. 中间的心跳胶囊按钮 */
.heartbeat-center {
    /* 保持原有美化样式 */
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 8px 16px;       /* 稍微加大一点触控区 */
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* 加深阴影 */
    border: 1px solid rgba(255,255,255,0.6);
    transition: transform 0.2s, background 0.2s;
}
.status-heartbeat-bar:active .heartbeat-center {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 1);
}
/* 心跳动画和BPM样式保持不变 */
.heartbeat-icon {
    color: #ff4757;
    font-size: 14px;
    animation: heartPulse 1.2s ease-in-out infinite;
}
@keyframes heartPulse {
    0% { transform: scale(1); }
    15% { transform: scale(1.3); }
    30% { transform: scale(1); }
    45% { transform: scale(1.15); }
    60% { transform: scale(1); }
    100% { transform: scale(1); }
}
.heartbeat-bpm {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, monospace;
}
.heartbeat-bpm::after {
    content: ' BPM';
    font-size: 10px;
    font-weight: 500;
    color: #999;
    margin-left: 2px;
}

/* 3. 状态监控弹窗 (保持不变) */
.status-monitor-panel {
    background: #ffffff;
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-width: 375px;
    max-height: 80vh;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
    animation: slideUp 0.3s ease;
    z-index: 200; /* 提高层级，防止被遮挡 */
}

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

/* 弹窗头部 */
.status-monitor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.status-monitor-title {
    font-size: 17px;
    font-weight: 700;
    color: #333;
    letter-spacing: 0.5px;
}

.status-close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 18px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.status-close-btn:hover {
    background: #eee;
    color: #333;
}

/* 弹窗滚动区域 */
.status-monitor-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    max-height: 60vh;
}

/* 4. 状态块通用样式 */
.status-block {
    background: #fafafa;
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 15px;
    border: 1px solid #f0f0f0;
}

.status-block:last-child {
    margin-bottom: 0;
}

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

.status-block-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.status-emoji {
    font-size: 16px;
}

.status-block-content {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

/* 5. 心情块特殊样式 */
.status-heartbeat-mini {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ecg-mini {
    width: 50px;
    height: 16px;
}

.ecg-line-mini {
    fill: none;
    stroke: #333;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: ecgDrawMini 1.5s linear infinite;
}

@keyframes ecgDrawMini {
    0% { stroke-dashoffset: 100; }
    100% { stroke-dashoffset: 0; }
}

.bpm-mini {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    font-family: monospace;
}

/* 心情进度条 */
.mood-progress {
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    margin: 12px 0 8px;
    overflow: hidden;
}

.mood-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #333 0%, #666 100%);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.mood-label {
    font-size: 12px;
    color: #999;
    text-align: right;
}

/* 6. 穿着标签 */
.clothes-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.clothes-tag {
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    font-size: 12px;
    color: #666;
}

/* 7. 日程列表 */
.schedule-list {
    margin-top: 10px;
}

.schedule-row {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
}

.schedule-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.schedule-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
}

/* 已完成 */
.schedule-row.completed .schedule-dot {
    background: #333;
}

.schedule-row.completed .schedule-task {
    color: #999;
    text-decoration: line-through;
}

/* 进行中 */
.schedule-row.current .schedule-dot {
    background: #333;
    animation: dotPulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 0 3px rgba(51, 51, 51, 0.2);
}

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

/* 待办 */
.schedule-row.upcoming .schedule-dot {
    background: transparent;
    border: 2px solid #ccc;
}

.schedule-time {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    min-width: 50px;
    margin-right: 12px;
    font-family: monospace;
}

.schedule-task {
    font-size: 14px;
    color: #555;
    flex: 1;
}

/* 8. 遮罩层 */
#statusMonitorModal {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

#statusMonitorModal.modal-overlay {
    align-items: flex-end;
}
/* ============ 眼中的你 - 用户侧写样式 ============ */

/* 情绪贴纸区 */
.emotion-section {
    background: white;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.02);
}

.emotion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

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

.emotion-time {
    font-size: 11px;
    color: #999;
}

.emotion-display {
    display: flex;
    align-items: center;
    gap: 20px;
}

.emotion-sticker {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff9e6 0%, #fff3cc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    box-shadow: 0 4px 15px rgba(255, 200, 50, 0.2);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

/* 不同情绪的贴纸背景 */
.emotion-sticker.sunny {
    background: linear-gradient(135deg, #fff9e6 0%, #ffe066 100%);
    box-shadow: 0 4px 15px rgba(255, 200, 50, 0.3);
}

.emotion-sticker.cloudy {
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
    box-shadow: 0 4px 15px rgba(150, 150, 150, 0.2);
}

.emotion-sticker.rainy {
    background: linear-gradient(135deg, #e3f2fd 0%, #90caf9 100%);
    box-shadow: 0 4px 15px rgba(100, 150, 255, 0.2);
}

.emotion-sticker.stormy {
    background: linear-gradient(135deg, #ffebee 0%, #ef9a9a 100%);
    box-shadow: 0 4px 15px rgba(255, 100, 100, 0.2);
}

.emotion-sticker.starry {
    background: linear-gradient(135deg, #ede7f6 0%, #b39ddb 100%);
    box-shadow: 0 4px 15px rgba(150, 100, 255, 0.2);
}

.emotion-sticker.coffee {
    background: linear-gradient(135deg, #efebe9 0%, #bcaaa4 100%);
    box-shadow: 0 4px 15px rgba(150, 120, 100, 0.2);
}

.emotion-info {
    flex: 1;
}

.emotion-label {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.emotion-score-bar {
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.emotion-score-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease, background 0.5s ease;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

/* 负面情绪时变红 */
.emotion-score-fill.negative {
    background: linear-gradient(90deg, #ff6b6b 0%, #ee5a5a 100%);
}

/* 正面情绪时变绿 */
.emotion-score-fill.positive {
    background: linear-gradient(90deg, #51cf66 0%, #40c057 100%);
}

.emotion-score-text {
    font-size: 12px;
    color: #999;
}

/* 印象标签区 */
.tags-section {
    background: white;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.02);
}

.tags-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

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

.tags-count {
    font-size: 11px;
    color: #999;
}

/* 标签云样式 */
.memory-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
/* 印象标签 (Ins 黑白线条风) */
.user-tag {
    padding: 8px 18px;
    background: white; /* 纯白背景 */
    border-radius: 30px; /* 大圆角胶囊状 */
    font-size: 13px;
    color: #333; /* 深黑文字 */
    border: 1.5px solid #333; /* 黑色细线条边框 */
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* 极淡的阴影 */
}

/* 悬停效果：反色 (黑底白字) */
.user-tag:hover {
    background: #333;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 点击效果 */
.user-tag:active {
    transform: scale(0.95);
}

/* 新标签动画：依然保留，但颜色改为黑白 */
.user-tag.new-tag {
    animation: tagPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-color: #000; /* 新标签边框更黑一点 */
}

@keyframes tagPop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.empty-tags-hint {
    width: 100%;
    text-align: center;
    color: #ccc;
    font-size: 13px;
    padding: 20px 0;
}

/* 闪光时刻区 */
.flashbulb-section {
    background: white;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.02);
}

.flashbulb-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

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

.flashbulb-count {
    font-size: 11px;
    color: #999;
}

.flashbulb-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
/* 拍立得卡片 (手写风) */
.polaroid-card {
    background: #fff;
    padding: 15px 15px 40px 15px; /* 底部留白大一点，像拍立得 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transform: rotate(-2deg); /* 微微倾斜，更自然 */
    transition: all 0.3s ease;
    cursor: pointer;
    margin-bottom: 25px; /* 卡片间距 */
    position: relative;
    border: 1px solid #eee;
    width: 90%; /* 稍微窄一点 */
    margin-left: auto;
    margin-right: auto;
}

/* 偶数卡片向右倾斜，制造随意感 */
.polaroid-card:nth-child(even) {
    transform: rotate(1deg);
}

.polaroid-card:hover {
    transform: scale(1.02) rotate(0deg); /* 悬停摆正放大 */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    z-index: 10;
}

/* 黑色方块 (模拟照片区域) */
.polaroid-photo-area {
    width: 100%;
    height: 120px; /* 固定高度 */
    background: #333; /* 模拟照片感 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 8px;
}
.photo-text-inner {
    color: #eee;
    font-size: 11px;
    padding: 8px;
    text-align: center;
    line-height: 1.5;
}
/* 标题稍微小一点，适配并排布局 */
.polaroid-title {
    font-size: 13px;
    color: #333;
    text-align: center;
    font-family: "Kaiti", "STKaiti", serif;
    font-weight: bold;
    margin-bottom: 2px;
    /* 防止标题太长看不见 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 日期 (印章感) */
.polaroid-date {
    font-size: 10px;
    color: #999;
    text-align: center;
    transform: scale(0.9);
}
/* 寄语 (隐藏，点击弹窗看，或者作为副标题) */
.polaroid-comment {
    display: none; /* 极简风，只显示标题和画面文字 */
}


.empty-flashbulb-hint {
    width: 100%;
    text-align: center;
    color: #ccc;
    font-size: 13px;
    padding: 20px 0;
}

/* 记忆类型切换按钮 */
.mem-type-btn {
    flex: 1;
    padding: 10px;
    border: 1px solid #e1e1e1;
    background: #f9f9f9;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.mem-type-btn.active {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.mem-type-btn:hover:not(.active) {
    background: #f0f0f0;
}
/* 拍立得容器：设置 3D 透视 */
.polaroid-container {
    background-color: transparent;
    width: 145px; /* 恢复原来的固定宽度 */
    height: 195px; /* 增加一点高度给标题 */
    perspective: 1000px;
    display: inline-block; /* 关键：让它们像照片一样自然排列 */
    margin: 10px; /* 保持照片间的空隙 */
    vertical-align: top;
}

/* 内部旋转容器 */
.polaroid-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

/* 点击后触发翻转的类 */
.polaroid-container.flipped .polaroid-card-inner {
    transform: rotateY(180deg);
}

/* 正反面共有属性 */
.polaroid-front, .polaroid-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: white; /* 拍立得的底色 */
    padding: 12px 12px 18px 12px; /* 拍立得底部的白边比较宽 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* 柔和的阴影 */
    border: 1px solid #f0f0f0;
    box-sizing: border-box;
}

/* 正面样式：保留你原来的拍立得外观 */
.polaroid-front {
    background: white;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

/* 背面样式：模拟纸张 */
.polaroid-back {
    transform: rotateY(180deg);
    background: #fdfcf0; /* 暖黄纸张感 */
}

.handwriting-paper {
    padding: 5px;
    display: flex;
    flex-direction: column;
}
.back-comment {
    font-size: 15px;
    line-height: 1.8;
    color: #444;
    font-family: "STKaiti", "Kaiti", serif;
    margin-bottom: 15px;
    text-align: justify; /* 文字两端对齐，更好看 */
}
.back-header {
    font-size: 10px;
    color: #bbb;
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;
    letter-spacing: 2px;
}

.back-footer {
    margin-top: 10px;
    font-size: 10px;
    color: #ccc;
    text-align: right;
}

/* 容器：恢复单行占满，居中 */
#flashbulbContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px; /* 增加间距防止倾斜重叠 */
    padding: 20px 0;
}

/* 拍立得外框：去掉宽高比，让高度自适应 */
.polaroid-container {
    background-color: transparent;
    width: 88%; 
    max-width: 320px;
    min-height: 240px; /* 设置一个最小高度 */
    perspective: 1000px;
    position: relative;
}

/* 3. 核心：给奇偶数照片设置不同的旋转角度，模拟随性摆放 */
.polaroid-container:nth-child(odd) .polaroid-card-inner {
    transform: rotate(-2deg); /* 奇数张往左歪一点 */
}

.polaroid-container:nth-child(even) .polaroid-card-inner {
    transform: rotate(3deg);  /* 偶数张往右歪一点 */
}

/* 4. 当点击翻转时，需要叠加旋转效果，否则会倒过来 */
.polaroid-container.flipped:nth-child(odd) .polaroid-card-inner {
    transform: rotate(-2deg) rotateY(180deg);
}

.polaroid-container.flipped:nth-child(even) .polaroid-card-inner {
    transform: rotate(3deg) rotateY(180deg);
}

/* 5. 拍立得纸张感加强 */
.polaroid-front, .polaroid-back {
    position: absolute;
    width: 100%;
    min-height: 100%; /* 保证背景铺满 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: #fff;
    padding: 15px 15px 35px 15px; /* 拍立得经典的厚底边 */
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    border: 1px solid #f0f0f0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* 6. 黑色照片区：站满感 */
.polaroid-photo-area {
    width: 100%;
    height: 180px; /* 增加正面照片区的高度 */
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.photo-text-inner {
    color: #fff;
    font-size: 14px; /* 字大一点，充满感 */
    line-height: 1.6;
    padding: 20px;
    text-align: center;
    font-family: "STKaiti", "Kaiti", serif;
}

/* 7. 标题：放在宽大的白边正中央 */
.polaroid-title {
    font-size: 16px;
    color: #333;
    text-align: center;
    font-family: "STKaiti", "Kaiti", serif;
    font-weight: bold;
    margin-top: 5px;
}

/* =========================================
   ▼▼▼ 新增：Molly 日记详情页专用样式 ▼▼▼
   ========================================= */

/* 1. 视口容器：覆盖原有的 flex 布局，改为相对定位 */
.molly-diary-viewport {
    --bg-color: #fdfbf7; /* 暖白纸张色 */
    --text-color: #2c3e50; /* 深蓝灰墨水色 */
    --accent-color: #a89f91; /* 咖啡渍/旧纸张色 */
    --line-color: #e0e0e0;

    position: relative;
    width: 100%;
    height: 100%; /* 占满屏幕 */
   
    overflow: hidden;
    color: var(--text-color);
    background-color: #f0f0f2; /* 桌面背景色 */
}

/* 2. 背景与氛围层 */
.diary-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* 噪点纹理 */
    background-image:
        radial-gradient(#d3d3d3 1px, transparent 1px),
        radial-gradient(#d3d3d3 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    opacity: 0.6;
    z-index: 0;
    pointer-events: none; /* 让点击穿透到下面 */
}

/* 漂浮装饰物 */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}
.floating-deco {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0.7;
    font-size: 2rem;
    animation: float 8s ease-in-out infinite;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.1));
}
.deco-1 { top: 12%; right: 5%; animation-delay: 0s; font-size: 1.5rem; } 
.deco-2 { bottom: 15%; left: -10px; animation-delay: 2s; font-size: 2.5rem; transform: rotate(-15deg); }
.deco-3 { top: 30%; left: -10px; animation-delay: 4s; opacity: 0.2;  font-size: 5rem; color: #000; }

/* 3. 核心：可滚动的纸张容器 */
.diary-scroll-wrapper {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow-y: auto; /* 只有纸张区域滚动 */
    overflow-x: hidden;
    padding: 80px 0 40px; /* 顶部留出空间给悬浮按钮 */
    z-index: 2;
    /* 隐藏滚动条 */
    scrollbar-width: none;
}
.diary-scroll-wrapper::-webkit-scrollbar { display: none; }

.diary-paper {
    position: relative;
    width: 88%;
    max-width: 600px;
    margin: 0 auto;
    background-color: var(--bg-color);
    /* 真实的纸张阴影 */
    box-shadow:
        0 2px 2px rgba(0,0,0,0.05),
        0 4px 4px rgba(0,0,0,0.05),
        0 8px 8px rgba(0,0,0,0.05),
        0 16px 16px rgba(0,0,0,0.05);
    padding: 30px 25px;
    /* Ins风边框 */
    border: 1px solid white;
    outline: 1px solid var(--line-color);
    outline-offset: -8px;
    min-height: 80vh;
}

/* 进场动画 */
.slide-in-up { animation: slideInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes slideInUp {
    from { transform: translateY(60px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* 4. 悬浮导航按钮 (替代原导航栏) */
.diary-nav-btn {
    position: absolute;
    top: 20px; /* 距离顶部 */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.8); /* 半透明磨砂白 */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100; /* 最顶层 */
    transition: all 0.2s;
}
.diary-nav-btn:active { transform: scale(0.9); background: #fff; }
.diary-nav-btn svg { width: 22px; height: 22px; stroke-width: 2; }

/* 左侧返回 */
.diary-nav-back { left: 20px; color: #333; }
/* 右侧删除 */
.diary-nav-del { right: 20px; color: #ff4757; }

/* 5. 内部模块：Header */
.diary-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2px solid var(--text-color);
    padding-bottom: 10px;
    margin-bottom: 25px;
}
.date-block {  line-height: 1; }
.date-day { font-size: 3rem; font-weight: 700; display: block; color: var(--text-color); }
.date-month { font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-color); }
.meta-block { text-align: right; display: flex; flex-direction: column; gap: 4px; font-size: 1.2rem;}
.mood-stars { color: #f1c40f; font-size: 0.8rem; letter-spacing: 2px; }

/* 6. 内部模块：Snapshot (拍立得占位) */
.snapshot-container {
    position: relative;
    width: 85%;
    margin: 0 auto 30px auto;
    transform: rotate(-2deg);
    transition: transform 0.3s ease;
}
.snapshot-container:hover { transform: rotate(0deg) scale(1.02); z-index: 5; }

.polaroid-frame {
    background: #fff;
    padding: 10px 10px 35px 10px; /* 底部留白 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.polaroid-img {
    width: 100%;
    height: 180px; /* 固定高度 */
    background-color: #f4f4f4; /* 占位灰底 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.polaroid-img img { width: 100%; height: 100%; object-fit: cover; }

/* 占位符状态 */
.polaroid-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ccc;
}
.polaroid-placeholder svg { width: 32px; height: 32px; margin-bottom: 5px; stroke: #ccc;}
.polaroid-placeholder span { font-size: 12px; font-family: cursive; }

/* 和纸胶带 */
.washi-tape {
    position: absolute;
    top: -12px; left: 50%; transform: translateX(-50%);
    width: 90px; height: 25px;
    background-color: rgba(220, 200, 180, 0.85);
    opacity: 0.9;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    /* 胶带纹理 */
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,0.3) 5px, rgba(255,255,255,0.3) 10px);
}

/* 7. 内部模块：Title & Content */
.diary-title-block { text-align: center; margin-bottom: 20px; }
.main-title {  font-size: 1.6rem; font-weight: 700; color: var(--text-color); margin: 0; line-height: 1.2; }
.sub-title { 
    font-size: 0.7rem; 
    text-transform: uppercase; letter-spacing: 0.2em; 
    color: var(--accent-color); margin-top: 5px; 
    display: inline-block; border-top: 1px solid var(--accent-color); padding-top: 4px; 
}

.diary-content {
   
    font-size: 15px;
    line-height: 1.8;
    text-align: justify;
    color: #4a4a4a;
    white-space: pre-wrap;
}
/* 首字下沉 */
.diary-content::first-letter {
    font-family: serif; font-size: 3rem; float: left;
    line-height: 0.8; padding-right: 8px; padding-top: 4px;
    color: var(--text-color);
}

/* 8. 内部模块：Footer */
.diary-footer {
    margin-top: 30px; padding-top: 15px;
    border-top: 1px dashed var(--line-color);
    display: flex; justify-content: space-between; align-items: center;
}
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag-pill {
    background-color: #f2f2f2; color: #888;
    font-size: 0.7rem; padding: 3px 8px;
    border-radius: 4px;
}
.stamp {
    border: 2px double #d14d4d; color: #d14d4d;
    padding: 2px 6px; font-weight: bold;
    font-size: 0.7rem; transform: rotate(-12deg); opacity: 0.7;
}
/* ▼▼▼ 强制修复：去除旧版日记的红色装订线和打孔 ▼▼▼ */
.diary-paper::before,
.diary-paper::after {
    display: none !important;
    content: none !important;
}
/* =========================================
   ▼▼▼ 修正：日记信纸全屏铺满样式 ▼▼▼
   ========================================= */

/* 1. 去掉滚动容器的上下留白 */
.diary-scroll-wrapper {
    padding: 0 !important; 
}

/* 2. 让信纸占满整个屏幕 */
.diary-paper {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important; /* 强制高度至少填满屏幕 */
    margin: 0 !important;
    
    /* 去掉悬浮卡片感的装饰 */
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    
    /* ★ 关键：顶部增加内边距，防止内容被左上角的返回按钮挡住 */
    padding-top: 80px !important; 
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* 3. 彻底隐藏旧版样式的红色装订线和打孔 */
.diary-paper::before,
.diary-paper::after {
    display: none !important;
    content: none !important;
}

/* 4. 微调背景层（既然纸张铺满了，背景层其实看不见了，但为了保险起见） */
.diary-backdrop {
    display: none; 
}
/* Ins风线条图标通用样式 */
.ins-icon-svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-color); /* 跟随文字颜色 */
    stroke-width: 1.5;         /* 极细线条 */
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;    /* 文字居中对齐 */
    margin-right: 4px;         /* 图标和文字的间距 */
    opacity: 0.8;
}

/* 调整元数据块的对齐 */
.meta-block span {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 靠右对齐 */
    margin-bottom: 4px;
    font-size: 14px;
}

/* ============ 字体设置支持 ============ */
:root {
    --app-font-size: 14px;
    --app-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* 强制覆盖全局字体 */
body, 
.phone-screen, 
input, 
textarea, 
button, 
select,
.chat-item,
.ins-book-preview {
    font-size: var(--app-font-size) !important;
    font-family: var(--app-font-family) !important;
}

/* 修正图标类不受字体影响 */
.fa, .fas, .far, .fab, .ins-icon, .app-emoji svg, .ins-item-icon {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", sans-serif !important;
}

/* ============ 导航栏透明模式 ============ */
body.transparent-nav-mode .chat-header,
body.transparent-nav-mode .chat-detail-header {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* 底部标签栏透明 */
body.transparent-nav-mode .chat-bottom-tabs {
    background: rgba(255, 255, 255, 0.3) !important; /* 微微透一点白，防止完全看不见 */
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* 聊天页面：表情栏 & 输入栏透明 */
body.transparent-nav-mode .emoji-btn-wrapper,
body.transparent-nav-mode .chat-input-bar {
    background: transparent !important;
    border-top: none !important;
    box-shadow: none !important;
}

/* 输入框本体：给一点半透明背景，否则字看不清 */
body.transparent-nav-mode .chat-input {
    background: rgba(255, 255, 255, 0.6) !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* 输入框聚焦时稍微实一点 */
body.transparent-nav-mode .chat-input:focus {
    background: rgba(255, 255, 255, 0.8) !important;
}
/* ============ 角色列表美化变量支持 (修复版) ============ */
:root {
    /* 定义两套变量，分别控制颜色和图片 */
    --cl-global-bg-color: #f8f9fa;
    --cl-global-bg-img: none;
    
    --cl-header-bg-color: rgba(255, 255, 255, 0.95);
    --cl-header-bg-img: none;
    
    --cl-bottom-bg-color: rgba(255, 255, 255, 0.85);
    --cl-bottom-bg-img: none;
    
    --cl-icon-color: #999;
    --cl-icon-scale: 1;
}

/* 1. 全局背景 (应用到 .chat-screen) */
.chat-screen {
    background-color: var(--cl-global-bg-color) !important;
    background-image: var(--cl-global-bg-img) !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important; /* 防止背景随滚动条移动 */
}

/* 2. 导航栏背景 */
.chat-header {
    background-color: var(--cl-header-bg-color) !important;
    background-image: var(--cl-header-bg-img) !important;
    background-size: cover !important;
    background-position: center !important;
    /* 确保文字颜色适配深色背景，这里暂时保持深色字，若需反色需额外逻辑 */
}

/* 3. 底部栏背景 */
.chat-bottom-tabs {
    background-color: var(--cl-bottom-bg-color) !important;
    background-image: var(--cl-bottom-bg-img) !important;
    background-size: cover !important;
    background-position: center !important;
}

/* ============ 底部图标美化 (支持自定义图片) ============ */
:root {
    /* 定义3个图标的背景图变量，默认为 none */
    --cl-icon1-bg: none;
    --cl-icon2-bg: none;
    --cl-icon3-bg: none;
}

/* 通用：应用大小缩放 */
.bottom-tab .ins-icon {
    transform: scale(var(--cl-icon-scale));
    transition: all 0.3s;
    /* 关键：设置背景图属性 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 激活状态放大 */
.bottom-tab.active .ins-icon {
    transform: scale(calc(var(--cl-icon-scale) * 1.1));
}

/* --- 图标 1 (聊天) --- */
.bottom-tab[data-tab="single"] .ins-icon {
    background-image: var(--cl-icon1-bg);
}
/* 如果设置了背景图，把原来的 SVG 线条隐藏 (设为透明) */
.bottom-tab[data-tab="single"] .ins-icon[style*="--cl-icon1-bg: url"] {
    stroke: transparent !important;
}

/* --- 图标 2 (联系人) --- */
.bottom-tab[data-tab="group"] .ins-icon {
    background-image: var(--cl-icon2-bg);
}

/* --- 图标 3 (钱包) --- */
.bottom-tab[data-tab="wallet"] .ins-icon {
    background-image: var(--cl-icon3-bg);
}

/* ============ 导航栏字体颜色自定义 ============ */
:root {
    --nav-custom-text-color: #333333; /* 默认黑色 */
}

/* 1. 角色列表页头部 (.chat-header) */
.chat-header .back-btn svg,
.chat-header .header-title,
.chat-header .action-icon-btn svg, /* 假设有图标按钮 */
.chat-header button {
    stroke: var(--nav-custom-text-color) !important;
    color: var(--nav-custom-text-color) !important;
}

/* 2. 聊天详情页头部 (.chat-detail-header) */
.chat-detail-header .back-btn svg,
.chat-detail-header .chat-detail-title,
.chat-detail-header .character-status,
.chat-detail-header .action-icon-btn, /* 右上角更多按钮 */
.chat-detail-header button {
    stroke: var(--nav-custom-text-color) !important;
    color: var(--nav-custom-text-color) !important;
    border-color: var(--nav-custom-text-color) !important; /* 更多按钮的边框 */
}

/* 修正：更多按钮内的文字颜色 */
.chat-detail-header button:last-child::before,
.chat-detail-header .action-icon-btn:last-child::before {
    color: var(--nav-custom-text-color) !important;
}

/* ============ 对话页面美化变量 (独立) ============ */
:root {
    --chat-global-bg-img: none;
    --chat-header-bg-img: none;
    --chat-input-bg-img: none;
    
    --chat-icon-plus-bg: none;
    --chat-icon-send-bg: none;
    --chat-icon-receive-bg: none;
}

/* 1. 全局背景 (.chat-detail-screen) */
/* 注意：这里使用 ID 选择器提高权重，确保覆盖默认背景 */
#chatDetailScreen {
    background-image: var(--chat-global-bg-img) !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    /* 如果设置了图片，背景色设为透明，否则保持原样 */
}
#chatDetailScreen[style*="--chat-global-bg-img: url"] {
    background-color: transparent !important;
}

/* 2. 导航栏背景 */
.chat-detail-header {
    background-image: var(--chat-header-bg-img) !important;
    background-size: cover !important;
    background-position: center !important;
}
.chat-detail-header[style*="--chat-header-bg-img: url"] {
    background-color: transparent !important;
}

/* 3. 底部栏背景 */
.chat-input-bar {
    background-image: var(--chat-input-bg-img) !important;
    background-size: cover !important;
    background-position: center !important;
}
.chat-input-bar[style*="--chat-input-bg-img: url"] {
    background-color: transparent !important;
}
/* ===== Default chat detail background when no custom image is set (cool gray) ===== */
#chatDetailScreen {
    background-color: #f2f3f5 !important;
    background-image:
        var(--chat-global-bg-img),
        radial-gradient(circle at 18% 12%, rgba(0,0,0,0.035), transparent 42%),
        radial-gradient(circle at 82% 28%, rgba(0,0,0,0.03), transparent 46%),
        radial-gradient(circle at 30% 82%, rgba(0,0,0,0.022), transparent 48%),
        linear-gradient(180deg, #f7f8fa 0%, #f2f3f5 100%) !important;
    background-size: cover, auto, auto, auto, auto !important;
    background-position: center, 0 0, 0 0, 0 0, 0 0 !important;
    background-attachment: fixed, scroll, scroll, scroll, scroll !important;
}

/* 用户设置了全局背景图(url)时：保持透明（沿用你的规则） */
#chatDetailScreen[style*="--chat-global-bg-img: url"] {
    background-color: transparent !important;
}

/* Header 分割线：让白色导航栏更清晰 */
.chat-detail-header {
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
}

/* 时间戳颜色微调 */
#chatDetailScreen .message-time {
    color: rgba(0,0,0,0.35) !important;
}



/* 4. 图标自定义 (+号) */
.cute-icon-btn.plus-btn {
    background-image: var(--chat-icon-plus-bg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 5. 发送按钮 */
.action-icon-btn[onclick="sendMessage()"] {
    background-image: var(--chat-icon-send-bg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 6. 接收按钮 */
#receiveBtn {
    background-image: var(--chat-icon-receive-bg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* ============ 强制修复：工具栏永远透明 ============ */
.emoji-btn-wrapper {
    /* 1. 强制背景色透明 */
    background-color: transparent !important;
    
    /* 2. 强制移除任何背景图片 (防止误应用) */
    background-image: none !important;
    
    /* 3. 去除边框和阴影 */
    border: none !important;
    box-shadow: none !important;
    
    /* 4. 确保层级正确 */
    position: relative;
    z-index: 10;
}
/* ============ 修复：让消息区域透明，露出全局背景 ============ */
.messages-container {
    background: transparent !important; /* 去掉默认的灰色背景 */
}

/* ============ 修复：聊天详情页右上角图标 ============ */

/* 1. 选中该按钮 (使用多重选择器提高权重) */
.chat-detail-header button:last-child,
.chat-detail-header .action-icon-btn:last-child {
    /* 强制重置尺寸和背景 */
    width: 40px !important;
    height: 40px !important;
    background: transparent !important; /* 无基底 */
    border: none !important;            /* 无边框 */
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 50% !important;      /* 圆形触控区 */
    
    /* 布局 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
}

/* 2. 隐藏之前的 "更多" 文字 (伪元素) */
.chat-detail-header button:last-child::before,
.chat-detail-header .action-icon-btn:last-child::before {
    content: none !important;
    display: none !important;
}

/* 3. 强制显示 SVG 图标 */
.chat-detail-header button:last-child > svg,
.chat-detail-header .action-icon-btn:last-child > svg {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    stroke: #333 !important; /* 线条颜色：黑 */
    stroke-width: 2px !important;
    opacity: 1 !important;
}

/* 4. 悬停微动效果 */
.chat-detail-header button:last-child:active {
    transform: scale(0.9);
    background: rgba(0,0,0,0.05) !important; /* 点击时极淡的反馈 */
}
/* ============ 强制去除聊天页头部按钮的背景基底 ============ */
.chat-detail-header .back-btn:hover,
.chat-detail-header .back-btn:active,
.chat-detail-header button:last-child:hover,
.chat-detail-header button:last-child:active {
    background: transparent !important; /* 去除灰色背景 */
    box-shadow: none !important;
}
/* ============ 角色信息页返回按钮美化 ============ */
#characterInfoScreen .back-btn:hover,
#characterInfoScreen .back-btn:active {
    background: transparent !important; /* 去除悬停背景 */
    box-shadow: none !important;
}

/* 确保 SVG 样式一致 */
#characterInfoScreen .back-btn svg {
    width: 24px;
    height: 24px;
    stroke: #333; /* 默认黑色，会跟随导航栏字体颜色设置变色 */
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ============ 档案页返回按钮美化 ============ */
#memoryScreen .back-btn:hover,
#memoryScreen .back-btn:active {
    background: transparent !important; /* 去除悬停背景 */
    box-shadow: none !important;
}

/* 确保 SVG 样式一致 */
#memoryScreen .back-btn svg {
    width: 24px;
    height: 24px;
    stroke: #333; /* 默认黑色 */
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ============ 新版朋友圈美化样式 ============ */
.social-combined-wrapper { 
   
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    width: 100%; 
    padding: 20px 15px; /* 增加左右内边距 */
    box-sizing: border-box;
    --bg-color: #fff; 
    --border-color: #eee; 
    gap: 20px;
    background: #f9f9f9; /* 整体背景微灰 */
    min-height: 100%;
}

.icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* 第一部分：顶部个人资料卡片 */
/* 第一部分：顶部个人资料卡片 */
.profile-header-card { 
    width: 100%;
    background: transparent;              /* 去掉白色卡片底 */
    border-radius: 16px;
    box-shadow: none;                     /* 去掉阴影 */
    border: none;                         /* 去掉边框 */
    overflow: hidden;
    position: relative;
}

/* 顶部封面 */
.ph-banner { 
    height: 190px;                        /* 给中间头像+名字留空间 */
    background-color: #e6e6e6; 
    background-image: radial-gradient(#ffffff 20%, transparent 20%);
    background-size: 20px 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;               /* 确保自定义封面覆盖 */
    border-radius: 16px;                  /* 封面圆角 */
}

/* 叠在封面中间的内容：圆形头像 + 名字(在头像下) */
.ph-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);     /* 正中间 */
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 10;
    pointer-events: none;                 /* 避免挡住封面点击换封面 */
}

/* 头像外圈（圆形） */
.ph-avatar-ring { 
    width: 86px;
    height: 86px;
    border-radius: 50%;
    padding: 4px;
    border: 1px solid rgba(255,255,255,0.65);
    background: rgba(255,255,255,0.18);
    margin: 0;
    box-shadow: none;                 /* 无阴影 */
    cursor: pointer;
    pointer-events: auto;             /* 允许点击头像编辑资料 */
    backdrop-filter: blur(6px);
}

/* 头像本体（圆形） */
.ph-avatar-img { 
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.35);
    color: #fff;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

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

/* 头像外圈（圆形） */
.ph-avatar-ring { 
    width: 86px;
    height: 86px;
    border-radius: 50%;
    padding: 4px;
    border: 1px solid rgba(255,255,255,0.65);
    background: rgba(255,255,255,0.18);
    margin: 0;
    box-shadow: none;                 /* 无阴影 */
    cursor: pointer;
    pointer-events: auto;             /* 允许点击头像编辑资料 */
    backdrop-filter: blur(6px);
}
/* 名字在头像下方（封面上可读） */
.ph-name {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.1;
    text-shadow: none;                /* 无阴影 */
    pointer-events: auto;             /* 允许点击名字编辑资料 */
}




/* 第二部分：动态流列表 */
.feed-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.feed-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.fc-header { display: flex; align-items: center; margin-bottom: 12px; }

.fc-avatar { 
    width: 40px; height: 40px; border-radius: 50%; 
    background: #eee; color: #fff; 
    display: flex; align-items: center; justify-content: center; 
    font-size: 16px; font-weight: bold;
    margin-right: 12px;
    overflow: hidden;
}
.fc-avatar img { width: 100%; height: 100%; object-fit: cover; }

.fc-user-info { display: flex; flex-direction: column; flex: 1; }
.fc-name { font-size: 15px; font-weight: 700; color: #333; }
.fc-time { font-size: 12px; color: #bbb; margin-top: 2px; }

.fc-more { color: #ccc; cursor: pointer; font-size: 12px; }

.fc-content { font-size: 15px; line-height: 1.6; color: #333; margin-bottom: 12px; white-space: pre-wrap; }

/* 图片适配优化 */
.fc-images { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 6px; /* 图片间距 */
    margin-bottom: 12px; 
}

/* 单张图片：限制最大尺寸，不再撑满全屏 */
.fc-img-single { 
    width: auto;          /* 宽度自适应 */
    height: auto;         /* 高度自适应 */
    max-width: 65%;       /* 最大只占 65% 宽度，避免太大 */
    max-height: 220px;    /* 限制最大高度 */
    border-radius: 8px; 
    object-fit: cover;    /* 保持比例填充 */
    border: 1px solid #f0f0f0; /* 加个微弱边框增加质感 */
    display: block;       /* 防止底部留白 */
}

/* 多张图片：九宫格小图 */
.fc-img-grid { 
    width: 31%;           /* 稍微减小宽度确保一行能放下3个 */
    aspect-ratio: 1/1;    /* 强制正方形 */
    object-fit: cover; 
    border-radius: 4px; 
    margin-bottom: 2px;   /* 微调行距 */
}


.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.chat-header-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;                 /* 去掉边框 */
    background: transparent;      /* 去掉基底 */
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background 0.15s ease;
}

.chat-header-icon-btn:hover {
    background: transparent;      /* 悬停也不需要底 */
}

.chat-header-icon-btn:active {
    transform: scale(0.92);
}

.chat-header-icon-btn svg {
    width: 22px;
    height: 22px;
    stroke: #333;
    stroke-width: 1.7;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}



/* ============ 发布动态弹窗美化 ============ */

/* 1. 卡片容器调整 */
.post-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    display: flex;
    flex-direction: column;
}

/* 2. 顶部导航栏 */
.post-header {
    height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
    flex-shrink: 0;
}

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

.post-btn-cancel {
    background: none;
    border: none;
    font-size: 15px;
    color: #333;
    padding: 10px 0;
    cursor: pointer;
}

.post-btn-publish {
    background: #333; /* 黑色按钮 */
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
}

/* 3. 内容主体 */
.post-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* 文本域 */
.post-textarea {
    width: 100%;
    min-height: 120px;
    padding: 20px;
    border: none;
    outline: none;
    font-size: 16px;
    line-height: 1.5;
    resize: none;
    font-family: inherit;
    box-sizing: border-box;
}
.post-textarea::placeholder {
    color: #ccc;
}

/* 图片区域 */
.post-media-area {
    padding: 0 20px 20px;
}

.post-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* 上传按钮 & 图片缩略图 */
.post-add-box, .uploaded-img-box {
    width: 80px;
    height: 80px;
    background: #f7f7f7;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    border: 1px dashed #e0e0e0;
}

.post-add-box:active {
    background: #eee;
}

/* 覆盖 script.js 生成的图片样式 */
.uploaded-img-box {
    border: none; /* 图片不需要虚线边框 */
}
.uploaded-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

/* 删除图片的按钮 */
.remove-img-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.6);
    color: white;
    border-radius: 50%;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    backdrop-filter: blur(2px);
}

/* 4. 底部选项列表 */
.post-options-list {
    margin-top: auto; /* 推到底部 */
    padding-top: 10px;
    border-top: 1px solid #f9f9f9;
}

.post-option-item {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #fcfcfc;
    cursor: pointer;
}
.post-option-item:active {
    background: #f9f9f9;
}

.opt-icon {
    font-size: 18px;
    margin-right: 12px;
    width: 24px;
    text-align: center;
}

.opt-label {
    font-size: 15px;
    color: #333;
    flex: 1;
}

.opt-value {
    font-size: 14px;
    color: #999;
    margin-right: 8px;
}

.opt-arrow {
    color: #ccc;
    font-size: 18px;
    font-family: monospace;
}

/* ============ 嵌入式朋友圈样式 (修复滚动版) ============ */
.moments-container {
    flex: 1;                /* 占据剩余空间 */
    display: flex;
    flex-direction: column;
    overflow: hidden;       /* 限制容器本身不滚动 */
    min-height: 0;          /* ★★★ 关键修复：允许 Flex 子项收缩，触发滚动 */
    position: relative;
    background: #f9f9f9;
}

.moments-scroll-content {
    flex: 1;                /* 撑满容器 */
    overflow-y: auto;       /* 开启垂直滚动 */
    overflow-x: hidden;     /* 禁止水平滚动 */
    -webkit-overflow-scrolling: touch; /* 让 iOS 滚动更丝滑 */
    padding-bottom: 80px;   /* ★★★ 底部增加留白，防止内容被底部导航栏遮挡 */
}

/* 确保内容包装器没有奇怪的高度限制 */
.social-combined-wrapper {
    min-height: auto !important; /* 覆盖之前的设置 */
    height: auto !important;
}
/* ============ 朋友圈样式强制修复补丁 ============ */

/* 1. 图片进一步缩小 (改为固定像素限制，更精致) */
.fc-img-single { 
    width: auto !important;
    height: auto !important;
    max-width: 200px !important;  /* 限制最大宽度为 200px */
    max-height: 200px !important; /* 限制最大高度为 200px */
    border-radius: 8px !important;
    object-fit: cover !important;
    border: 1px solid #eee !important;
    margin-top: 5px;
}

/* 2. 底部操作栏强制水平排列 */
.fc-actions { 
    display: flex !important;           /* 强制 Flex 布局 */
    flex-direction: row !important;     /* 强制水平排列 */
    align-items: center !important;     /* 垂直居中 */
    justify-content: flex-start !important; /* 左对齐 */
    gap: 25px !important;               /* 图标之间的间距 */
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid #f9f9f9 !important;
    width: 100% !important;
}

/* 3. 单个操作项 (图标+数字) */
.fc-action-item { 
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;       /* 图标和数字的间距 */
    cursor: pointer;
    color: #666;
    font-size: 13px !important;
    line-height: 1 !important; /* 防止文字撑高 */
}

/* 4. 强制限制图标大小 (关键修复) */
.fc-action-item svg, 
.fc-action-item .icon { 
    width: 20px !important;    /* 强制宽度 */
    height: 20px !important;   /* 强制高度 */
    min-width: 20px !important;
    min-height: 20px !important;
    stroke-width: 1.5 !important;
    display: block !important;
    margin: 0 !important;      /* 去除外边距 */
}

/* 5. 修复右侧更多按钮 */
.fc-more {
    margin-left: auto !important; /* 挤到最右边 */
    padding: 0 10px;
    font-size: 12px;
    color: #999;
}



/* ============ 文字图 (伪装版) 样式 ============ */
.text-image-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: inline-block; /* 适应图片大小 */
    max-width: 200px;      /* 限制显示宽度 */
}

/* 伪装的封面图 */
.text-image-cover {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

/* 右下角的小标签 */
.text-image-label {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    pointer-events: none;
    backdrop-filter: blur(2px);
}

/* 文字图气泡样式结束 */

/* ====== 朋友圈评论区美化 START ====== */

/* 评论区容器 */
.fc-comments-box {
    background: #f7f7f7;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    position: relative;
}

/* 评论区上面的小三角 */
.fc-comments-box::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #f7f7f7;
}

/* 单条评论行 */
.fc-comment-row {
    margin-bottom: 4px;
    word-wrap: break-word;
}
.fc-comment-row:last-child {
    margin-bottom: 0;
}

/* 评论者名字 */
.fc-comment-name {
    color: #576b95; /* 微信蓝 */
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.fc-comment-name:active {
    background-color: #e5e5e5; /* 点击反馈 */
}

/* 回复文本 */
.fc-reply-text {
    color: #333;
}

/* 底部固定评论输入栏 */
/* ====== 用户评论输入栏美化 START ====== */
.comment-input-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: min(100%, 420px);
    box-sizing: border-box;
    padding: 10px 12px;
    background: #fff;
    border-top: 1px solid #eee;
    z-index: 2000;
}
.comment-input-bar .comment-input {
    flex: 1;
    min-width: 0; /* 关键：防止 flex 子元素把容器撑爆 */
}

.comment-input-bar .comment-send-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}


.comment-input {
    flex: 1;
    border: 1px solid rgba(0,0,0,0.08);
    background: #fff;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.comment-input:focus {
    border-color: rgba(0,0,0,0.25);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.comment-send-btn {
    border: none;
    background: #333;
    color: white;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.comment-send-btn:active {
    transform: scale(0.96);
    background: #000;
}
/* ====== 用户评论输入栏美化 END ====== */


/* 正在生成的 Loading 状态 */
.comment-loading {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #ccc;
    border-top-color: #666;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 5px;
    vertical-align: middle;
}
/* ====== 朋友圈评论区美化 END ====== */

/* ====== 关系网弹窗美化 START ====== */
.relationship-modal {
    max-height: 80vh;
    overflow-y: auto;
}

.relationship-modal .form-input {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 12px;
    resize: none;
}
/* ====== 关系网弹窗美化 END ====== */

/* ====== 动态可见性弹窗小美化 START ====== */
#momentVisibilityModal .modal {
    max-height: 80vh;
    overflow-y: auto;
}

#momentVisibilityModal .form-input {
    border-radius: 12px;
}
/* ====== 动态可见性弹窗小美化 END ====== */

/* ====== 动态转发弹窗样式 START ====== */
.forward-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s;
}

.forward-item:hover {
    background: #fafafa;
}

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

.forward-check {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    accent-color: #333;
    flex-shrink: 0;
}

.forward-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 10px;
    flex-shrink: 0;
}

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

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

/* 转发卡片（聊天消息里展示） */
.moment-forward-card {
    max-width: 270px;
    border-radius: 14px;
    border: 1px solid #eee;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
}

.moment-forward-card-header {
    padding: 10px 12px;
    font-size: 12px;
    color: #999;
    border-bottom: 1px solid #f3f3f3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.moment-forward-card-body {
    padding: 12px;
}

.moment-forward-title {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    margin-bottom: 6px;
}

.moment-forward-content {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-wrap;
}

.moment-forward-detail {
    display: none;
    padding: 12px;
    border-top: 1px dashed #eee;
    background: #fafafa;
    font-size: 12px;
    color: #555;
    line-height: 1.6;
    white-space: pre-wrap;
}

.moment-forward-detail.show {
    display: block;
}
/* ====== 动态转发弹窗样式 END ====== */

/* 日程时间轴样式 */
.schedule-timeline {
    position: relative;
    padding-left: 20px;
    border-left: 2px solid #f0f0f0;
}

.schedule-item {
    position: relative;
    margin-bottom: 25px;
    padding-left: 20px;
}

.schedule-item::before {
    content: '';
    position: absolute;
    left: -27px; /* 调整圆点位置 */
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #333;
}

/* 共同活动高亮 */
.schedule-item.with-user::before {
    border-color: #667eea;
    background: #667eea;
}

.schedule-time {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}

.schedule-content {
    background: #f9f9f9;
    padding: 12px;
    border-radius: 12px;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}

.schedule-item.with-user .schedule-content {
    background: #f0f4ff;
    color: #445588;
}
/* 加载圈旋转动画 */
.schedule-spinner {
    animation: spin-circle 0.8s linear infinite;
}

@keyframes spin-circle {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* 避免最后一条消息被输入框遮挡：给滚动容器留出底部空间 */
#messagesContainer {
  padding-bottom: 90px;  /* 可按你输入框高度微调：90-140px */
  box-sizing: border-box; /* 确保 padding 计算稳定 */
  scroll-padding-bottom: 90px; /* 可选：让滚动定位更舒服 */
}

.note-image-widget {
  padding: 0;
  overflow: hidden;
}

.note-image-frame {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.note-image-frame.is-empty {
 background: transparent;

}

.note-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 强制修复 HTML 卡片文字方向 */
.message-item .html-card-wrap,
.message-item .html-card-wrap *,
.message-item iframe,
.message-item iframe * {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    direction: ltr !important;
}

/* ============ 抽签功能样式 (Ins极简风重制) ============ */

/* 1. 弹窗容器 */
.draw-lot-modal-clean {
    background: #ffffff;
    border-radius: 24px;
    padding: 30px 25px;
    width: 90%;
    max-width: 320px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.02);
}

/* 2. 顶部标题区 */
.lot-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

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

.lot-subtitle {
    font-size: 11px;
    color: #999;
    letter-spacing: 2px;
    font-weight: 600;
}

/* 3. 签桶舞台 */
.lot-stage-clean {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 260px;
    position: relative;
}

/* 4. 签桶（极简圆形） */
.lot-bucket-clean {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #fafafa;
    border: 2px solid #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.lot-bucket-clean:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.lot-bucket-clean:active {
    transform: scale(0.95);
}

.bucket-icon {
    font-size: 48px;
    margin-bottom: 8px;
}

.bucket-label {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    letter-spacing: 1px;
}

/* 5. 抽中的签（结果展示） */
.drawn-lot-clean {
    animation: lotAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

@keyframes lotAppear {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.lot-result-clean {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #333;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    font-weight: 700;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* 吉/平/凶配色 */
.lot-result-clean[data-type="吉"] {
    background: #333;
}

.lot-result-clean[data-type="平"] {
    background: #999;
}

.lot-result-clean[data-type="凶"] {
    background: #666;
}

/* 6. 签文详情卡 */
.lot-detail-card-clean {
    width: 100%;
    animation: fadeIn 0.5s ease;
}

.loading-spinner-clean {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
}

.spinner-clean {
    width: 36px;
    height: 36px;
    border: 3px solid #f0f0f0;
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.lot-content-clean {
    animation: fadeIn 0.4s ease;
}

.lot-event-text-clean {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    text-align: center;
    margin-bottom: 25px;
    border: 1px solid #f0f0f0;
}

/* ============ 抽签功能补充样式 ============ */

/* 签桶悬停效果 */
#lotBucket:hover {
    transform: scale(1.05);
}

#lotBucket:active {
    transform: scale(0.95);
}

/* 抽签结果进入动画 */
#drawnLot {
    animation: lotFadeIn 0.6s ease;
}

@keyframes lotFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 不同结果的配色 */
#lotResult[data-type="吉"] {
    background: #333 !important;
}

#lotResult[data-type="平"] {
    background: #999 !important;
}

#lotResult[data-type="凶"] {
    background: #666 !important;
}

/* 旋转动画（如果没有的话） */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============ 抽签功能样式 (Ins极简风重制)end ============ */

/* ============ 日记拍立得动画 ============ */
/* 拍立得占位图动画 */
.polaroid-placeholder .placeholder-icon {
    animation: pulse 2s infinite;
    opacity: 0.5;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 0.5; }
}

/* 图片加载完成后的淡入效果 */
.polaroid-img img {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* ============ 日记拍立得end ============ */


/* ============ 角色工作邮箱美化 ============ */
     /* --- 工作邮箱页面样式 --- */
    .email-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #ffffff;
        z-index: 2000; /* 保证层级够高 */
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    .email-list-container {
        flex: 1;
        overflow-y: auto;
        padding: 15px;
        background: #f7f7f7; /* 浅灰底色，区分内容 */
    }

    /* 邮件空状态 */
    .email-empty-state {
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center; 
        height: 100%; 
        color: #ccc;
    }

    /* 邮件卡片（预留样式，生成功能做好了会用到） */
    .email-card {
        background: #fff;
        border-radius: 12px;
        padding: 15px;
        margin-bottom: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        border: 1px solid #eee;
    }

/* 定义旋转动画 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ★★★ 关键修复：强制提高邮件详情弹窗的层级 ★★★ */
#emailDetailModal {
    z-index: 3000 !important; /* 必须比 email-screen (通常是2000) 高 */
}
    /* ============ 角色工作邮箱美化END ============ */

 /* ========== 双人档案样式（横向排列修复版） ========== */

/* 双人档案容器 - 强制横向 */
.dual-profile-section {
    display: flex !important;
    flex-direction: row !important;  /* ⭐ 强制横向 */
    align-items: center !important;
    justify-content: center !important;
    gap: 35px;
    padding: 25px 20px;
    cursor: pointer;
    transition: transform 0.2s;
    position: relative;
}

.dual-profile-section:active {
    transform: scale(0.98);
}

/* 单个档案项 - 竖向排列（头像在上，名字在下） */
.dual-profile-item {
    display: flex;
    flex-direction: column;  /* 这个是竖向，让头像和名字上下排列 */
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* 头像样式 */
.profile-dual-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

.dual-profile-section:hover .profile-dual-avatar {
    transform: scale(1.05);
}

/* 名字样式 */
.dual-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    max-width: 80px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========== 爱心连接器 ========== */
.heartbeat-connector {
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 1;
}

.heart-icon {
    width: 36px;
    height: 36px;
    animation: heartbeat 1.5s ease-in-out infinite;
    transition: transform 0.2s;
}

.heartbeat-connector:hover .heart-icon {
    transform: scale(1.1);
}

.heartbeat-connector:active .heart-icon {
    transform: scale(0.9);
}

.heart-svg {
    width: 100%;
    height: 100%;
    fill: url(#heart-gradient);
    filter: drop-shadow(0 2px 8px rgba(255, 107, 157, 0.3));
}

/* 爱心跳动动画 */
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    10% { transform: scale(1.1); }
    20% { transform: scale(1); }
    30% { transform: scale(1.15); }
    40% { transform: scale(1); }
}

/* 粒子容器 */
.heart-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

/* 粒子样式 */
.heart-particle {
    position: absolute;
    width: 14px;
    height: 14px;
    font-size: 14px;
    animation: particle-float 1s ease-out forwards;
    pointer-events: none;
}

@keyframes particle-float {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.2) rotate(180deg);
    }
}

/* ========== 移动端适配 ========== */
@media (max-width: 400px) {
    .dual-profile-section {
        gap: 25px;
        padding: 20px 15px;
    }
    
    .profile-dual-avatar {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }
    
    .dual-name {
        font-size: 14px;
        max-width: 70px;
    }
    
    .heartbeat-connector {
        width: 45px;
        height: 45px;
    }
    
    .heart-icon {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 350px) {
    .dual-profile-section {
        gap: 20px;
    }
    
    .profile-dual-avatar {
        width: 55px;
        height: 55px;
        font-size: 26px;
    }
}

/* ========== 编辑双人信息弹窗样式 ========== */

/* 弹窗容器 */
.dual-profile-modal {
    max-width: 90% !important;
    width: 360px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 25px 20px !important;
}

/* 双人头像区域 - 横向排列 */
.dual-avatar-section {
    display: flex;
    flex-direction: row !important;  /* ⭐ 强制横向 */
    justify-content: center;
    align-items: center;
    gap: 50px;  /* 两个头像之间的间距 */
    padding: 20px 0;
    margin-bottom: 10px;
}

/* 单个头像项 - 竖向排列（头像在上，标签在下） */
.dual-avatar-item {
    display: flex;
    flex-direction: column;  /* 头像和"角色/我"标签上下排列 */
    align-items: center;
    gap: 10px;
}

/* 头像预览（可点击） */
.dual-avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f5f5f5;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
}

/* 头像悬停效果 */
.dual-avatar-preview:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* 头像点击态 */
.dual-avatar-preview:active {
    transform: scale(0.95);
}

/* 头像遮罩层（悬停时显示"点击更换"） */
.dual-avatar-preview::after {
    content: '点击更换';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    color: white;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 50%;
}

.dual-avatar-preview:hover::after {
    opacity: 1;
}

/* 头像标签（"角色" / "我"） */
.dual-avatar-label {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

/* ========== 移动端适配 ========== */

/* 小屏幕：缩小头像和间距 */
@media (max-width: 400px) {
    .dual-avatar-section {
        gap: 40px;  /* 缩小间距 */
    }
    
    .dual-avatar-preview {
        width: 70px;
        height: 70px;
        font-size: 32px;
    }
    
    .dual-profile-modal {
        width: 95% !important;
        padding: 20px 15px !important;
    }
}

/* 超小屏幕 */
@media (max-width: 350px) {
    .dual-avatar-section {
        gap: 30px;
    }
    
    .dual-avatar-preview {
        width: 65px;
        height: 65px;
        font-size: 30px;
    }
}

/* 矮屏幕：优化滚动 */
@media (max-height: 700px) {
    .dual-profile-modal {
        max-height: 90vh !important;
    }
}

/* 显示头像功能 */

/* 消息头像预览样式 */
.message-avatar-preview {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}


.message-avatar-preview.square {
    border-radius: 8px;
}

/* 实际聊天页面的头像样式 */
.message-avatar {
    width: var(--avatar-size, 40px);
    height: var(--avatar-size, 40px);
    border-radius: 50%;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--avatar-size, 40px) * 0.5);
    flex-shrink: 0;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    margin: 0 -8px;
}

.message-avatar.square {
    border-radius: calc(var(--avatar-size, 40px) * 0.2);
}

.message-item.hide-avatar .message-avatar {
    display: none;
}
/* 预览区：强制左右布局（角色左，我右） */
#avatarPreviewArea .message-item {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

#avatarPreviewArea .message-item.me {
    flex-direction: row;        /* ★关键：覆盖全局的 row-reverse，否则会被顶到左边 */
    justify-content: flex-end;
}
/* 显示头像功能end */


/* ============ 时空邮局 ============ */
.spacepost-screen {
    display: none;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 3000;
    background: linear-gradient(160deg, #0a0520 0%, #2a1142 50%, #5c2b53 100%);
    background-image: url('https://img.heliar.top/file/1771935297883_1771935085596.png');
    background-size: cover;
    background-position: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.spacepost-screen.active {
    display: flex;
}

/* 关闭按钮 */
.sp-close-btn {
    position: absolute;
    top: 16px; left: 16px;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
}

/* 星空装饰 */
.sp-star-field {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 1;
}
.sp-star {
    position: absolute;
    color: #fff;
    animation: sp-sparkle infinite ease-in-out;
}
.sp-star:nth-child(1) { top: 8%; left: 12%; font-size: 18px; animation-duration: 3s; }
.sp-star:nth-child(2) { top: 20%; right: 18%; font-size: 24px; animation-duration: 4s; animation-delay: 1.5s; color: #ffe6f0; }
.sp-star:nth-child(3) { bottom: 28%; left: 8%; font-size: 14px; animation-duration: 2.5s; animation-delay: 0.8s; }
.sp-star:nth-child(4) { bottom: 12%; right: 12%; font-size: 20px; animation-duration: 5s; animation-delay: 2s; color: #e6f0ff; }
.sp-star:nth-child(5) { top: 38%; left: 78%; font-size: 16px; animation-duration: 3.5s; animation-delay: 0.4s; }
.sp-star:nth-child(6) { top: 55%; left: 10%; font-size: 22px; animation-duration: 4.5s; animation-delay: 2.5s; color: #fffee6; }

@keyframes sp-sparkle {
    0% { opacity: 0; transform: scale(0.3) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.2) rotate(45deg); text-shadow: 0 0 15px #fff, 0 0 30px #f0a8d0; }
    100% { opacity: 0; transform: scale(0.3) rotate(90deg); }
}

/* 顶部标题 */
.sp-header {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 20px;
}
.sp-icon {
    display: inline-block;
    animation: sp-sway 5s infinite ease-in-out;
    margin-bottom: 5px;
    filter: drop-shadow(0 0 20px rgba(168, 237, 234, 0.6)) drop-shadow(0 0 40px rgba(254, 214, 227, 0.3));
}
@keyframes sp-sway {
    0%, 100% { transform: rotate(-8deg); filter: drop-shadow(0 0 15px rgba(255,255,255,0.4)); }
    50% { transform: rotate(8deg); filter: drop-shadow(0 0 25px rgba(255,255,255,0.8)); }
}
.sp-title {
    font-size: 1.4em;
    font-weight: bold;
    letter-spacing: 3px;
    color: #FFDEE9;
    text-shadow: 0 0 12px rgba(255, 222, 233, 0.9);
    margin-bottom: 6px;
}
.sp-subtitle {
    font-size: 0.85em;
    color: #F0A8D0;
    letter-spacing: 1px;
}

/* 玻璃卡片 */
.sp-glass-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 25px 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    color: #fff;
}
.sp-meta {
    text-align: center;
    margin-bottom: 15px;
}
.sp-sender {
    font-size: 0.95em;
    color: #F0A8D0;
    margin-bottom: 4px;
}
.sp-time {
    font-size: 0.8em;
    color: rgba(255,255,255,0.6);
}
.sp-divider {
    height: 1px;
    background: rgba(255,255,255,0.25);
    border: none;
    margin-bottom: 15px;
}
.sp-content {
    font-size: 1.05em;
    line-height: 1.7;
    white-space: pre-wrap;
    color: #fff;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* 底部按钮组 */
.sp-action-group {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 10px;
    margin-top: 25px;
    width: 100%;
    max-width: 400px;
}
.sp-btn {
    flex: 1;
    border: none;
    outline: none;
    border-radius: 24px;
    padding: 14px 5px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 2px;
    user-select: none;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    /* 玻璃质感核心 */
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}
.sp-btn:active {
    transform: scale(0.93);
    background: rgba(255, 255, 255, 0.18);
}
.sp-btn-text {
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* 顶部高光水滴弧线 */
.sp-btn-glow {
    position: absolute;
    top: 1px;
    left: 15%;
    width: 70%;
    height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 100%);
    border-radius: 0 0 50% 50%;
    z-index: 1;
    pointer-events: none;
}
/* 三个按钮各自的微弱色调 */
.sp-btn-receive {
    background: rgba(255, 180, 190, 0.15);
    border-color: rgba(255, 200, 210, 0.3);
}
.sp-btn-receive:active {
    background: rgba(255, 180, 190, 0.28);
}
.sp-btn-pass {
    background: rgba(180, 160, 220, 0.15);
    border-color: rgba(200, 180, 240, 0.3);
}
.sp-btn-pass:active {
    background: rgba(180, 160, 220, 0.28);
}
.sp-btn-next {
    background: rgba(150, 220, 200, 0.15);
    border-color: rgba(170, 240, 220, 0.3);
}
.sp-btn-next:active {
    background: rgba(150, 220, 200, 0.28);
}

/* 第四个按钮颜色 */
.sp-btn-mymail {
    background: rgba(220, 180, 255, 0.15);
    border-color: rgba(220, 200, 255, 0.3);
}
.sp-btn-mymail:active {
    background: rgba(220, 180, 255, 0.28);
}

/* 信纸弹窗 */
.sp-letter-overlay,
.sp-write-overlay {
    display: none;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(10, 5, 32, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.sp-letter-overlay.active,
.sp-write-overlay.active {
    display: flex;
}

/* 信纸卡片 */
.sp-letter-paper {
    width: 100%;
    max-width: 360px;
    max-height: 80vh;
    overflow-y: auto;
    background-color: #1a1030;
  background-image: url('https://img.heliar.top/file/1771935297883_1771935085596.png');
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 30px 24px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
    color: #fff;
    position: relative;
}

.sp-letter-header {
    text-align: center;
    margin-bottom: 15px;
}
.sp-letter-from {
    font-size: 1em;
    color: #F0A8D0;
    margin-bottom: 4px;
}
.sp-letter-time {
    font-size: 0.8em;
    color: rgba(255,255,255,0.5);
}
.sp-letter-divider {
    height: 1px;
    background: rgba(255,255,255,0.2);
    margin-bottom: 20px;
}
.sp-letter-body {
    font-size: 1em;
    line-height: 1.8;
    color: #fff;
    white-space: pre-wrap;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    min-height: 100px;
    margin-bottom: 25px;
}
.sp-letter-actions {
    display: flex;
    gap: 10px;
}
.sp-letter-actions .sp-btn {
    flex: 1;
}

/* 写信弹窗 */
.sp-write-paper {
    width: 100%;
    max-width: 360px;
    background: rgba(255, 255, 240, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 30px 24px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
    color: #fff;
}
.sp-write-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #FFDEE9;
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(255, 222, 233, 0.6);
}
.sp-write-input {
    width: 100%;
    min-height: 150px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 15px;
    color: #fff;
    font-size: 0.95em;
    line-height: 1.7;
    resize: none;
    outline: none;
    margin-bottom: 20px;
    font-family: inherit;
}
.sp-write-input::placeholder {
    color: rgba(255,255,255,0.35);
}
.sp-write-actions {
    display: flex;
    gap: 10px;
}
.sp-write-actions .sp-btn {
    flex: 1;
}

/* 我的回信列表 */
.sp-mymail-overlay {
    display: none;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #0a0520;
  background-image: url('https://img.heliar.top/file/1771935297883_1771935085596.png');
    background-size: cover;
    background-position: center;
    z-index: 10;
    flex-direction: column;
}
.sp-mymail-overlay::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(10, 5, 32, 0.55);
    z-index: 0;
}
.sp-mymail-overlay > * {
    position: relative;
    z-index: 1;
}
.sp-mymail-overlay.active {
    display: flex;
}
.sp-mymail-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.sp-mymail-header {
    display: flex;
    align-items: center;
    padding: 16px 16px 15px;
    gap: 10px;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 10px;
    padding-top: 16px;
}
.sp-mymail-header .sp-close-btn {
    position: absolute;
    top: 16px;
    left: 16px;
}
.sp-mymail-title {
    flex: 1;
    text-align: center;
    margin-right: 36px;
    font-size: 1.1em;
    font-weight: bold;
    color: #FFDEE9;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(255, 222, 233, 0.6);
}
.sp-mymail-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px 20px;
    -webkit-overflow-scrolling: touch;
}
.sp-mymail-empty {
    text-align: center;
    color: rgba(255,255,255,0.4);
    padding: 60px 0;
    font-size: 0.9em;
}

/* 回信列表项 */
.sp-mail-item {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    padding: 15px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: background 0.2s;
}
.sp-mail-item:active {
    background: rgba(255, 255, 255, 0.15);
}
.sp-mail-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.sp-mail-item-sender {
    font-size: 0.9em;
    color: #F0A8D0;
    font-weight: 600;
}
.sp-mail-item-time {
    font-size: 0.75em;
    color: rgba(255,255,255,0.4);
}
.sp-mail-item-preview {
    font-size: 0.85em;
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-mail-item-tag {
    display: inline-block;
    font-size: 0.7em;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 8px;
}
.sp-mail-tag-sent {
    background: rgba(132, 250, 176, 0.2);
    color: #84fab0;
    border: 1px solid rgba(132, 250, 176, 0.3);
}
.sp-mail-tag-reply {
    background: rgba(255, 154, 158, 0.2);
    color: #FF9A9E;
    border: 1px solid rgba(255, 154, 158, 0.3);
}
.sp-mail-tag-received {
    background: rgba(161, 140, 209, 0.2);
    color: #DDB4F6;
    border: 1px solid rgba(161, 140, 209, 0.3);
}
.sp-mail-tag-waiting {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255,255,255,0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* 瓶子加载动画 */
.sp-icon.loading {
    animation: sp-shake 0.5s ease-in-out infinite;
}
@keyframes sp-shake {
    0%, 100% { transform: rotate(-5deg); }
    25% { transform: rotate(10deg); }
    50% { transform: rotate(-10deg); }
    75% { transform: rotate(5deg); }
}

/* 卡片加载状态 */
.sp-glass-card.loading .sp-content {
    color: rgba(255,255,255,0.5);
}


/* ============ 时空邮局 ============ */


/* ============ 查手机页面样式 ============ */

.phonecheck-screen {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #f5f5f7 0%, #e8e8ed 100%);
    z-index: 3000;
    flex-direction: column;
    overflow: hidden;
}

/* 顶部状态栏 */
.pc-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    padding-top: max(8px, env(safe-area-inset-top));
}

.pc-status-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pc-time {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.pc-moon {
    font-size: 14px;
    color: #666;
}

.pc-status-right {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #1a1a1a;
}

/* 可滚动内容区 */
.pc-scroll-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px 20px;
    -webkit-overflow-scrolling: touch;
}

/* 个人资料卡片 */
.pc-profile-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 12px 14px;
    text-align: center;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}



.pc-avatar-wrapper {
    width: 55px;
    height: 55px;
    margin: 0 auto 8px;
    border-radius: 50%;
    overflow: hidden;
    background: #f0f0f0;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

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

.pc-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
}

.pc-nickname {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0;
}

.pc-username {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
}

.pc-btn-group {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: nowrap;
}
.pc-btn {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    padding: 4px 10px;
    font-size: 10px;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
}

.pc-btn-emoji {
    letter-spacing: 1px;
    padding: 6px 10px;
}

.pc-btn-svg {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    color: #9b7bb8;
}

.pc-btn-svg svg {
    flex-shrink: 0;
}

.pc-status-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.pc-status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.pc-status-label {
    font-size: 10px;
    color: #999;
}
.pc-status-label {
    font-size: 11px;
    color: #999;
}

/* 小组件标题 */
.pc-widget-title {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin: 20px 0 15px;
    letter-spacing: 1px;
}

/* App图标网格 */
.pc-app-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 0 10px;
    margin-bottom: 15px;
}

.pc-app-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pc-app-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 消息组件 */
.pc-message-widget {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    margin-bottom: 15px;
}

.pc-msg-avatar {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.pc-msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.pc-msg-bubble,
.pc-input-bar,
.pc-widget-title {
    cursor: pointer;
    transition: opacity 0.2s;
}

.pc-msg-bubble:active,
.pc-input-bar:active,
.pc-widget-title:active {
    opacity: 0.7;
}


.pc-msg-bubble {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    padding: 12px 18px;
    font-size: 13px;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 输入组件 */
.pc-input-widget {
    padding: 0 10px;
    margin-bottom: 20px;
}

.pc-input-bar {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 25px;
    padding: 14px 20px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

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

/* 页面指示器 */
.pc-page-indicator {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 15px 0;
}

.pc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
}

.pc-dot.active {
    background: rgba(0, 0, 0, 0.4);
}

/* 底部Dock栏 */
.pc-dock {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 12px 20px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.05);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3001;
}
.pc-dock-item {
    width: 60px;
    height: 60px;
}

.pc-dock-icon {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/* 返回按钮 */
.pc-back-btn {
    position: absolute;
    top: calc(max(8px, env(safe-area-inset-top)) + 35px);
    left: 16px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    color: #333;
}

/* 角色选择列表项 */
.pc-char-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.pc-char-item:hover {
    background: #f5f5f5;
}

.pc-char-item:active {
    background: #eee;
}

.pc-char-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    overflow: hidden;
    flex-shrink: 0;
}

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

.pc-char-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

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


#phoneCheckProfileModal,
#phoneCheckTextModal {
    z-index: 3500;
}

.pc-weekday {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    margin-left: 6px;
}

.pc-temp {
    font-size: 13px;
    color: #667eea;
    font-weight: 500;
}

.pc-battery-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pc-battery-text {
    font-size: 12px;
    color: #22c55e;
    font-weight: 500;
}
.pc-app-name {
    font-size: 10px;
    color: #666;
    margin-top: 4px;
    text-align: center;
}

.pc-dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pc-dock-name {
    font-size: 9px;
    color: #666;
    margin-top: 4px;
    text-align: center;
}


/* 查手机美化页面 */
.phonecheck-beautify-screen {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #f5f5f7 0%, #e8e8ed 100%);
    z-index: 3000;
    flex-direction: column;
    overflow-y: auto;
}

/* 壁纸预览框 */
.pc-beautify-preview {
    width: 80px;
    height: 160px;
    background: linear-gradient(180deg, #f5f5f7 0%, #e8e8ed 100%);
    border-radius: 12px;
    border: 2px solid #ddd;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background-size: cover;
    background-position: center;
}

.pc-preview-statusbar {
    height: 16px;
    background: rgba(255,255,255,0.5);
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}

.pc-preview-content {
    flex: 1;
}

.pc-preview-dock {
    height: 20px;
    background: rgba(255,255,255,0.5);
}

/* 图标网格 */
.pc-beautify-icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.pc-beautify-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.pc-beautify-icon-preview {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

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

.pc-beautify-icon-name {
    font-size: 10px;
    color: #666;
    margin-top: 5px;
    text-align: center;
}

.pc-beautify-icon-item:active .pc-beautify-icon-preview {
    transform: scale(0.95);
}

#pcIconEditorModal {
    z-index: 3500;
}

/* API选择弹窗 */
#pcApiModal {
    z-index: 3500;
}

.pc-api-scheme-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
    border: 1px solid #f0f0f0;
    margin-bottom: 8px;
}

.pc-api-scheme-item:hover {
    background: #f5f5f5;
}

.pc-api-scheme-item:active {
    background: #eee;
}

.pc-api-scheme-item.selected {
    background: #f0f7ff;
    border-color: #667eea;
}

.pc-api-scheme-item .scheme-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.pc-api-scheme-item .scheme-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: transparent;
}

.pc-api-scheme-item.selected .scheme-check {
    border-color: #667eea;
    background: #667eea;
    color: white;
}

/* 冰箱页面 */
.pc-fridge-screen {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #e8eef5 0%, #d5dfe8 100%);
    z-index: 3000;
    flex-direction: column;
    overflow-y: auto;
    padding: 60px 16px 30px;
}

.pc-fridge-back-btn {
    position: absolute;
    top: max(15px, env(safe-area-inset-top));
    left: 15px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    color: #333;
}

.pc-fridge-refresh-btn {
    position: absolute;
    top: max(15px, env(safe-area-inset-top));
    right: 15px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    color: #333;
}

.pc-fridge-refresh-btn:active {
    transform: scale(0.95);
}

.pc-fridge-refresh-btn.loading svg {
    animation: pcFridgeSpin 1s linear infinite;
}

@keyframes pcFridgeSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 加载状态 */
.pc-fridge-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(232, 238, 245, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.pc-fridge-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #ddd;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: pcFridgeSpin 0.8s linear infinite;
    margin-bottom: 15px;
}

.pc-fridge-loading-text {
    font-size: 14px;
    color: #666;
}

/* 冰箱内容区 */
.pc-fridge-content {
    flex: 1;
}

.pc-fridge-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 冰箱物品列表 */
.pc-fridge-items {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    padding: 15px;
    margin-bottom: 20px;
    min-height: 150px;
}

.pc-fridge-empty {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 40px 20px;
    line-height: 1.8;
}

.pc-fridge-item {
    display: flex;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

.pc-fridge-item-icon {
    width: 36px;
    height: 36px;
    background: #f5f5f5;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 12px;
    flex-shrink: 0;
}

.pc-fridge-item-info {
    flex: 1;
}

.pc-fridge-item-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 3px;
}

.pc-fridge-item-comment {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}

/* 便签区域 */
.pc-fridge-note-wrapper {
    display: flex;
    justify-content: center;
    padding: 10px;
}

.pc-fridge-note {
    background: #fff9c4;
    width: 100%;
    max-width: 280px;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.1);
    transform: rotate(-1deg);
    position: relative;
}

.pc-fridge-note-pin {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
}

.pc-fridge-note-title {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
    text-align: center;
}

.pc-fridge-note-content {
    font-size: 14px;
    color: #555;
    line-height: 1.8;
    white-space: pre-wrap;
    font-family: 'PingFang SC', sans-serif;
}

/* ============ 查手机-浏览器 ============ */

/* 浏览器页面全屏容器 */
#phoneCheckBrowserScreen {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #f5f5f5;
    z-index: 3100;
    flex-direction: column;
    overflow: hidden;
}

/* 两个视图撑满 */
#pcBrowserHistoryView,
#pcBrowserDetailView {
    height: 100%;
}

/* ========== 历史/搜索页 ========== */
.pc-browser-history-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: calc(max(15px, env(safe-area-inset-top)) + 45px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.pc-browser-back-btn,
.pc-browser-refresh-btn {
    position: absolute;
    top: max(15px, env(safe-area-inset-top));
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    color: #333;
}

.pc-browser-back-btn { left: 15px; }
.pc-browser-refresh-btn { right: 15px; }

.pc-browser-refresh-btn:active,
.pc-browser-back-btn:active {
    transform: scale(0.95);
}

.pc-browser-refresh-btn.loading svg {
    animation: pcBrowserSpin 1s linear infinite;
}

@keyframes pcBrowserSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 顶部搜索框装饰 */
.pc-browser-search-bar {
    margin: 0 16px 18px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.pc-browser-search-icon { font-size: 16px; }
.pc-browser-search-text { color: #999; font-size: 14px; }

/* 列表容器 */
.pc-browser-history-list {
    flex: 1;
    padding: 0 16px 30px;
}

.pc-browser-empty {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 60px 20px;
    line-height: 1.8;
}

/* 搜索记录卡片 */
.pc-browser-history-item {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 14px;
    padding: 14px 14px;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.pc-browser-history-item:active {
    transform: scale(0.985);
}

.pc-browser-history-icon {
    width: 40px;
    height: 40px;
    background: #f3f4f6;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.pc-browser-history-info {
    flex: 1;
    min-width: 0;
}

.pc-browser-history-title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-browser-history-summary {
    font-size: 12px;
    color: #666;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pc-browser-history-time {
    font-size: 11px;
    color: #999;
    margin-top: 6px;
}

/* ========== 详情页 ========== */
.pc-browser-detail-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #fff;
}

/* 顶部地址栏 */
.pc-browser-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top));
    background: rgba(248, 248, 248, 0.95);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.pc-browser-detail-back {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    flex-shrink: 0;
}

.pc-browser-detail-back:active { transform: scale(0.95); }

.pc-browser-detail-url {
    flex: 1;
    background: #ededed;
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.pc-browser-lock { font-size: 12px; }

.pc-browser-url-text {
    font-size: 12px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-browser-detail-more {
    font-size: 18px;
    color: #666;
    padding: 0 6px;
}

/* 网页滚动区域 */
.pc-browser-detail-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
}

/* 文章头部区域（渐变） */
.pc-browser-article-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 24px 18px 28px;
    color: white;
    position: relative;
}

.pc-browser-article-header::after {
    content: '';
    position: absolute;
    bottom: -18px;
    left: 0;
    right: 0;
    height: 36px;
    background: #fff;
    border-radius: 18px 18px 0 0;
}

.pc-browser-article-type {
    display: inline-block;
    font-size: 11px;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 14px;
    margin-bottom: 10px;
    backdrop-filter: blur(10px);
}

.pc-browser-article-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    line-height: 1.35;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* 文章元信息 */
.pc-browser-article-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid #f3f3f3;
    background: #fff;
    position: relative;
    z-index: 1;
}

.pc-browser-article-author {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pc-browser-author-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.pc-browser-author-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pc-browser-author-name {
    font-size: 13px;
    font-weight: 700;
    color: #333;
}

.pc-browser-article-time {
    font-size: 11px;
    color: #999;
}

.pc-browser-article-stats {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pc-browser-stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #999;
}

/* 文章正文 */
.pc-browser-article-body {
    padding: 18px;
    font-size: 15px;
    color: #333;
    line-height: 1.9;
    white-space: pre-wrap;
    background: #fff;
}

/* 文章底部互动区 */
.pc-browser-article-footer {
    padding: 16px 12px;
    background: #f9f9f9;
    border-top: 1px solid #f0f0f0;
}

.pc-browser-action-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.pc-browser-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 18px;
    border-radius: 12px;
    transition: background 0.2s;
}

.pc-browser-action-btn:active {
    background: rgba(0, 0, 0, 0.05);
}

.pc-browser-action-icon {
    font-size: 20px;
}

.pc-browser-action-text {
    font-size: 11px;
    color: #666;
}

/* 相关推荐 */
.pc-browser-related {
    padding: 18px;
    background: #fff;
    border-top: 8px solid #f5f5f5;
}

.pc-browser-related-title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
}

.pc-browser-related-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pc-browser-related-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 12px;
    cursor: pointer;
}

.pc-browser-related-item:active {
    transform: scale(0.99);
}

.pc-browser-related-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #e0e5ec 0%, #f5f7fa 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.pc-browser-related-info {
    flex: 1;
    min-width: 0;
}

.pc-browser-related-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-browser-related-desc {
    font-size: 11px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========== loading 遮罩 ========== */
#phoneCheckBrowserScreen #pcBrowserLoading {
    position: absolute;
    inset: 0;
    background: rgba(245, 245, 245, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.pc-browser-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #ddd;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: pcBrowserSpin 0.8s linear infinite;
    margin-bottom: 15px;
}

.pc-browser-loading-text {
    font-size: 14px;
    color: #666;
}
.pc-browser-article-footer { display: none; }

/* ============ 查手机-备忘录 ============ */

#phoneCheckMemoScreen {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #f2f2f7; /* iOS notes 背景 */
    z-index: 3100;
    overflow: hidden;
}

.pc-memo-back-btn,
.pc-memo-refresh-btn {
    position: absolute;
    top: max(15px, env(safe-area-inset-top));
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 10;
    color: #333;
}

.pc-memo-back-btn { left: 15px; }
.pc-memo-refresh-btn { right: 15px; }

.pc-memo-refresh-btn.loading svg {
    animation: pcMemoSpin 1s linear infinite;
}

@keyframes pcMemoSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.pc-memo-list-view {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: calc(max(15px, env(safe-area-inset-top)) + 55px);
}

.pc-memo-title {
    font-size: 28px;
    font-weight: 800;
    color: #111;
    padding: 0 18px;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.pc-memo-subtitle {
    font-size: 13px;
    color: #8e8e93;
    padding: 0 18px;
    margin-bottom: 14px;
}

.pc-memo-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 14px 20px;
}

.pc-memo-empty {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 70px 20px;
    line-height: 1.8;
}

.pc-memo-item {
    background: rgba(255,255,255,0.9);
    border-radius: 14px;
    padding: 14px 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    cursor: pointer;
}

.pc-memo-item:active {
    transform: scale(0.985);
}

.pc-memo-item-title {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-memo-item-preview {
    font-size: 13px;
    color: #3a3a3c;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pc-memo-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 11px;
    color: #8e8e93;
}

.pc-memo-item-ps {
    color: #ff9f0a;
    font-weight: 700;
}

/* 详情页 */
.pc-memo-detail-view {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f2f2f7;
}

.pc-memo-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top));
    background: rgba(248,248,248,0.95);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.pc-memo-detail-back {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    flex-shrink: 0;
}

.pc-memo-detail-title {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #333;
}

.pc-memo-detail-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px 18px 30px;
}

.pc-memo-detail-time {
    font-size: 12px;
    color: #8e8e93;
    margin-bottom: 12px;
}

.pc-memo-detail-body {
    font-size: 16px;
    color: #111;
    line-height: 1.85;
    white-space: pre-wrap;
}

.pc-memo-detail-ps {
    margin-top: 18px;
    padding: 14px 14px;
    background: #fff7e6;
    border: 1px solid rgba(255,159,10,0.25);
    border-radius: 12px;
}

.pc-memo-ps-label {
    font-size: 11px;
    color: #ff9f0a;
    font-weight: 800;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.pc-memo-ps-text {
    font-size: 13px;
    color: #6b4a00;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* loading */
.pc-memo-loading {
    position: absolute;
    inset: 0;
    background: rgba(242,242,247,0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.pc-memo-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #ddd;
    border-top-color: #ffcc00;
    border-radius: 50%;
    animation: pcMemoSpin 0.8s linear infinite;
    margin-bottom: 15px;
}

.pc-memo-loading-text {
    font-size: 14px;
    color: #666;
}

/* ============ 查手机-备忘录 end ============ */

/* ============ 查手机-相册 ============ */

#phoneCheckAlbumScreen {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #f2f2f7;
    z-index: 3100;
    overflow: hidden;
}

.pc-album-back-btn,
.pc-album-refresh-btn {
    position: absolute;
    top: max(15px, env(safe-area-inset-top));
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 10;
    color: #333;
}

.pc-album-back-btn { left: 15px; }
.pc-album-refresh-btn { right: 15px; }

.pc-album-refresh-btn.loading svg {
    animation: pcAlbumSpin 1s linear infinite;
}

@keyframes pcAlbumSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 相簿首页 */
.pc-album-albums-view {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: calc(max(15px, env(safe-area-inset-top)) + 55px);
}

.pc-album-title {
    font-size: 28px;
    font-weight: 800;
    color: #111;
    padding: 0 18px;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.pc-album-subtitle {
    font-size: 13px;
    color: #8e8e93;
    padding: 0 18px;
    margin-bottom: 14px;
}

.pc-album-album-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 14px 20px;
}

.pc-album-empty {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 70px 20px;
    line-height: 1.8;
}

/* 相簿卡片 */
.pc-album-album-item {
    background: rgba(255,255,255,0.9);
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.pc-album-album-item:active {
    transform: scale(0.985);
}

.pc-album-cover {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.95);
    font-weight: 800;
    letter-spacing: 1px;
}

.pc-album-cover-main {
    font-size: 14px;
    line-height: 1;
}

.pc-album-cover-sub {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    opacity: 0.95;
}

.pc-album-album-info {
    flex: 1;
    min-width: 0;
}

.pc-album-album-name {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-album-album-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pc-album-album-meta {
    margin-top: 8px;
    font-size: 11px;
    color: #8e8e93;
}

/* 顶部条（网格/查看共用） */
.pc-album-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top));
    background: rgba(248,248,248,0.95);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.pc-album-topbar-back {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    flex-shrink: 0;
}

.pc-album-topbar-back:active { transform: scale(0.95); }

.pc-album-topbar-title {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: #333;
}

/* 网格视图 */
.pc-album-grid-view,
.pc-album-viewer {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f2f2f7;
}

.pc-album-grid {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.pc-album-photo-thumb {
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0,0,0,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.pc-album-photo-thumb:active { transform: scale(0.98); }

.pc-album-thumb-emoji {
    font-size: 22px;
}

.pc-album-thumb-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 8px;
    font-size: 10px;
    color: rgba(255,255,255,0.95);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 查看页 */
.pc-album-viewer-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px 30px;
}

.pc-album-photo-card {
    width: 100%;
    height: 340px;
    border-radius: 18px;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 18px;
}

.pc-album-photo-emoji {
    font-size: 60px;
    margin-bottom: 14px;
}

.pc-album-photo-caption {
    font-size: 16px;
    font-weight: 800;
    color: #111;
    text-align: center;
    line-height: 1.4;
}

.pc-album-photo-meta {
    margin-top: 12px;
    font-size: 12px;
    color: #8e8e93;
    text-align: center;
}

.pc-album-photo-comment {
    margin-top: 14px;
    padding: 14px 14px;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 14px;
}

.pc-album-photo-comment-label {
    font-size: 11px;
    color: #667eea;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.pc-album-photo-comment-text {
    font-size: 13px;
    color: #444;
    line-height: 1.7;
    white-space: pre-wrap;
}

/* loading */
.pc-album-loading {
    position: absolute;
    inset: 0;
    background: rgba(242,242,247,0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.pc-album-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #ddd;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: pcAlbumSpin 0.8s linear infinite;
    margin-bottom: 15px;
}

.pc-album-loading-text {
    font-size: 14px;
    color: #666;
}

/* ============ 查手机-相册 end ============ */

/* ============ 查手机-记仇本 ============ */

#phoneCheckGrudgeScreen {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, #101114 0%, #1a1b20 100%);
    z-index: 3100;
    overflow: hidden;
    color: #fff;
}

/* 顶部按钮 */
.pc-grudge-back-btn,
.pc-grudge-refresh-btn {
    position: absolute;
    top: max(15px, env(safe-area-inset-top));
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
    z-index: 10;
    color: #fff;
}

.pc-grudge-back-btn { left: 15px; }
.pc-grudge-refresh-btn { right: 15px; }

.pc-grudge-refresh-btn.loading svg {
    animation: pcGrudgeSpin 1s linear infinite;
}

@keyframes pcGrudgeSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 列表视图 */
.pc-grudge-list-view {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: calc(max(15px, env(safe-area-inset-top)) + 55px);
}

.pc-grudge-title {
    font-size: 28px;
    font-weight: 800;
    padding: 0 18px;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.pc-grudge-subtitle {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    padding: 0 18px;
    margin-bottom: 14px;
}

.pc-grudge-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 14px 20px;
}

.pc-grudge-empty {
    text-align: center;
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    padding: 70px 20px;
    line-height: 1.8;
}

/* 条目卡片 */
.pc-grudge-item {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    padding: 14px 14px;
    margin-bottom: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.18);
    cursor: pointer;
}

.pc-grudge-item:active {
    transform: scale(0.985);
}

.pc-grudge-item-title {
    font-size: 15px;
    font-weight: 800;
    color: rgba(255,255,255,0.95);
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-grudge-item-summary {
    font-size: 13px;
    color: rgba(255,255,255,0.72);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pc-grudge-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 11px;
    color: rgba(255,255,255,0.55);
}

.pc-grudge-level {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pc-grudge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 80, 90, 0.85);
    box-shadow: 0 0 10px rgba(255, 80, 90, 0.45);
}

/* 详情视图 */
.pc-grudge-detail-view {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #101114 0%, #1a1b20 100%);
}

.pc-grudge-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top));
    background: rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.pc-grudge-detail-back {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    flex-shrink: 0;
}

.pc-grudge-detail-back:active { transform: scale(0.95); }

.pc-grudge-detail-title {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: rgba(255,255,255,0.95);
}

.pc-grudge-detail-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px 30px;
}

.pc-grudge-detail-time {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    margin-bottom: 12px;
}

/* 详情分区卡片 */
.pc-grudge-section {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    padding: 14px 14px;
    margin-bottom: 12px;
}

.pc-grudge-section-os {
    border-color: rgba(255, 80, 90, 0.22);
    box-shadow: 0 0 0 1px rgba(255, 80, 90, 0.10) inset;
}

.pc-grudge-section-label {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.65);
    margin-bottom: 8px;
}

.pc-grudge-section-text {
    font-size: 14px;
    line-height: 1.75;
    color: rgba(255,255,255,0.92);
    white-space: pre-wrap;
}

/* loading */
.pc-grudge-loading {
    position: absolute;
    inset: 0;
    background: rgba(16,17,20,0.92);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.pc-grudge-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255,255,255,0.18);
    border-top-color: rgba(255, 80, 90, 0.85);
    border-radius: 50%;
    animation: pcGrudgeSpin 0.8s linear infinite;
    margin-bottom: 15px;
}

.pc-grudge-loading-text {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
}

/* ============ 查手机-记仇本 end ============ */

/* ============ 查手机-恋爱记 ============ */

#phoneCheckLoveDiaryScreen {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #f2f2f7;
    z-index: 3100;
    overflow: hidden;
}

/* 顶部按钮 */
.pc-love-back-btn,
.pc-love-refresh-btn {
    position: absolute;
    top: max(15px, env(safe-area-inset-top));
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 10;
    color: #333;
}

.pc-love-back-btn { left: 15px; }
.pc-love-refresh-btn { right: 15px; }

.pc-love-refresh-btn.loading svg {
    animation: pcLoveSpin 1s linear infinite;
}

@keyframes pcLoveSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 列表 */
.pc-love-list-view {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: calc(max(15px, env(safe-area-inset-top)) + 55px);
}

.pc-love-title {
    font-size: 28px;
    font-weight: 800;
    color: #111;
    padding: 0 18px;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.pc-love-subtitle {
    font-size: 13px;
    color: #8e8e93;
    padding: 0 18px;
    margin-bottom: 14px;
}

.pc-love-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 14px 20px;
}

.pc-love-empty {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 70px 20px;
    line-height: 1.8;
}

.pc-love-item {
    background: rgba(255,255,255,0.9);
    border-radius: 14px;
    padding: 14px 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    cursor: pointer;
}

.pc-love-item:active {
    transform: scale(0.985);
}

.pc-love-item-title {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    margin-bottom: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-love-item-preview {
    font-size: 13px;
    color: #3a3a3c;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pc-love-item-meta {
    margin-top: 10px;
    font-size: 11px;
    color: #8e8e93;
}

/* 详情 */
.pc-love-detail-view {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f2f2f7;
}

.pc-love-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top));
    background: rgba(248,248,248,0.95);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.pc-love-detail-back {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    flex-shrink: 0;
}

.pc-love-detail-back:active { transform: scale(0.95); }

.pc-love-detail-title {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: #333;
}

.pc-love-detail-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px 30px;
}

.pc-love-detail-time {
    font-size: 12px;
    color: #8e8e93;
    margin-bottom: 12px;
}

/* 日记纸张卡片 */
.pc-love-paper {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.05);
    padding: 16px 14px;
}

.pc-love-paper-title {
    font-size: 18px;
    font-weight: 900;
    color: #111;
    margin-bottom: 12px;
    line-height: 1.35;
}

.pc-love-paper-body {
    font-size: 15px;
    color: #111;
    line-height: 1.9;
    white-space: pre-wrap;
}

/* PS */
.pc-love-ps {
    margin-top: 14px;
    padding: 14px 14px;
    background: #fff7f2;
    border: 1px solid rgba(255, 105, 180, 0.18);
    border-radius: 14px;
}

.pc-love-ps-label {
    font-size: 11px;
    color: #ff3b7d;
    font-weight: 900;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.pc-love-ps-text {
    font-size: 13px;
    color: #6b1d39;
    line-height: 1.7;
    white-space: pre-wrap;
}



/* loading */
.pc-love-loading {
    position: absolute;
    inset: 0;
    background: rgba(242,242,247,0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.pc-love-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #ddd;
    border-top-color: #ff3b7d;
    border-radius: 50%;
    animation: pcLoveSpin 0.8s linear infinite;
    margin-bottom: 15px;
}

.pc-love-loading-text {
    font-size: 14px;
    color: #666;
}

/* ============ 查手机-恋爱记 end ============ */

/* ============ 查手机-短信 ============ */

#phoneCheckSmsScreen {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #f2f2f7;
    z-index: 3100;
    overflow: hidden;
}

/* 顶部按钮 */
.pc-sms-back-btn,
.pc-sms-refresh-btn {
    position: absolute;
    top: max(15px, env(safe-area-inset-top));
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 10;
    color: #333;
}

.pc-sms-back-btn { left: 15px; }
.pc-sms-refresh-btn { right: 15px; }

.pc-sms-refresh-btn.loading svg {
    animation: pcSmsSpin 1s linear infinite;
}

@keyframes pcSmsSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 列表视图 */
.pc-sms-list-view {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: calc(max(15px, env(safe-area-inset-top)) + 55px);
}

.pc-sms-title {
    font-size: 28px;
    font-weight: 800;
    color: #111;
    padding: 0 18px;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
}

.pc-sms-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 14px 20px;
}

.pc-sms-empty {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 70px 20px;
    line-height: 1.8;
}

/* 会话条目 */
.pc-sms-thread {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    margin-bottom: 10px;
    cursor: pointer;
}

.pc-sms-thread:active {
    transform: scale(0.985);
}

.pc-sms-avatar {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #eef0f4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    overflow: hidden;
}

.pc-sms-thread-main {
    flex: 1;
    min-width: 0;
}

.pc-sms-thread-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.pc-sms-thread-name {
    font-size: 15px;
    font-weight: 800;
    color: #111;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-sms-thread-time {
    font-size: 11px;
    color: #8e8e93;
    flex-shrink: 0;
}

.pc-sms-thread-preview {
    font-size: 13px;
    color: #3a3a3c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-sms-unread-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff3b30;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(255,59,48,0.12);
}

/* 详情视图 */
.pc-sms-detail-view {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f2f2f7;
}

.pc-sms-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top));
    background: rgba(248,248,248,0.95);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.pc-sms-detail-back {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    flex-shrink: 0;
}

.pc-sms-detail-back:active { transform: scale(0.95); }

.pc-sms-detail-name {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: #333;
}

/* 消息区 */
.pc-sms-messages {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 12px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 时间分隔条 */
.pc-sms-time-sep {
    align-self: center;
    font-size: 11px;
    color: #8e8e93;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 12px;
    padding: 4px 10px;
    margin: 6px 0;
}

/* 气泡 */
.pc-sms-bubble-row {
    display: flex;
    gap: 8px;
}

.pc-sms-bubble-row.other { justify-content: flex-start; }
.pc-sms-bubble-row.char { justify-content: flex-end; }

.pc-sms-bubble {
    max-width: 78%;
    padding: 10px 12px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.pc-sms-bubble.other {
    background: rgba(255,255,255,0.92);
    color: #111;
    border: 1px solid rgba(0,0,0,0.04);
    border-top-left-radius: 6px;
}

.pc-sms-bubble.char {
    background: #34c759; /* iOS green */
    color: #fff;
    border-top-right-radius: 6px;
}

/* loading */
.pc-sms-loading {
    position: absolute;
    inset: 0;
    background: rgba(242,242,247,0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.pc-sms-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #ddd;
    border-top-color: #34c759;
    border-radius: 50%;
    animation: pcSmsSpin 0.8s linear infinite;
    margin-bottom: 15px;
}

.pc-sms-loading-text {
    font-size: 14px;
    color: #666;
}

/* ============ 查手机-短信 end ============ */
/* ============ 查手机-理财 ============ */

#phoneCheckFinanceScreen {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #f2f2f7;
    z-index: 3100;
    overflow: hidden;
}

/* 顶部按钮 */
.pc-finance-back-btn,
.pc-finance-refresh-btn {
    position: absolute;
    top: max(15px, env(safe-area-inset-top));
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 10;
    color: #333;
}

.pc-finance-back-btn { left: 15px; }
.pc-finance-refresh-btn { right: 15px; }

.pc-finance-refresh-btn.loading svg {
    animation: pcFinanceSpin 1s linear infinite;
}

@keyframes pcFinanceSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 列表视图 */
.pc-finance-list-view {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: calc(max(15px, env(safe-area-inset-top)) + 55px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 30px;
}

.pc-finance-title {
    font-size: 28px;
    font-weight: 800;
    color: #111;
    padding: 0 18px;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
}

/* 资产卡 */
.pc-finance-balance-card {
    margin: 0 14px 14px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.05);
    padding: 18px 16px;
}

.pc-finance-balance-label {
    font-size: 12px;
    color: #8e8e93;
    letter-spacing: 1px;
}

.pc-finance-balance-amount {
    font-size: 38px;
    font-weight: 300;
    color: #111;
    margin-top: 6px;
}

.pc-finance-balance-sub {
    font-size: 12px;
    color: #666;
    margin-top: 6px;
}



/* 列表 */
.pc-finance-section-title {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    padding: 0 18px;
    margin: 8px 0 10px;
}

.pc-finance-list {
    padding: 0 14px;
}

.pc-finance-empty {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 60px 20px;
    line-height: 1.8;
}

.pc-finance-tx {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 14px;
    padding: 12px 12px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.pc-finance-tx:active {
    transform: scale(0.985);
}

.pc-finance-tx-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #eef0f4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.pc-finance-tx-main {
    flex: 1;
    min-width: 0;
}

.pc-finance-tx-title {
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-finance-tx-desc {
    font-size: 12px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-finance-tx-right {
    text-align: right;
    flex-shrink: 0;
}

.pc-finance-tx-amount {
    font-size: 14px;
    font-weight: 900;
}

.pc-finance-tx-amount.expense { color: #ff3b30; }
.pc-finance-tx-amount.income { color: #34c759; }

.pc-finance-tx-time {
    font-size: 11px;
    color: #8e8e93;
    margin-top: 4px;
}

/* 详情视图 */
.pc-finance-detail-view {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f2f2f7;
}

.pc-finance-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top));
    background: rgba(248,248,248,0.95);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.pc-finance-detail-back {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    flex-shrink: 0;
}

.pc-finance-detail-back:active { transform: scale(0.95); }

.pc-finance-detail-title {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: #333;
}

.pc-finance-detail-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px 16px 30px;
}

.pc-finance-detail-amount {
    font-size: 34px;
    font-weight: 300;
    color: #111;
    margin-bottom: 6px;
}

.pc-finance-detail-meta {
    font-size: 12px;
    color: #8e8e93;
    margin-bottom: 14px;
}

.pc-finance-detail-card {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.05);
    padding: 10px 12px;
}

.pc-finance-detail-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    gap: 12px;
}

.pc-finance-detail-row:last-child { border-bottom: none; }

.pc-finance-detail-k {
    font-size: 12px;
    color: #8e8e93;
    flex-shrink: 0;
}

.pc-finance-detail-v {
    font-size: 13px;
    color: #111;
    text-align: right;
    white-space: pre-wrap;
}

/* loading */
.pc-finance-loading {
    position: absolute;
    inset: 0;
    background: rgba(242,242,247,0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.pc-finance-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #ddd;
    border-top-color: #111;
    border-radius: 50%;
    animation: pcFinanceSpin 0.8s linear infinite;
    margin-bottom: 15px;
}

.pc-finance-loading-text {
    font-size: 14px;
    color: #666;
}

/* ============ 查手机-理财 end ============ */

/* ============ 查手机-收藏 ============ */

#phoneCheckFavoriteScreen {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #f2f2f7;
    z-index: 3100;
    overflow: hidden;
}

/* 顶部按钮 */
.pc-fav-back-btn,
.pc-fav-refresh-btn {
    position: absolute;
    top: max(15px, env(safe-area-inset-top));
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 10;
    color: #333;
}

.pc-fav-back-btn { left: 15px; }
.pc-fav-refresh-btn { right: 15px; }

.pc-fav-refresh-btn.loading svg {
    animation: pcFavSpin 1s linear infinite;
}

@keyframes pcFavSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 列表视图 */
.pc-fav-list-view {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: calc(max(15px, env(safe-area-inset-top)) + 55px);
}

.pc-fav-title {
    font-size: 28px;
    font-weight: 800;
    color: #111;
    padding: 0 18px;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.pc-fav-subtitle {
    font-size: 13px;
    color: #8e8e93;
    padding: 0 18px;
    margin-bottom: 14px;
}

.pc-fav-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 14px 20px;
}

.pc-fav-empty {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 70px 20px;
    line-height: 1.8;
}

/* 列表条目 */
.pc-fav-item {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 14px;
    padding: 14px 14px;
    margin-bottom: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    cursor: pointer;
}

.pc-fav-item:active {
    transform: scale(0.985);
}

.pc-fav-item-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.pc-fav-item-title {
    font-size: 15px;
    font-weight: 900;
    color: #111;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-fav-item-time {
    font-size: 11px;
    color: #8e8e93;
    flex-shrink: 0;
}

.pc-fav-item-preview {
    font-size: 13px;
    color: #3a3a3c;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pc-fav-item-source {
    margin-top: 10px;
    font-size: 11px;
    color: #8e8e93;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pc-fav-source-pill {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(102,126,234,0.10);
    color: #667eea;
    font-weight: 800;
}

/* 详情视图 */
.pc-fav-detail-view {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f2f2f7;
}

.pc-fav-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top));
    background: rgba(248,248,248,0.95);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.pc-fav-detail-back {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    flex-shrink: 0;
}

.pc-fav-detail-back:active { transform: scale(0.95); }

.pc-fav-detail-title {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: #333;
}

.pc-fav-detail-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px 30px;
}

.pc-fav-detail-time {
    font-size: 12px;
    color: #8e8e93;
    margin-bottom: 12px;
}

/* 内容卡 */
.pc-fav-card {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.05);
    padding: 16px 14px;
}

.pc-fav-card-title {
    font-size: 18px;
    font-weight: 900;
    color: #111;
    margin-bottom: 10px;
}

.pc-fav-card-body {
    font-size: 15px;
    color: #111;
    line-height: 1.9;
    white-space: pre-wrap;
}

/* 来源卡 */
.pc-fav-source-card {
    margin-top: 12px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 14px;
    padding: 12px 12px;
}

.pc-fav-source-label {
    font-size: 11px;
    font-weight: 900;
    color: #8e8e93;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.pc-fav-source-text {
    font-size: 13px;
    color: #333;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* OS 卡（私密感） */
.pc-fav-os-card {
    margin-top: 12px;
    background: rgba(152, 122, 202, 0.10);
    border: 1px solid rgba(152, 122, 202, 0.22);
    border-radius: 14px;
    padding: 12px 12px;
}

.pc-fav-os-label {
    font-size: 11px;
    font-weight: 900;
    color: #9b7bb8;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.pc-fav-os-text {
    font-size: 13px;
    color: #4b3a62;
    line-height: 1.7;
    white-space: pre-wrap;
}

/* loading */
.pc-fav-loading {
    position: absolute;
    inset: 0;
    background: rgba(242,242,247,0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.pc-fav-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #ddd;
    border-top-color: #9b7bb8;
    border-radius: 50%;
    animation: pcFavSpin 0.8s linear infinite;
    margin-bottom: 15px;
}

.pc-fav-loading-text {
    font-size: 14px;
    color: #666;
}

/* ============ 查手机-收藏 end ============ */

/* ============ 查手机-行踪 ============ */

#phoneCheckTraceScreen {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #f2f2f7;
    z-index: 3100;
    overflow: hidden;
}

/* 顶部按钮 */
.pc-trace-back-btn,
.pc-trace-refresh-btn {
    position: absolute;
    top: max(15px, env(safe-area-inset-top));
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 10;
    color: #333;
}

.pc-trace-back-btn { left: 15px; }
.pc-trace-refresh-btn { right: 15px; }

.pc-trace-refresh-btn.loading svg {
    animation: pcTraceSpin 1s linear infinite;
}

@keyframes pcTraceSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 列表视图 */
.pc-trace-list-view {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: calc(max(15px, env(safe-area-inset-top)) + 55px);
}

.pc-trace-title {
    font-size: 28px;
    font-weight: 800;
    color: #111;
    padding: 0 18px;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.pc-trace-subtitle {
    font-size: 13px;
    color: #8e8e93;
    padding: 0 18px;
    margin-bottom: 14px;
}

.pc-trace-timeline {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 14px 20px;
}

.pc-trace-empty {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 70px 20px;
    line-height: 1.8;
}

/* 每天分组 */
.pc-trace-day {
    margin-bottom: 14px;
}

.pc-trace-day-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 4px;
    margin-bottom: 8px;
}

.pc-trace-day-label {
    font-size: 13px;
    font-weight: 900;
    color: #111;
}

.pc-trace-day-date {
    font-size: 11px;
    color: #8e8e93;
}

/* 记录卡片 */
.pc-trace-item {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 14px;
    padding: 12px 12px;
    margin-bottom: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    cursor: pointer;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.pc-trace-item:active { transform: scale(0.985); }

.pc-trace-item-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(102,126,234,0.9);
    box-shadow: 0 0 0 4px rgba(102,126,234,0.15);
    margin-top: 6px;
    flex-shrink: 0;
}

.pc-trace-item-main {
    flex: 1;
    min-width: 0;
}

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

.pc-trace-item-place {
    font-size: 14px;
    font-weight: 900;
    color: #111;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pc-trace-item-time {
    font-size: 11px;
    color: #8e8e93;
    flex-shrink: 0;
}

.pc-trace-item-event {
    font-size: 13px;
    color: #3a3a3c;
    line-height: 1.45;
}

.pc-trace-item-arrow {
    color: #c7c7cc;
    font-size: 18px;
    line-height: 1;
    margin-top: 2px;
    flex-shrink: 0;
}

/* 详情视图 */
.pc-trace-detail-view {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f2f2f7;
}

.pc-trace-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    padding-top: max(10px, env(safe-area-inset-top));
    background: rgba(248,248,248,0.95);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.pc-trace-detail-back {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    flex-shrink: 0;
}

.pc-trace-detail-back:active { transform: scale(0.95); }

.pc-trace-detail-title {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    color: #333;
}

.pc-trace-detail-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px 30px;
}

.pc-trace-detail-date {
    font-size: 12px;
    color: #8e8e93;
    margin-bottom: 6px;
}

.pc-trace-detail-place {
    font-size: 20px;
    font-weight: 900;
    color: #111;
    margin-bottom: 4px;
}

.pc-trace-detail-time {
    font-size: 12px;
    color: #8e8e93;
    margin-bottom: 14px;
}

/* 详情卡片 */
.pc-trace-card {
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(0,0,0,0.04);
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.05);
    padding: 14px 14px;
    margin-bottom: 12px;
}

.pc-trace-card-thought {
    background: rgba(102,126,234,0.08);
    border-color: rgba(102,126,234,0.18);
}

.pc-trace-card-user {
    background: rgba(255, 59, 125, 0.08);
    border-color: rgba(255, 59, 125, 0.18);
}

.pc-trace-card-label {
    font-size: 11px;
    font-weight: 900;
    color: #8e8e93;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.pc-trace-card-text {
    font-size: 14px;
    color: #111;
    line-height: 1.75;
    white-space: pre-wrap;
}

/* loading */
.pc-trace-loading {
    position: absolute;
    inset: 0;
    background: rgba(242,242,247,0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

.pc-trace-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #ddd;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: pcTraceSpin 0.8s linear infinite;
    margin-bottom: 15px;
}

.pc-trace-loading-text {
    font-size: 14px;
    color: #666;
}

/* ============ 查手机-行踪 end ============ */

/* ============ 查手机 - 淘宝页面 ============ */

.pc-taobao-screen {
    position: absolute;
    inset: 0;
    background: #f7f7f7;
    z-index: 40;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.pc-taobao-back-btn,
.pc-taobao-refresh-btn {
    position: absolute;
    top: 18px;
    width: 36px;
    height: 36px;
    border: 1px solid #111;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    box-shadow: none;
    z-index: 3;
}

.pc-taobao-back-btn {
    left: 16px;
}

.pc-taobao-refresh-btn {
    right: 16px;
}

.pc-taobao-list-view,
.pc-taobao-detail-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pc-taobao-list-view {
    padding: 72px 16px 18px;
}

.pc-taobao-title {
    font-size: 30px;
    font-weight: 700;
    color: #111;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.pc-taobao-subtitle {
    margin-top: 4px;
    font-size: 12px;
    color: #8a8a8a;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pc-taobao-list {
    margin-top: 18px;
    flex: 1;
    overflow-y: auto;
    padding-bottom: 20px;
}

.pc-taobao-list::-webkit-scrollbar {
    display: none;
}

.pc-taobao-empty {
    margin-top: 72px;
    text-align: center;
    font-size: 13px;
    line-height: 1.7;
    color: #8a8a8a;
}

.pc-taobao-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border-radius: 20px;
    border: 1px solid #111;
    background: #fff;
    box-shadow: none;
}

.pc-taobao-item-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 1px solid #111;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #111;
    box-shadow: none;
}

.pc-taobao-item-main {
    flex: 1;
    min-width: 0;
}

.pc-taobao-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.pc-taobao-item-title {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: #111;
    line-height: 1.45;
    word-break: break-word;
}

.pc-taobao-item-price {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 700;
    color: #111;
}

.pc-taobao-item-desc {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: #666;
    word-break: break-word;
}

.pc-taobao-item-meta {
    margin-top: 9px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #8a8a8a;
}

/* 详情页 */
.pc-taobao-detail-view {
    padding: 72px 16px 18px;
}

.pc-taobao-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.pc-taobao-detail-back {
    width: 32px;
    height: 32px;
    border: 1px solid #111;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    box-shadow: none;
}

.pc-taobao-detail-title {
    font-size: 16px;
    font-weight: 700;
    color: #111;
}

.pc-taobao-detail-content {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 18px;
}

.pc-taobao-detail-content::-webkit-scrollbar {
    display: none;
}

.pc-taobao-detail-time {
    font-size: 12px;
    color: #8a8a8a;
    margin-bottom: 12px;
    text-align: center;
}

.pc-taobao-product-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid #111;
    background: #fff;
    box-shadow: none;
    margin-bottom: 14px;
}

.pc-taobao-product-emoji {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    border: 1px solid #111;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #111;
    flex-shrink: 0;
    box-shadow: none;
}

.pc-taobao-product-main {
    flex: 1;
    min-width: 0;
}

.pc-taobao-product-title {
    font-size: 17px;
    font-weight: 700;
    color: #111;
    line-height: 1.45;
    word-break: break-word;
}

.pc-taobao-product-price {
    margin-top: 6px;
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

.pc-taobao-detail-section {
    margin-bottom: 12px;
    padding: 14px 15px;
    border-radius: 18px;
    border: 1px solid #111;
    background: #fff;
    box-shadow: none;
}

.pc-taobao-detail-label {
    font-size: 11px;
    font-weight: 700;
    color: #8a8a8a;
    margin-bottom: 7px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.pc-taobao-detail-text {
    font-size: 14px;
    line-height: 1.7;
    color: #111;
    white-space: pre-wrap;
    word-break: break-word;
}

/* loading */
.pc-taobao-loading {
    position: absolute;
    inset: 0;
    background: rgba(247, 247, 247, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.pc-taobao-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #ddd;
    border-top-color: #111;
    border-radius: 50%;
    animation: pcTaobaoSpin 0.8s linear infinite;
}

.pc-taobao-loading-text {
    margin-top: 12px;
    font-size: 13px;
    color: #666;
}

.pc-taobao-refresh-btn.loading {
    animation: pcTaobaoRotate 0.8s linear infinite;
}

@keyframes pcTaobaoSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pcTaobaoRotate {
    to {
        transform: rotate(360deg);
    }
}

/* ============ 查手机 - 丑团页面 ============ */

.pc-meituan-screen {
    position: absolute;
    inset: 0;
    background: #f7f7f7;
    z-index: 40;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.pc-meituan-back-btn,
.pc-meituan-refresh-btn {
    position: absolute;
    top: 18px;
    width: 36px;
    height: 36px;
    border: 1px solid #111;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    box-shadow: none;
    z-index: 3;
}

.pc-meituan-back-btn {
    left: 16px;
}

.pc-meituan-refresh-btn {
    right: 16px;
}

.pc-meituan-list-view,
.pc-meituan-detail-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pc-meituan-list-view {
    padding: 72px 16px 18px;
}

.pc-meituan-title {
    font-size: 30px;
    font-weight: 700;
    color: #111;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.pc-meituan-subtitle {
    margin-top: 4px;
    font-size: 12px;
    color: #8a8a8a;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pc-meituan-list {
    margin-top: 18px;
    flex: 1;
    overflow-y: auto;
    padding-bottom: 20px;
}

.pc-meituan-list::-webkit-scrollbar {
    display: none;
}

.pc-meituan-empty {
    margin-top: 72px;
    text-align: center;
    font-size: 13px;
    line-height: 1.7;
    color: #8a8a8a;
}

.pc-meituan-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border-radius: 20px;
    border: 1px solid #111;
    background: #fff;
    box-shadow: none;
}

.pc-meituan-item-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 1px solid #111;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #111;
    box-shadow: none;
}

.pc-meituan-item-main {
    flex: 1;
    min-width: 0;
}

.pc-meituan-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.pc-meituan-item-title {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: #111;
    line-height: 1.45;
    word-break: break-word;
}

.pc-meituan-item-price {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 700;
    color: #111;
}

.pc-meituan-item-desc {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: #666;
    word-break: break-word;
}

.pc-meituan-item-meta {
    margin-top: 9px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #8a8a8a;
}

/* 详情页 */
.pc-meituan-detail-view {
    padding: 72px 16px 18px;
}

.pc-meituan-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.pc-meituan-detail-back {
    width: 32px;
    height: 32px;
    border: 1px solid #111;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    box-shadow: none;
}

.pc-meituan-detail-title {
    font-size: 16px;
    font-weight: 700;
    color: #111;
}

.pc-meituan-detail-content {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 18px;
}

.pc-meituan-detail-content::-webkit-scrollbar {
    display: none;
}

.pc-meituan-detail-time {
    font-size: 12px;
    color: #8a8a8a;
    margin-bottom: 12px;
    text-align: center;
}

.pc-meituan-product-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid #111;
    background: #fff;
    box-shadow: none;
    margin-bottom: 14px;
}

.pc-meituan-product-emoji {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    border: 1px solid #111;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #111;
    flex-shrink: 0;
    box-shadow: none;
}

.pc-meituan-product-main {
    flex: 1;
    min-width: 0;
}

.pc-meituan-product-title {
    font-size: 17px;
    font-weight: 700;
    color: #111;
    line-height: 1.45;
    word-break: break-word;
}

.pc-meituan-product-price {
    margin-top: 6px;
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

.pc-meituan-detail-section {
    margin-bottom: 12px;
    padding: 14px 15px;
    border-radius: 18px;
    border: 1px solid #111;
    background: #fff;
    box-shadow: none;
}

.pc-meituan-detail-label {
    font-size: 11px;
    font-weight: 700;
    color: #8a8a8a;
    margin-bottom: 7px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.pc-meituan-detail-text {
    font-size: 14px;
    line-height: 1.7;
    color: #111;
    white-space: pre-wrap;
    word-break: break-word;
}

/* loading */
.pc-meituan-loading {
    position: absolute;
    inset: 0;
    background: rgba(247, 247, 247, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.pc-meituan-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #ddd;
    border-top-color: #111;
    border-radius: 50%;
    animation: pcMeituanSpin 0.8s linear infinite;
}

.pc-meituan-loading-text {
    margin-top: 12px;
    font-size: 13px;
    color: #666;
}

.pc-meituan-refresh-btn.loading {
    animation: pcMeituanRotate 0.8s linear infinite;
}

@keyframes pcMeituanSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pcMeituanRotate {
    to {
        transform: rotate(360deg);
    }
}

/* ============ 查手机 - 豆沙包页面 ============ */

.pc-douban-screen {
    position: absolute;
    inset: 0;
    background: #f2f2f7;
    z-index: 40;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.pc-douban-back-btn,
.pc-douban-refresh-btn {
    position: absolute;
    top: 18px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1c1c1e;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    z-index: 3;
}

.pc-douban-back-btn {
    left: 16px;
}

.pc-douban-refresh-btn {
    right: 16px;
}

.pc-douban-list-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 72px 16px 18px;
}

.pc-douban-title {
    font-size: 30px;
    font-weight: 700;
    color: #1c1c1e;
    line-height: 1.1;
}

.pc-douban-subtitle {
    margin-top: 4px;
    font-size: 13px;
    color: #8e8e93;
    letter-spacing: 0.5px;
}

.pc-douban-list {
    margin-top: 18px;
    flex: 1;
    overflow-y: auto;
    padding-bottom: 20px;
}

.pc-douban-list::-webkit-scrollbar {
    display: none;
}

.pc-douban-empty {
    margin-top: 72px;
    text-align: center;
    font-size: 13px;
    line-height: 1.7;
    color: #8e8e93;
}

.pc-douban-item {
    padding: 16px;
    margin-bottom: 14px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.pc-douban-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.pc-douban-question-title {
    flex: 1;
    min-width: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.55;
    color: #1c1c1e;
    word-break: break-word;
}

.pc-douban-item-time {
    flex-shrink: 0;
    font-size: 12px;
    color: #aeaeb2;
    line-height: 1.6;
    padding-top: 2px;
}

.pc-douban-answer {
    font-size: 14px;
    line-height: 1.75;
    color: #636366;
    word-break: break-word;
}

.pc-douban-os-box {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px dashed #f3c977;
    background: #fffaf0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.pc-douban-os-icon {
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1.6;
}

.pc-douban-os-text {
    font-size: 14px;
    line-height: 1.7;
    color: #8c6b2f;
    word-break: break-word;
}

/* loading */
.pc-douban-loading {
    position: absolute;
    inset: 0;
    background: rgba(242, 242, 247, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.pc-douban-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(142, 142, 147, 0.2);
    border-top-color: #636366;
    border-radius: 50%;
    animation: pcDoubanSpin 0.8s linear infinite;
}

.pc-douban-loading-text {
    margin-top: 12px;
    font-size: 13px;
    color: #636366;
}

.pc-douban-refresh-btn.loading {
    animation: pcDoubanRotate 0.8s linear infinite;
}

@keyframes pcDoubanSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pcDoubanRotate {
    to {
        transform: rotate(360deg);
    }
}

/* ============ 查手机 - 旅程页面 ============ */

.pc-trip-screen {
    position: absolute;
    inset: 0;
    background: #f7f7f7;
    z-index: 40;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.pc-trip-back-btn,
.pc-trip-refresh-btn {
    position: absolute;
    top: 18px;
    width: 36px;
    height: 36px;
    border: 1px solid #111;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    box-shadow: none;
    z-index: 3;
}

.pc-trip-back-btn {
    left: 16px;
}

.pc-trip-refresh-btn {
    right: 16px;
}

.pc-trip-list-view,
.pc-trip-detail-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.pc-trip-list-view {
    padding: 72px 16px 18px;
}

.pc-trip-title {
    font-size: 30px;
    font-weight: 700;
    color: #111;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.pc-trip-subtitle {
    margin-top: 4px;
    font-size: 12px;
    color: #8a8a8a;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pc-trip-list {
    margin-top: 18px;
    flex: 1;
    overflow-y: auto;
    padding-bottom: 20px;
}

.pc-trip-list::-webkit-scrollbar {
    display: none;
}

.pc-trip-empty {
    margin-top: 72px;
    text-align: center;
    font-size: 13px;
    line-height: 1.7;
    color: #8a8a8a;
}

.pc-trip-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border-radius: 20px;
    border: 1px solid #111;
    background: #fff;
    box-shadow: none;
}

.pc-trip-item-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 1px solid #111;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #111;
    box-shadow: none;
}

.pc-trip-item-main {
    flex: 1;
    min-width: 0;
}

.pc-trip-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.pc-trip-item-title {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: #111;
    line-height: 1.45;
    word-break: break-word;
}

.pc-trip-item-price {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 700;
    color: #111;
}

.pc-trip-item-desc {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: #666;
    word-break: break-word;
}

.pc-trip-item-meta {
    margin-top: 9px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #8a8a8a;
}

/* 详情页 */
.pc-trip-detail-view {
    padding: 72px 16px 18px;
}

.pc-trip-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.pc-trip-detail-back {
    width: 32px;
    height: 32px;
    border: 1px solid #111;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    box-shadow: none;
}

.pc-trip-detail-title {
    font-size: 16px;
    font-weight: 700;
    color: #111;
}

.pc-trip-detail-content {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 18px;
}

.pc-trip-detail-content::-webkit-scrollbar {
    display: none;
}

.pc-trip-detail-time {
    font-size: 12px;
    color: #8a8a8a;
    margin-bottom: 12px;
    text-align: center;
}

.pc-trip-product-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid #111;
    background: #fff;
    box-shadow: none;
    margin-bottom: 14px;
}

.pc-trip-product-emoji {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    border: 1px solid #111;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #111;
    flex-shrink: 0;
    box-shadow: none;
}

.pc-trip-product-main {
    flex: 1;
    min-width: 0;
}

.pc-trip-product-title {
    font-size: 17px;
    font-weight: 700;
    color: #111;
    line-height: 1.45;
    word-break: break-word;
}

.pc-trip-product-price {
    margin-top: 6px;
    font-size: 18px;
    font-weight: 700;
    color: #111;
}

.pc-trip-detail-section {
    margin-bottom: 12px;
    padding: 14px 15px;
    border-radius: 18px;
    border: 1px solid #111;
    background: #fff;
    box-shadow: none;
}

.pc-trip-detail-label {
    font-size: 11px;
    font-weight: 700;
    color: #8a8a8a;
    margin-bottom: 7px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.pc-trip-detail-text {
    font-size: 14px;
    line-height: 1.7;
    color: #111;
    white-space: pre-wrap;
    word-break: break-word;
}

/* loading */
.pc-trip-loading {
    position: absolute;
    inset: 0;
    background: rgba(247, 247, 247, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.pc-trip-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #ddd;
    border-top-color: #111;
    border-radius: 50%;
    animation: pcTripSpin 0.8s linear infinite;
}

.pc-trip-loading-text {
    margin-top: 12px;
    font-size: 13px;
    color: #666;
}

.pc-trip-refresh-btn.loading {
    animation: pcTripRotate 0.8s linear infinite;
}

@keyframes pcTripSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pcTripRotate {
    to {
        transform: rotate(360deg);
    }
}

/* ============ 查手机美化方案 ============ */

.pc-beautify-preset-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.pc-beautify-preset-btn {
    height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    color: #333;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.pc-beautify-preset-btn:active {
    transform: scale(0.98);
}

/* 通用弹窗遮罩 */
.pc-beautify-preset-modal,
.pc-beautify-json-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.28);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* 通用弹窗内容 */
.pc-beautify-preset-modal-content,
.pc-beautify-json-modal-content {
    width: 100%;
    max-width: 420px;
    max-height: 78vh;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
}

.pc-beautify-preset-modal-header,
.pc-beautify-json-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.pc-beautify-preset-modal-title,
.pc-beautify-json-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #222;
}

.pc-beautify-preset-close {
    border: none;
    background: transparent;
    color: #666;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 0;
}

/* 本地方案列表 */
.pc-beautify-preset-list {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px 16px;
}

.pc-beautify-preset-list::-webkit-scrollbar {
    display: none;
}

.pc-beautify-preset-empty {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 36px 0;
    line-height: 1.7;
}

.pc-beautify-preset-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

.pc-beautify-preset-info {
    flex: 1;
    min-width: 0;
}

.pc-beautify-preset-name {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    line-height: 1.45;
    word-break: break-word;
}

.pc-beautify-preset-time {
    margin-top: 4px;
    font-size: 12px;
    color: #999;
}

.pc-beautify-preset-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pc-beautify-preset-mini-btn {
    min-width: 48px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background: #fff;
    color: #333;
    font-size: 12px;
    font-weight: 600;
}

.pc-beautify-preset-mini-btn.danger {
    color: #e5484d;
    border-color: rgba(229, 72, 77, 0.18);
}

/* JSON 弹窗 */
.pc-beautify-file-box {
    padding: 16px;
}

.pc-beautify-file-tip {
    font-size: 13px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 12px;
}

#pcBeautifyImportFile {
    width: 100%;
    font-size: 13px;
    color: #333;
}

.pc-beautify-json-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 16px 16px;
}

/* ============ 查手机页面样式end ============ */

/* ====== 音乐功能 CSS START ====== */

/* 音乐主弹窗 */
.music-modal-card {
    max-height: 85vh;
    overflow-y: auto;
    padding: 24px 20px 20px;
    border-radius: 20px;
    width: 92%;
    max-width: 360px;
}

.music-modal-header {
    text-align: center;
    margin-bottom: 14px;
}

.music-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}

.music-modal-artist {
    font-size: 13px;
    color: #999;
}

/* 歌词区 */
.music-lyrics-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #f9f9f9;
    border-radius: 12px;
    margin-bottom: 4px;
}

.music-lyrics-wrap.expanded {
    max-height: 180px;
    overflow-y: auto;
    padding: 12px 14px;
    margin-bottom: 8px;
}

.music-lyrics-text {
    font-size: 13px;
    color: #555;
    line-height: 1.9;
    white-space: pre-wrap;
}

.music-lyrics-toggle {
    display: block;
    width: 100%;
    background: none;
    border: none;
    font-size: 12px;
    color: #aaa;
    text-align: center;
    padding: 4px 0 10px;
    cursor: pointer;
}

/* 控制区 */
.music-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 12px 0;
}

.music-ctrl-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: background 0.15s;
}

.music-ctrl-btn:active {
    background: #f0f0f0;
}

.music-play-btn {
    width: 52px;
    height: 52px;
    background: #333;
    color: #fff;
    border-radius: 50%;
}

.music-play-btn:active {
    background: #555;
}

/* 播放模式 + 悬浮条开关 */
.music-options-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 10px 0 16px;
}

.music-option-btn {
    flex: 1;
    padding: 8px 0;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    background: #fafafa;
    font-size: 12px;
    color: #555;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.music-option-btn:active {
    background: #f0f0f0;
}

.music-option-btn.active {
    border-color: #333;
    color: #333;
    font-weight: 600;
}

/* 歌单区 */
.music-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #999;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.music-song-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 12px;
}

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

.music-song-item:active,
.music-song-item.playing {
    background: #f0f0f0;
}

.music-song-item.playing .music-song-name {
    font-weight: 700;
    color: #333;
}

.music-song-name {
    flex: 1;
    font-size: 14px;
    color: #333;
}

.music-song-artist {
    font-size: 12px;
    color: #aaa;
    margin-left: 8px;
}

/* 添加歌曲按钮 */
.music-add-btn {
    width: 100%;
    padding: 12px;
    border: 1.5px dashed #ccc;
    border-radius: 12px;
    background: none;
    font-size: 14px;
    color: #888;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.music-add-btn:active {
    border-color: #333;
    color: #333;
}

/* 悬浮迷你播放器 */
#musicFloat {
    position: fixed;
    right: 16px;
    bottom: 80px;
    z-index: 9998;
    background: rgba(30, 30, 30, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 30px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.music-float-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.music-float-btn:active {
    background: rgba(255,255,255,0.15);
}



.phone-screen {
    overflow: visible !important;
}

/* ====== 音乐功能 CSS END ====== */