/* --- 基础样式与变量 --- */
:root {
    --app-height: 100vh;
    --app-font-size: 11px; 
    --bg-color: #f2f2f7; 
    --separator-color: #c6c6c8; 
    --blue: #007aff; 
    --red: #ff3b30; 
    --green: #34c759; 
    --orange: #ff9500; 
    --purple: #af52de; 
    --teal: #5ac8fa; 
}

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

/* 强制全局字体继承 */
body, input, textarea, select, button {
    font-family: inherit !important;
}

/* --- 核心全屏重置 (完美兼容 PWA Standalone) --- */
html, body {
    width: 100%;
    height: var(--app-height, 100vh);
    min-height: var(--app-height, 100vh);
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #FFFFFF;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

body {
    position: fixed;
    inset: 0;
}

@supports (-webkit-touch-callout: none) {
    html,
    body,
    #app-root,
    #activation-overlay,
    #wc-view-phone-sim {
        height: -webkit-fill-available;
        min-height: -webkit-fill-available;
    }
}

input, textarea, select {
    -webkit-user-select: auto !important;
    user-select: auto !important;
}

#app-root {
    position: absolute; 
    inset: 0;
    width: 100%;
    height: var(--app-height, 100vh);
    min-height: var(--app-height, 100vh);
    overflow: hidden;
    background-color: transparent;
    z-index: 1;
}

/* --- 主屏幕容器 --- */
.screen {
    position: absolute; 
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #fdfdfd 0%, #e5e5ea 100%);
    background-size: cover !important; 
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: flex; 
    flex-direction: column; 
    justify-content: space-between;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 1; 
}

/* --- SVG 图标通用类 --- */
.svg-icon { width: 24px; height: 24px; fill: currentColor; }

/* --- 桌面编辑栏 --- */
.desktop-edit-bar {
    position: absolute;
    top: env(safe-area-inset-top, 20px);
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    z-index: 1000;
    pointer-events: none; 
    opacity: 0;
    transition: opacity 0.3s ease;
}

.desktop-edit-bar.active {
    opacity: 1;
    pointer-events: auto;
}

.edit-btn {
    padding: 8px 16px;
    border-radius: 20px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

.edit-btn.primary {
    background: #fff;
    color: #000;
}

/* --- 桌面布局 --- */
.home-grid {
    flex: 1; display: grid;
    grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(7, 1fr);
    gap: clamp(15px, 3vh, 30px) clamp(10px, 3vw, 20px); 
    padding: 20px 20px 0 20px;
    justify-items: center; align-items: start;
    position: relative; 
    margin-bottom: 100px; 
}

/* --- 新版日系 INS 风小组件样式 (4x3) --- */
.ins-widget-container {
    grid-column: 1 / span 4; 
    grid-row: 1 / span 3; /* 关键：占3行，变成 4x3 大小 */
    width: 100%; 
    height: 100%;
    background: transparent; /* 无背景 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 15px;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* 上半部分 */
.ins-widget-top {
    display: flex; justify-content: space-between; align-items: flex-start;
    width: 100%; height: 120px;
    /* 👇 修改这里：增加顶部 padding 让内容下移，增加左右 padding 让头像拉近 */
    padding: 15px 30px 0 30px; 
    box-sizing: border-box;
}
.ins-avatar-group {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.ins-avatar {
    width: 65px; height: 65px; background-color: #f5f5f5;
    background-size: cover; background-position: center;
    border-radius: 48% 52% 45% 55% / 50% 45% 55% 50%; /* 手绘感边框 */
    border: 1px solid #dcdcdc;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.06), inset 0 0 4px rgba(255, 255, 255, 0.8);
    cursor: pointer; transition: transform 0.2s;
    display: flex; align-items: center; justify-content: center;
    color: #ccc; font-size: 10px;
}
.ins-avatar:active { transform: scale(0.95); }
.ins-label {
    background-color: #f0f0f0; color: #666; font-size: 11px;
    padding: 4px 10px; border-radius: 0; border: 1px solid #e8e8e8;
    outline: none; min-width: 50px; text-align: center; letter-spacing: 1px;
}
.ins-center-group {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 1; padding: 0 10px; 
    margin-top: 18px; /* 整体大幅度下移 */
    cursor: pointer;
}
.ins-widget-song {
    font-size: 14px; font-weight: 600; color: #333; /* 歌名放大 */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;
    margin-bottom: 6px; font-family: 'Georgia', serif;
}

/* 歌词滚动外层容器 (带边缘渐变消失效果) */
.ins-widget-lyric-wrapper {
    width: 130px; 
    overflow: hidden;
    margin-bottom: 12px; 
    white-space: nowrap;
    text-align: center; /* 默认居中对齐 */
    /* 两侧渐变透明遮罩，高级感拉满 */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.ins-widget-lyric {
    display: inline-block;
    font-size: 11px; color: #888; font-style: italic; 
    transition: transform 0.3s ease;
}
/* 只有当 JS 判断超长并加上 scrolling 类时，才执行来回滚动动画 */
.ins-widget-lyric.scrolling {
    text-align: left; /* 滚动时靠左对齐 */
    /* alternate 表示来回滚动(乒乓效果)，阅读体验更好 */
    animation: widgetScrollText 5s linear infinite alternate; 
}
@keyframes widgetScrollText {
    0%, 15% { transform: translateX(0); } /* 停顿一下再滚 */
    85%, 100% { transform: translateX(var(--scroll-dist, -20px)); } /* 滚到末尾停顿一下 */
}

.ins-widget-progress {
    width: 120px; height: 2px; background: #e5e5ea; border-radius: 1px; 
    margin-bottom: 12px; position: relative; /* 进度条变宽，间距拉大 */
}
.ins-widget-progress-fill {
    width: 0%; height: 100%; background: #333; border-radius: 1px; position: absolute; top: 0; left: 0; transition: width 0.1s linear;
}
.ins-widget-controls {
    display: flex; align-items: center; 
    gap: 18px; /* 按钮间距拉大 */
    color: #333;
}
.ins-widget-controls svg {
    width: 18px; height: 18px; fill: currentColor; cursor: pointer; transition: transform 0.1s; /* 左右切歌键放大 */
}
.ins-widget-controls svg:active { transform: scale(0.8); }
.ins-widget-controls svg:nth-child(2) {
    width: 24px; height: 24px; /* 播放暂停键放大 */
}

/* 下半部分 */
.ins-widget-bottom {
    display: flex; justify-content: space-between; align-items: flex-end;
    width: 100%; height: 150px;
}
.ins-bubbles {
    display: flex; flex-direction: column; gap: 6px; flex: 1;
    padding-right: 15px; justify-content: flex-end;
}
.ins-bubble {
    background-color: #fdfdfd; border: 1px solid #eaeaea; color: #555;
    font-size: 12px; padding: 8px 12px; outline: none; width: fit-content;
    max-width: 100%; word-break: break-all; box-shadow: 1px 2px 5px rgba(0,0,0,0.02);
}
.ins-bubble:nth-child(1) { border-radius: 12px 12px 12px 2px; }
.ins-bubble:nth-child(2) { border-radius: 2px 12px 12px 2px; }
.ins-bubble:nth-child(3) { border-radius: 2px 12px 12px 12px; }

.ins-picture {
    width: 220px; height: 150px; 
    background-color: #f5f5f5;
    background-size: cover; background-position: center;
    border-radius: 0; 
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; 
    position: relative;
    transition: filter 0.2s;
    overflow: visible; /* 允许外部边框显示 */
}
.ins-picture:active { filter: brightness(0.9); }
.ins-picture .placeholder { color: #aaa; font-size: 12px; letter-spacing: 2px; font-family: monospace; z-index: 10; }

/* 蕾丝虚线边框 (距离图片 5px，且不完整) */
.ins-picture::before {
    content: '';
    position: absolute;
    top: -5px; left: -5px; right: -5px; bottom: -5px;
    border: 1px dashed #c6c6c8; /* 灰白色蕾丝感 */
    pointer-events: none;
    z-index: 2;
    /* 制造不完整的边框效果：中间断开 */
    -webkit-mask-image: 
        linear-gradient(to right, black 15%, transparent 15%, transparent 25%, black 25%, black 75%, transparent 75%, transparent 85%, black 85%),
        linear-gradient(to bottom, black 15%, transparent 15%, transparent 25%, black 25%, black 75%, transparent 75%, transparent 85%, black 85%);
    -webkit-mask-composite: source-in;
    mask-image: 
        linear-gradient(to right, black 15%, transparent 15%, transparent 25%, black 25%, black 75%, transparent 75%, transparent 85%, black 85%),
        linear-gradient(to bottom, black 15%, transparent 15%, transparent 25%, black 25%, black 75%, transparent 75%, transparent 85%, black 85%);
    mask-composite: intersect;
}

/* 几何实线边框 (距离图片 8px，错位感，且不完整) */
.ins-picture::after {
    content: '';
    position: absolute;
    top: -8px; left: -8px; right: -8px; bottom: -8px;
    border: 1px solid #e5e5ea; /* 灰白色几何感 */
    pointer-events: none;
    z-index: 2;
    /* 制造不完整的边框效果：对角线断开 */
    -webkit-mask-image: linear-gradient(45deg, black 30%, transparent 30%, transparent 70%, black 70%);
    mask-image: linear-gradient(45deg, black 30%, transparent 30%, transparent 70%, black 70%);
}

/* --- APP 样式 --- */
.grid-cell { width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-start; position: relative; }
.app-item { display: flex; flex-direction: column; align-items: center; width: 100%; cursor: pointer; position: relative; z-index: 1; }
.app-item.dragging { opacity: 0.5; }
.app-ghost { position: fixed; pointer-events: none; z-index: 9999; width: 70px; height: 70px; opacity: 0.9; transform: scale(1.1); display: flex; flex-direction: column; align-items: center; }
.app-ghost .app-icon { box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
.app-ghost .app-name { display: none; }

/* 抖动动画 (编辑模式) */
@keyframes shake {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}
.shaking .app-icon, .shaking .ls-widget-inner {
    animation: shake 0.25s infinite linear;
}
.edit-mode .app-item::after {
    content: '−';
    position: absolute;
    top: -5px;
    left: -5px;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.8);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    display: none; 
}

.app-icon {
    width: 60px; height: 60px;
    background-color: #f0f0f0; background-size: cover; background-position: center;
    border-radius: 14px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 5px; transition: transform 0.1s; position: relative;
    display: flex; align-items: center; justify-content: center;
}
/* 👇 核心修改：当检测到上传了图片(有url)时，彻底去除底色、边框和阴影 */
.app-icon[style*="url"] {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
.app-icon:active { filter: brightness(0.8); transform: scale(0.95); }
.app-name {
    color: white; font-size: var(--app-font-size);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5); text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;
    transition: font-size 0.1s; pointer-events: none;
}
/* 👇 核心修改：高级负空间实心风 (INS/iOS 顶级质感) */
.default-icon-svg { 
    width: 32px; height: 32px; 
    fill: #2C2C2E; /* iOS 经典深灰黑，比纯黑更柔和高级 */
    stroke: none; 
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.05)); /* 增加极微弱的阴影，提升立体感 */
}
.app-icon[style*="url"] .default-icon-svg { display: none; }

/* --- Dock 栏 --- */
.dock-container { 
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%; 
    display: flex; 
    justify-content: center; 
    padding: 0 15px calc(env(safe-area-inset-bottom) + 15px) 15px;
    z-index: 10;
}
.dock {
    width: 100%; height: 85px;
    background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
    border-radius: 35px; display: flex; justify-content: space-around; align-items: center; padding: 0 15px;
}
.dock .app-item { width: auto; }
.dock .app-icon { margin-bottom: 0; }
.dock .app-name { font-size: 11px !important; display: none; }

/* --- 模态框通用 --- */
.settings-modal {
    position: absolute; 
    top: 0; left: 0; width: 100%; height: var(--app-height, 100dvh); min-height: var(--app-height, 100dvh); height: 100dvh;
    background-color: var(--bg-color); z-index: 1000;
    display: none; 
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s ease;
    flex-direction: column; padding-top: env(safe-area-inset-top, 20px);
}
.settings-modal.open { 
    display: flex; 
    opacity: 1; 
    transform: scale(1);
}

.settings-modal.sub-page { 
    display: flex; 
    transform: translateX(100%); 
    z-index: 1100; 
    opacity: 1; 
}
.settings-modal.sub-page.open { transform: translateX(0); }

.settings-header {
    padding: 0 15px; background: #fff; display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #e5e5e5; height: 50px; flex-shrink: 0;
}
.header-left, .header-right { width: 80px; display: flex; align-items: center; }
.header-right { justify-content: flex-end; }
.header-title { font-weight: 600; font-size: 17px; flex: 1; text-align: center; }
.nav-btn { color: var(--blue); background: none; border: none; font-size: 17px; cursor: pointer; padding: 10px 0; display: flex; align-items: center; }
.back-svg { width: 20px; height: 20px; fill: var(--blue); margin-right: 2px; }

.settings-content { 
    flex: 1; 
    overflow-y: auto; 
    padding: 20px; 
    padding-bottom: calc(100px + env(safe-area-inset-bottom)); 
    position: relative; 
}

/* --- Theme Studio 样式 --- */
.tab-content { display: none; animation: fadeIn 0.3s ease; }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.settings-tab-bar {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 60px;
    background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(20px);
    border-top: 1px solid #c6c6c8;
    display: flex; justify-content: space-around; align-items: center;
    padding-bottom: env(safe-area-inset-bottom, 10px); z-index: 10;
}
.tab-item { flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; color: #999; font-size: 16px; font-weight: 600; cursor: pointer; flex-direction: column; gap: 4px; }
.tab-item.active { color: var(--blue); }
.tab-icon { width: 24px; height: 24px; fill: currentColor; }
.tab-label { font-size: 10px; }

.settings-group { background: #fff; border-radius: 10px; margin-bottom: 20px; padding: 0 15px; overflow: hidden; }
.settings-title { font-size: 13px; color: #6d6d72; margin-bottom: 8px; margin-left: 15px; text-transform: uppercase; }
.settings-row { padding: 12px 0; border-bottom: 1px solid #e5e5e5; display: flex; flex-direction: column; gap: 8px; }
.settings-row:last-child { border-bottom: none; }
.row-label { font-size: 15px; font-weight: 500; }

input[type="text"], input[type="password"], select, textarea { 
    width: 100%; padding: 10px; border: 1px solid #e5e5e5; border-radius: 8px; 
    font-size: 16px; background: #f9f9f9; -webkit-appearance: none; font-family: inherit; 
}

.ios-select, .ios-textarea {
    background-color: #f2f2f7;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-size: 16px;
    color: #000;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}
.ios-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%238e8e93'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 30px;
}
.ios-textarea { min-height: 120px; resize: none; }

textarea { resize: vertical; min-height: 100px; }
input[type="range"] { width: 100%; margin: 10px 0; accent-color: var(--blue); }
button.action-btn { width: 100%; padding: 12px; background-color: var(--blue); color: white; border: none; border-radius: 10px; font-size: 15px; cursor: pointer; font-weight: 600; margin-top: 5px; }
button.action-btn.secondary { background-color: #e5e5ea; color: #000; }
button.action-btn.destructive { background-color: #ff3b30; color: white; margin-top: 10px; }

.wallpaper-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 15px 0; }
.wallpaper-item { aspect-ratio: 9/16; border-radius: 8px; background-size: cover; background-position: center; position: relative; cursor: pointer; border: 2px solid transparent; overflow: hidden; }
.wallpaper-delete { position: absolute; top: 0; right: 0; width: 30px; height: 30px; background: rgba(0,0,0,0.5); color: white; border-bottom-left-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; z-index: 2; }
.preset-list { display: flex; flex-wrap: wrap; gap: 10px; min-height: 30px; }
.preset-tag { background: var(--blue); color: white; padding: 0; border-radius: 18px; font-size: 13px; display: flex; align-items: stretch; box-shadow: 0 2px 4px rgba(0,0,0,0.1); overflow: hidden; }
.preset-name { padding: 8px 12px; cursor: pointer; display: flex; align-items: center; }
.preset-delete { background: rgba(0,0,0,0.15); width: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; font-weight: bold; border-left: 1px solid rgba(255,255,255,0.1); }

.app-edit-item { display: flex; align-items: center; gap: 15px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.hidden-file-input { display: none; }
.app-edit-preview { width: 54px; height: 54px; background-color: #f0f0f0; border-radius: 12px; background-size: cover; background-position: center; flex-shrink: 0; cursor: pointer; position: relative; border: 1px solid #e5e5e5; display: flex; align-items: center; justify-content: center; }
.camera-icon { width: 24px; height: 24px; fill: #999; opacity: 0.5; }
.app-edit-preview[style*="url"] .camera-icon { display: none; }
.app-edit-inputs { flex: 1; display: flex; flex-direction: column; gap: 8px; }

/* --- iOS 设置页面样式 --- */
.ios-settings-content { padding: 0; background-color: #f2f2f7; }
.ios-search-bar { padding: 10px 16px; background: #f2f2f7; }
.ios-search-input { width: 100%; background: #e3e3e8; border: none; border-radius: 10px; padding: 8px 12px; font-size: 16px; color: #000; text-align: center; }

.ios-profile-card { display: flex; align-items: center; background: #fff; padding: 12px 16px; margin-bottom: 20px; cursor: pointer; }
.ios-profile-card:active { background-color: #e5e5e5; }
.ios-profile-avatar { width: 60px; height: 60px; border-radius: 50%; background: #e5e5ea; margin-right: 15px; display: flex; align-items: center; justify-content: center; color: #8e8e93; font-size: 24px; font-weight: 500; background-size: cover; background-position: center; overflow: hidden; }
.ios-profile-info { flex: 1; }
.ios-profile-info h3 { font-size: 19px; font-weight: 400; margin-bottom: 4px; }
.ios-profile-info p { font-size: 13px; color: #333; }

.ios-list-group { background: #fff; margin-bottom: 20px; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
@media (min-width: 400px) { .ios-list-group { border-radius: 10px; margin: 0 16px 20px 16px; border: none; } }

.ios-list-item { display: flex; align-items: center; padding-left: 16px; min-height: 44px; cursor: pointer; }
.ios-list-item:active { background-color: #e5e5e5; }
.ios-icon-box { width: 29px; height: 29px; border-radius: 7px; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0; }
.ios-icon-box svg { width: 18px; height: 18px; fill: white; }

.ios-item-content { flex: 1; display: flex; align-items: center; justify-content: space-between; padding-right: 16px; padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid #e5e5e5; height: 100%; }
.ios-list-item:last-child .ios-item-content { border-bottom: none; }

.ios-item-label { font-size: 16px; color: #000; }
.ios-item-right { display: flex; align-items: center; color: #8e8e93; font-size: 16px; }
.chevron-right { width: 14px; height: 14px; fill: #c7c7cc; margin-left: 6px; opacity: 0.7; }

/* --- Apple ID 页面专用样式 --- */
.profile-header {
    display: flex; flex-direction: column; align-items: center; padding: 30px 0; background: #fff; border-bottom: 1px solid #e5e5e5;
}
.profile-header-avatar {
    width: 80px; height: 80px; border-radius: 50%; background: #e5e5ea; margin-bottom: 15px;
    background-size: cover; background-position: center; position: relative; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 32px; color: #8e8e93;
}
.profile-edit-badge {
    position: absolute; bottom: 0; right: 0; background: var(--blue); color: white;
    font-size: 10px; padding: 2px 6px; border-radius: 10px; border: 2px solid #fff;
}
.profile-header-name { font-size: 22px; font-weight: 600; margin-bottom: 5px; cursor: pointer; }
.profile-header-email { font-size: 14px; color: #8e8e93; }

/* --- 存储分析弹窗样式 --- */
.storage-chart-container {
    display: flex; flex-direction: column; align-items: center; padding: 20px;
}
.chart-wrapper { position: relative; width: 180px; height: 180px; margin-bottom: 20px; }
.chart-canvas { width: 100%; height: 100%; transform: rotate(-90deg); }
.chart-center-text {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    text-align: center;
}
.chart-total { font-size: 24px; font-weight: 600; color: #000; }
.chart-label { font-size: 12px; color: #8e8e93; }

.chart-legend { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.legend-item { display: flex; align-items: center; font-size: 14px; }
.legend-color { width: 12px; height: 12px; border-radius: 3px; margin-right: 10px; }
.legend-name { flex: 1; }
.legend-value { color: #8e8e93; }

/* --- 世界书 (Worldbook) 样式 --- */
.wb-view-container {
    display: flex; width: 200%; height: 100%;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.wb-view-page { width: 50%; height: 100%; overflow-y: auto; position: relative; padding-bottom: 80px; }

.wb-list-container { background: #fff; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
.wb-list-item-wrapper { position: relative; overflow: hidden; border-bottom: 1px solid #e5e5e5; height: 60px; }
.wb-list-item-wrapper:last-child { border-bottom: none; }

.wb-swipe-box {
    display: flex; width: 100%; height: 100%;
    transition: transform 0.2s ease-out;
    will-change: transform;
}

.wb-list-item {
    width: 100%; flex-shrink: 0; background: #fff;
    display: flex; align-items: center; padding: 0 16px;
    cursor: pointer;
}
.wb-list-item:active { background-color: #f2f2f7; }

.wb-item-info { flex: 1; overflow: hidden; }
.wb-item-title { font-size: 17px; font-weight: 600; color: #000; margin-bottom: 4px; }
.wb-item-desc { font-size: 13px; color: #8e8e93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-item-type { font-size: 12px; color: var(--blue); background: rgba(0,122,255,0.1); padding: 2px 6px; border-radius: 4px; margin-left: 8px; vertical-align: middle; }

.wb-delete-btn {
    width: 80px; height: 100%; background: var(--red); color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 15px; flex-shrink: 0;
}

.wb-group-item { background: #fff; border-bottom: 1px solid #e5e5e5; }
.wb-group-swipe-wrapper { position: relative; overflow: hidden; height: 50px; background: #fff; }

.wb-group-header {
    padding: 0 16px; display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; background: #fff; width: 100%; height: 100%; flex-shrink: 0;
}
.wb-group-header:active { background: #f2f2f7; }
.wb-group-name { font-size: 17px; font-weight: 600; }
.wb-group-count { color: #8e8e93; font-size: 15px; }

.wb-group-content {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out;
    background: #f9f9f9;
}
.wb-group-content.expanded { max-height: 1000px; transition: max-height 0.5s ease-in; }

.wb-group-content .wb-list-item-wrapper { border-bottom: 1px solid #e5e5e5; padding-left: 16px; height: 44px; }
.wb-group-content .wb-list-item { background: #f9f9f9; padding: 10px 16px 10px 0; height: 100%; }
.wb-group-content .wb-item-title { font-size: 15px; margin-bottom: 0; }
.wb-group-content .wb-item-desc { display: none; }
.wb-group-content .wb-item-type { display: none; }

.wb-add-group-btn {
    margin: 20px 16px; padding: 12px; background: #e5e5ea; color: var(--blue);
    text-align: center; border-radius: 10px; font-weight: 600; cursor: pointer;
}
/* ========================================== */
/* 世界书：日记本目录弹窗 UI */
/* ========================================== */
.notebook-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    display: none; /* 默认隐藏 */
    justify-content: center;
    align-items: center;
    z-index: 3000;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.notebook-modal-overlay.active {
    opacity: 1;
}

.notebook-modal {
    width: 320px;
    height: 550px;
    background: #FDFBF7; /* 奶白纸张色 */
    border-radius: 4px 16px 16px 4px;
    box-shadow: 15px 20px 40px rgba(0,0,0,0.2), inset -5px 0 15px rgba(0,0,0,0.02);
    position: relative;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.notebook-modal-overlay.active .notebook-modal {
    transform: scale(1);
}

/* 左侧线圈装订区 */
.notebook-binding {
    position: absolute; top: 0; left: 0; width: 24px; height: 100%;
    background: linear-gradient(to right, #EAEAEA, #FDFBF7);
    border-right: 1px solid rgba(0,0,0,0.05);
    border-radius: 4px 0 0 4px; z-index: 10;
}
.notebook-binding::before {
    content: ''; position: absolute; top: 20px; bottom: 20px; left: 6px; width: 8px;
    background-image: radial-gradient(circle, #333 3px, transparent 3.5px);
    background-size: 8px 24px; background-repeat: repeat-y; opacity: 0.8;
}
.notebook-binding::after {
    content: ''; position: absolute; top: 20px; bottom: 20px; left: -4px; width: 16px;
    background-image: linear-gradient(to bottom, #b0b0b0 2px, transparent 2px);
    background-size: 16px 24px; background-repeat: repeat-y;
    filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.2));
}

/* 纸张内容区 */
.notebook-page {
    flex: 1; margin-left: 24px; padding: 30px 24px 20px 20px;
    display: flex; flex-direction: column; position: relative;
    background-image: repeating-linear-gradient(transparent, transparent 39px, rgba(212, 196, 183, 0.3) 39px, rgba(212, 196, 183, 0.3) 40px);
    background-attachment: local;
}

/* 右上角书签关闭按钮 */
.close-bookmark {
    position: absolute; top: -5px; right: 20px; width: 24px; height: 40px;
    background: #C28E7E; color: #fff; display: flex; justify-content: center;
    padding-top: 8px; font-size: 14px; font-weight: bold; cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%);
    transition: transform 0.2s; z-index: 20;
}
.close-bookmark:active { transform: translateY(-2px); }

.page-title {
    font-family: 'Georgia', 'Kaiti', serif; font-size: 22px; font-weight: bold;
    color: #4A413E; margin-bottom: 10px; font-style: italic;
}
.page-subtitle {
    font-size: 10px; color: #9E948F; text-transform: uppercase;
    letter-spacing: 2px; margin-bottom: 30px; font-family: monospace;
}

/* 目录列表区 */
.toc-list {
    flex: 1; display: flex; flex-direction: column; gap: 16px;
    animation: tocFadeIn 0.4s ease;
}
@keyframes tocFadeIn {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

.toc-item {
    display: flex; align-items: baseline; cursor: pointer;
    transition: opacity 0.2s; line-height: 24px;
}
.toc-item:active { opacity: 0.5; }
.toc-title {
    font-family: 'Georgia', 'Kaiti', serif; font-size: 15px; font-weight: bold;
    color: #3A3533; white-space: nowrap; max-width: 160px;
    overflow: hidden; text-overflow: ellipsis;
}
.toc-dots {
    flex: 1; border-bottom: 2px dotted #D4C4B7; margin: 0 8px;
    position: relative; top: -4px; opacity: 0.6;
}
.toc-action {
    font-size: 12px; color: #C28E7E; font-family: monospace; font-weight: bold;
}

/* 底部翻页器 */
.pagination {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 20px; padding-top: 15px; border-top: 1px solid rgba(212, 196, 183, 0.3);
}
.page-btn {
    background: transparent; border: none; font-family: 'Georgia', serif;
    font-size: 14px; font-style: italic; color: #4A413E; cursor: pointer;
    padding: 5px 10px; transition: color 0.2s;
}
.page-btn:disabled { color: #CCC; cursor: not-allowed; }
.page-btn:not(:disabled):active { color: #C28E7E; }
.page-info { font-size: 11px; color: #9E948F; font-family: monospace; letter-spacing: 1px; }

/* --- 通用弹窗 --- */
.custom-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.custom-modal-overlay.active { opacity: 1; pointer-events: auto; }
.custom-modal { background: rgba(245, 245, 245, 0.95); backdrop-filter: blur(10px); width: 280px; border-radius: 14px; overflow: hidden; text-align: center; transform: scale(1.1); transition: transform 0.2s; }
.custom-modal-overlay.active .custom-modal { transform: scale(1); }
.modal-title { padding: 20px 15px 5px 15px; font-weight: 600; font-size: 17px; }
.modal-desc { padding: 0 15px 15px 15px; font-size: 13px; color: #666; }
.modal-input-container { padding: 0 15px 15px 15px; display: none; }
.modal-input-container.show { display: block; }
.modal-input-container input { background: #fff; border: 1px solid #ccc; text-align: left; }
.modal-buttons { display: flex; border-top: 1px solid #ccc; }
.modal-btn { flex: 1; padding: 12px; background: transparent; border: none; font-size: 17px; cursor: pointer; color: var(--blue); border-right: 1px solid #ccc; }
.modal-btn:last-child { border-right: none; font-weight: 600; }
.modal-btn.destructive { color: #ff3b30; }
.modal-btn:active { background: rgba(0,0,0,0.05); }

/* --- 新增：纯正 iOS 系统提示弹窗 --- */
.ios-alert-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); z-index: 100000; /* 修复：提高层级，确保在激活页面之上 */
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.ios-alert-overlay.active { opacity: 1; pointer-events: auto; }
.ios-alert-box {
    background: rgba(242, 242, 242, 0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    width: 270px; border-radius: 14px; overflow: hidden; text-align: center;
    transform: scale(1.1); transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.ios-alert-overlay.active .ios-alert-box { transform: scale(1); }
.ios-alert-title { padding: 20px 16px 4px 16px; font-weight: 600; font-size: 17px; color: #000; }
.ios-alert-message { padding: 0 16px 20px 16px; font-size: 13px; color: #000; line-height: 1.4; }
.ios-alert-btn {
    width: 100%; padding: 12px; background: transparent; border: none;
    border-top: 0.5px solid rgba(60, 60, 67, 0.29);
    font-size: 17px; font-weight: 600; color: #007AFF; cursor: pointer;
}
.ios-alert-btn:active { background: rgba(0,0,0,0.05); }

/* --- iOS 系统级加载通知 --- */
.wc-ios-loading-overlay {
    position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
    width: auto; height: auto; background: transparent; z-index: 20000;
    display: flex; align-items: flex-start; justify-content: center;
    opacity: 1; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none;
}
.wc-ios-loading-overlay.hidden { opacity: 0; transform: translateX(-50%) translateY(-20px); pointer-events: none; }
.wc-ios-loading-box {
    min-width: 200px; height: 50px; background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-radius: 25px; display: flex; flex-direction: row; align-items: center;
    justify-content: center; padding: 0 20px; color: #000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); gap: 10px; pointer-events: auto;
}
.wc-ios-spinner {
    width: 20px; height: 20px; border: 2px solid rgba(0,0,0,0.1);
    border-top: 2px solid #000; border-radius: 50%; animation: wcSpin 1s linear infinite; margin-bottom: 0;
}
@keyframes wcSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.wc-ios-success-icon, .wc-ios-error-icon { width: 24px; height: 24px; stroke: #000; stroke-width: 2; fill: none; margin-bottom: 0; }
.wc-ios-success-icon { stroke: var(--green); }
.wc-ios-error-icon { stroke: var(--red); }
.wc-ios-success-icon.hidden, .wc-ios-error-icon.hidden { display: none; }
.wc-ios-loading-text { font-size: 14px; font-weight: 500; color: #000; }

/* --- iOS Notification Banner --- */
#ios-notification-container {
    position: fixed; top: 10px; left: 0; width: 100%; z-index: 9999;
    display: flex; flex-direction: column; align-items: center; pointer-events: none;
}
.ios-notification-banner {
    width: 90%; max-width: 360px; background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 12px; margin-bottom: 10px; display: flex; align-items: flex-start;
    pointer-events: auto; cursor: pointer; transform: translateY(-100px);
    opacity: 0; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}
.ios-notification-banner.active { transform: translateY(0); opacity: 1; }
.ios-notif-icon { width: 38px; height: 38px; border-radius: 8px; margin-right: 12px; flex-shrink: 0; object-fit: cover; }
.ios-notif-content { flex: 1; overflow: hidden; }
.ios-notif-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.ios-notif-title { font-size: 15px; font-weight: 600; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ios-notif-time { font-size: 12px; color: #8E8E93; }
.ios-notif-msg { font-size: 14px; color: #333; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }

.wc-unread-badge {
    position: absolute; top: -5px; right: -5px; background: #FF3B30; color: white;
    border-radius: 10px; padding: 0 6px; font-size: 12px; min-width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center; z-index: 10;
    border: 1px solid #fff; font-weight: 600;
}

/* ========================================== */
/* WeChat App 样式 */
/* ========================================== */
#wechat-root {
    --wc-bg-color: #F2F2F7; 
    --wc-chat-bg: #EDEDED; 
    --wc-card-color: #FFFFFF;    
    --wc-text-primary: #000000; 
    --wc-text-secondary: #8E8E93;
    --wc-accent-blue: #007AFF; 
    --wc-accent-green: #34C759; 
    --wc-danger-red: #FF3B30;
    --wc-pin-gray: #C7C7CC; 
    --wc-transfer-orange: #FA9D3B; 
    --wc-separator: #C6C6C8;
    --wc-safe-area-top: env(safe-area-inset-top, 20px);
    --wc-safe-area-bottom: env(safe-area-inset-bottom, 20px);
    --wc-input-height: 56px; 
    --wc-panel-height: 300px; 
    --wc-navbar-height: 54px;

    width: 100%; 
    height: 100%; 
    position: relative; 
    overflow: hidden;
    background-color: var(--wc-bg-color); 
    color: var(--wc-text-primary);
    display: flex; 
    flex-direction: column;
}

#wechat-root * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; font-family: inherit; outline: none; user-select: none; }
#wechat-root input, #wechat-root textarea { user-select: auto; }

.wc-icon { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.wc-icon-fill { fill: currentColor; stroke: none; }

.wc-navbar {
    height: calc(var(--wc-navbar-height) + var(--wc-safe-area-top));
    padding-top: var(--wc-safe-area-top);
    background: rgba(242, 242, 247, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: space-between;
    padding-left: 16px; padding-right: 16px; position: absolute; top: 0; width: 100%; z-index: 1300;
    border-bottom: 0.5px solid rgba(0,0,0,0.1);
}
.wc-nav-left, .wc-nav-right { width: 80px; display: flex; align-items: center; }
.wc-nav-right { justify-content: flex-end; gap: 15px; }
.wc-nav-title { font-weight: 600; font-size: 18px; flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-nav-btn { background: none; border: none; color: var(--wc-text-primary); font-size: 16px; cursor: pointer; padding: 0; display: flex; align-items: center; }

.wc-main-content {
    flex: 1; overflow-y: auto;
    padding-top: calc(var(--wc-navbar-height) + var(--wc-safe-area-top));
    padding-bottom: 80px; -webkit-overflow-scrolling: touch; position: relative;
}

.wc-page {
    display: none; padding: 16px; min-height: 100%; position: absolute;
    top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto;
    padding-top: calc(var(--wc-navbar-height) + var(--wc-safe-area-top));
    padding-bottom: 80px; background-color: var(--wc-bg-color);
}
.wc-page.active { display: block; animation: wcFadeIn 0.2s ease; }

/* 修复：补充缺失的 wcFadeIn 动画，防止页面切换生硬 */
@keyframes wcFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

#wc-view-chat-detail {
    padding: 0; background-color: var(--wc-chat-bg); display: none; flex-direction: column;
    height: 100%; position: absolute; top: 0; left: 0; width: 100%; z-index: 1100; overflow: hidden;
}
#wc-view-chat-detail.active { display: flex; }

.wc-chat-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 1; z-index: -1; }
.wc-chat-scroll-area {
    flex: 1; overflow-y: auto;
    padding: calc(var(--wc-navbar-height) + var(--wc-safe-area-top) + 10px) 16px 20px 16px;
    display: flex; flex-direction: column; gap: 16px;
    transition: padding-bottom 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    position: relative; z-index: 1; overscroll-behavior: contain; scroll-behavior: auto;
}

.wc-message-row { display: flex; align-items: flex-start; gap: 8px; max-width: 100%; position: relative; }
.wc-message-row.me { flex-direction: row-reverse; }
.wc-message-row.system { justify-content: center; flex-direction: row; align-items: center; margin: 10px 0; }
.wc-chat-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 0.5px solid rgba(0,0,0,0.1); }

.wc-msg-checkbox { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #C6C6C8; margin-right: 10px; display: none; flex-shrink: 0; align-self: center; }
.wc-msg-checkbox.checked { background: var(--wc-accent-blue); border-color: var(--wc-accent-blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-size: 70%; background-position: center; background-repeat: no-repeat; }
.multi-select-mode .wc-msg-checkbox { display: block; }

.wc-bubble-container { display: flex; flex-direction: column; max-width: 75%; }
.wc-message-row.me .wc-bubble-container { align-items: flex-end; }

/* 修复：普通消息过长不换行的问题，升级为更标准的断行属性 */
.wc-bubble {
    padding: 8px 12px; border-radius: 10px; font-size: 16px; line-height: 1.5;
    word-wrap: break-word; word-break: break-all; overflow-wrap: break-word; white-space: pre-wrap;
    position: relative; user-select: text; min-height: 32px;
    display: flex; flex-direction: column; align-items: flex-start;
    max-width: 100%;
}
.wc-bubble.them { background: #F2F2F7; color: #000; border: none; }
.wc-bubble.me { background: #FFFFFF; color: #000; border: 0.5px solid rgba(0,0,0,0.05); align-items: flex-end; }
.wc-bubble.me:has(.wc-quote-block) { align-items: flex-start; }

/* 隐藏特殊气泡（表情包、图片、邀请卡片等）的小圆点，保持干净 */
.wc-bubble-sticker::after, .wc-bubble-img::after, .wc-bubble.invite::after, .wc-bubble.transfer::after {
    display: none !important;
}

.wc-bubble-sticker { background: transparent !important; border: none !important; padding: 0; }
.wc-sticker-img { max-width: 120px; max-height: 120px; border-radius: 4px; }
/* --- 修改：限制真实图片的最大尺寸 --- */
.wc-bubble-img { 
    max-width: 160px; /* 原来是 100%，现在改小 */
    max-height: 200px; 
    border-radius: 10px; 
    display: block; 
    object-fit: cover; /* 保持比例裁剪 */
    cursor: pointer;
}

/* --- 新增：文字描述图片的 100x100 占位图样式 --- */
.wc-text-img-placeholder {
    width: 100px;
    height: 100px;
    background-color: #E5E5EA;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #8E8E93;
    font-size: 10px;
    border: 1px solid #D1D1D6;
    overflow: hidden;
    text-align: center;
    padding: 5px;
}

.wc-text-img-placeholder svg {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    opacity: 0.5;
}

/* --- 修改：朋友圈图片占位符强制 100x100 --- */
.wc-moment-image-placeholder {
    width: 100px !important;  /* 强制宽度 */
    height: 100px !important; /* 强制高度 */
    max-width: none !important;
    background: #F2F2F7;
    border: 1px solid #E5E5EA;
    border-radius: 4px;
    padding: 0 !important; /* 清除内边距 */
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--wc-text-secondary);
    font-size: 10px !important;
    text-align: center;
    overflow: hidden;
}

/* 修复：引用消息过长不换行的问题 */
.wc-quote-block {
    font-size: 12px; color: #666; background: rgba(0,0,0,0.05); padding: 4px 8px;
    border-left: 3px solid #C6C6C8; margin-bottom: 6px; border-radius: 2px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    word-wrap: break-word; word-break: break-all; max-width: 100%; width: 100%; text-align: left;
}

/* 限制聊天气泡内引用的图片大小 */
.wc-quote-block img {
    max-height: 40px;
    max-width: 40px;
    vertical-align: middle;
    border-radius: 4px;
    margin-left: 4px;
    object-fit: contain;
}

.wc-bubble.voice { display: flex; flex-direction: row; align-items: center; gap: 4px; min-width: 60px; cursor: pointer; height: 36px; padding: 0 12px; }
.wc-bubble.voice.me { flex-direction: row-reverse; }
.wc-voice-bars { display: flex; align-items: center; gap: 3px; height: 16px; }
.wc-voice-bar { width: 3px; background-color: #000; border-radius: 2px; animation: wcVoiceWave 1s infinite ease-in-out; animation-play-state: paused; }
.wc-bubble.voice:active .wc-voice-bar { animation-play-state: running; }
.wc-voice-bar:nth-child(1) { height: 8px; animation-delay: 0s; }
.wc-voice-bar:nth-child(2) { height: 16px; animation-delay: 0.2s; }
.wc-voice-bar:nth-child(3) { height: 10px; animation-delay: 0.4s; }
@keyframes wcVoiceWave { 0%, 100% { height: 6px; } 50% { height: 16px; } }

/* ========================================== */
/* 高级感 INS 韩系风转账卡片 (严格锁定 220x150px) */
/* ========================================== */
.wc-bubble.transfer {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.ins-transfer-card {
    width: 180px !important;
    height: 120px !important;
    background: #FFFFFF;
    border-radius: 18px;
    border: 1px solid #F0F0F0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.3s ease;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 4px;
}

.ins-transfer-card:active {
    transform: scale(0.97);
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

/* 顶部标签 */
.ins-transfer-header {
    padding: 16px 16px 0 16px;
    display: flex;
    justify-content: flex-start;
}

.ins-transfer-tag {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #999;
    text-transform: uppercase;
}

/* 中间金额与备注 */
.ins-transfer-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 16px;
}

.ins-transfer-amount {
    font-family: 'Georgia', serif;
    font-size: 28px;
    font-weight: 400; /* 细体更显高级 */
    color: #111;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
    line-height: 1;
}

.ins-transfer-note {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: 12px;
    color: #A0A0A0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 300;
}

/* 底部状态栏 */
.ins-transfer-footer {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(0,0,0,0.03);
    background: rgba(250, 250, 250, 0.5);
}

.ins-transfer-brand {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: 10px;
    color: #CCC;
    letter-spacing: 0.5px;
}

.ins-transfer-status {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: 11px;
    font-weight: 600;
}

/* ========================================== */
/* 状态颜色变体 (韩系低饱和调色盘) */
/* ========================================== */

/* 1. 待收款 (Pending) - 柔和奶茶色 */
.ins-transfer-card.pending {
    background: linear-gradient(135deg, #FCFBF9 0%, #F7F4F0 100%);
    border-color: #EFEBE6;
}
.ins-transfer-card.pending .ins-transfer-tag { color: #D4C4B7; }
.ins-transfer-card.pending .ins-transfer-amount { color: #4A413E; }
.ins-transfer-card.pending .ins-transfer-status { color: #C28E7E; }

/* 2. 已收款 (Received) - 极简白 + 灰绿 */
.ins-transfer-card.received {
    background: #FFFFFF;
    border-color: #F0F5F1;
}
.ins-transfer-card.received .ins-transfer-tag { color: #A3B8A8; }
.ins-transfer-card.received .ins-transfer-amount { color: #555; opacity: 0.8; }
.ins-transfer-card.received .ins-transfer-status { color: #8F9E8B; }

/* 3. 已退还 (Rejected) - 极简白 + 灰粉 */
.ins-transfer-card.rejected {
    background: #FFFFFF;
    border-color: #F9F0F0;
}
.ins-transfer-card.rejected .ins-transfer-tag { color: #D1B3B5; }
.ins-transfer-card.rejected .ins-transfer-amount { color: #999; text-decoration: line-through; opacity: 0.6; }
.ins-transfer-card.rejected .ins-transfer-status { color: #C28E7E; opacity: 0.8; }

/* ========================================== */
/* 高级感 INS 风情侣空间邀请卡片 (180x100 迷你版) */
/* ========================================== */
.wc-bubble.invite {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
.ins-invite-card {
    width: 180px !important;
    height: 100px !important;
    padding: 8px 12px !important;
    background: #faf9f5; /* 奶白色背景 */
    border-radius: 10px;
    border: 1px solid #eaeaea;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    font-family: 'Georgia', serif;
    box-sizing: border-box;
}
.ins-invite-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.ins-invite-brand {
    font-size: 8px;
    letter-spacing: 1px;
    color: #888;
    text-transform: uppercase;
    font-family: sans-serif;
}
.ins-invite-icon {
    width: 12px;
    height: 12px;
    color: #d4c4b7;
}
.ins-invite-divider {
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(to right, #d4c4b7 0, #d4c4b7 4px, transparent 4px, transparent 8px);
    margin-bottom: 4px;
}
.ins-invite-main {
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ins-invite-title {
    font-size: 13px;
    font-style: italic;
    color: #4a413e;
    margin-bottom: 2px;
}
.ins-invite-subtitle {
    font-size: 9px;
    color: #9e948f;
    font-family: sans-serif;
}
.ins-invite-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: sans-serif;
    margin-top: 2px;
}
.ins-invite-status {
    font-size: 8px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #eee;
}
.ins-invite-status.pending { color: #d4c4b7; }
.ins-invite-status.accepted { color: #8f9e8b; }
.ins-invite-status.rejected { color: #c28e7e; }
.ins-invite-tap {
    font-size: 8px;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.wc-system-msg-text { background: rgba(0,0,0,0.1); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 12px; text-align: center; max-width: 80%; }
.wc-system-msg-text.transparent { background: transparent; color: #8E8E93; }
.wc-msg-timestamp-outside { font-size: 10px; color: #8E8E93; margin: 0 4px; white-space: nowrap; align-self: flex-end; margin-bottom: 2px; }

#wc-context-menu { position: absolute; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); z-index: 2000; display: none; flex-direction: column; min-width: 150px; overflow: hidden; animation: wcPopIn 0.1s ease-out; }
.wc-ctx-item { padding: 12px 16px; font-size: 14px; border-bottom: 0.5px solid rgba(0,0,0,0.1); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.wc-ctx-item:last-child { border-bottom: none; }
.wc-ctx-item:active { background: #F2F2F7; }

/* --- 修改：底部输入栏 (干净留白) --- */
.wc-chat-footer {
    position: relative; bottom: auto; left: 0; width: 100%; 
    background: #FFFFFF; /* 改为纯白背景 */
    border-top: 1px solid #F0F0F0; 
    padding: 10px 16px max(12px, env(safe-area-inset-bottom)) 16px;
    display: flex; align-items: center; /* 居中对齐 */
    gap: 12px; z-index: 1200; flex-shrink: 0;
    transition: margin-bottom 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.wc-chat-footer.panel-active { margin-bottom: var(--wc-panel-height); border-bottom: 1px solid #F0F0F0; padding-bottom: 10px; }

/* 修复：引用预览区域过长导致关闭按钮被挤出屏幕 */
#wc-quote-preview-area { position: absolute; top: -40px; left: 0; width: 100%; height: 40px; background: rgba(255, 255, 255, 0.95); border-top: 1px solid #F0F0F0; display: none; align-items: center; padding: 0 16px; font-size: 12px; color: #999; justify-content: space-between; overflow: hidden; }
#wc-quote-text-content { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; margin-right: 10px; display: flex; align-items: center; }

/* 限制底部输入框上方预览区域的图片大小 */
#wc-quote-text-content img {
    max-height: 24px;
    max-width: 24px;
    vertical-align: middle;
    border-radius: 4px;
    margin-left: 4px;
    object-fit: contain;
}

/* --- 修改：输入框 (椭圆形、浅灰) --- */
.wc-chat-input { 
    flex: 1; 
    background: #F5F5F5; /* 浅灰背景 */
    border: 1px solid #EEEEEE; 
    border-radius: 20px; /* 椭圆形 */
    padding: 8px 16px; 
    font-size: 14px; 
    max-height: 100px; min-height: 36px; 
    resize: none; 
    color: #333333;
    outline: none;
}

/* --- 修改：底部按键 (更小、更细、更浅) --- */
.wc-footer-icon { 
    width: 22px; height: 22px; /* 改小 */
    color: #999999; /* 颜色变浅 */
    cursor: pointer; flex-shrink: 0; 
    margin-bottom: 0; /* 移除底部边距使其居中 */
    stroke-width: 1.5; /* 让线条变细 */
}
.wc-btn-ai-reply { 
    background: none; border: none; padding: 0; cursor: pointer; 
    color: #999999; /* 颜色变浅 */
    margin-bottom: 0; 
    display: flex; align-items: center;
}
.wc-btn-ai-reply svg { 
    width: 22px; height: 22px; /* 改小 */
    fill: none; /* 移除实心填充 */
    stroke: currentColor; /* 使用描边 */
    stroke-width: 1.5; /* 让线条变细 */
}

#wc-multi-select-footer { position: absolute; bottom: 0; left: 0; width: 100%; height: calc(60px + var(--wc-safe-area-bottom)); background: #F7F7F7; border-top: 0.5px solid #C6C6C8; display: none; align-items: center; justify-content: center; gap: 16px; z-index: 1250; padding-bottom: var(--wc-safe-area-bottom); }

.wc-panel-container { position: absolute; bottom: 0; left: 0; width: 100%; height: var(--wc-panel-height); background: #F2F2F7; z-index: 1150; transform: translateY(100%); transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1); display: flex; flex-direction: column; border-top: 1px solid #C6C6C8; padding-bottom: var(--wc-safe-area-bottom); }
.wc-panel-container.active { transform: translateY(0); }

.wc-sticker-grid-area { flex: 1; overflow-y: auto; padding: 12px; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: max-content; gap: 12px; }
.wc-sticker-tab-bar { height: 45px; background: #fff; display: flex; align-items: center; border-top: 0.5px solid #E5E5EA; overflow-x: auto; }
.wc-sticker-add-btn { width: 50px; height: 100%; display: flex; align-items: center; justify-content: center; border-right: 0.5px solid #E5E5EA; background: #fff; flex-shrink: 0; cursor: pointer; }
.wc-sticker-tabs-scroll { flex: 1; display: flex; height: 100%; overflow-x: auto; }
.wc-sticker-tab-item { padding: 0 16px; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--wc-text-secondary); cursor: pointer; white-space: nowrap; background: #fff; }
.wc-sticker-tab-item.active { background: #F2F2F7; color: var(--wc-text-primary); font-weight: 500; }
.wc-sticker-item { aspect-ratio: 1; background: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
.wc-sticker-item img { width: 80%; height: 80%; object-fit: contain; }
.wc-sticker-delete-badge { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; background: var(--wc-danger-red); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; z-index: 2; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.wc-sticker-item.shake { animation: wcShake 0.2s infinite; }
@keyframes wcShake { 0% { transform: rotate(0deg); } 25% { transform: rotate(1deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } }

.wc-more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 24px; }
.wc-more-item { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; }
.wc-more-icon-box { width: 60px; height: 60px; background: #fff; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: #333; border: 1px solid #E5E5EA; }
.wc-more-label { font-size: 12px; color: var(--wc-text-secondary); text-align: center; }

.wc-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 2000; display: flex; justify-content: center; align-items: center; opacity: 1; transition: opacity 0.2s; }
.wc-modal.hidden { display: none; opacity: 0; pointer-events: none; }
.wc-modal-content { background: #fff; width: 90%; max-width: 400px; border-radius: 14px; overflow: hidden; animation: wcPopIn 0.2s ease-out; }
#wc-modal-add-char .wc-modal-content, #wc-modal-edit-mask .wc-modal-content, #wc-modal-masks .wc-modal-content { width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; position: absolute; bottom: 0; margin: 0; animation: wcSlideUpModal 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
.wc-modal[style*="align-items: flex-end"] .wc-modal-content { width: 100%; max-width: 100%; border-radius: 12px 12px 0 0; margin: 0; animation: wcSlideUpModal 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
#wc-modal-phone-settings { z-index: 11000 !important; }
@keyframes wcPopIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes wcSlideUpModal { from { transform: translateY(100%); } to { transform: translateY(0); } }

.wc-modal-header { padding: 16px; border-bottom: 0.5px solid #E5E5EA; display: flex; justify-content: space-between; align-items: center; }
.wc-modal-header h3 { margin: 0; font-size: 17px; font-weight: 600; }
.wc-close-btn { background: none; border: none; font-size: 24px; color: #8E8E93; cursor: pointer; padding: 0; line-height: 1; }
.wc-modal-body { padding: 20px; max-height: 80vh; overflow-y: auto; }
.wc-setting-group { margin-bottom: 16px; }
.wc-setting-group label { display: block; font-size: 14px; color: #8E8E93; margin-bottom: 8px; }
.wc-setting-group input, .wc-setting-group textarea, .wc-setting-group select { width: 100%; padding: 12px; background: #F2F2F7; border: none; border-radius: 10px; font-size: 16px; appearance: none; }
.wc-ios-btn-block { width: 100%; padding: 14px; background: var(--wc-accent-blue); color: white; border: none; border-radius: 12px; font-size: 17px; font-weight: 600; cursor: pointer; }
.wc-ios-btn-block.wc-btn-secondary { background: #E5E5EA; color: #000; }
.wc-ios-btn-block.wc-btn-danger { background: var(--wc-danger-red); color: white; }
.wc-ios-list-group { background: rgba(242, 242, 247, 0.8); backdrop-filter: blur(10px); }
.wc-list-item.center-content { justify-content: center; cursor: pointer; }
.wc-list-item.center-content:active { background-color: #E5E5EA !important; }

.wc-wallet-header { background: var(--wc-card-color); padding: 80px 20px 40px 20px; text-align: center; margin-bottom: 20px; display: flex; flex-direction: column; align-items: center; }
.wc-wallet-icon-lg { width: 60px; height: 60px; color: var(--wc-transfer-orange); margin-bottom: 16px; }
.wc-wallet-balance-label { font-size: 14px; color: var(--wc-text-secondary); margin-bottom: 8px; }
.wc-wallet-balance-num { font-size: 36px; font-weight: 700; color: #000; margin-bottom: 24px; }
.wc-wallet-btn-row { display: flex; gap: 16px; width: 100%; max-width: 300px; }
.wc-transaction-item { padding: 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 0.5px solid var(--wc-separator); background: var(--wc-card-color); }
.wc-trans-info { display: flex; flex-direction: column; }
.wc-trans-title { font-size: 16px; margin-bottom: 4px; }
.wc-trans-time { font-size: 12px; color: var(--wc-text-secondary); }
.wc-trans-amount { font-size: 17px; font-weight: 600; }
.wc-amount-in { color: var(--wc-accent-green); }
.wc-amount-out { color: #000; }

/* ========================================== */
/* 回忆日记 (Memory) - iOS 黑白灰星空宇宙风 */
/* ========================================== */
#wc-view-memory { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: #050505; /* 极深邃的纯黑底色 */
    z-index: 1400; display: none; flex-direction: column; 
    font-family: 'Georgia', 'Times New Roman', 'Kaiti', 'STKaiti', serif;
    color: #FFFFFF;
    overflow: hidden;
}
#wc-view-memory.active { display: flex; animation: wcSlideInRight 0.4s cubic-bezier(0.25, 1, 0.5, 1); }

/* --- 宇宙星光与流苏背景动画 --- */
.ins-mem-universe-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: hidden;
}
/* 动态星光 */
.ins-mem-star {
    position: absolute; background: #FFF; border-radius: 50%;
    box-shadow: 0 0 10px 2px rgba(255,255,255,0.8);
    animation: twinkle var(--duration) infinite ease-in-out alternate;
}
@keyframes twinkle { 0% { opacity: 0.2; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.2); } }
/* 光影流苏 (从顶部垂下的细线) */
.ins-mem-tassel {
    position: absolute; top: -50px; width: 1px; height: 150px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
    animation: fall var(--duration) infinite linear;
}
@keyframes fall { 0% { transform: translateY(-100px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } }

/* 顶部不对称标题与延伸线 */
.ins-mem-header {
    position: relative; z-index: 10; display: flex; align-items: center; 
    padding: calc(env(safe-area-inset-top, 20px) + 20px) 20px 20px 20px; flex-shrink: 0;
}
.ins-mem-title-box {
    display: flex; flex-direction: column; font-size: 26px; font-weight: bold; letter-spacing: 4px; cursor: pointer; line-height: 1.1; transition: opacity 0.2s; color: #FFF; text-shadow: 0 0 15px rgba(255,255,255,0.3);
}
.ins-mem-title-box:active { opacity: 0.5; }
.ins-mem-title-1 { align-self: flex-start; }
.ins-mem-title-2 { align-self: flex-start; margin-left: 28px; }
.ins-mem-line { flex: 1; height: 1px; background-color: rgba(255,255,255,0.3); margin: 15px 15px 0 15px; }
.ins-mem-icons { display: flex; gap: 15px; margin-top: 15px; }
.ins-mem-icon-btn { width: 24px; height: 24px; cursor: pointer; color: #FFF; transition: transform 0.2s; opacity: 0.8; }
.ins-mem-icon-btn:active { transform: scale(0.8); opacity: 1; }
.ins-mem-icon-btn svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; filter: drop-shadow(0 0 5px rgba(255,255,255,0.5)); }

/* 主体时间轴与卡片流 */
.ins-mem-main { position: relative; z-index: 10; flex: 1; overflow-y: auto; padding-left: 20px; padding-bottom: 50px; scrollbar-width: none; }
.ins-mem-main::-webkit-scrollbar { display: none; }
.ins-mem-row { display: flex; align-items: flex-start; margin-bottom: 30px; position: relative; }

/* 左侧时间节点 */
.ins-mem-time-node {
    width: 50px; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; position: relative; z-index: 2; padding-top: 15px; cursor: pointer; transition: transform 0.2s;
}
.ins-mem-time-node:active { transform: scale(0.9); }
.ins-mem-time-node::before {
    content: ''; position: absolute; top: 0; bottom: -50px; left: 50%; transform: translateX(-50%); width: 1px; background-color: rgba(255,255,255,0.15); z-index: -1;
}
.ins-mem-node-icon {
    width: 16px; height: 16px; background: #050505; color: #FFF; margin-bottom: 8px; animation: insMemPulse 2.5s infinite ease-in-out;
}
.ins-mem-node-icon svg { width: 100%; height: 100%; fill: currentColor; stroke: none; filter: drop-shadow(0 0 8px rgba(255,255,255,0.8)); }
@keyframes insMemPulse { 0%, 100% { transform: scale(0.8); opacity: 0.6; } 50% { transform: scale(1.2); opacity: 1; } }
.ins-mem-date-text { font-family: 'Courier New', Courier, monospace; font-size: 11px; font-weight: bold; color: #8E8E93; text-align: center; }
.ins-mem-date-hint { font-size: 8px; color: #555; margin-top: 4px; transform: scale(0.8); font-family: sans-serif; }

/* 右侧横向滑动区 */
.ins-mem-cards-scroll {
    flex: 1; display: flex; gap: 12px; overflow-x: auto; padding: 10px 20px 10px 10px; scroll-behavior: smooth; scrollbar-width: none;
}
.ins-mem-cards-scroll::-webkit-scrollbar { display: none; }

/* 50x180px 竖向卡片 (黑白灰毛玻璃) */
.ins-mem-card {
    width: 50px; height: 180px; border-radius: 0; flex-shrink: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px 0 15px 0; cursor: pointer; 
    background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #FFF;
    transition: transform 0.2s, background 0.2s;
}
.ins-mem-card:active { transform: scale(0.96); background: rgba(255, 255, 255, 0.1); }
.ins-mem-delete-btn {
    position: absolute; top: 4px; left: 4px; font-family: -apple-system, sans-serif; font-size: 14px; color: rgba(255,255,255,0.3); cursor: pointer; line-height: 1; transition: color 0.2s; z-index: 10;
}
.ins-mem-delete-btn:active { color: #FF3B30; }
.ins-mem-card-title {
    writing-mode: vertical-rl; font-size: 13px; font-weight: bold; letter-spacing: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 100px; text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.ins-mem-card-time { font-family: 'Courier New', Courier, monospace; font-size: 10px; font-weight: bold; opacity: 0.5; }

/* 动态分配的黑白灰透明度类 */
.ins-bg-white { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); }
.ins-bg-gray  { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); }
.ins-bg-pink  { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
.ins-bg-blue  { background: rgba(200, 200, 200, 0.05); border-color: rgba(200, 200, 200, 0.1); }
.ins-bg-green { background: rgba(150, 150, 150, 0.05); border-color: rgba(150, 150, 150, 0.1); }

/* 塔罗牌堆叠视图 (深色星空版) */
.ins-tarot-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(5, 5, 5, 0.85); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); display: none; align-items: center; justify-content: center; z-index: 2000; opacity: 0; transition: opacity 0.3s ease;
}
.ins-tarot-overlay.active { display: flex; opacity: 1; }
.ins-tarot-close { position: absolute; top: calc(env(safe-area-inset-top, 20px) + 20px); right: 30px; font-size: 24px; color: #FFF; cursor: pointer; z-index: 2010; font-family: sans-serif; opacity: 0.6; }
.ins-tarot-date-title { position: absolute; top: calc(env(safe-area-inset-top, 20px) + 30px); left: 30px; font-family: 'Georgia', serif; font-size: 24px; font-weight: bold; color: #FFF; letter-spacing: 2px; text-shadow: 0 0 10px rgba(255,255,255,0.3); }
.ins-tarot-container { position: relative; width: 100%; height: 350px; display: flex; align-items: center; justify-content: center; perspective: 1000px; }
.ins-tarot-card {
    position: absolute; width: 160px; height: 280px; border-radius: 0; 
    background: rgba(20, 20, 20, 0.8); border: 1px solid rgba(255,255,255,0.2); 
    box-shadow: 0 15px 35px rgba(0,0,0,0.5), inset 0 0 20px rgba(255,255,255,0.05); 
    display: flex; flex-direction: column; padding: 20px; color: #FFF;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease; cursor: pointer;
}
.ins-tarot-card-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 10px; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.ins-tarot-card-desc { font-size: 13px; line-height: 1.6; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; text-align: justify; font-family: -apple-system, sans-serif; color: #CCC; }
.ins-tarot-card-time { font-family: 'Courier New', monospace; font-size: 11px; text-align: right; margin-top: 10px; opacity: 0.4; }

/* ========================================== */
/* 300x500px 详情编辑弹窗 (动态几何蕾丝边框版) */
/* ========================================== */
.ins-mem-detail-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: none; align-items: center; justify-content: center; z-index: 3000; 
    opacity: 0; transition: opacity 0.3s ease;
}
.ins-mem-detail-overlay.active { display: flex; opacity: 1; }

/* 卡片主体：深色毛玻璃底 */
.ins-mem-detail-card {
    width: 300px; height: 500px; 
    background: rgba(15, 15, 15, 0.85); /* 半透明深黑底色 */
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-radius: 0; /* 绝对无圆角 */
    display: flex; flex-direction: column; padding: 24px; 
    transform: translateY(20px); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
    color: #FFFFFF;
    position: relative;
    /* 移除原本的实线边框和阴影，交给伪元素处理 */
    border: none; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.ins-mem-detail-overlay.active .ins-mem-detail-card { transform: translateY(0); }

/* 🌟 动态几何蕾丝边框 - 外层流动斜纹光影 🌟 */
.ins-mem-detail-card::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    z-index: -1;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        rgba(255, 255, 255, 0.4) 4px,
        rgba(255, 255, 255, 0.4) 5px
    );
    /* 利用 mask 裁剪出边框形状 */
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 2px; /* 边框厚度 */
    animation: laceFlow 15s linear infinite;
}

/* 🌟 动态几何蕾丝边框 - 内层呼吸虚线框 🌟 */
.ins-mem-detail-card::after {
    content: '';
    position: absolute;
    top: 6px; left: 6px; right: 6px; bottom: 6px;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    pointer-events: none;
    animation: lacePulse 2.5s infinite alternate ease-in-out;
}

/* 边框动画定义 */
@keyframes laceFlow {
    0% { background-position: 0 0; }
    100% { background-position: 100px 100px; }
}
@keyframes lacePulse {
    0% { opacity: 0.3; border-color: rgba(255, 255, 255, 0.1); }
    100% { opacity: 1; border-color: rgba(255, 255, 255, 0.6); }
}

/* 内部元素排版 */
.ins-mem-detail-header { 
    display: flex; justify-content: space-between; align-items: center; 
    margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 10px; 
    position: relative; z-index: 10;
}
.ins-mem-detail-date { font-family: 'Courier New', Courier, monospace; font-size: 12px; color: #A0A0A0; letter-spacing: 1px; }
.ins-mem-detail-close { font-size: 22px; cursor: pointer; color: #FFFFFF; line-height: 1; font-family: sans-serif; opacity: 0.6; transition: opacity 0.2s; }
.ins-mem-detail-close:active { opacity: 1; }

/* 修复：强制输入框文字为白色，防止被全局污染 */
.ins-mem-detail-title { 
    width: 100%; border: none; font-family: inherit; font-size: 18px; font-weight: bold; 
    color: #FFFFFF !important; /* 强制白字 */
    margin-bottom: 15px; outline: none; background: transparent !important; 
    position: relative; z-index: 10;
}
.ins-mem-detail-title::placeholder { color: rgba(255,255,255,0.3); font-weight: normal; }

.ins-mem-detail-textarea { 
    flex: 1; width: 100%; border: none; resize: none; outline: none; 
    font-family: 'Kaiti', 'STKaiti', '楷体', serif; /* 衬线体增加日记感 */
    font-size: 15px; line-height: 1.8; 
    color: #E0E0E0 !important; /* 强制浅灰白字 */
    background: transparent !important; text-align: justify; 
    position: relative; z-index: 10;
}
.ins-mem-detail-textarea::placeholder { color: rgba(255,255,255,0.2); font-family: sans-serif; }

.ins-mem-detail-footer { margin-top: 15px; display: flex; justify-content: flex-end; position: relative; z-index: 10; }
.ins-mem-detail-save { 
    background: #FFFFFF; color: #111111; border: none; padding: 8px 24px; 
    font-family: inherit; font-size: 13px; font-weight: bold; letter-spacing: 1px;
    cursor: pointer; border-radius: 0; transition: transform 0.2s, background 0.2s; 
}
.ins-mem-detail-save:active { background: #CCCCCC; transform: scale(0.95); }

#wc-modal-char-detail .wc-modal-content { width: 320px; height: 450px; border-radius: 20px; position: relative; bottom: auto; margin: auto; display: flex; flex-direction: column; align-items: center; padding: 0; background: #fff; }
.wc-contact-card-header { width: 100%; height: 240px; position: relative; }
.wc-contact-card-img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px 20px 0 0; }
.wc-contact-card-info { flex: 1; width: 100%; padding: 20px; display: flex; flex-direction: column; align-items: center; }
.wc-contact-card-name { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
.wc-contact-card-note { font-size: 14px; color: #8E8E93; margin-bottom: 20px; }
.wc-contact-card-edit-btn { position: absolute; top: 16px; right: 16px; background: rgba(0,0,0,0.3); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: white; cursor: pointer; backdrop-filter: blur(4px); }
.wc-contact-card-close-btn { position: absolute; top: 16px; left: 16px; background: rgba(0,0,0,0.3); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: white; cursor: pointer; backdrop-filter: blur(4px); z-index: 10; }

#wc-view-phone-sim { position: fixed; top: 0; left: 0; width: 100%; height: var(--app-height, 100vh); min-height: var(--app-height, 100vh); height: 100dvh; background-color: #000; z-index: 10000; display: none; justify-content: center; align-items: center; padding: 0; }
#wc-view-phone-sim.active { display: flex; animation: wcFadeIn 0.3s ease; }
.wc-phone-bezel { width: 100%; max-width: 100%; height: 100%; max-height: 100%; background: #000; border-radius: 0; border: none; box-shadow: none; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.wc-phone-sticky-note { position: absolute; top: 20px; right: 20px; width: 100px; height: 100px; background: #fff; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); transform: rotate(5deg); z-index: 200; cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; }
.wc-phone-sticky-note:active { transform: rotate(5deg) scale(0.95); }
.wc-phone-sticky-note::before { content: ''; position: absolute; top: -10px; left: 30%; width: 40px; height: 20px; background: rgba(255, 255, 255, 0.5); transform: rotate(-5deg); box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.wc-sticky-note-content { width: 100%; height: 100%; background-size: cover; background-position: center; background-color: #fff; border: 1px solid #eee; }
.wc-phone-fingerprint { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; z-index: 100; cursor: pointer; opacity: 0.8; animation: wcPulse 2s infinite; background: rgba(0, 0, 0, 0.3); border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(5px); padding: 8px; }
@keyframes wcPulse { 0% { opacity: 0.6; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.1); } 100% { opacity: 0.6; transform: translateX(-50%) scale(1); } }
.wc-phone-home-indicator { display: none; }
.wc-phone-screen { flex: 1; background-size: cover; background-position: center; display: flex; flex-direction: column; padding-top: 30px; position: relative; overflow: hidden; }
.wc-phone-sim-navbar { height: 88px; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 16px 10px 16px; color: white; z-index: 10; }
.wc-ios-desktop { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); gap: 15px; padding: 20px; align-content: start; position: relative; }
.wc-ios-widget-clock { grid-column: span 4; grid-row: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.wc-ios-clock-time { font-size: 60px; font-weight: 200; line-height: 1; }
.wc-ios-clock-date { font-size: 16px; margin-top: 5px; font-weight: 500; }
.wc-ios-app-item { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }
.wc-ios-app-icon { width: 100%; aspect-ratio: 1; background: rgba(255,255,255,0.9); border-radius: 14px; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
.wc-ios-app-icon img { width: 100%; height: 100%; object-fit: cover; }
.wc-ios-app-name { font-size: 11px; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.8); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }

.wc-phone-app-view { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #F2F2F7; z-index: 20; display: flex; flex-direction: column; animation: wcPopIn 0.2s ease-out; }
.wc-phone-app-content { flex: 1; overflow-y: auto; padding-top: 0; padding-bottom: 0; }
.wc-phone-app-tabbar { height: calc(50px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: #F7F7F7; border-top: 0.5px solid #C6C6C8; display: flex; justify-content: space-around; align-items: center; flex-shrink: 0; width: 100%; position: relative; z-index: 100; }
.wc-phone-tab-item { display: flex; flex-direction: column; align-items: center; font-size: 10px; color: #8E8E93; cursor: pointer; }
.wc-phone-tab-item.active { color: #007AFF; }

.wc-chat-swipe-container { position: relative; overflow: hidden; background: var(--wc-card-color); margin: 8px 16px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.wc-chat-swipe-actions { position: absolute; right: 0; top: 0; bottom: 0; display: flex; z-index: 1; }
.wc-chat-action-btn { width: 80px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 14px; }
.wc-btn-pin { background-color: var(--wc-pin-gray); }
.wc-chat-swipe-content { position: relative; z-index: 2; background: var(--wc-card-color); width: 100%; height: 100%; display: flex; align-items: center; padding: 12px 16px; transition: transform 0.2s ease-out; }
.wc-pinned-chat { background-color: #FFFFFF !important; }
.wc-list-separator { text-align: center; color: #C7C7CC; font-size: 12px; padding: 5px 0; background: var(--wc-bg-color); }

.wc-tabbar-container { 
    position: absolute; 
    /* 核心适配：底部留出安全距离 */
    bottom: max(20px, env(safe-area-inset-bottom)); 
    left: 0; width: 100%; display: flex; justify-content: center; z-index: 1000; pointer-events: none; 
}

.wc-tabbar { width: 320px; height: 64px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-radius: 32px; display: flex; justify-content: space-around; align-items: center; box-shadow: 0 10px 25px rgba(0,0,0,0.1); pointer-events: auto; }
.wc-tab-item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--wc-text-secondary); font-size: 10px; width: 60px; cursor: pointer; transition: color 0.2s; }
.wc-tab-item.active { color: var(--wc-text-primary); }
.wc-tab-item svg { margin-bottom: 4px; }

.wc-card { background: var(--wc-card-color); border-radius: 16px; padding: 16px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
.wc-list-group { background: var(--wc-card-color); border-radius: 16px; overflow: hidden; }
.wc-list-item { padding: 12px 16px; display: flex; align-items: center; border-bottom: 0.5px solid var(--wc-separator); background: var(--wc-card-color); position: relative; transition: transform 0.2s ease-out; cursor: pointer; }
.wc-list-item:last-child { border-bottom: none; }
.wc-avatar { width: 48px; height: 48px; border-radius: 6px; background-color: #E5E5EA; object-fit: cover; margin-right: 12px; flex-shrink: 0; }
.wc-item-content { flex: 1; overflow: hidden; }
.wc-item-title { font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.wc-item-subtitle { color: var(--wc-text-secondary); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wc-swipe-container { position: relative; overflow: hidden; background: var(--wc-danger-red); border-radius: 0; }
.wc-swipe-container:first-child { border-top-left-radius: 16px; border-top-right-radius: 16px; }
.wc-swipe-container:last-child { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
.wc-swipe-actions { position: absolute; right: 0; top: 0; bottom: 0; width: 80px; background-color: var(--wc-danger-red); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; z-index: 0; }
.wc-swipe-content { position: relative; z-index: 1; background: var(--wc-card-color); width: 100%; height: 100%; display: flex; align-items: center; padding: 12px 16px; transition: transform 0.2s ease-out; border-bottom: 0.5px solid var(--wc-separator); }

.wc-moments-header { position: relative; margin-bottom: 40px; }
.wc-moments-cover { width: 100%; height: 240px; background-color: #333; object-fit: cover; cursor: pointer; }
.wc-moments-user-avatar { position: absolute; bottom: -30px; right: 20px; width: 80px; height: 80px; border-radius: 12px; border: 3px solid #fff; background-color: #ccc; object-fit: cover; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.wc-moment-card { padding: 16px; border-bottom: 0.5px solid var(--wc-separator); background: transparent; display: flex; align-items: flex-start; }
.wc-moment-content { margin-left: 10px; flex: 1; }
.wc-moment-name { color: #576B95; font-weight: 600; margin-bottom: 6px; }
.wc-moment-text { font-size: 15px; line-height: 1.4; margin-bottom: 8px; }
.wc-moment-image { width: 100%; max-width: 200px; height: auto; border-radius: 4px; margin-bottom: 8px; display: block; }
.wc-moment-image-placeholder { width: 100%; max-width: 240px; background: #F2F2F7; border: 1px solid #E5E5EA; border-radius: 4px; padding: 12px; margin-bottom: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--wc-text-secondary); font-size: 13px; text-align: center; }
.wc-moment-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.wc-moment-likes-comments { background: #F2F2F7; border-radius: 4px; margin-top: 8px; padding: 8px; font-size: 13px; }
.wc-moment-like-row { color: #576B95; margin-bottom: 4px; display: flex; align-items: center; }
.wc-moment-comment-row { margin-bottom: 2px; }
.wc-moment-comment-name { color: #576B95; font-weight: 600; }
.wc-comment-input-box { display: flex; margin-top: 8px; gap: 8px; }
.wc-comment-input { flex: 1; border: 1px solid #E5E5EA; border-radius: 4px; padding: 4px 8px; font-size: 14px; }

.wc-user-header { display: flex; flex-direction: column; align-items: center; padding: 30px 0; }
.wc-user-avatar-lg { width: 100px; height: 100px; border-radius: 12px; margin-bottom: 16px; object-fit: cover; border: 1px solid #E5E5EA; }

.wc-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 2000; display: none; justify-content: center; align-items: flex-end; }
.wc-modal-overlay.active { display: flex; }
.wc-form-group { margin-bottom: 16px; }
.wc-form-label { display: block; font-size: 14px; color: var(--wc-text-secondary); margin-bottom: 8px; }
.wc-form-input, .wc-form-textarea { width: 100%; padding: 12px; background: #F2F2F7; border: none; border-radius: 10px; font-size: 16px; }
.wc-form-textarea { height: 100px; resize: none; }
.wc-btn-primary { width: 100%; padding: 14px; background: var(--wc-text-primary); color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; margin-top: 10px; }
.wc-btn-secondary { background: #E5E5EA; color: var(--wc-text-primary); margin-top: 10px; }
.wc-btn-danger { background: var(--wc-danger-red); color: white; margin-top: 10px; }
.wc-segmented-control { display: flex; background: #F2F2F7; border-radius: 8px; padding: 2px; margin-bottom: 16px; }
.wc-segment-btn { flex: 1; padding: 8px; text-align: center; font-size: 14px; border-radius: 6px; cursor: pointer; color: var(--wc-text-secondary); transition: all 0.2s; }
.wc-segment-btn.active { background: #fff; color: #000; box-shadow: 0 1px 3px rgba(0,0,0,0.1); font-weight: 500; }
.wc-upload-placeholder { width: 80px; height: 80px; background: #F2F2F7; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: var(--wc-text-secondary); cursor: pointer; overflow: hidden; }
.wc-upload-rect-placeholder { width: 100px; height: 100px; background: #F2F2F7; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--wc-text-secondary); cursor: pointer; margin-bottom: 10px; overflow: hidden; }

#wc-modal-chat-settings .wc-modal-content { width: 100%; height: 100%; max-width: 100%; border-radius: 0; display: flex; flex-direction: column; }
.wc-settings-section { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.wc-settings-section-title { font-size: 13px; color: #8E8E93; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.wc-avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.wc-avatar-edit { width: 60px; height: 60px; border-radius: 8px; background: #eee; object-fit: cover; cursor: pointer; }
.wc-checkbox-list { max-height: 150px; overflow-y: auto; background: #F2F2F7; border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }
.wc-checkbox-item { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #000; cursor: pointer; }
.wc-checkbox-item input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--wc-accent-blue); }

/* ========================================== */
/* Lovers Space (App 2) Styles - Korean/Ins Style */
/* ========================================== */
.ls-view { display: none; flex-direction: column; height: 100%; width: 100%; background: #fff; font-family: inherit; }
.ls-view.active { display: flex; }
.ls-navbar { height: 50px; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; margin-top: env(safe-area-inset-top); }
.ls-nav-btn { font-size: 16px; color: #333; cursor: pointer; width: 60px; }
.ls-nav-title { font-weight: 600; font-size: 17px; letter-spacing: 1px; }
.ls-content { flex: 1; overflow-y: auto; padding: 20px; }
.ls-content.center { display: flex; flex-direction: column; align-items: center; justify-content: center; }

.ls-bind-icon { font-size: 48px; color: #FF9A9E; margin-bottom: 20px; }
.ls-bind-title { font-size: 24px; font-weight: 300; margin-bottom: 10px; color: #333; }
.ls-bind-desc { font-size: 14px; color: #999; text-align: center; line-height: 1.6; margin-bottom: 30px; }
.ls-char-list { width: 100%; max-height: 300px; overflow-y: auto; }
.ls-char-item { display: flex; align-items: center; padding: 12px; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
.ls-char-item:active { background: #fafafa; }
.ls-char-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-right: 12px; }
.ls-char-name { font-size: 16px; color: #333; }

.ls-pending-avatar { width: 100px; height: 100px; border-radius: 50%; background: #eee; margin-bottom: 20px; background-size: cover; background-position: center; }
.ls-btn-outline { padding: 10px 30px; border: 1px solid #ddd; background: transparent; border-radius: 20px; color: #666; margin-top: 10px; cursor: pointer; }
.ls-btn-primary { padding: 10px 30px; background: #FF9A9E; border: none; border-radius: 20px; color: white; margin-top: 10px; cursor: pointer; box-shadow: 0 4px 10px rgba(255, 154, 158, 0.3); }

.ls-header { padding: 20px; background: #fff; display: flex; flex-direction: column; align-items: center; border-bottom: 1px solid #f9f9f9; padding-top: env(safe-area-inset-top); }
.ls-header-top { width: 100%; display: flex; justify-content: space-between; margin-bottom: 20px; }
.ls-header-title { font-family: 'Georgia', serif; font-style: italic; font-size: 20px; color: #333; }
.ls-couple-avatars { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.ls-avatar-circle { width: 70px; height: 70px; border-radius: 50%; background: #eee; background-size: cover; background-position: center; border: 2px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.ls-heart-beat { font-size: 20px; color: #FF9A9E; animation: lsPulse 1.5s infinite; }
@keyframes lsPulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
.ls-days-counter { text-align: center; cursor: pointer; }
.ls-days-label { font-size: 12px; color: #ccc; letter-spacing: 2px; text-transform: uppercase; display: block; }
.ls-days-num { font-size: 36px; font-weight: 300; color: #333; font-family: 'Helvetica Neue', sans-serif; display: block; margin: 5px 0; }
.ls-date-display { font-size: 12px; color: #ccc; margin-top: 5px; }

.ls-main-content { flex: 1; overflow-y: auto; background: #fff; padding-bottom: 60px; }
.ls-tab-content { display: none; padding: 20px; }
.ls-tab-content.active { display: block; animation: fadeIn 0.3s; }
.ls-section-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 15px; letter-spacing: 1px; }

.ls-feed-list { display: flex; flex-direction: column; gap: 15px; }
.ls-feed-item { display: flex; gap: 12px; align-items: flex-start; }
.ls-feed-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ls-feed-content { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }

.ls-feed-text { 
    font-size: 10px; 
    color: #666; 
    line-height: 1.4; 
    background: #f0f0f0; 
    padding: 8px 12px; 
    border-radius: 12px; 
    display: inline-block; 
    max-width: 100%;
    word-wrap: break-word;
}

.ls-feed-time { font-size: 10px; color: #999; margin-top: 4px; margin-left: 4px; }

.ls-empty-state { text-align: center; padding: 40px 0; color: #ccc; }
.ls-icon-placeholder { font-size: 40px; margin-bottom: 10px; opacity: 0.5; }
.ls-setting-group { margin-bottom: 20px; }
.ls-setting-row { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #f5f5f5; }
.ls-setting-title-row { font-size: 14px; color: #333; margin-bottom: 10px; }
.ls-setting-label { flex: 1; }
.ls-setting-title { font-size: 16px; color: #333; margin-bottom: 4px; }
.ls-setting-desc { font-size: 12px; color: #999; }
.ls-toggle { width: 40px; height: 24px; appearance: none; background: #e5e5ea; border-radius: 12px; position: relative; outline: none; cursor: pointer; transition: background 0.3s; }
.ls-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 0.3s; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.ls-toggle:checked { background: #34c759; }
.ls-toggle:checked::after { transform: translateX(16px); }
.ls-btn-danger { width: 100%; padding: 15px; background: #fff; border: 1px solid #ff3b30; color: #ff3b30; border-radius: 12px; font-size: 16px; margin-top: 20px; cursor: pointer; }

.ls-tabbar { position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); border-top: 1px solid #eee; display: flex; justify-content: space-around; align-items: center; padding-bottom: env(safe-area-inset-bottom); }
.ls-tab-item { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #ccc; cursor: pointer; transition: color 0.3s; }
.ls-tab-item svg { width: 24px; height: 24px; fill: currentColor; }
.ls-tab-item.active { color: #FF9A9E; }

.ls-check-phone-btn {
    margin-top: 10px;
    padding: 8px 16px;
    background: #f0f0f0;
    color: #333;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
}
.ls-check-phone-btn:active {
    background: #e0e0e0;
}

.wc-phone-lovers-widget {
    grid-column: span 4;
    grid-row: span 2; 
    width: 100%;
    height: 100%;
    background: transparent; 
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
    cursor: pointer;
    transform: rotate(-2deg); 
    transition: transform 0.2s;
    perspective: 1000px; 
}
.wc-phone-lovers-widget:active {
    transform: rotate(-2deg) scale(0.98);
}

.wc-lovers-widget-inner {
    position: relative;
    width: 160px; 
    height: 160px; 
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 2px 4px 12px rgba(0,0,0,0.15);
    border-radius: 4px;
}

.wc-phone-lovers-widget.flipped .wc-lovers-widget-inner {
    transform: rotateY(180deg);
}

.wc-lovers-widget-front, .wc-lovers-widget-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 4px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
}

.wc-lovers-widget-front {
    background: #fff;
    border: 1px solid #eee;
}

.wc-lovers-widget-photo {
    width: 100%;
    height: 110px; 
    background: #f4f4f4;
    border: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    margin-bottom: 8px;
}

.wc-lovers-widget-photo-desc {
    font-size: 12px;
    color: #555;
    font-family: 'Courier New', Courier, monospace; 
    font-weight: bold;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wc-lovers-widget-back {
    transform: rotateY(180deg);
    background: #fff; 
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.02); 
}

/* 修复：背面文字长文本溢出问题 */
.wc-lovers-widget-note-text {
    font-size: 14px;
    color: #444; 
    font-family: 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif; 
    line-height: 1.6;
    text-align: center;
    width: 100%;
    padding: 5px;
    word-break: break-all; overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-style: italic; 
}

.wc-lovers-widget-sticker {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    width: 60px;
    height: 20px;
    background: rgba(255, 255, 255, 0.4); 
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    backdrop-filter: blur(2px);
    z-index: 20;
}
/* ========================================== */
/* 修复：多选模式下底部被遮挡的问题 */
/* ========================================== */
.wc-chat-scroll-area.multi-select-mode {
    padding-bottom: calc(80px + var(--wc-safe-area-bottom)) !important;
}

/* ========================================== */
/* 世界书：韩系 INS 日记本风分组视图 */
/* ========================================== */
.ins-group-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 20px 15px;
    justify-items: center;
}
.ins-group-card {
    width: 100px;
    height: 100px;
    border-radius: 2px 2px 8px 8px;
    box-shadow: 
        2px 4px 10px rgba(0,0,0,0.06), 
        inset -2px -2px 6px rgba(0,0,0,0.02),
        inset 2px 0 4px rgba(255,255,255,0.5);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    border-width: 1px;
    border-style: solid;
    border-top: none;
    box-sizing: border-box;
    padding-top: 12px;
}
.ins-group-card:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* 顶部线圈装订效果 */
.ins-notebook-binding {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 14px;
    background-color: rgba(0,0,0,0.02);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    border-radius: 4px 4px 0 0;
}
/* 打孔 */
.ins-notebook-binding::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 8px;
    right: 8px;
    height: 4px;
    background-image: radial-gradient(circle, #fff 2px, transparent 2.5px);
    background-size: 12px 4px;
    background-repeat: repeat-x;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
/* 铁丝圈 */
.ins-notebook-binding::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 8px;
    right: 8px;
    height: 10px;
    background-image: linear-gradient(to right, #b0b0b0 1.5px, transparent 1.5px);
    background-size: 12px 10px;
    background-repeat: repeat-x;
    background-position: 1px 0;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
}

.ins-notebook-label {
    width: 24px;
    height: 3px;
    border-radius: 2px;
    margin-bottom: 8px;
    opacity: 0.2;
}

.ins-group-title {
    font-family: 'Georgia', 'Kaiti', serif;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 4px;
    padding: 0 8px;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.2;
}
.ins-group-count {
    font-size: 9px;
    font-family: 'Courier New', Courier, monospace;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ins-group-delete {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    opacity: 0.5;
}
.ins-group-delete svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}
.ins-group-delete:active {
    background: rgba(255, 59, 48, 0.1);
    color: #ff3b30;
    opacity: 1;
}

/* ========================================== */
/* 新增：聊天设置页面 (Chat Settings) 样式 */
/* ========================================== */
.wc-chat-settings-header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px 30px;
    background: #fff;
    border-bottom: 1px solid #E5E5EA;
    flex-shrink: 0;
}

.wc-cs-avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.3s ease;
    transform: scale(0.9);
}

.wc-cs-avatar-container.active {
    opacity: 1;
    transform: scale(1.1);
}

.wc-cs-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border: 2px solid transparent;
    background-color: #eee;
}

.wc-cs-avatar-container.active .wc-cs-avatar {
    border-color: var(--wc-accent-green);
}

.wc-cs-name {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

/* Heartbeat Line */
.wc-cs-heartbeat-container {
    width: 80px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.wc-cs-heartbeat-container:active, .wc-cs-heartbeat-container.active {
    opacity: 1;
}

.wc-cs-heartbeat-line {
    width: 100%;
    height: 100%;
    stroke: #FF3B30;
    stroke-width: 2;
    fill: none;
    filter: drop-shadow(0 0 2px rgba(255, 59, 48, 0.5));
    animation: wcHeartBeat 1.5s infinite linear;
}

@keyframes wcHeartBeat {
    0% { stroke-dasharray: 0 100; stroke-dashoffset: 0; opacity: 0.5; }
    50% { stroke-dasharray: 100 0; stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dasharray: 0 100; stroke-dashoffset: -100; opacity: 0.5; }
}

/* Tab Content Logic */
.wc-cs-tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.wc-cs-tab-content.active {
    display: block;
}
/* ========================================== */
/* 强制聊天设置页面全屏并添加滑入动画 */
/* ========================================== */
#wc-modal-chat-settings {
    align-items: flex-start !important; /* 确保从顶部贴边开始 */
}

#wc-modal-chat-settings .wc-modal-content {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    /* 加上类似原生微信页面的从右侧滑入动画 */
    animation: wcSlideInRight 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) !important; 
}
/* ========================================== */
/* 全局基础设置 */
/* ========================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    height: var(--app-height, 100vh);
    min-height: var(--app-height, 100vh);
    overflow: hidden;
}

#activation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* p2：整个界面的底图 */
    background: url('https://i.postimg.cc/kgD9CsbW/IMG-8012.jpg') no-repeat center center;
    background-size: cover;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    /* 增加一个非常轻微的深色暗角，让中心亮起来 */
    box-shadow: inset 0 0 100px rgba(0,0,0,0.1);
}

/* ========================================== */
/* 眼前一亮的毛玻璃方框 */
/* ========================================== */
.activation-box {
    background: rgba(255, 255, 255, 0.45); 
    padding: 45px 35px;
    border-radius: 35px;
    width: 100%;
    max-width: 370px;
    text-align: center;
    
    /* 极细的白色边框增加精致感 */
    border: 1px solid rgba(255, 255, 255, 0.6); 
    
    /* 多层次呼吸感发光 */
    box-shadow: 
        0 10px 40px rgba(255, 182, 193, 0.3),
        0 0 20px rgba(255, 192, 203, 0.2);
    
    /* 增强毛玻璃效果 */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* 悬浮入场动画 */
    animation: floatIn 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 最顶端的字：极致加粗且增加间距 */
.activation-box h2 {
    font-size: 32px;
    font-weight: 900; 
    color: #4a3135; 
    margin-bottom: 10px;
    letter-spacing: 6px; 
    text-transform: uppercase;
    /* 粉色微弱光晕效果 */
    text-shadow: 0 0 10px rgba(255, 105, 180, 0.2);
}

.activation-box p {
    font-size: 14px;
    color: #6d4c4f;
    margin-bottom: 35px;
    font-weight: 600;
}

/* ========================================== */
/* 输入框样式 */
/* ========================================== */
.activation-box .input-group {
    margin-bottom: 22px;
    text-align: left;
}

.activation-box .input-group label {
    display: block;
    font-size: 13px;
    color: #7d5a5e;
    font-weight: 700;
    margin-bottom: 8px;
    padding-left: 10px;
}

.activation-box input {
    width: 100%;
    padding: 14px 18px;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    font-size: 15px;
    background: rgba(255, 255, 255, 0.5); 
    color: #333;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.activation-box input:focus {
    background: rgba(255, 255, 255, 0.9);
    border-color: #ffb6c1;
    box-shadow: 0 5px 15px rgba(255, 182, 193, 0.2);
    transform: translateY(-2px);
}

/* ========================================== */
/* Bingo 按钮：低饱和渐变粉色 */
/* ========================================== */
.bingo-btn {
    width: 100%;
    padding: 16px;
    margin-top: 15px;
    border: none;
    border-radius: 18px;
    cursor: pointer;
    
    /* 低饱和渐变背景 */
    background: linear-gradient(135deg, #fbc2c4 0%, #ff9a9e 100%); 
    
    /* 按钮文字加粗深色 */
    color: #5d3d41;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 2px;
    
    transition: all 0.4s ease;
    box-shadow: 0 8px 25px rgba(255, 154, 158, 0.4);
    
    display: flex;
    align-items: center;
    justify-content: center;
}

.bingo-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 30px rgba(255, 154, 158, 0.5);
    filter: brightness(1.05);
}

.bingo-btn:active {
    transform: translateY(0) scale(0.98);
}

/* ========================================== */
/* 页脚与动画 */
/* ========================================== */
.activation-footer {
    margin-top: 30px;
    font-size: 12px;
    color: #8b6d71;
    line-height: 1.8;
    font-weight: 600;
}

@keyframes floatIn {
    0% { 
        opacity: 0; 
        transform: translateY(40px) scale(0.9); 
        filter: blur(10px);
    }
    100% { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
        filter: blur(0);
    }
}

/* 隐藏输入框箭头 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* ========================================== */
/* 购物页面 (Shopping) 样式 - 韩系 INS 风格 */
/* ========================================== */
#wc-view-shopping { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fdfbf7; 
    z-index: 1400;
    display: none;
    flex-direction: column;
}
#wc-view-shopping.active {
    display: flex;
    animation: wcSlideInRight 0.3s ease;
}

.shop-tab { 
    font-size: 15px; 
    color: #b0a8a6; 
    letter-spacing: 1px; 
    transition: color 0.3s; 
}
.shop-tab.active::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 15px; 
    height: 2px; 
    background: #d4c4b7; 
    border-radius: 2px; 
}

.shop-item-card { 
    background: #fff; 
    border-radius: 20px; 
    padding: 15px; 
    margin-bottom: 15px; 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    box-shadow: 0 8px 20px rgba(212, 196, 183, 0.15); 
    border: none; 
}
.shop-item-img { 
    width: 80px; 
    height: 80px; 
    border-radius: 16px; 
    object-fit: cover; 
    background: #f5f0eb; 
    flex-shrink: 0; 
}
.shop-item-info { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    overflow: hidden; 
}
.shop-item-title { 
    font-size: 15px; 
    font-weight: 600; 
    color: #4a413e; 
    margin-bottom: 4px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
.shop-item-desc { 
    font-size: 12px; 
    color: #9e948f; 
    margin-bottom: 8px; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    line-height: 1.4; 
}
.shop-item-price { 
    font-size: 16px; 
    font-weight: bold; 
    color: #c28e7e; 
    font-family: 'Georgia', serif; 
    font-style: italic; 
}
.shop-item-add { 
    width: 32px; 
    height: 32px; 
    border-radius: 50%; 
    background: #e8dfd8; 
    color: #5d5350; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    flex-shrink: 0; 
    font-size: 20px; 
    box-shadow: none; 
    transition: transform 0.1s; 
}
.shop-item-add:active { 
    transform: scale(0.9); 
}

/* 修改：将购物车按钮往上移 */
.shop-cart-btn { 
    position: absolute; 
    bottom: max(100px, calc(env(safe-area-inset-bottom) + 100px)); 
    right: 20px; 
    width: 56px; 
    height: 56px; 
    background: #5d5350; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 6px 15px rgba(93, 83, 80, 0.3); 
    cursor: pointer; 
    z-index: 100; 
}

/* 新增：购物页面底部悬浮胶囊样式 */
.shop-capsule-container {
    position: absolute;
    bottom: max(30px, env(safe-area-inset-bottom, 30px));
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 100;
    pointer-events: none;
}
.shop-capsule {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 30px;
    display: flex;
    padding: 6px;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(212, 196, 183, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
    pointer-events: auto;
}
.shop-cap-tab {
    padding: 8px 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: #8E8E93;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.shop-cap-tab svg {
    width: 18px;
    height: 18px;
}
.shop-cap-tab.active {
    background: #5d5350;
    color: #FFFFFF;
    box-shadow: 0 4px 10px rgba(93, 83, 80, 0.2);
}

.shop-cart-badge { 
    position: absolute; 
    top: -5px; 
    right: -5px; 
    background: #c28e7e; 
    color: #fff; 
    font-size: 12px; 
    font-weight: bold; 
    min-width: 20px; 
    height: 20px; 
    border-radius: 10px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 0 6px; 
    border: 2px solid #5d5350; 
}

#wc-modal-shop-cart .wc-modal-content { background: #fdfbf7; }
#wc-modal-shop-cart .wc-modal-header { background: #fdfbf7; }

.cart-item { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    padding: 15px 0; 
    border-bottom: 1px dashed #e8dfd8; 
}
.cart-item-img { 
    width: 60px; 
    height: 60px; 
    border-radius: 10px; 
    object-fit: cover; 
    background: #f5f5f5; 
    flex-shrink: 0; 
}
.cart-item-info { flex: 1; overflow: hidden; }
.cart-item-title { 
    font-size: 15px; 
    font-weight: 600; 
    color: #4a413e; 
    margin-bottom: 4px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
.cart-item-price { 
    font-size: 15px; 
    font-weight: bold; 
    color: #c28e7e; 
    font-family: 'Georgia', serif; 
    font-style: italic; 
}
.cart-item-remove { 
    color: #999; 
    font-size: 24px; 
    cursor: pointer; 
    padding: 0 10px; 
}
/* ========================================== */
/* 新增：购物卡片样式 (200x180px 高级 INS 风) */
/* ========================================== */
.shopping-card {
    width: 200px;
    height: 180px;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    box-sizing: border-box;
}

/* 顶部标签和图标容器 */
.shopping-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.shopping-card-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}

.shopping-card-icon {
    width: 24px;
    height: 24px;
    opacity: 0.8;
}

.shopping-card-icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

/* 中间内容区 */
.shopping-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.shopping-card-title {
    font-family: 'Georgia', serif;
    font-size: 18px;
    font-weight: bold;
    font-style: italic;
    margin-bottom: 6px;
    line-height: 1.2;
}

.shopping-card-desc {
    font-size: 12px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 底部价格和状态 */
.shopping-card-footer {
    margin-top: auto;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.shopping-card-price {
    font-family: 'Georgia', serif;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -0.5px;
}

.shopping-card-status {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: right;
    line-height: 1.3;
}

/* 礼物卡片样式 (低饱和灰粉/香槟金系) */
.shopping-card.gift {
    background: linear-gradient(145deg, #FCF9F8 0%, #F7EFEA 100%);
    border: 1px solid #EFE5DF;
    color: #5D4A45;
}
.shopping-card.gift .shopping-card-tag {
    background: rgba(93, 74, 69, 0.08);
    color: #5D4A45;
}
.shopping-card.gift .shopping-card-title {
    color: #3A2E2B;
}
.shopping-card.gift .shopping-card-desc {
    color: #8A7873;
}
.shopping-card.gift .shopping-card-price {
    color: #3A2E2B;
}
.shopping-card.gift .shopping-card-status {
    color: #A3918C;
}

/* 代付卡片样式 (低饱和灰蓝/雾霾蓝系) */
.shopping-card.daifu {
    background: linear-gradient(145deg, #F5F7FA 0%, #E8EEF2 100%);
    border: 1px solid #DFE6EC;
    color: #4A5568;
}
.shopping-card.daifu .shopping-card-tag {
    background: rgba(74, 85, 104, 0.08);
    color: #4A5568;
}
.shopping-card.daifu .shopping-card-title {
    color: #2D3748;
}
.shopping-card.daifu .shopping-card-desc {
    color: #718096;
}
.shopping-card.daifu .shopping-card-price {
    color: #2D3748;
}
.shopping-card.daifu .shopping-card-status {
    color: #A0AEC0;
}

/* 装饰性背景图案 */
.shopping-card::after {
    content: '';
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}

/* ========================================== */
/* 新增：购物流程高级卡片弹窗样式 */
/* ========================================== */

/* 结算卡片 */
.shop-checkout-card {
    background: #fdfbf7;
    border-radius: 24px;
    padding: 25px;
    width: 90%;
    max-width: 340px;
    box-shadow: 0 10px 30px rgba(212, 196, 183, 0.3);
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.shop-checkout-card h3 {
    font-size: 20px;
    color: #4a413e;
    font-weight: 600;
    margin: 0;
}
.checkout-total-display {
    background: #fff;
    border-radius: 16px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #f5f0eb;
}
.checkout-total-display span {
    font-size: 15px;
    color: #9e948f;
}
.checkout-total-display strong {
    font-size: 22px;
    font-weight: bold;
    color: #c28e7e;
    font-family: 'Georgia', serif;
}
.checkout-actions {
    display: flex;
    gap: 15px;
}
.shop-card-btn {
    flex: 1;
    padding: 15px;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.shop-card-btn:active {
    transform: scale(0.95);
}
.shop-card-btn svg {
    width: 28px;
    height: 28px;
    stroke-width: 1.5;
}
.shop-card-btn span {
    font-size: 15px;
    font-weight: 600;
}
.shop-card-btn.gift {
    background: #ffe4e6;
    color: #d6336c;
    box-shadow: 0 4px 15px rgba(240, 98, 146, 0.1);
}
.shop-card-btn.daifu {
    background: #e7f5ff;
    color: #1c7ed6;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.1);
}

/* 配送方式卡片 */
.shop-delivery-card {
    background: #fdfbf7;
    border-radius: 24px;
    padding: 25px;
    width: 90%;
    max-width: 340px;
    box-shadow: 0 10px 30px rgba(212, 196, 183, 0.3);
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.shop-delivery-card h3 {
    font-size: 20px;
    color: #4a413e;
    font-weight: 600;
    margin: 0;
}
.delivery-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.shop-card-btn.delivery {
    flex-direction: row;
    justify-content: flex-start;
    background: #fff;
    border: 1px solid #f5f0eb;
    color: #5d5350;
    text-align: left;
}
.shop-card-btn.delivery svg {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    color: #d4c4b7;
}
.shop-card-btn.delivery small {
    font-size: 12px;
    color: #9e948f;
    font-weight: normal;
    margin-top: 2px;
}
.shop-card-btn.delivery div {
    display: flex;
    flex-direction: column;
}

/* 时间选择器卡片 */
.time-picker-card {
    background: #fdfbf7;
    border-radius: 24px;
    padding: 25px;
    width: 90%;
    max-width: 340px;
    box-shadow: 0 10px 30px rgba(212, 196, 183, 0.3);
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.time-picker-card h3 {
    font-size: 20px;
    color: #4a413e;
    font-weight: 600;
    margin: 0;
}
.time-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.time-option-btn {
    padding: 12px;
    background: #fff;
    border: 1px solid #f5f0eb;
    border-radius: 12px;
    font-size: 14px;
    color: #5d5350;
    cursor: pointer;
    transition: background 0.2s;
}
.time-option-btn:active {
    background: #f5f0eb;
}
.time-options .time-option-btn:first-child {
    grid-column: 1 / -1; /* 第一个按钮占满一行 */
}
.custom-time-section {
    margin-top: 10px;
    border-top: 1px dashed #e8dfd8;
    padding-top: 20px;
}
.custom-time-section label {
    font-size: 14px;
    color: #9e948f;
    margin-bottom: 10px;
    display: block;
}
#custom-time-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #e8dfd8;
    border-radius: 12px;
    background: #fff;
    font-size: 16px;
    color: #4a413e;
    font-family: inherit;
    -webkit-appearance: none;
}
/* ========================================== */
/* App 3: INS Music Player Styles (Black & White iOS) */
/* ========================================== */
.ins-music-root {
    width: 100%; height: 100%; position: relative; overflow: hidden;
    background-color: #FFF; color: #111; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ins-music-view {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: none; flex-direction: column; overflow-y: auto;
    background-color: #FFF; /* 修复：增加背景色防止透底 */
}
.ins-music-view.active { display: flex; animation: wcFadeIn 0.3s ease; }

/* 强制底部留白，防止被播放器和Tabbar遮挡 */
.ins-music-bottom-spacer { height: 180px; width: 100%; flex-shrink: 0; }

/* Header & Search Bar */
.ins-music-header { padding: 60px 20px 20px 20px; background: #FFF; position: sticky; top: 0; z-index: 10; }
.ins-music-title { font-size: 32px; font-weight: 800; color: #111; margin-bottom: 20px; letter-spacing: -0.5px; }
.ins-music-search-bar {
    background: #F5F5F5; border-radius: 12px; padding: 12px 16px;
    display: flex; align-items: center; gap: 10px; cursor: pointer;
}
.ins-music-search-bar svg { width: 20px; height: 20px; fill: #888; }
.ins-music-search-bar span { color: #888; font-size: 15px; }

/* Content & Char Grid */
.ins-music-content { padding: 0 20px; flex: 1; }
.ins-music-section-title { font-size: 13px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; }
.ins-music-char-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.ins-music-char-card {
    background: #FFF; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #F0F0F0; cursor: pointer; transition: transform 0.2s;
}
.ins-music-char-card:active { transform: scale(0.96); }
.ins-music-char-img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #F5F5F5; }
.ins-music-char-info { padding: 12px; text-align: center; }
.ins-music-char-name { font-size: 14px; font-weight: 600; color: #111; }
.ins-music-char-action { font-size: 11px; color: #888; margin-top: 4px; }

/* Profile View (半屏背景 + 白色底图) */
.ins-music-profile-bg { 
    position: absolute; top: 0; left: 0; width: 100%; height: 40vh; 
    background-size: cover; background-position: center; 
    z-index: 0; filter: brightness(0.8); 
}
.ins-music-profile-topbar { 
    position: absolute; top: 0; left: 0; width: 100%;
    padding: env(safe-area-inset-top, 50px) 20px 20px 20px; 
    display: flex; justify-content: space-between; align-items: center; z-index: 10;
}
.ins-music-btn-icon { 
    width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.2); 
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: #FFF; 
}
.ins-music-btn-icon svg { width: 20px; height: 20px; fill: currentColor; }

.ins-music-profile-content {
    position: relative; z-index: 2; margin-top: 30vh;
    background: #FFF; border-radius: 30px 30px 0 0; min-height: 70vh;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.1);
}
.ins-music-profile-info { display: flex; flex-direction: column; align-items: center; padding: 0 20px; transform: translateY(-50px); margin-bottom: -30px; }
.ins-music-avatar-wrapper { 
    width: 100px; height: 100px; border-radius: 50%; padding: 4px; background: #FFF; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); margin-bottom: 15px; 
}
.ins-music-profile-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ins-music-profile-name { font-size: 24px; font-weight: 800; color: #111; letter-spacing: -0.5px; }

.ins-music-playlist-container { padding: 0 20px; }
.ins-music-playlist-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.ins-music-playlist-card { 
    display: flex; align-items: center; gap: 15px; background: #F9F9F9; 
    padding: 10px; border-radius: 16px; cursor: pointer; transition: background 0.2s;
}
.ins-music-playlist-card:active { background: #F0F0F0; }
.ins-music-playlist-cover { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; background: #E5E5EA; }
.ins-music-playlist-info { flex: 1; }
.ins-music-playlist-name { font-size: 15px; font-weight: 600; color: #111; margin-bottom: 4px; }
.ins-music-playlist-count { font-size: 12px; color: #888; }
.ins-music-btn-create { 
    display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px; 
    background: #F5F5F5; border-radius: 16px; color: #111; font-weight: 600; cursor: pointer; 
}
.ins-music-btn-create svg { width: 20px; height: 20px; fill: currentColor; }

/* Search Overlay */
.ins-music-search-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #FFF; z-index: 20; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
.ins-music-search-overlay.active { transform: translateY(0); }
.ins-music-search-header { padding: 50px 20px 15px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #F0F0F0; }
.ins-music-search-input { flex: 1; background: #F5F5F5; border: none; border-radius: 12px; padding: 10px 16px; font-size: 15px; color: #111; outline: none; }
.ins-music-search-results { flex: 1; overflow-y: auto; padding: 20px; }
.ins-music-empty-state { text-align: center; color: #888; margin-top: 50px; font-size: 14px; }
.ins-music-song-item { display: flex; align-items: center; gap: 15px; padding: 10px 0; border-bottom: 1px solid #F9F9F9; cursor: pointer; }
.ins-music-song-cover { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; background: #F5F5F5; }
.ins-music-song-info { flex: 1; overflow: hidden; }
.ins-music-song-title { font-size: 15px; font-weight: 600; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.ins-music-song-artist { font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Mini Player */
.ins-music-mini-player {
    position: absolute; bottom: 90px; left: 15px; right: 15px; height: 60px;
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-radius: 16px; box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    display: flex; align-items: center; padding: 8px 12px 8px 8px; z-index: 15; border: 1px solid #F0F0F0;
    cursor: pointer;
}
.ins-music-player-cover { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: #F5F5F5; }
.ins-music-player-info { flex: 1; margin: 0 12px; overflow: hidden; }
.ins-music-player-title { font-size: 14px; font-weight: 600; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-music-player-artist { font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-music-player-controls { z-index: 2; }
.ins-music-player-controls .ins-music-btn-icon { width: 32px; height: 32px; color: #111; } 

/* ========================================== */
/* 全屏播放器 (黑白灰简约 iOS 风 + 黑胶唱片) */
/* ========================================== */
.ins-music-full-player {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #FFF; z-index: 3000; display: flex; flex-direction: column;
    transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.4s;
    visibility: hidden; pointer-events: none; 
}
/* 增加伪元素作为延伸背景，彻底防止 iOS 键盘弹出时页面被上推露出的黑色缝隙 */
.ins-music-full-player::before {
    content: '';
    position: absolute;
    top: -50vh;
    left: 0;
    width: 100%;
    height: 200vh;
    background: #FFF;
    z-index: -1;
}
.ins-music-full-player.active { 
    transform: translateY(0); 
    visibility: visible; pointer-events: auto; 
}
.ins-music-fp-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: calc(env(safe-area-inset-top, 20px) + 20px) 20px 10px 20px; /* 修复：增加顶部间距，防止太靠上 */
}
.ins-music-fp-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #111; }
.ins-music-fp-btn svg { width: 24px; height: 24px; fill: currentColor; }

/* 一起听歌 Header (大头像居中版) */
.ins-music-fp-together { 
    display: flex; flex-direction: column; align-items: center; 
    margin-top: 10px; margin-bottom: -10px; z-index: 10; 
}
.ins-music-fp-avatars { 
    display: flex; align-items: center; gap: 15px; 
    margin-bottom: 12px; 
}
.ins-music-fp-avatar { 
    width: 80px; height: 80px; 
    border-radius: 50%; object-fit: cover; 
    border: 3px solid #FFF; box-shadow: 0 8px 25px rgba(0,0,0,0.15); 
}
.ins-music-fp-avatar.char { margin-left: 0; z-index: 2; } 
.ins-music-fp-timer { 
    font-size: 14px; font-weight: 700; color: #555; font-family: monospace; 
    letter-spacing: 2px; background: #F5F5F5; padding: 6px 16px; border-radius: 16px; 
}
/* 黑胶唱片设计 */
.ins-music-fp-record-container {
    flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px;
    margin-top: 2vh; margin-bottom: 2vh; min-height: 280px; /* 修复：增加上下弹性边距，使布局更均衡 */
}
.ins-music-fp-record {
    width: 280px; height: 280px; border-radius: 50%; background: #111; /* 稍微放大唱片 */
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2), inset 0 0 0 8px #222, inset 0 0 0 16px #111, inset 0 0 0 17px #333;
    animation: spin 12s linear infinite; animation-play-state: paused;
}
.ins-music-fp-record.playing { animation-play-state: running; }
.ins-music-fp-cover {
    width: 180px; height: 180px; border-radius: 50%; object-fit: cover;
    border: 4px solid #000;
}

/* 歌曲信息 */
.ins-music-fp-info { padding: 0 30px 15px 30px; text-align: center; }
.ins-music-fp-song { font-size: 24px; font-weight: 800; color: #111; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.5px; }
.ins-music-fp-artist { font-size: 15px; color: #888; font-weight: 500; }

/* 滚动歌词 */
.ins-music-fp-lyrics-container {
    height: 60px; overflow: hidden; position: relative; margin: 0 30px 20px 30px;
    mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}
.ins-music-fp-lyrics {
    display: flex; flex-direction: column; align-items: center; transition: transform 0.3s ease-out;
}
.ins-music-lyric-line {
    height: 30px; line-height: 30px; font-size: 14px; color: #CCC; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; transition: color 0.3s, font-size 0.3s;
}
.ins-music-lyric-line.active { color: #111; font-weight: 700; font-size: 16px; }

/* 进度条 UI */
.ins-music-fp-progress { padding: 0 30px 20px 30px; }
.ins-music-fp-progress-bar { width: 100%; height: 4px; background: #F0F0F0; border-radius: 2px; position: relative; cursor: pointer; }
.ins-music-fp-progress-fill { width: 0%; height: 100%; background: #111; border-radius: 2px; position: absolute; top: 0; left: 0; pointer-events: none; }
.ins-music-fp-progress-fill::after { content: ''; position: absolute; right: -4px; top: -3px; width: 10px; height: 10px; background: #111; border-radius: 50%; }
.ins-music-fp-time { display: flex; justify-content: space-between; font-size: 11px; color: #888; margin-top: 10px; font-weight: 600; font-family: monospace; }

/* 控制栏 */
.ins-music-fp-controls {
    display: flex; justify-content: space-between; align-items: center; 
    padding: 10px 30px calc(env(safe-area-inset-bottom, 20px) + 40px) 30px; /* 修复：增加底部间距，减少底部过度留白 */
}
.ins-music-fp-ctrl-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #111; }
.ins-music-fp-ctrl-btn svg { width: 32px; height: 32px; fill: currentColor; }
.ins-music-fp-ctrl-btn.small svg { width: 22px; height: 22px; fill: #888; }
.ins-music-fp-ctrl-btn.play { width: 64px; height: 64px; background: #111; color: #FFF; border-radius: 50%; box-shadow: 0 10px 20px rgba(0,0,0,0.15); }
.ins-music-fp-ctrl-btn.play svg { width: 32px; height: 32px; }

/* ========================================== */
/* 聊天气泡：180x100px 高级黑白灰邀请卡片 */
/* ========================================== */
.wc-bubble.music-invite {
    background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important;
}
.ins-music-chat-card {
    width: 180px; height: 100px; background: #FFF; border-radius: 16px;
    border: 1px solid #E5E5EA; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 12px; box-sizing: border-box; cursor: pointer; position: relative; overflow: hidden;
}
.ins-music-chat-card::before {
    content: ''; position: absolute; top: -20px; right: -20px; width: 60px; height: 60px;
    background: #F5F5F5; border-radius: 50%; z-index: 0;
}
.ins-music-chat-top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }
.ins-music-chat-tag { font-size: 9px; font-weight: 700; color: #111; text-transform: uppercase; letter-spacing: 1px; border: 1px solid #111; padding: 2px 6px; border-radius: 4px; }
.ins-music-chat-icon { width: 16px; height: 16px; fill: #888; }
.ins-music-chat-mid { position: relative; z-index: 1; margin-top: auto; margin-bottom: 4px; }
.ins-music-chat-song { font-size: 13px; font-weight: 700; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-music-chat-artist { font-size: 10px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-music-chat-bottom { position: relative; z-index: 1; font-size: 9px; color: #CCC; text-transform: uppercase; letter-spacing: 0.5px; border-top: 1px dashed #F0F0F0; padding-top: 4px; }

/* ========================================== */
/* 邀请弹窗 (高级黑白灰 INS 风) */
/* ========================================== */
.ins-music-invite-card {
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    width: 300px; border-radius: 24px; padding: 30px 20px 20px 20px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); position: relative; margin: auto;
}
.ins-music-invite-avatar-wrap {
    width: 80px; height: 80px; border-radius: 50%; padding: 4px; background: #FFF;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08); position: absolute; top: -40px;
}
.ins-music-invite-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ins-music-invite-title { font-size: 20px; font-weight: 800; color: #111; margin-top: 20px; margin-bottom: 8px; letter-spacing: -0.5px; }
.ins-music-invite-desc { font-size: 14px; color: #888; margin-bottom: 15px; }
.ins-music-invite-song {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: #F5F5F5; padding: 10px 16px; border-radius: 12px; width: 100%; margin-bottom: 24px;
}
.ins-music-invite-song svg { width: 16px; height: 16px; fill: #888; }
.ins-music-invite-song span { font-size: 13px; font-weight: 600; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.ins-music-invite-actions { display: flex; width: 100%; gap: 12px; }
.ins-music-invite-btn {
    flex: 1; padding: 14px 0; border-radius: 14px; font-size: 15px; font-weight: 600; cursor: pointer; border: none; transition: transform 0.1s;
}
.ins-music-invite-btn:active { transform: scale(0.95); }
.ins-music-invite-btn.cancel { background: #F5F5F5; color: #888; }
.ins-music-invite-btn.confirm { background: #111; color: #FFF; box-shadow: 0 8px 15px rgba(0,0,0,0.15); }

/* Tabbar */
.ins-music-tabbar {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 80px;
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid #F0F0F0; display: flex; justify-content: space-around; align-items: center; padding-bottom: env(safe-area-inset-bottom); z-index: 10;
}
.ins-music-tab { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; color: #B2B2B2; cursor: pointer; transition: all 0.3s; }
.ins-music-tab svg { width: 26px; height: 26px; fill: currentColor; }
.ins-music-tab.active { color: #111; transform: translateY(-3px); }

/* Exit Button */
.ins-music-exit-btn {
    position: absolute; top: 50px; right: 20px; width: 36px; height: 36px;
    background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    cursor: pointer; z-index: 15; color: #111; border: 1px solid #F0F0F0;
}
.ins-music-exit-btn svg { width: 20px; height: 20px; fill: currentColor; }
        /* 音乐播放器迷你聊天弹窗样式 */
        .music-chat-window {
            position: absolute;
            top: 165px; /* 恢复到原来的高度，完美盖在唱片上方 */
            left: 20px;
            right: 20px;
            height: 320px; 
            max-height: calc(100% - 180px); /* 键盘弹出时自动压缩高度，防止被顶出屏幕 */
            background: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            z-index: 100;
            box-shadow: 0 8px 32px rgba(0,0,0,0.15);
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.3);
        }        
        .music-chat-history {
            flex: 1;
            overflow-y: auto;
            padding: 12px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .music-chat-input-area {
            display: flex;
            padding: 10px;
            background: rgba(255,255,255,0.6);
            border-top: 1px solid rgba(0,0,0,0.05);
            align-items: center;
        }
        .music-chat-input-area input {
            flex: 1;
            border: none;
            background: rgba(0,0,0,0.05);
            border-radius: 18px;
            padding: 8px 14px;
            font-size: 14px;
            outline: none;
            color: #333;
        }
        .music-chat-input-area button {
            background: transparent;
            border: none;
            color: #007AFF;
            font-weight: 600;
            padding: 0 0 0 10px;
            font-size: 15px;
            cursor: pointer;
        }
        .music-chat-msg {
            max-width: 85%;
            padding: 10px 14px;
            border-radius: 16px;
            font-size: 14px;
            line-height: 1.4;
            word-break: break-word;
        }
        .music-chat-msg.me {
            align-self: flex-end;
            background: #007AFF;
            color: white;
            border-bottom-right-radius: 4px;
        }
        .music-chat-msg.them {
            align-self: flex-start;
            background: #E5E5EA;
            color: black;
            border-bottom-left-radius: 4px;
        }       
            /* 韩系极简黑白灰风格邀请弹窗 CSS */
            .ins-korean-invite-card {
                width: 300px;
                background: #ffffff;
                border-radius: 20px;
                padding: 24px;
                box-shadow: 0 20px 40px rgba(0,0,0,0.15);
                display: flex;
                flex-direction: column;
                font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
                animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            }
            @keyframes slideUpFade {
                from { opacity: 0; transform: translateY(20px) scale(0.95); }
                to { opacity: 1; transform: translateY(0) scale(1); }
            }
            .invite-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
            }
            .invite-tag {
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 1.5px;
                color: #888;
            }
            .invite-close {
                background: none; border: none; padding: 0; cursor: pointer; color: #111; width: 20px; height: 20px;
            }
            .invite-close svg { width: 100%; height: 100%; fill: currentColor; }
            .invite-body {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
            .invite-avatar-ring {
                width: 72px; height: 72px; border-radius: 50%; padding: 3px; border: 1px solid #E5E5EA; margin-bottom: 16px;
            }
            .invite-avatar {
                width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
            }
            .invite-name {
                font-size: 18px; font-weight: 600; color: #111; margin: 0 0 6px 0;
            }
            .invite-text {
                font-size: 14px; color: #666; margin: 0 0 20px 0; font-style: italic;
            }
            .invite-song-box {
                width: 100%; background: #F9F9F9; border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 12px; margin-bottom: 24px; border: 1px solid #F0F0F0;
            }
            .vinyl-icon {
                width: 32px; height: 32px; color: #111; display: flex; align-items: center; justify-content: center;
            }
            .vinyl-icon svg { width: 24px; height: 24px; animation: spin 4s linear infinite; }
            @keyframes spin { 100% { transform: rotate(360deg); } }
            .song-info { text-align: left; flex: 1; overflow: hidden; }
            .song-name { font-size: 14px; font-weight: 600; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .song-artist { font-size: 11px; color: #888; margin-top: 2px; }
            .invite-actions {
                display: flex; gap: 12px; width: 100%;
            }
            .invite-actions button {
                flex: 1; height: 44px; border-radius: 22px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s;
            }
            .btn-reject {
                background: #FFF; color: #111; border: 1px solid #E5E5EA;
            }
            .btn-accept {
                background: #111; color: #FFF; border: none;
            }
            .btn-reject:active { background: #F5F5F5; }
            .btn-accept:active { transform: scale(0.96); }
/* ========================================== */
/* 音乐胶囊 (Music Capsule) 样式 (下拉悬浮版) */
/* ========================================== */

.ins-music-capsule-toggle {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #CCC; transition: all 0.3s ease;
}
.ins-music-capsule-toggle svg { width: 22px; height: 22px; fill: currentColor; }
.ins-music-capsule-toggle.active { color: #111; transform: scale(1.1); }

/* 悬浮胶囊主容器 (透明包裹层，负责定位) */
.floating-music-capsule {
    position: fixed;
    top: 60px; left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
}
.floating-music-capsule.hidden { display: none; }

/* 1. 收起状态 (灵动岛本体) */
.capsule-island-view {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 6px 0 12px;
    box-sizing: border-box;
    min-width: 85px; height: 32px;
    background: rgba(128, 128, 128, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: transform 0.2s;
}
.capsule-island-view:active { transform: scale(0.95); }

.capsule-wave { display: flex; align-items: center; gap: 2px; height: 12px; }
.wave-bar { width: 2px; background: #FFF; border-radius: 1px; animation: waveAnim 1s infinite ease-in-out; }
.wave-bar:nth-child(1) { height: 6px; animation-delay: 0s; }
.wave-bar:nth-child(2) { height: 12px; animation-delay: 0.2s; }
.wave-bar:nth-child(3) { height: 8px; animation-delay: 0.4s; }
@keyframes waveAnim { 0%, 100% { height: 4px; } 50% { height: 12px; } }
.floating-music-capsule.paused .wave-bar { animation-play-state: paused; }

.capsule-island-cover { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }

/* 2. 下拉迷你播放器 (展开状态，固定在胶囊下方 8px) */
.capsule-dropdown-player {
    position: absolute;
    top: calc(100% + 8px); /* 距离胶囊下方 8px */
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    width: 280px; height: 175px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    display: flex; flex-direction: column;
    padding: 8px 15px; box-sizing: border-box;
    opacity: 0; 
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.capsule-dropdown-player.active { 
    opacity: 1; 
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.capsule-dropdown-player.hidden { display: none; }

.capsule-exp-top { display: flex; justify-content: center; align-items: center; height: 40px; margin-bottom: 5px; }
.capsule-exp-cover { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.capsule-exp-avatars { display: flex; align-items: center; gap: 2px; }
.capsule-exp-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.capsule-exp-mid { display: flex; flex-direction: column; align-items: center; margin-bottom: 5px; }
.capsule-exp-title { font-size: 14px; font-weight: 700; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90%; }
.capsule-exp-artist { font-size: 11px; color: #888; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90%; }
.capsule-exp-lyric { font-size: 12px; color: #555; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90%; height: 16px; }
.capsule-exp-progress { width: 100%; padding: 0 10px; margin-top: 5px; }
.capsule-exp-progress-bar { width: 100%; height: 4px; background: #E5E5EA; border-radius: 2px; position: relative; cursor: pointer; }
.capsule-exp-progress-fill { width: 0%; height: 100%; background: #111; border-radius: 2px; position: absolute; top: 0; left: 0; pointer-events: none; }
.capsule-exp-controls { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 10px; }
.capsule-btn { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #111; cursor: pointer; transition: transform 0.1s; }
.capsule-btn:active { transform: scale(0.9); background: #E5E5EA; }
.capsule-btn svg { width: 20px; height: 20px; fill: currentColor; }
.capsule-btn.small svg { width: 16px; height: 16px; fill: #888; }
.capsule-btn.play { width: 36px; height: 36px; background: #111; color: #FFF; }
.capsule-btn.play svg { width: 20px; height: 20px; }
/* ========================================== */
/* 梦境系统 (Dream Space) - 极简黑白灰 INS 风 */
/* ========================================== */

.dream-fullscreen-view {
    position: fixed; top: 0; left: 0; width: 100%; height: var(--app-height, 100dvh); min-height: var(--app-height, 100dvh); height: 100dvh;
    background: #FAFAFA; z-index: 9000;
    display: none; flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    animation: wcFadeIn 0.3s ease;
}
.dream-fullscreen-view.active { display: flex; }

.dream-header {
    height: calc(50px + env(safe-area-inset-top, 20px));
    padding-top: env(safe-area-inset-top, 20px);
    display: flex; justify-content: space-between; align-items: center;
    padding-left: 15px; padding-right: 15px;
    background: #FAFAFA; border-bottom: 1px solid #F0F0F0; flex-shrink: 0;
}
.dream-title {
    font-family: 'Georgia', serif; font-style: italic; font-size: 16px;
    font-weight: bold; color: #111; letter-spacing: 2px;
}
.dream-header-right { display: flex; gap: 10px; }
.dream-icon-btn {
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #111;
}
.dream-icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }

.dream-content {
    flex: 1; overflow-y: auto; padding: 20px; background: #FAFAFA;
}
.dream-empty-state {
    text-align: center; color: #CCC; font-family: 'Georgia', serif; font-style: italic;
    margin-top: 50px; font-size: 14px; letter-spacing: 1px;
}

.dream-bottom-bar {
    padding: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 20px));
    background: #FAFAFA; border-top: 1px solid #F0F0F0;
}
.dream-btn-primary {
    width: 100%; height: 50px; background: #111; color: #FFF;
    border: none; border-radius: 25px; font-size: 14px; font-weight: bold;
    letter-spacing: 2px; cursor: pointer; transition: transform 0.1s;
}
.dream-btn-primary:active { transform: scale(0.98); }
.dream-btn-secondary {
    flex: 1; height: 50px; background: #FFF; color: #111;
    border: 1px solid #E5E5EA; border-radius: 25px; font-size: 14px; font-weight: bold;
    cursor: pointer; transition: background 0.1s;
}
.dream-btn-secondary:active { background: #F5F5F5; }

/* 梦境卡片 (高级感) */
.dream-card {
    background: #FFF; border-radius: 16px; padding: 24px; margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04); border: 1px solid #F5F5F5;
    position: relative; overflow: hidden;
}
.dream-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: #111;
}
.dream-card-date {
    font-family: 'Courier New', Courier, monospace; font-size: 11px; color: #999;
    margin-bottom: 12px; text-transform: uppercase; letter-spacing: 1px;
}
.dream-card-text {
    font-size: 14px; color: #333; line-height: 1.8; text-align: justify;
    font-family: 'Kaiti', 'STKaiti', '楷体', serif; /* 增加一点文艺感 */
}

/* 梦境聊天区 */
.dream-chat-content {
    flex: 1; overflow-y: auto; padding: 20px; background: #FAFAFA;
    display: flex; flex-direction: column; gap: 15px;
}
.dream-msg { max-width: 85%; padding: 12px 16px; border-radius: 16px; font-size: 15px; line-height: 1.5; }
.dream-msg.me { align-self: flex-end; background: #111; color: #FFF; border-bottom-right-radius: 4px; }
.dream-msg.ai { align-self: flex-start; background: #FFF; color: #111; border: 1px solid #E5E5EA; border-bottom-left-radius: 4px; }
.dream-msg.system { align-self: center; background: transparent; color: #999; font-size: 12px; font-style: italic; }

.dream-chat-footer {
    padding: 10px 15px calc(10px + env(safe-area-inset-bottom, 20px)) 15px;
    background: #FFF; border-top: 1px solid #F0F0F0; display: flex; flex-direction: column; gap: 10px;
}
.dream-chat-footer textarea {
    width: 100%; height: 80px; border: 1px solid #E5E5EA; border-radius: 12px;
    padding: 10px; font-size: 15px; background: #FAFAFA; resize: none; outline: none;
}
.dream-chat-actions { display: flex; gap: 10px; }

/* 设置弹窗 */
.dream-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); z-index: 9999; display: none;
    align-items: flex-end; justify-content: center;
}
.dream-modal-overlay.active { display: flex; }
.dream-modal-box {
    width: 100%; background: #FFF; border-radius: 24px 24px 0 0;
    padding: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 20px));
    animation: wcSlideUpModal 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.dream-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 16px; font-weight: bold; margin-bottom: 20px; border-bottom: 1px solid #F0F0F0; padding-bottom: 15px;
}
.dream-section-title { font-size: 12px; color: #999; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.dream-list-container { max-height: 200px; overflow-y: auto; background: #FAFAFA; border-radius: 12px; padding: 10px; }
.dream-item-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0; border-bottom: 1px solid #E5E5EA; font-size: 14px; color: #333;
}
.dream-item-row:last-child { border-bottom: none; }
.dream-checkbox { width: 20px; height: 20px; accent-color: #111; }
/* ========================================== */
/* 梦境预设编辑卡片 (档案袋/报纸风，无圆角) */
/* ========================================== */
.dream-preset-paper {
    width: 90%; max-width: 340px;
    background: #F4F4F4; /* 偏灰的纸张底色 */
    border: 2px solid #111;
    border-radius: 0; /* 绝对无圆角 */
    box-shadow: 6px 6px 0px #111; /* 硬阴影，复古印刷感 */
    padding: 24px;
    display: flex; flex-direction: column; gap: 20px;
    font-family: 'Courier New', Courier, monospace, sans-serif;
    animation: wcPopIn 0.2s ease-out;
}

.dream-preset-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    border-bottom: 2px solid #111; padding-bottom: 10px;
}
.dream-preset-brand {
    font-size: 18px; font-weight: 900; color: #111; letter-spacing: 1px;
}
.dream-preset-date {
    font-size: 12px; color: #555; font-weight: bold;
}

.dream-preset-title-input input {
    width: 100%; background: transparent; border: none;
    border-bottom: 1px dashed #999; border-radius: 0;
    padding: 10px 0; font-size: 16px; font-weight: bold; color: #111;
    font-family: inherit; outline: none;
}
.dream-preset-title-input input::placeholder { color: #AAA; font-weight: normal; }

.dream-preset-body-input textarea {
    width: 100%; height: 150px; background: transparent; border: none;
    border-bottom: 1px dashed #999; border-radius: 0;
    padding: 10px 0; font-size: 14px; color: #333; line-height: 1.6;
    font-family: 'Kaiti', 'STKaiti', '楷体', serif; /* 内容用衬线体增加文艺感 */
    resize: none; outline: none;
}
.dream-preset-body-input textarea::placeholder { color: #AAA; font-family: 'Courier New', Courier, monospace; }

.dream-preset-footer {
    display: flex; gap: 15px; margin-top: 10px;
}
.dream-preset-btn {
    flex: 1; padding: 12px 0; border-radius: 0; font-size: 14px; font-weight: bold;
    font-family: inherit; cursor: pointer; letter-spacing: 1px; transition: all 0.1s;
}
.dream-preset-btn.cancel {
    background: transparent; color: #111; border: 1px solid #111;
}
.dream-preset-btn.cancel:active { background: #E5E5EA; }
.dream-preset-btn.save {
    background: #111; color: #FFF; border: 1px solid #111;
}
.dream-preset-btn.save:active { transform: translate(2px, 2px); box-shadow: none; }

/* ========================================== */
/* 梦境预设列表 - 左滑删除样式 */
/* ========================================== */
.dream-swipe-wrapper {
    position: relative; overflow: hidden; border-bottom: 1px solid #E5E5EA;
}
.dream-swipe-wrapper:last-child { border-bottom: none; }
.dream-swipe-action {
    position: absolute; right: 0; top: 0; bottom: 0; width: 70px;
    background: #111; color: #FFF; display: flex; align-items: center; justify-content: center;
    font-family: 'Courier New', monospace; font-weight: bold; font-size: 12px; letter-spacing: 1px;
    z-index: 0; cursor: pointer;
}
.dream-swipe-content {
    position: relative; z-index: 1; background: #FAFAFA; width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0; transition: transform 0.2s ease-out;
}
/* ========================================== */
/* 梦境扩展组件 (Extensions) 样式 */
/* ========================================== */
.dream-ext-tabs {
    display: flex; border-bottom: 1px solid #E5E5EA; margin-bottom: 15px;
}
.dream-ext-tab {
    flex: 1; text-align: center; padding: 10px 0; font-size: 13px; font-weight: bold;
    color: #999; cursor: pointer; transition: all 0.2s; letter-spacing: 1px;
}
.dream-ext-tab.active {
    color: #111; border-bottom: 2px solid #111;
}

.dream-ext-content-area {
    flex: 1; display: flex; flex-direction: column; overflow: hidden;
}

.dream-ext-input-box {
    background: #FAFAFA; border: 1px solid #E5E5EA; border-radius: 12px; padding: 15px;
    display: flex; flex-direction: column; flex-shrink: 0;
}

.dream-ext-name-input {
    background: transparent; border: none; border-bottom: 1px solid #CCC;
    font-size: 14px; font-weight: bold; color: #111; outline: none; width: 60%;
    font-family: inherit; padding-bottom: 4px;
}

.dream-ext-import-btn {
    font-size: 12px; color: #111; border: 1px solid #111; border-radius: 15px;
    padding: 4px 12px; cursor: pointer; font-weight: bold; display: flex; align-items: center;
}
.dream-ext-import-btn:active { background: #E5E5EA; }

.dream-ext-input-box textarea {
    width: 100%; height: 120px; background: transparent; border: none;
    font-size: 13px; color: #333; line-height: 1.5; font-family: 'Courier New', Courier, monospace;
    resize: none; outline: none; margin-top: 10px;
}

/* 扩展列表项 */
.dream-ext-item {
    display: flex; align-items: center; justify-content: space-between;
    background: #FFF; border: 1px solid #E5E5EA; border-radius: 8px;
    padding: 12px 15px; margin-bottom: 10px; transition: border 0.2s;
}
.dream-ext-item.active {
    border: 1px solid #111; box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.dream-ext-item-info { flex: 1; overflow: hidden; cursor: pointer; }
.dream-ext-item-name { font-size: 14px; font-weight: bold; color: #111; margin-bottom: 4px; }
.dream-ext-item-preview { font-size: 11px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: monospace; }
.dream-ext-item-actions { display: flex; gap: 15px; align-items: center; }
/* ========================================== */
/* 梦境底部输入框重构 (强制横向排列) */
/* ========================================== */
.dream-chat-footer {
    padding: 12px 15px calc(12px + env(safe-area-inset-bottom, 20px)) 15px !important;
    background: #FAFAFA !important; 
    border-top: 1px solid #E5E5EA !important;
    display: flex !important; 
    flex-direction: row !important; /* 核心修复：强制横向排列 */
    align-items: flex-end !important; /* 底部对齐，让按钮和输入框底边平齐 */
    gap: 12px !important;
}

.dream-chat-footer textarea {
    flex: 1 !important; 
    height: 44px; /* 👉 删掉这里的 !important，允许 JS 动态撑开高度 */
    min-height: 44px !important; 
    max-height: 120px !important;
    background: #FFF !important; 
    border: 1px solid #E5E5EA !important; 
    border-radius: 22px !important;
    padding: 12px 16px !important; 
    font-size: 15px !important; 
    color: #111 !important; 
    resize: none !important; 
    outline: none !important;
    font-family: inherit !important; 
    line-height: 1.4 !important;
    margin: 0 !important; 
}

.dream-footer-btn {
    width: 40px !important; 
    height: 40px !important; 
    border-radius: 50% !important; 
    background: #111 !important; 
    color: #FFF !important;
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    flex-shrink: 0 !important; /* 防止按钮被挤压变形 */
    cursor: pointer !important; 
    transition: transform 0.1s !important; 
    margin-bottom: 2px !important; /* 微调对齐 */
}

.dream-footer-btn:active { 
    transform: scale(0.9) !important; 
}

.dream-footer-btn svg { 
    width: 20px !important; 
    height: 20px !important; 
    fill: none !important; 
    stroke: currentColor !important; 
    stroke-width: 2 !important; 
    stroke-linejoin: round !important; 
    stroke-linecap: round !important; 
}
/* ========================================== */
/* AI 回复卡片与对话/旁白分离排版 */
/* ========================================== */ 
.dream-msg.ai {
    align-self: flex-start; 
    background: #FFF; 
    color: #111; 
    border: 1px solid #111; /* 黑色硬边框 */
    border-radius: 0; /* 绝对无圆角 */
    padding: 16px;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.05); /* 报纸风硬阴影 */
    width: 90%; /* 卡片稍微宽一点 */
    display: flex; flex-direction: column; gap: 8px;
}

/* 旁白文本 (无气泡) */
.dream-narrative-text {
    font-size: 14px; color: #555; line-height: 1.7;
    font-family: 'Kaiti', 'STKaiti', '楷体', serif;
    text-align: justify;
}

/* 对话文本 (带气泡包裹) */
.dream-dialogue-bubble {
    background: #F4F4F4;
    border-left: 3px solid #111;
    padding: 10px 14px;
    font-size: 15px; color: #111; font-weight: bold;
    border-radius: 0; /* 保持无圆角 */
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 4px 0;
}

/* ========================================== */
/* 长按菜单样式 */
/* ========================================== */
.dream-context-menu {
    position: fixed; background: #FFF; border: 2px solid #111; border-radius: 0;
    box-shadow: 4px 4px 0px #111; z-index: 10000; display: none; flex-direction: column;
    min-width: 120px; font-family: 'Courier New', monospace; font-weight: bold;
}
.dream-ctx-item {
    padding: 12px 16px; font-size: 13px; border-bottom: 1px dashed #CCC; cursor: pointer;
}
.dream-ctx-item:last-child { border-bottom: none; }
.dream-ctx-item:active { background: #F4F4F4; }
/* ========================================== */
/* 梦境卡片 - 云朵注入按钮 */
/* ========================================== */
.dream-card-cloud-btn {
    position: absolute;
    top: 15px;
    left: 15px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    letter-spacing: 1px;
}
.dream-card-cloud-btn:active { color: #111; }
.dream-card-cloud-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* 调整卡片日期的位置，给云朵让出空间 */
.dream-card-date {
    text-align: right;
    margin-bottom: 15px;
    margin-top: 10px;
}
/* ========================================== */
/* 梦境 AI 卡片操作按键 */
/* ========================================== */
.dream-msg.ai {
    position: relative; /* 确保内部绝对定位生效 */
    padding-bottom: 32px; /* 给底部按键留出空间 */
}

.dream-ai-action-btn {
    position: absolute;
    bottom: 8px;
    right: 12px;
    color: #CCC;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: color 0.2s;
}
.dream-ai-action-btn:active { color: #111; }
.dream-ai-action-btn svg { width: 18px; height: 18px; fill: currentColor; }
/* ========================================== */
/* 系统更新弹窗 (黑白灰高级感) */
/* ========================================== */
.sys-update-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.sys-update-overlay.active { opacity: 1; pointer-events: auto; }
.sys-update-box {
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    width: 85%; max-width: 320px; border-radius: 16px; overflow: hidden;
    transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.2); display: flex; flex-direction: column;
}
.sys-update-overlay.active .sys-update-box { transform: scale(1); }
.sys-update-header { padding: 24px 20px 16px; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.05); }
.sys-update-version { font-size: 10px; font-weight: 700; color: #888; letter-spacing: 1.5px; font-family: 'Courier New', Courier, monospace; }
.sys-update-title { font-size: 18px; font-weight: 600; color: #111; margin-top: 6px; letter-spacing: 0.5px; }
.sys-update-body { padding: 20px; max-height: 50vh; overflow-y: auto; }
.sys-update-section { margin-bottom: 20px; }
.sys-update-section:last-child { margin-bottom: 0; }
.sys-update-section h4 { font-size: 13px; font-weight: 600; color: #555; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid #eee; padding-bottom: 4px; }
.sys-update-list { list-style: none; padding: 0; margin: 0; }
.sys-update-list li { font-size: 13px; color: #333; line-height: 1.6; margin-bottom: 8px; position: relative; padding-left: 14px; text-align: justify; }
.sys-update-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 4px; height: 4px; background: #111; border-radius: 50%; }
.sys-update-footer { border-top: 1px solid rgba(0,0,0,0.05); }
.sys-update-btn { width: 100%; padding: 16px; background: transparent; border: none; font-size: 16px; font-weight: 600; color: #111; cursor: pointer; transition: background 0.2s; letter-spacing: 1px; }
.sys-update-btn:active { background: rgba(0,0,0,0.05); }

/* ========================================== */
/* 更新日志设置页 (可折叠手风琴) */
/* ========================================== */
.update-log-item { background: #fff; border-radius: 12px; margin-bottom: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: all 0.3s ease; }
.update-log-header { padding: 16px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; background: #fff; }
.update-log-header:active { background: #f9f9f9; }
.update-log-title-wrap { display: flex; flex-direction: column; gap: 4px; }
.update-log-version { font-size: 16px; font-weight: 600; color: #111; font-family: 'Courier New', Courier, monospace; }
.update-log-title-text { font-size: 12px; color: #666; }
.update-log-right { display: flex; align-items: center; gap: 8px; }
.update-log-date { font-size: 12px; color: #888; }
.update-log-chevron { width: 20px; height: 20px; fill: #ccc; transition: transform 0.3s ease; }
.update-log-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: #fafafa; }
.update-log-content-inner { padding: 16px; border-top: 1px solid #eee; }
.update-log-item.expanded .update-log-content { max-height: 1000px; }
.update-log-item.expanded .update-log-chevron { transform: rotate(180deg); }
.update-log-section { margin-bottom: 16px; }
.update-log-section:last-child { margin-bottom: 0; }
.update-log-section h4 { font-size: 13px; font-weight: 600; color: #555; margin-bottom: 8px; }
.update-log-list { list-style: none; padding: 0; margin: 0; }
.update-log-list li { font-size: 13px; color: #333; line-height: 1.6; margin-bottom: 6px; position: relative; padding-left: 12px; text-align: justify; }
.update-log-list li::before { content: '-'; position: absolute; left: 0; color: #888; }

/* ========================================== */
/* 新增：Chat 页面定制化 UI (高级黑白灰卡片) */
/* ========================================== */
/* 顶栏卡片化模式 */
.wc-navbar.custom-chat-nav-mode {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    justify-content: center;
}
.wc-navbar.custom-chat-nav-mode .wc-nav-left,
.wc-navbar.custom-chat-nav-mode .wc-nav-right {
    display: none !important;
}
.wc-navbar.custom-chat-nav-mode .wc-nav-title {
    flex: none;
    overflow: visible;
}
/* 300x60px 的圆角长方形卡片 */
.chat-nav-card {
    width: 300px;
    height: 60px;
    background: #FFFFFF;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    border: 1px solid #F5F5F5;
}
/* 左侧接通键 (黑白灰风格) */
.chat-nav-call {
    width: 40px;
    height: 40px;
    background: #111111; /* 改为高级黑 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.chat-nav-call:active { transform: scale(0.9); }
.chat-nav-call svg {
    width: 20px;
    height: 20px;
    stroke: #FFFFFF;
}
/* 右侧用户头像 */
.chat-nav-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid #FFFFFF;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.chat-nav-avatar:active { transform: scale(0.9); }

/* 搜索栏：250x35px，距顶栏10px，居中 */
.wc-search-bar-placeholder {
    width: 250px;
    height: 35px;
    background: #F5F5F5;
    border-radius: 12px;
    margin: 10px auto 12px auto; /* 上距10px，左右居中，下距12px */
    display: flex;
    align-items: center;
    justify-content: center; /* 内容居中 */
    color: #8E8E93;
    font-size: 13px;
    border: 1px solid #EEEEEE;
}
.wc-search-bar-placeholder svg {
    width: 14px;
    height: 14px;
    margin-right: 6px;
}

/* 横向头像列表 */
.wc-char-avatar-scroll {
    display: flex;
    overflow-x: auto;
    padding: 0 16px 8px 16px; /* 减小底部的 padding，拉近与列表的距离 */
    gap: 12px;
}
.wc-char-avatar-scroll::-webkit-scrollbar {
    display: none;
}
.wc-char-avatar-item {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    object-fit: cover;
    flex-shrink: 0;
    background: #eee;
    border: 2px solid #FFFFFF; /* 增加一圈白色边框 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 配合白边增加柔和阴影 */
    cursor: pointer;
    transition: transform 0.2s;
}
.wc-char-avatar-item:active { transform: scale(0.92); }
/* ========================================== */
/* 🖤 WeChat 全局 极简黑白灰 INS 高级风 UI 覆盖 🖤 */
/* ========================================== */

/* 1. 全局色彩与背景重置 (极简灰白调) */
#wechat-root {
    --wc-bg-color: #F9F9F9 !important; /* 极浅的高级灰底色 */
    --wc-card-color: #FFFFFF !important;
    --wc-text-primary: #111111 !important; /* 纯粹的深邃黑 */
    --wc-text-secondary: #8E8E93 !important; /* iOS标准灰 */
    --wc-separator: transparent !important; 
    --wc-accent-blue: #111111 !important; /* 主色调全部改为黑色 */
    --wc-accent-green: #333333 !important; 
}

/* 2. 顶部导航栏 (Navbar) - 悬浮毛玻璃 */
.wc-navbar {
    background: rgba(255, 255, 255, 0.85) !important;
    border-bottom: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}
.wc-nav-title {
    font-family: inherit !important; /* 修复：允许继承全局自定义字体 */
    font-weight: 600 !important;
    color: #111111 !important; 
    font-size: 17px !important;
}

/* 3. 底部导航栏 (Tabbar) - 极简悬浮胶囊 */
.wc-tabbar {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #F0F0F0 !important;
    height: 64px !important;
    border-radius: 32px !important;
    bottom: 25px !important;
}
.wc-tab-item.active {
    color: #111111 !important; /* 激活状态为纯黑 */
    transform: translateY(-3px) scale(1.05);
}
.wc-tab-item {
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

/* 4. 聊天列表 & 通讯录列表 (Chat & Contacts) - 干净的留白卡片 */
.wc-chat-swipe-container, .wc-swipe-container {
    background: #FFFFFF !important;
    margin: 12px 16px !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid #F5F5F5 !important;
    overflow: hidden;
    transition: transform 0.2s ease;
}
.wc-chat-swipe-container:active, .wc-swipe-container:active {
    transform: scale(0.98);
}
.wc-chat-swipe-content, .wc-swipe-content {
    border-bottom: none !important;
    padding: 16px !important;
}
.wc-avatar {
    border-radius: 35% !important; /* 高级微圆角 */
    border: 1px solid #F0F0F0 !important;
    width: 48px !important;
    height: 48px !important;
}
.wc-item-title {
    font-weight: 600 !important;
    color: #111111 !important;
    font-size: 16px !important;
}
.wc-item-subtitle {
    color: #8E8E93 !important;
    margin-top: 4px;
    font-size: 13px !important;
}
.wc-list-separator { display: none !important; } 

/* 🌟 5. 置顶角色专属 UI (黑白灰高级感 + 萌萌颜文字) 🌟 */
.wc-pinned-chat {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8F8F8 100%) !important;
    border: 1px solid #EEEEEE !important;
}
.wc-pinned-chat .wc-avatar {
    border-color: #111111 !important; /* 头像黑色描边，彰显特殊 */
}
/* 名字后面的萌萌颜文字标签 */
.wc-pinned-chat .wc-item-title::after {
    content: 'ㅠㅅㅠ'; /* 萌萌的颜文字 */
    display: inline-block;
    background: #111111;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    margin-left: 8px;
    vertical-align: middle;
    letter-spacing: 0.5px;
    transform: translateY(-1px);
}

/* 6. 朋友圈页面 (Moments) - 极简杂志排版 */
.wc-moments-header {
    margin-bottom: 60px !important;
}
.wc-moments-cover {
    border-bottom-left-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
    height: 280px !important;
    filter: grayscale(20%); /* 稍微降低饱和度，增加高级感 */
}
.wc-moments-user-avatar {
    border-radius: 35% !important;
    right: 24px !important;
    bottom: -40px !important;
    width: 80px !important;
    height: 80px !important;
    border: 4px solid #F9F9F9 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
}
.wc-moment-card {
    background: #FFFFFF !important;
    margin: 0 16px 20px 16px !important;
    border-radius: 24px !important;
    padding: 20px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid #F5F5F5 !important;
}
.wc-moment-name {
    color: #111111 !important; 
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}
.wc-moment-text {
    color: #333333 !important;
    line-height: 1.6 !important;
    margin-top: 8px !important;
    font-size: 14px !important;
}
.wc-moment-image {
    border-radius: 16px !important;
}
.wc-moment-likes-comments {
    background: #F5F5F5 !important; 
    border-radius: 16px !important;
    padding: 12px !important;
    border: none !important;
}
.wc-moment-like-row, .wc-moment-comment-name { 
    color: #111111 !important; 
    font-weight: 600 !important;
}

/* 7. 个人中心页面 (User) - 极简设置页 */
.wc-user-header {
    padding: 50px 0 30px 0 !important;
}
.wc-user-avatar-lg {
    border-radius: 35% !important;
    width: 100px !important;
    height: 100px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    border: 4px solid #FFFFFF !important;
}
#wc-user-name-display {
    color: #111111 !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    margin-top: 12px !important;
}
.wc-list-group {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 16px !important;
}
.wc-list-group .wc-list-item {
    background: #FFFFFF !important;
    border-radius: 20px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    border: 1px solid #F5F5F5 !important;
    padding: 16px 20px !important;
}
.wc-list-group .wc-list-item .wc-icon {
    color: #111111 !important; /* 图标统一为黑色 */
}

/* 🌟 8. 通讯录角色详情卡片 - 极简黑白灰相框风 🌟 */
#wc-modal-char-detail .wc-modal-content {
    width: 300px !important;
    height: auto !important;
    min-height: 450px;
    border-radius: 28px !important;
    background: #FFFFFF !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
    padding: 20px !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 头像区域：干净的留白相框 */
.wc-contact-card-header {
    width: 100% !important;
    height: 260px !important;
    position: relative;
    border-radius: 20px !important;
    overflow: hidden;
    margin-bottom: 20px;
    background: #F9F9F9;
}
.wc-contact-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px !important;
}

/* 悬浮按钮：黑白毛玻璃 */
.wc-contact-card-close-btn, .wc-contact-card-edit-btn {
    background: rgba(255, 255, 255, 0.8) !important;
    color: #111111 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    width: 32px !important;
    height: 32px !important;
}
.wc-contact-card-close-btn { top: 16px !important; left: 16px !important; }
.wc-contact-card-edit-btn { top: 16px !important; right: 16px !important; }

/* 文本信息区域 */
.wc-contact-card-info {
    width: 100%;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wc-contact-card-name {
    color: #111111 !important;
    font-size: 22px !important;
}
/* 备注：浅灰色背景 */
.wc-contact-card-note {
    font-size: 13px !important;
    color: #8E8E93 !important;
    margin-bottom: 24px !important;
    background: #F5F5F5;
    padding: 4px 12px;
    border-radius: 10px;
}

/* 底部按钮：极简纯黑按钮 */
#wc-modal-char-detail .wc-ios-btn-block {
    background: #111111 !important; 
    color: #FFFFFF !important;
    border-radius: 16px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.2s ease !important;
    border: none !important;
    padding: 14px !important;
}
#wc-modal-char-detail .wc-ios-btn-block:active {
    transform: scale(0.96);
}
/* ========================================== */
/* 手机模拟器 - 高级感购物车 (Cart App) 样式 */
/* ========================================== */
.phone-cart-capsule-container {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 100;
    pointer-events: none;
}
.phone-cart-capsule {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 30px;
    display: flex;
    padding: 6px;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.5);
    pointer-events: auto;
}
.cart-cap-tab {
    width: 50px;
    height: 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #8E8E93;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.cart-cap-tab svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.cart-cap-tab.active {
    background: #111111;
    color: #FFFFFF;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 购物车商品卡片 */
.phone-cart-item-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    gap: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    border: 1px solid #F9F9F9;
    transition: transform 0.2s;
}
.phone-cart-item-card:active {
    transform: scale(0.98);
}
.phone-cart-img-box {
    width: 70px;
    height: 70px;
    border-radius: 14px;
    background: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.phone-cart-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.phone-cart-title {
    font-size: 15px;
    font-weight: 600;
    color: #111;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.phone-cart-desc {
    font-size: 12px;
    color: #8E8E93;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}
.phone-cart-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.phone-cart-price {
    font-family: 'Georgia', serif;
    font-size: 16px;
    font-weight: bold;
    color: #111;
}
.phone-cart-date {
    font-size: 11px;
    color: #B2B2B2;
    font-family: monospace;
}
/* ========================================== */
/* 📱 Char手机模拟器 - 韩系INS极简黑白灰高级风 */
/* ========================================== */

/* 1. 桌面图标黑白化 */
.wc-ios-app-icon {
    background: #FFFFFF !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.04) !important;
    border: 1px solid #F5F5F5 !important;
}
.wc-ios-app-icon svg { color: #111111 !important; } /* 图标全黑 */
.wc-ios-app-name { color: #333 !important; text-shadow: none !important; font-weight: 600; margin-top: 8px; }

/* 2. 微信 (Message) 极简重构 */
#wc-phone-app-message { background: #F9F9F9 !important; }
#wc-phone-app-header {
    background: rgba(255,255,255,0.8) !important;
    backdrop-filter: blur(15px);
    border-bottom: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}
#wc-phone-app-header div { color: #111111 !important; font-weight: 700 !important; }
.wc-phone-app-tabbar {
    background: rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(15px);
    border-top: none !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.03) !important;
}
.wc-phone-tab-item.active { color: #111111 !important; transform: scale(1.05); transition: 0.2s; }
.wc-phone-tab-item { color: #C6C6C8 !important; }

/* 微信聊天详情页 (黑白气泡) */
#wc-phone-sim-chat-detail { background: #F9F9F9 !important; }
#wc-phone-sim-chat-detail .wc-phone-sim-navbar {
    background: rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(15px);
    border-bottom: none !important;
}
#wc-sim-chat-footer {
    background: #FFFFFF !important;
    border-top: 1px solid #F0F0F0 !important;
    padding: 12px 16px !important;
}
#wc-sim-chat-input {
    background: #F5F5F5 !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
}
#wc-sim-send-btn {
    background: #111111 !important; /* 黑色发送按钮 */
    color: #FFFFFF !important;
    border-radius: 18px !important;
    font-weight: 600 !important;
}
#wc-sim-ai-btn svg { color: #111111 !important; }

/* 动态生成的聊天气泡样式覆盖 */
.sim-msg-bubble { border-radius: 16px !important; padding: 10px 14px !important; font-size: 14px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important; }
.sim-msg-me .sim-msg-bubble { background: #111111 !important; color: #FFFFFF !important; border-bottom-right-radius: 4px !important; }
.sim-msg-them .sim-msg-bubble { background: #FFFFFF !important; color: #111111 !important; border: 1px solid #F0F0F0 !important; border-bottom-left-radius: 4px !important; }

/* 3. 设置 (Settings) 高级卡片风 */
#wc-phone-app-settings { background: #F9F9F9 !important; }
#wc-phone-app-settings .wc-phone-sim-navbar {
    background: transparent !important;
    border-bottom: none !important;
    padding-top: 20px !important;
}
#wc-phone-app-settings .wc-phone-sim-navbar div { color: #111111 !important; font-weight: 700 !important; }
#wc-phone-settings-content { padding: 10px 20px !important; }
/* 设置里的卡片 */
.sim-setting-card {
    background: #FFFFFF !important;
    border-radius: 20px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.03) !important;
    border: 1px solid #F5F5F5 !important;
    display: flex; justify-content: space-between; align-items: center;
}
.sim-setting-card-title { font-size: 15px; font-weight: 600; color: #111; }
.sim-setting-card-value { font-size: 14px; color: #888; }
/* ========================================== */
/* 新增：分享确认弹窗 & 聊天分享卡片样式 (INS 黑白灰) */
/* ========================================== */

/* 1. 分享确认弹窗 */
.ins-share-confirm-card { 
    width: 300px; 
    background: #ffffff; 
    border-radius: 24px; 
    padding: 24px; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.15); 
    display: flex; 
    flex-direction: column; 
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; 
    animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
}
.share-header { 
    margin-bottom: 16px; 
    text-align: center; 
}
.share-tag { 
    font-size: 10px; 
    font-weight: 800; 
    letter-spacing: 1.5px; 
    color: #888; 
    border: 1px solid #eee; 
    padding: 4px 10px; 
    border-radius: 12px; 
}
.share-body { 
    background: #f9f9f9; 
    padding: 16px; 
    border-radius: 16px; 
    margin-bottom: 24px; 
    border: 1px solid #f0f0f0; 
}
.share-body h3 { 
    font-size: 16px; 
    font-weight: 700; 
    color: #111; 
    margin-bottom: 8px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}
.share-body p { 
    font-size: 13px; 
    color: #666; 
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    line-height: 1.5; 
}
.share-actions { 
    display: flex; 
    gap: 12px; 
}
.share-actions button { 
    flex: 1; 
    height: 44px; 
    border-radius: 22px; 
    font-size: 14px; 
    font-weight: 600; 
    cursor: pointer; 
    transition: all 0.2s; 
}
.btn-cancel { 
    background: #fff; 
    color: #111; 
    border: 1px solid #e5e5ea; 
}
.btn-confirm { 
    background: #111; 
    color: #fff; 
    border: none; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.btn-cancel:active { background: #f5f5f5; }
.btn-confirm:active { transform: scale(0.96); }

/* 2. 聊天界面中的分享卡片 (伪装成高级引用框) */
.chat-shared-card { 
    width: 230px; 
    background: #ffffff; 
    border-radius: 16px; 
    padding: 16px; 
    border: 1px solid #eaeaea; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.04); 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    position: relative; 
    overflow: hidden; 
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
/* 左侧黑色装饰线 */
.chat-shared-card::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 4px; 
    height: 100%; 
    background: #111; 
}
.shared-card-tag { 
    font-size: 9px; 
    font-weight: 800; 
    color: #888; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
}
.shared-card-title { 
    font-size: 15px; 
    font-weight: 700; 
    color: #111; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    line-height: 1.3;
}
.shared-card-content { 
    font-size: 13px; 
    color: #555; 
    display: -webkit-box; 
    -webkit-line-clamp: 4; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    line-height: 1.5; 
    background: #f9f9f9; 
    padding: 10px; 
    border-radius: 8px; 
}
.shared-card-footer { 
    font-size: 10px; 
    color: #ccc; 
    text-align: right; 
    margin-top: 4px; 
    font-family: 'Courier New', Courier, monospace; 
}
/* ========================================== */
/* 新增：拉黑拦截弹窗 (高级黑白灰 INS 风) */
/* ========================================== */
.ins-blocked-alert-card {
    width: 300px;
    background: #FFFFFF;
    border-radius: 24px;
    padding: 30px 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid #E5E5EA;
}
.blocked-alert-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}
.blocked-alert-avatar {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
    border: 2px solid #111; padding: 2px; margin-bottom: 12px;
    filter: grayscale(100%); /* 黑白滤镜增加拉黑感 */
}
.blocked-alert-name {
    font-size: 18px; font-weight: 700; color: #111; margin-bottom: 4px;
}
.blocked-alert-tag {
    font-size: 10px; font-weight: 800; letter-spacing: 2px; color: #FF3B30;
    background: rgba(255, 59, 48, 0.1); padding: 4px 10px; border-radius: 12px;
}
.blocked-alert-body {
    width: 100%; background: #F9F9F9; border-radius: 16px; padding: 16px;
    margin-bottom: 24px; border: 1px dashed #CCC;
}
.blocked-alert-body p {
    font-size: 14px; color: #555; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
    font-style: italic;
}
.blocked-alert-btn {
    width: 100%; height: 48px; border-radius: 24px; background: #111; color: #FFF;
    font-size: 15px; font-weight: 600; border: none; cursor: pointer;
    transition: transform 0.2s; letter-spacing: 1px;
}
.blocked-alert-btn:active { transform: scale(0.96); }

/* ========================================== */
/* 新增：拉黑拦截记录全屏页 (小黑屋) */
/* ========================================== */
.blocked-history-profile {
    display: flex; flex-direction: column; align-items: center;
    padding: 40px 20px 20px; background: #FAFAFA; border-bottom: 1px solid #F0F0F0;
}
.blocked-history-profile img {
    width: 80px; height: 80px; border-radius: 50%; object-fit: cover;
    border: 3px solid #111; padding: 3px; margin-bottom: 16px; filter: grayscale(100%);
}
.blocked-history-profile h2 {
    font-size: 22px; font-weight: 800; color: #111; margin-bottom: 6px; letter-spacing: -0.5px;
}
.blocked-history-profile p {
    font-size: 12px; color: #888; letter-spacing: 2px; text-transform: uppercase; font-weight: 600;
}
.blocked-history-content {
    flex: 1; overflow-y: auto; padding: 20px; background: #F5F5F5;
}
.blocked-msg-card {
    background: #FFF; border-radius: 16px; padding: 20px; margin-bottom: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); border: 1px solid #E5E5EA;
    position: relative;
}
.blocked-msg-card::before {
    content: ''; position: absolute; left: 0; top: 20px; bottom: 20px; width: 3px; background: #111; border-radius: 0 4px 4px 0;
}
.blocked-msg-time {
    font-family: 'Courier New', monospace; font-size: 11px; color: #999; margin-bottom: 10px; font-weight: bold;
}
.blocked-msg-text {
    font-size: 14px; color: #333; line-height: 1.6;
}
/* ========================================== */
/* 新增：拉黑按钮与确认弹窗样式 (高级感 INS 风) */
/* ========================================== */

/* 拉黑按钮样式 */
.ins-block-btn {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #FF3B30;
    background: transparent;
    color: #FF3B30;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    letter-spacing: 1px;
}
.ins-block-btn.blocked {
    background: #FF3B30;
    color: #FFF;
    border: 1px solid #FF3B30;
}
.ins-block-btn:active {
    transform: scale(0.98);
}

/* 拉黑确认弹窗 */
.ins-block-confirm-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); z-index: 26000;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.ins-block-confirm-overlay.active {
    opacity: 1; pointer-events: auto;
}
.ins-block-confirm-card {
    width: 280px;
    background: #FFFFFF;
    border-radius: 24px;
    padding: 30px 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ins-block-confirm-overlay.active .ins-block-confirm-card {
    transform: scale(1);
}
.block-confirm-icon {
    width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 59, 48, 0.1);
    color: #FF3B30; display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.block-confirm-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.block-confirm-title {
    font-size: 18px; font-weight: 700; color: #111; margin-bottom: 8px;
}
.block-confirm-desc {
    font-size: 13px; color: #666; line-height: 1.5; margin-bottom: 24px;
}
.block-confirm-actions {
    display: flex; gap: 12px; width: 100%;
}
.block-confirm-actions button {
    flex: 1; height: 44px; border-radius: 22px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.btn-block-cancel {
    background: #F5F5F5; color: #888; border: none;
}
.btn-block-confirm {
    background: #FF3B30; color: #FFF; border: none; box-shadow: 0 4px 12px rgba(255, 59, 48, 0.2);
}
.btn-block-cancel:active { background: #E5E5EA; }
.btn-block-confirm:active { transform: scale(0.96); }
/* 单条删除按钮样式 */
.blocked-msg-delete-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    color: #CCC;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
    z-index: 10;
}
.blocked-msg-delete-btn:active { 
    color: #FF3B30; 
}
.blocked-msg-delete-btn svg { 
    width: 16px; 
    height: 16px; 
    stroke: currentColor; 
    stroke-width: 2; 
    fill: none; 
}
/* ========================================== */
/* 新增：收藏成功提示弹窗 (高级黑白灰 INS 风) */
/* ========================================== */
.ins-favorite-alert {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 16px 24px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.05);
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.wc-modal-overlay.active .ins-favorite-alert {
    transform: translateY(0);
    opacity: 1;
}
.ins-favorite-alert svg { width: 20px; height: 20px; fill: #111; stroke: #111; stroke-width: 1; }
.ins-favorite-alert span { font-size: 14px; font-weight: 600; color: #111; letter-spacing: 1px; }

/* ========================================== */
/* 新增：WeChat 我的收藏页面 (折叠手风琴样式) */
/* ========================================== */
.fav-accordion-item {
    background: #FFF;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    border: 1px solid #F5F5F5;
}
.fav-accordion-header {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #FFF;
}
.fav-accordion-header:active { background: #F9F9F9; }
.fav-header-left { display: flex; align-items: center; gap: 12px; }
.fav-char-avatar { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; border: 1px solid #F0F0F0; }
.fav-header-info { display: flex; flex-direction: column; gap: 4px; }
.fav-title { font-size: 16px; font-weight: 600; color: #111; }
.fav-time { font-size: 12px; color: #8E8E93; }
.fav-chevron { width: 20px; height: 20px; stroke: #CCC; fill: none; stroke-width: 2; transition: transform 0.3s ease; }

.fav-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    background: #FAFAFA;
}
.fav-accordion-item.expanded .fav-accordion-body {
    max-height: 1000px;
}
.fav-accordion-item.expanded .fav-chevron {
    transform: rotate(180deg);
}
.fav-content-inner {
    padding: 16px;
    border-top: 1px solid #F0F0F0;
}
.fav-original-time {
    font-size: 11px; color: #999; margin-bottom: 10px; font-family: monospace;
}
.fav-text {
    font-size: 14px; color: #333; line-height: 1.6; white-space: pre-wrap;
    background: #FFF; padding: 12px; border-radius: 12px; border: 1px solid #E5E5EA;
}
.fav-delete-btn {
    margin-top: 12px; text-align: right; font-size: 13px; color: #FF3B30; font-weight: 600; cursor: pointer;
}
/* ========================================== */
/* 🌟 朋友圈 (Moments) 韩系 INS 极简杂志风 🌟 */
/* ========================================== */

/* 1. 顶栏背景：极致柔和的毛玻璃 */
.custom-moments-nav-mode {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-bottom: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
}

/* 2. 头部背景与居中头像 */
.wc-moments-header {
    position: relative !important;
    margin-bottom: 0 !important; /* 底部留白交给日历容器 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.wc-moments-cover {
    width: 100% !important;
    height: 260px !important;
    object-fit: cover !important;
    border-bottom-left-radius: 30px !important;
    border-bottom-right-radius: 30px !important;
    filter: brightness(0.9) grayscale(10%) !important; /* 降低亮度，突出头像 */
}
.wc-moments-user-avatar {
    position: absolute !important;
    bottom: -5px !important; /* 头像往上移，大部分在背景图内 */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 84px !important;
    height: 84px !important;
    border-radius: 50% !important;
    border: 4px solid var(--wc-bg-color) !important; 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
    z-index: 10 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}
.wc-moments-user-avatar:active {
    transform: translateX(-50%) scale(0.9) !important;
}
/* 点击头像展示 ALL 时的黑圈特效 */
.wc-moments-user-avatar.all-active {
    border-color: #111111 !important;
}

/* 3. 🌟 悬浮在头像下方的日历卡片 🌟 */
#wc-moments-calendar-bar {
    margin-top: -40px; /* 整个日历容器往上提，紧挨背景图 */
    padding: 40px 16px 20px 16px; /* 缩小顶部留白，让日历紧挨着头像 */
    background: transparent;
    position: relative;
    z-index: 5;
}
.moments-inline-cal {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 16px 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.04);
    border: 1px solid #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 单个日期块：平滑的弹性动画 */
.cal-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 1;
    gap: 6px; 
    position: relative;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.cal-item:active {
    transform: scale(0.85); 
}

/* 日期数字：使用优雅的衬线体 (Serif) */
.cal-day {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 16px;
    color: #8E8E93;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; 
    transition: all 0.3s ease;
    background: transparent;
}

/* 星期标签：极小字号、加粗、宽字距 */
.cal-label {
    font-size: 9px;
    color: #B2B2B2;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: color 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 🌟 选中状态 (Active)：纯黑圆底 + 纯白文字 🌟 */
.cal-item.active .cal-day {
    background: #111111;
    color: #FFFFFF;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
    transform: translateY(-2px); 
}
.cal-item.active .cal-label {
    color: #111111;
    font-weight: 800;
}

/* 今天的特殊小黑点提示 */
.cal-today-dot {
    width: 4px;
    height: 4px;
    background: #111;
    border-radius: 50%;
    position: absolute;
    bottom: -10px;
}

/* 4. 朋友圈卡片重构 (高级留白) */
.wc-moment-card {
    background: #FFFFFF !important;
    margin: 0 16px 24px 16px !important;
    border-radius: 24px !important;
    padding: 24px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #F5F5F5 !important;
    display: flex !important;
    flex-direction: column !important;
}
.wc-moment-header-row {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}
.wc-moment-header-row .wc-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    margin-right: 12px !important;
    border: 1px solid #F0F0F0 !important;
}
.wc-moment-content {
    margin-left: 0 !important;
    width: 100% !important;
}
.wc-moment-name {
    font-size: 16px !important;
    color: #111 !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px !important;
}
.wc-moment-text {
    font-size: 14px !important;
    color: #333 !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
    text-align: justify !important;
}
.wc-moment-image {
    border-radius: 16px !important;
    max-width: 100% !important;
    max-height: 350px !important;
    object-fit: cover !important;
    margin-bottom: 16px !important;
}
.wc-moment-actions {
    margin-top: 4px !important;
}
.wc-moment-likes-comments {
    background: #F9F9F9 !important; 
    border-radius: 16px !important;
    padding: 16px !important;
    border: 1px solid #F0F0F0 !important;
    margin-top: 16px !important;
}
.wc-moment-like-row {
    font-size: 13px !important;
    color: #111 !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
}
.wc-moment-comment-row {
    font-size: 13px !important;
    color: #555 !important;
    margin-bottom: 6px !important;
    line-height: 1.5 !important;
}
.wc-moment-comment-name {
    color: #111 !important;
    font-weight: 700 !important;
}
.wc-comment-input-box {
    margin-top: 16px !important;
}
.wc-comment-input {
    background: #F5F5F5 !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
}
.wc-moment-action-btn {
    background: #111 !important;
    color: #FFF !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 0 16px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
}

/* ========================================== */
/* 全屏高级感日历 (Full Screen Calendar) */
/* ========================================== */
.ins-full-calendar-view {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #FDFDFD; z-index: 1500; display: none; flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.ins-full-calendar-view.active { transform: translateY(0); }

/* 顶部导航 */
.ins-cal-navbar {
    height: calc(54px + env(safe-area-inset-top, 20px));
    padding-top: env(safe-area-inset-top, 20px);
    display: flex; justify-content: space-between; align-items: center;
    padding-left: 20px; padding-right: 20px;
    background: transparent;
}
.ins-cal-nav-btn {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #111; border-radius: 50%; background: #F5F5F5;
    transition: transform 0.2s;
}
.ins-cal-nav-btn:active { transform: scale(0.9); }
.ins-cal-nav-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.ins-cal-nav-title { font-size: 12px; font-weight: 800; letter-spacing: 2px; color: #888; }

/* 头部年月与星期 */
.ins-cal-header-area { padding: 20px 20px 10px 20px; }
.ins-cal-month-selector {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;
}
.ins-cal-month-selector button {
    background: transparent; border: none; width: 40px; height: 40px;
    cursor: pointer; color: #111;
}
.ins-cal-month-selector button svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.ins-cal-title-large {
    text-align: center; font-family: 'Georgia', serif; font-size: 36px; font-weight: bold; color: #111; line-height: 1.1;
}
.ins-cal-title-large span { font-size: 14px; font-family: sans-serif; font-weight: 600; color: #888; letter-spacing: 3px; text-transform: uppercase; }

.ins-cal-weekdays {
    display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;
    font-size: 10px; color: #B2B2B2; font-weight: 800; letter-spacing: 1px;
}

/* 日期网格 */
.ins-cal-body-area { flex: 1; overflow-y: auto; padding: 0 10px 40px 10px; }
.ins-cal-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px 5px; }

.ins-cal-cell {
    aspect-ratio: 0.8; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    padding-top: 10px; cursor: pointer; border-radius: 16px; transition: all 0.2s;
    position: relative; border: 1px solid transparent;
}
.ins-cal-cell:not(.empty):active { background: #F9F9F9; transform: scale(0.95); }
.ins-cal-cell.today { border: 1px solid #111; background: #FAFAFA; }
.ins-cal-cell.today .cal-num { font-weight: 800; color: #111; }

.cal-num { font-family: 'Georgia', serif; font-size: 18px; color: #333; z-index: 2; }
.cal-holiday-text { font-size: 9px; color: #FF3B30; font-weight: bold; margin-top: 2px; transform: scale(0.9); white-space: nowrap; }

/* 提示点容器 */
.cal-indicators {
    display: flex; gap: 3px; margin-top: auto; margin-bottom: 10px; flex-wrap: wrap; justify-content: center; width: 80%;
}
.cal-dot { width: 5px; height: 5px; border-radius: 50%; }
.moment-dot { background: #D1D1D6; } /* 朋友圈：灰色 */
.period-dot { background: #FF9A9E; } /* 生理期：粉色 */
.bday-dot { background: #FFD700; }   /* 生日：金色 */
.anniv-dot { background: #AF52DE; }  /* 纪念日：紫色 */
.todo-dot { background: #5AC8FA; }   /* 待办：蓝色 */

/* 添加事件弹窗 */
.ins-cal-add-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); backdrop-filter: blur(5px); z-index: 2000;
    display: flex; align-items: flex-end; justify-content: center;
}
.ins-cal-add-overlay.hidden { display: none; }
.ins-cal-add-card {
    width: 100%; background: #FFF; border-radius: 24px 24px 0 0; padding: 24px;
    animation: wcSlideUpModal 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.ins-cal-add-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.ins-cal-add-header h3 { font-size: 18px; font-weight: 700; color: #111; margin: 0; }
.ins-cal-add-header button { background: none; border: none; font-size: 24px; color: #888; cursor: pointer; }
/* ========================================== */
/* Lovers Space - 交互卡片与默契问答 (INS 极简风) */
/* ========================================== */

/* 150x150 卡片网格 */
.ls-album-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 10px 0;
}

.ls-album-card {
    aspect-ratio: 1; /* 保持正方形 */
    background: #FFFFFF;
    border-radius: 24px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.04);
    border: 1px solid #F9F9F9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.ls-album-card:active {
    transform: scale(0.95);
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.ls-album-card-icon {
    width: 48px;
    height: 48px;
    background: #F5F5F5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
    margin-bottom: 12px;
    transition: background 0.3s, color 0.3s;
}

.ls-album-card:hover .ls-album-card-icon {
    background: #111;
    color: #FFF;
}

.ls-album-card-icon svg {
    width: 24px;
    height: 24px;
}

.ls-album-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    margin-bottom: 4px;
}

.ls-album-card-desc {
    font-size: 10px;
    color: #999;
    font-family: 'Georgia', serif;
    font-style: italic;
    letter-spacing: 0.5px;
}

/* Q&A 页面顶部操作区 */
.ls-qa-actions {
    display: flex;
    gap: 15px;
    padding: 20px;
    background: #FFF;
    border-bottom: 1px dashed #E5E5EA;
}

.ls-qa-btn {
    flex: 1;
    height: 48px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s;
    border: none;
}

.ls-qa-btn:active { transform: scale(0.96); }

.ls-qa-btn.ai {
    background: #111;
    color: #FFF;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.ls-qa-btn.user {
    background: #FFF;
    color: #111;
    border: 1px solid #E5E5EA;
}

.ls-qa-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Q&A 题目卡片 */
.qa-item-card {
    background: #FFF;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    border: 1px solid #F5F5F5;
}

.qa-question-text {
    font-size: 16px;
    font-weight: 600;
    color: #111;
    margin-bottom: 16px;
    line-height: 1.5;
}

.qa-option {
    background: #F9F9F9;
    border: 1px solid #E5E5EA;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

.qa-option:last-child { margin-bottom: 0; }

.qa-option:active { background: #F0F0F0; }

.qa-option-letter {
    font-weight: 800;
    font-family: 'Georgia', serif;
    margin-right: 12px;
    color: #888;
}

/* 答题状态 */
.qa-option.correct {
    background: rgba(52, 199, 89, 0.1);
    border-color: #34C759;
    color: #111;
}
.qa-option.correct .qa-option-letter { color: #34C759; }

.qa-option.wrong {
    background: rgba(255, 59, 48, 0.1);
    border-color: #FF3B30;
    color: #111;
}
.qa-option.wrong .qa-option-letter { color: #FF3B30; }

.qa-explanation {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #E5E5EA;
    font-size: 13px;
    color: #666;
    font-style: italic;
    display: none;
}

/* 出题表单样式 */
.qa-input-block {
    background: #FFF;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid #E5E5EA;
}
.qa-input-block-title {
    font-size: 12px;
    font-weight: 800;
    color: #888;
    margin-bottom: 12px;
    letter-spacing: 1px;
}
.qa-input-field {
    width: 100%;
    background: #F9F9F9;
    border: 1px solid #F0F0F0;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    margin-bottom: 8px;
    outline: none;
    color: #111;
}
.qa-input-field:focus { border-color: #111; }
.qa-select-field {
    width: 100%;
    background: #F9F9F9;
    border: 1px solid #F0F0F0;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
    color: #111;
}
/* ========================================== */
/* 默契大挑战 - 历史仓库折叠样式 (终极防压缩版) */
/* ========================================== */

#ls-qa-archive-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* 苹果专属：开启硬件加速的惯性滑动 */
    overscroll-behavior: contain;
    padding-bottom: 120px !important; /* 底部留出足够的安全距离 */
    display: block !important; /* 强制块级布局，拒绝 flex 压缩 */
}

.qa-archive-card {
    background: #FFF;
    border-radius: 16px;
    border: 1px solid #E5E5EA;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 15px; /* 替代原来的 gap */
    
    /* 👇 核心修复：绝对禁止卡片被系统强行压扁 👇 */
    flex-shrink: 0; 
    display: block;
}

.qa-archive-header {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #FFF;
    position: relative;
    z-index: 2;
}

.qa-archive-header:active { background: #F9F9F9; }

.qa-archive-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.qa-archive-title {
    font-size: 15px;
    font-weight: 700;
    color: #111;
}

.qa-archive-meta {
    font-size: 11px;
    color: #888;
    font-family: monospace;
}

.qa-archive-score {
    font-size: 14px;
    font-weight: bold;
    color: #34C759;
}
.qa-archive-score.negative { color: #FF3B30; }

.qa-archive-chevron {
    width: 20px;
    height: 20px;
    stroke: #CCC;
    fill: none;
    stroke-width: 2;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.qa-archive-body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
    background: #FAFAFA;
}

.qa-archive-card.expanded .qa-archive-body {
    max-height: 4000px; /* 设得足够大，绝对不会截断任何内容 */
    opacity: 1;
}

.qa-archive-card.expanded .qa-archive-chevron {
    transform: rotate(180deg);
}

.qa-archive-content-inner {
    padding: 16px;
    border-top: 1px solid #F0F0F0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qa-archive-q-block {
    background: #FFF;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #E5E5EA;
}

.qa-archive-q-text {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    line-height: 1.4;
}

.qa-archive-ans-row {
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.qa-archive-exp {
    font-size: 12px;
    color: #888;
    font-style: italic;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #F0F0F0;
    line-height: 1.5;
}
/* ========================================== */
/* 恋人空间：时空信箱 (Shrine & Stars) - 星际拼贴高级风 */
/* ========================================== */

/* 1. 星空主页视图 */
.ins-shrine-view {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #0B0C10; 
    z-index: 2000; display: none; flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", serif;
    transform: translateY(100%); transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden;
}
.ins-shrine-view.active { transform: translateY(0); }

/* 星际背景 */
.shrine-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, #1a1a24 0%, #2b2b3c 100%); 
    z-index: 0; pointer-events: none;
    overflow: hidden;
}

/* 星际轨迹 */
.orbit-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    pointer-events: none;
}
.orbit-ring.ring1 {
    width: 300px; height: 100px;
    transform: translate(-50%, -50%) rotate(30deg);
    animation: orbitRotate1 20s linear infinite;
}
.orbit-ring.ring2 {
    width: 400px; height: 150px;
    transform: translate(-50%, -50%) rotate(-45deg);
    animation: orbitRotate2 30s linear infinite;
}
.orbit-ring.ring3 {
    width: 500px; height: 200px;
    transform: translate(-50%, -50%) rotate(60deg);
    animation: orbitRotate3 40s linear infinite;
}
@keyframes orbitRotate1 { 100% { transform: translate(-50%, -50%) rotate(390deg); } }
@keyframes orbitRotate2 { 100% { transform: translate(-50%, -50%) rotate(315deg); } }
@keyframes orbitRotate3 { 100% { transform: translate(-50%, -50%) rotate(420deg); } }

/* 导航栏 */
.shrine-nav {
    position: relative; z-index: 10;
    height: calc(54px + env(safe-area-inset-top, 20px));
    padding-top: env(safe-area-inset-top, 20px);
    display: flex; justify-content: space-between; align-items: center;
    padding-left: 20px; padding-right: 20px;
}
.shrine-nav-btn {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #FFF; border-radius: 50%; background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px); transition: transform 0.2s;
}
.shrine-nav-btn:active { transform: scale(0.9); }
.shrine-nav-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.shrine-nav-title { font-size: 11px; font-weight: 800; letter-spacing: 4px; color: rgba(255,255,255,0.6); }

/* 星光交互区 */
.shrine-space {
    flex: 1; position: relative; z-index: 5;
    display: flex; align-items: center; justify-content: center;
}

/* 拼贴组合容器 */
.ins-collage-container {
    position: relative;
    width: 320px;
    height: 350px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 10;
}

/* 150x150 相框 (微圆角) */
.ins-collage-img2 {
    width: 150px; height: 150px;
    background-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    background-size: cover;
    background-position: center;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 11;
    overflow: hidden; 
    transition: transform 0.2s;
    margin-left: 5px;
    margin-top: 5px;
    position: relative;
    border-radius: 12px; /* 微圆角 */
}
.ins-collage-img2:active { transform: scale(0.95); }

/* 左上角上传按钮图片 (100x100 覆盖在相框上) */
.ins-upload-trigger {
    position: absolute;
    top: -30px;
    left: -30px;
    width: 80px;
    height: 80px;
    cursor: pointer;
    z-index: 13;
    transition: transform 0.2s;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}
.ins-upload-trigger:active {
    transform: scale(0.95);
}

/* 英文诗句 (可点击) */
.ins-collage-poem {
    margin-top: -150px;
    margin-left: 200px;
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    cursor: pointer;
    transition: opacity 0.2s;
}
.ins-collage-poem:active { opacity: 0.5; }

/* 250x150 白边圆角图片 (覆盖在相框右下角) */
.ins-collage-img1 {
    position: absolute;
    top: 100px; /* 覆盖在 img2 的右下角 */
    left: 80px;
    width: 250px; height: 150px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 4px solid #FFF;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    background-size: cover;
    background-position: center;
    display: flex; align-items: center; justify-content: center;
    z-index: 12;
    cursor: pointer;
}

/* 底部文案 */
.ins-collage-text {
    position: absolute;
    bottom: -30px; left: 10px;
    font-family: 'Georgia', serif; font-style: italic;
    font-size: 14px; color: #FFF;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    white-space: nowrap;
    cursor: text;
}

/* 右上角音乐符号装饰 (黑色) */
.ins-music-decor {
    position: absolute;
    top: -10px;
    right: -10px;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    color: #111; /* 纯黑色 */
    opacity: 0.85;
    pointer-events: none;
}
.ins-music-decor svg {
    width: 30px;
    height: 30px;
    filter: drop-shadow(0 1px 2px rgba(255,255,255,0.6)); 
}

/* 右下角播放按钮 (黑色图标 + 毛玻璃底圈) */
.ins-music-play-btn {
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6); 
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111; 
    cursor: pointer;
    z-index: 15;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.ins-music-play-btn:active {
    transform: scale(0.9);
    background: rgba(255, 255, 255, 0.8);
}
.ins-music-play-btn svg {
    width: 16px;
    height: 16px;
}

/* 水滴涟漪效果 */
.water-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: rippleAnim 0.6s linear;
    pointer-events: none;
}
@keyframes rippleAnim {
    to { transform: scale(2.5); opacity: 0; }
}

/* 底部写信按钮 */
.shrine-footer {
    position: relative; z-index: 10;
    padding: 20px 30px calc(30px + env(safe-area-inset-bottom, 20px)) 30px;
    display: flex; justify-content: center;
}
.shrine-write-btn {
    background: rgba(255,255,255,0.15); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3); color: #FFF;
    height: 54px; border-radius: 27px; padding: 0 30px;
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 600; letter-spacing: 2px;
    cursor: pointer; transition: all 0.2s; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.shrine-write-btn:active { transform: scale(0.96); background: rgba(255,255,255,0.25); }
.shrine-write-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

/* ========================================== */
/* 祈愿与上传弹窗 (居中毛玻璃) */
/* ========================================== */
.shrine-modal-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); z-index: 2500;
    display: none; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s ease;
}
.shrine-modal-overlay.active { opacity: 1; }
.shrine-modal-box {
    width: 280px; background: rgba(255,255,255,0.95); border-radius: 24px;
    padding: 30px 20px; display: flex; flex-direction: column; align-items: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3); transform: scale(0.95); transition: transform 0.3s ease;
}
.shrine-modal-overlay.active .shrine-modal-box { transform: scale(1); }

.shrine-modal-title { font-family: 'Kaiti', serif; font-size: 22px; font-weight: bold; color: #111; margin-bottom: 8px; }
.shrine-modal-desc { font-size: 12px; color: #888; margin-bottom: 24px; letter-spacing: 1px; }

.shrine-modal-btn {
    width: 100%; height: 48px; border-radius: 24px; font-size: 14px; font-weight: bold;
    cursor: pointer; border: none; margin-bottom: 12px; transition: transform 0.1s;
}
.shrine-modal-btn:active { transform: scale(0.96); }
.shrine-modal-btn.primary { background: #111; color: #FFF; box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.shrine-modal-btn.secondary { background: #F5F5F5; color: #111; border: 1px solid #EAEAEA; }
.shrine-modal-btn.cancel { background: transparent; color: #888; margin-bottom: 0; }

/* ========================================== */
/* 祈愿生成动画覆盖层 (打字机、碎裂、信封) */
/* ========================================== */
.pray-anim-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); backdrop-filter: blur(10px); z-index: 2600;
    display: flex; align-items: center; justify-content: center;
}

/* 打字机文字 */
.pray-anim-text {
    position: absolute;
    bottom: 20%; left: 50%;
    transform: translateX(-50%);
    font-family: 'Kaiti', 'STKaiti', '楷体', serif;
    font-size: 18px; color: #FFF;
    letter-spacing: 2px; white-space: nowrap;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
    transition: all 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}
/* 移动到中央 */
.pray-anim-text.move-center {
    bottom: 50%;
    transform: translate(-50%, 50%);
    font-size: 22px;
}
/* 碎裂消失动画 */
.pray-anim-text.shatter {
    animation: textShatter 0.8s forwards;
}
@keyframes textShatter {
    0% { opacity: 1; filter: blur(0); transform: translate(-50%, 50%) scale(1); letter-spacing: 2px; }
    100% { opacity: 0; filter: blur(10px); transform: translate(-50%, 50%) scale(1.5); letter-spacing: 15px; }
}

/* 最终信封 */
.pray-anim-envelope {
    width: 260px; height: 340px;
    background: #FDFBF7; border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 20px; cursor: pointer;
    animation: envIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards, envFloat 4s infinite ease-in-out alternate;
}
@keyframes envIn {
    0% { opacity: 0; transform: scale(0.8) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes envFloat {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

.env-avatar {
    width: 90px; height: 90px; border-radius: 50%; object-fit: cover;
    border: 3px solid #EAE3DE; margin-bottom: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.env-heartbeat {
    width: 80px; height: 30px; margin-bottom: 20px;
    animation: envPulse 1.5s infinite linear;
}
@keyframes envPulse {
    0% { stroke-dasharray: 0 100; stroke-dashoffset: 0; opacity: 0.5; }
    50% { stroke-dasharray: 100 0; stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dasharray: 0 100; stroke-dashoffset: -100; opacity: 0.5; }
}
.env-text {
    font-family: 'Kaiti', 'STKaiti', '楷体', serif;
    font-size: 16px; color: #3A3533; letter-spacing: 3px;
    font-weight: bold;
}

/* ========================================== */
/* 信件列表全屏页 (深色模式) */
/* ========================================== */
.shrine-list-view {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #0B0C10; z-index: 2200; display: none; flex-direction: column;
    transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.shrine-list-view.active { transform: translateX(0); }

.shrine-list-content {
    flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px;
}
.shrine-list-empty { text-align: center; color: rgba(255,255,255,0.3); margin-top: 60px; font-size: 14px; letter-spacing: 1px; }

.shrine-list-card {
    background: rgba(255,255,255,0.05); border-radius: 16px; padding: 20px;
    border: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: background 0.2s;
}
.shrine-list-card:active { background: rgba(255,255,255,0.1); }
.shrine-list-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.shrine-list-tag { font-size: 9px; font-weight: bold; letter-spacing: 1px; padding: 4px 8px; border-radius: 8px; }
.tag-gold { background: rgba(255, 215, 0, 0.2); color: #FFD700; }
.tag-blue { background: rgba(135, 206, 250, 0.2); color: #87CEFA; }
.shrine-list-date { font-family: monospace; font-size: 11px; color: rgba(255,255,255,0.5); }
.shrine-list-card-title { font-family: 'Georgia', serif; font-size: 16px; font-weight: bold; color: #FFF; margin-bottom: 6px; }
.shrine-list-card-preview { font-size: 13px; color: rgba(255,255,255,0.6); }

/* ========================================== */
/* 读信/写信全屏视图 (高级仿信纸风) */
/* ========================================== */
.ins-paper-view {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #FDFBF7; /* 奶油白信纸底色 */
    z-index: 3000; display: none; flex-direction: column;
    opacity: 0; transition: opacity 0.4s ease;
}
.ins-paper-view.active { opacity: 1; }

.ins-paper-nav {
    height: calc(60px + env(safe-area-inset-top, 20px));
    padding-top: env(safe-area-inset-top, 20px);
    display: flex; justify-content: space-between; align-items: center;
    padding-left: 24px; padding-right: 24px;
    font-size: 12px; font-weight: 800; letter-spacing: 2px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.ins-paper-content {
    flex: 1; overflow-y: auto; padding: 30px 24px 20px 24px;
    display: flex; flex-direction: column;
}

/* 写信输入框 */
.ins-paper-title-input {
    width: 100%; background: transparent; border: none;
    font-family: 'Georgia', serif; font-size: 24px; font-weight: bold; color: #3A3533;
    margin-bottom: 20px; outline: none; font-style: italic;
}
.ins-paper-title-input::placeholder { color: #C2B8B2; }

.ins-paper-textarea {
    flex: 1; width: 100%; background: transparent; border: none;
    font-family: 'Kaiti', 'STKaiti', '楷体', serif; font-size: 16px; color: #4A413E;
    line-height: 32px; resize: none; outline: none; text-align: justify;
    background-image: repeating-linear-gradient(transparent, transparent 31px, #EAE3DE 31px, #EAE3DE 32px);
    background-attachment: local;
}
.ins-paper-textarea::placeholder { color: #C2B8B2; font-family: -apple-system, sans-serif; }

/* 读信展示区 */
.ins-paper-read-title {
    font-family: 'Georgia', serif; font-size: 26px; color: #3A3533;
    margin-bottom: 30px; text-align: center; font-style: italic;
}
.ins-paper-read-text {
    font-family: 'Kaiti', 'STKaiti', '楷体', serif; font-size: 16px; color: #4A413E;
    line-height: 32px; text-align: justify; letter-spacing: 1px;
    background-image: repeating-linear-gradient(transparent, transparent 31px, #EAE3DE 31px, #EAE3DE 32px);
    background-attachment: local; 
}
.ins-paper-read-author {
    margin-top: 40px; text-align: right; font-family: 'Georgia', serif;
    font-size: 16px; font-style: italic; color: #8A7F7A;
}

/* 底部操作区 (销毁 / 求回信) */
.ins-paper-actions {
    padding: 10px 24px calc(20px + env(safe-area-inset-bottom, 20px)) 24px;
    display: flex; justify-content: space-between; align-items: center;
    background: #FDFBF7;
}

.ins-paper-action-btn {
    font-size: 13px; font-weight: bold; letter-spacing: 1px; cursor: pointer;
    padding: 8px 16px; border-radius: 20px; transition: all 0.2s;
}
.ins-paper-action-btn:active { transform: scale(0.95); }

.ins-paper-action-btn.delete {
    color: #FF3B30; border: 1px solid rgba(255, 59, 48, 0.3);
}
.ins-paper-action-btn.reply {
    background: #111; color: #FFF; box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* ========================================== */
/* App 4: INS Forum (论坛) 样式 (Twitter/INS 极简高级风) */
/* ========================================== */
.ins-forum-root {
    width: 100%; height: 100%; position: relative; overflow: hidden;
    background-color: #FFFFFF; color: #111; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}
.ins-forum-view {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: none; flex-direction: column; overflow-y: auto;
    background-color: #FFFFFF;
    padding-bottom: 80px; 
}
.ins-forum-view.active { display: flex; animation: wcFadeIn 0.3s ease; }

.ins-forum-header {
    padding: calc(env(safe-area-inset-top, 20px) + 15px) 20px 15px 20px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    position: sticky; top: 0; z-index: 10;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #F0F0F0;
}
.ins-forum-title {
    font-size: 20px; font-weight: 800; color: #111; letter-spacing: -0.5px;
}
.ins-forum-header-right {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; background: transparent; border-radius: 50%; transition: background 0.2s;
}
.ins-forum-header-right:active { background: #F5F5F5; }

.ins-forum-content { flex: 1; }

/* 帖子卡片 (推特风排版) */
.ins-forum-post-card {
    padding: 16px 20px; border-bottom: 1px solid #F0F0F0; cursor: pointer; transition: background 0.2s;
}
.ins-forum-post-card:active { background: #FAFAFA; }

.ins-forum-post-header {
    display: flex; align-items: flex-start; margin-bottom: 4px;
}
.ins-forum-avatar-small {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #F0F0F0; margin-right: 12px; flex-shrink: 0;
}
.ins-forum-post-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.ins-forum-post-name { font-size: 15px; font-weight: 700; color: #111; }
.ins-forum-post-handle { font-size: 14px; color: #888; }
.ins-forum-post-time { font-size: 14px; color: #888; }

.ins-forum-post-body { margin-left: 56px; /* 头像宽度44 + 间距12 */ }
.ins-forum-post-text {
    font-size: 15px; color: #111; line-height: 1.5; text-align: left;
    word-break: break-word; white-space: pre-wrap;
}
.ins-forum-post-image {
    width: 100%; max-height: 300px; object-fit: cover; border-radius: 16px; margin-top: 12px;
    border: 1px solid #F0F0F0;
}

.ins-forum-post-actions {
    display: flex; align-items: center; justify-content: space-between; margin-top: 12px; margin-left: 56px; max-width: 250px;
}
.ins-forum-action-btn {
    display: flex; align-items: center; gap: 6px; color: #888; font-size: 13px; cursor: pointer; transition: color 0.2s;
}
.ins-forum-action-btn:active { color: #111; }
.ins-forum-action-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; fill: none; transition: transform 0.2s; }
.ins-forum-action-btn:active svg { transform: scale(0.9); }

/* 发布页 */
.ins-forum-btn-publish {
    background: #111; color: #FFF; border: none; padding: 8px 20px; border-radius: 20px;
    font-size: 14px; font-weight: 700; cursor: pointer;
}
.ins-forum-post-user-info {
    display: flex; align-items: center; margin-bottom: 15px;
}
.ins-forum-post-user-info span { font-size: 16px; font-weight: 700; }
.ins-forum-textarea {
    width: 100%; height: 150px; border: none; font-size: 18px; resize: none; outline: none;
    color: #111; line-height: 1.5;
}
.ins-forum-textarea::placeholder { color: #CCC; }
.ins-forum-image-upload {
    display: inline-flex; align-items: center; padding: 10px 16px; background: #FFF;
    border-radius: 20px; cursor: pointer; border: 1px solid #E5E5EA; color: #111; font-weight: 600;
}
.ins-forum-post-options {
    margin-top: 20px; padding-top: 20px; border-top: 1px solid #F0F0F0;
}

/* 个人信息页 */
.ins-forum-profile-header {
    display: flex; flex-direction: column; padding: 20px; border-bottom: 1px solid #F0F0F0;
}
.ins-forum-profile-avatar {
    width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 12px;
    border: 2px solid #FFF; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.ins-forum-profile-info { display: flex; flex-direction: column; }
.ins-forum-profile-name { font-size: 22px; font-weight: 800; color: #111; margin-bottom: 2px; }
.ins-forum-profile-handle { font-size: 15px; color: #888; margin-bottom: 12px; }
.ins-forum-profile-bio { font-size: 15px; color: #111; line-height: 1.4; cursor: pointer; }

.ins-forum-profile-tabs {
    display: flex; border-bottom: 1px solid #F0F0F0;
}
.ins-forum-profile-tab {
    flex: 1; text-align: center; padding: 15px 0; font-size: 15px; font-weight: 700; color: #888;
    cursor: pointer; position: relative; transition: color 0.2s;
}
.ins-forum-profile-tab.active { color: #111; }
.ins-forum-profile-tab.active::after {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 50px; height: 4px; background: #111; border-radius: 2px;
}

/* 详情页评论区 */
.ins-forum-comments-section {
    padding: 0; border-top: 1px solid #F0F0F0;
}
.ins-forum-comment-item {
    display: flex; padding: 16px 20px; border-bottom: 1px solid #F9F9F9;
}
.ins-forum-comment-info { flex: 1; }
.ins-forum-comment-name { font-size: 15px; font-weight: 700; color: #111; }
.ins-forum-comment-text { font-size: 15px; color: #111; line-height: 1.5; margin-top: 4px; }

.ins-forum-comment-bar {
    position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid #F0F0F0; padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 20px)) 20px;
    display: flex; align-items: center; gap: 10px; z-index: 20;
}
.ins-forum-comment-bar input {
    flex: 1; background: #F5F5F5; border: none; border-radius: 20px; padding: 12px 16px;
    font-size: 15px; outline: none;
}
.ins-forum-comment-bar button {
    background: transparent; border: none; color: #111; font-weight: 700; font-size: 15px; cursor: pointer;
}

/* 底部 Tabbar */
.ins-forum-tabbar {
    position: absolute; bottom: 0; left: 0; width: 100%; height: calc(60px + env(safe-area-inset-bottom, 20px));
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid #F0F0F0; display: flex; justify-content: space-around; align-items: center;
    padding-bottom: env(safe-area-inset-bottom, 20px); z-index: 10;
}
.ins-forum-tab {
    width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
    color: #B2B2B2; cursor: pointer; transition: all 0.2s;
}
.ins-forum-tab svg { width: 26px; height: 26px; fill: currentColor; stroke: currentColor; stroke-width: 0; }
.ins-forum-tab#forum-tab-post svg { fill: none; stroke-width: 2; }
.ins-forum-tab.active { color: #111; transform: translateY(-2px); }
/* ========================================== */
/* 论坛同人小说专属排版 (长文截断与阅读模式) */
/* ========================================== */

/* 列表页长文截断 (最多显示 5 行) */
.line-clamp-5 {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 小说正文排版 (增加行距，首行缩进，字体优化) */
.ins-forum-story-text {
    font-family: 'Kaiti', 'STKaiti', '楷体', 'Georgia', serif;
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #333 !important;
    text-align: justify;
    white-space: pre-wrap;
    letter-spacing: 0.5px;
}

/* 详情页中的小说排版进一步放大 */
#forum-post-detail-content .ins-forum-story-text {
    font-size: 17px !important;
    line-height: 2 !important;
    color: #111 !important;
}

/* 修复详情页底部操作栏的布局，让书签按钮靠右 */
#forum-post-detail-content .ins-forum-post-actions {
    display: flex;
    justify-content: space-between !important;
    align-items: center;
}
/* ========================================== */
/* 论坛帖子删除按钮样式 */
/* ========================================== */
.ins-forum-post-delete {
    width: 28px; 
    height: 28px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: #CCC; 
    cursor: pointer; 
    transition: color 0.2s, transform 0.2s; 
    margin-left: auto; /* 自动推到最右侧 */
    border-radius: 50%;
}
.ins-forum-post-delete:active { 
    color: #FF3B30; 
    background: rgba(255, 59, 48, 0.1);
    transform: scale(0.9);
}
.ins-forum-post-delete svg { 
    width: 16px; 
    height: 16px; 
    stroke: currentColor; 
    stroke-width: 2; 
    fill: none; 
}
/* ========================================== */
/* 论坛私信系统样式 (列表 + 聊天) */
/* ========================================== */

/* 私信列表项 (支持左滑删除) */
.forum-pm-swipe-wrapper {
    position: relative; 
    overflow: hidden; 
    border-bottom: 1px solid #F0F0F0;
    background: #FFF;
}
.forum-pm-swipe-wrapper:last-child { 
    border-bottom: none; 
}

.forum-pm-swipe-action {
    position: absolute; right: 0; top: 0; bottom: 0; width: 70px;
    background: #FF3B30; color: #FFF; 
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 14px; letter-spacing: 1px;
    z-index: 0; cursor: pointer;
}

.forum-pm-swipe-content {
    position: relative; z-index: 1; background: #FFF; width: 100%;
    display: flex; align-items: center; padding: 16px 20px;
    transition: transform 0.2s ease-out; cursor: pointer;
}
.forum-pm-swipe-content:active { 
    background: #F9F9F9; 
}

.forum-pm-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 1px solid #E5E5EA;
}
.forum-pm-info {
    flex: 1;
    overflow: hidden;
}
.forum-pm-name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.forum-pm-name {
    font-size: 16px;
    font-weight: 600;
    color: #111;
}
.forum-pm-time {
    font-size: 12px;
    color: #B2B2B2;
}
.forum-pm-preview {
    font-size: 14px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 私信聊天界面 */
.forum-pm-chat-history {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #F2F2F7;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.forum-pm-bubble-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 85%;
}
.forum-pm-bubble-row.me {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.forum-pm-bubble-row.them {
    align-self: flex-start;
}
.forum-pm-bubble-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.forum-pm-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.4;
    word-break: break-word;
}
.forum-pm-bubble-row.me .forum-pm-bubble {
    background: #111;
    color: #FFF;
    border-bottom-right-radius: 4px;
}
.forum-pm-bubble-row.them .forum-pm-bubble {
    background: #FFF;
    color: #111;
    border: 1px solid #E5E5EA;
    border-bottom-left-radius: 4px;
}

/* 底部输入框 */
.forum-pm-chat-footer {
    padding: 10px 15px calc(10px + env(safe-area-inset-bottom, 20px)) 15px;
    background: #FFF;
    border-top: 1px solid #E5E5EA;
    display: flex;
    align-items: center;
    gap: 12px;
}
.forum-pm-chat-footer input {
    flex: 1;
    background: #F5F5F5;
    border: none;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 15px;
    outline: none;
}
.forum-pm-chat-footer button {
    background: #111;
    color: #FFF;
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}
.forum-pm-chat-footer button:active {
    transform: scale(0.95);
}
/* ========================================== */
/* Char 手机设置 - 最近常听歌单 UI (干净黑胶版) */
/* ========================================== */
.char-playlist-list {
    width: 65%;
    height: 100%;
    overflow-y: auto;
    padding: 20px 0 20px 20px;
    z-index: 2;
    box-sizing: border-box;
}
.char-playlist-list::-webkit-scrollbar {
    display: none;
}
.char-playlist-item {
    padding: 15px 10px;
    border-bottom: 1px solid #E5E5EA;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.5;
}
.char-playlist-item.active {
    opacity: 1;
    transform: translateX(10px);
    border-bottom-color: transparent;
}
.char-playlist-item-title {
    font-size: 15px;
    font-weight: 600;
    color: #111;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.char-playlist-item.active .char-playlist-item-title {
    color: #007AFF;
    font-size: 17px;
}
.char-playlist-item-artist {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.char-playlist-record-area {
    position: absolute;
    right: -120px; /* 溢出屏幕，只显示部分 */
    top: 50%;
    transform: translateY(-50%);
    width: 260px;
    height: 260px;
    z-index: 1;
}
.char-playlist-record {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #111;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15), inset 0 0 0 6px #222, inset 0 0 0 12px #111, inset 0 0 0 14px #333;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.char-playlist-record.playing {
    animation: spinRecord 8s linear infinite;
}
.char-playlist-record-cover {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #000;
    background-color: #333; /* 默认深灰色背景，防止没有图片时难看 */
    opacity: 0; /* 初始透明，加载出图片后再显示 */
    transition: opacity 0.3s ease;
}
.char-playlist-record-hole {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #F9F9F9;
    border-radius: 50%;
    border: 2px solid #000;
}

@keyframes spinRecord { 100% { transform: rotate(360deg); } }
/* ========================================== */
/* Char 手机设置 - 星际星球播放器 (纯CSS/无Emoji) */
/* ========================================== */

/* 整体星空区域容器 */
.char-playlist-record-area {
    position: absolute;
    right: -100px; /* 稍微往左移一点，露出星环 */
    top: 50%;
    transform: translateY(-50%);
    width: 280px;
    height: 280px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 宇宙星云背景光晕 (深蓝/紫渐变) */
.space-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(29, 78, 216, 0.15) 0%, rgba(88, 28, 135, 0.05) 50%, transparent 70%);
    pointer-events: none;
}

/* 星球本体 (替代原本的黑胶) */
.char-playlist-record {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #0f172a; /* 深邃宇宙底色 */
    /* 模拟星球的立体光影：外发光 + 背光面暗角 + 受光面亮角 */
    box-shadow: 
        0 0 30px rgba(56, 189, 248, 0.3), 
        inset -15px -15px 25px rgba(0,0,0,0.9), 
        inset 10px 10px 20px rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    z-index: 10;
}

/* 播放时星球缓慢自转 */
.char-playlist-record.playing {
    animation: spinPlanet 25s linear infinite; 
}

/* 专辑封面作为星球地表纹理 */
.char-playlist-record-cover {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease;
    /* 让图片颜色稍微融入星球的暗色调中 */
    mix-blend-mode: luminosity; 
}

/* 星球大气层反光遮罩 (替代黑胶中间的洞) */
.planet-surface-gloss {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15) 0%, transparent 60%);
    pointer-events: none;
}

/* ================= 星环与纯CSS星光 ================= */
.planet-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

/* 利用伪元素绘制轨道上的发光星点 (绝对没有Emoji) */
.planet-orbit::before, .planet-orbit::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: #fff;
}

/* 内圈轨道：虚线 + 纯白星光 */
.orbit-1 {
    width: 170px; height: 170px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    animation: spinOrbit 15s linear infinite;
}
.orbit-1::before { 
    width: 4px; height: 4px; top: 15px; left: 30px; 
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.8); 
}
.orbit-1::after { 
    width: 2px; height: 2px; bottom: 20px; right: 40px; 
    background: #93c5fd; box-shadow: 0 0 6px 1px #93c5fd; 
}

/* 中圈轨道：点线 + 逆向旋转 + 浅蓝/淡黄星光 */
.orbit-2 {
    width: 210px; height: 210px;
    border: 1px dotted rgba(147, 197, 253, 0.3);
    animation: spinOrbit 25s linear infinite reverse;
}
.orbit-2::before { 
    width: 3px; height: 3px; top: 50%; left: -1.5px; 
    background: #bae6fd; box-shadow: 0 0 8px 2px #bae6fd;
}
.orbit-2::after { 
    width: 5px; height: 5px; top: 25px; right: 25px; 
    background: #fef08a; box-shadow: 0 0 10px 2px #fef08a; 
}

/* 外圈轨道：极细实线 + 远处的微弱星光 */
.orbit-3 {
    width: 250px; height: 250px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: spinOrbit 40s linear infinite;
}
.orbit-3::before { 
    width: 2px; height: 2px; bottom: 15%; left: 10%; 
    box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.5);
}

/* 动画定义 */
@keyframes spinPlanet { 100% { transform: rotate(360deg); } }
@keyframes spinOrbit { 100% { transform: rotate(360deg); } }
/* ========================================== */
/* 语音通话系统 (高级暗黑神秘风) */
/* ========================================== */
.ins-call-view {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #0B0C10; z-index: 3000; display: flex; flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    opacity: 1; transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.ins-call-view.hidden {
    opacity: 0; pointer-events: none; transform: translateY(20px);
}

.ins-call-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
    filter: blur(40px) brightness(0.3); transform: scale(1.2); z-index: 0;
}

/* 顶部头像与状态 (未接通时绝对居中，接通后平滑上移) */
.ins-call-header {
    position: relative; z-index: 10; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    flex: 1; /* 占据剩余空间，实现完美居中 */
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
/* 接通后，取消居中，靠上显示 */
.ins-call-view.active-call .ins-call-header {
    flex: none;
    padding-top: calc(env(safe-area-inset-top, 20px) + 60px);
}

.ins-call-avatar-wrapper {
    position: relative; width: 120px; height: 120px; margin-bottom: 24px;
}
.ins-call-avatar {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(255,255,255,0.1); box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative; z-index: 2; transition: transform 0.3s ease;
}

/* 说话时的声波动画 */
.ins-call-ripple {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    border-radius: 50%; border: 1px solid rgba(255,255,255,0.4);
    opacity: 0; z-index: 1; pointer-events: none;
}
.ins-call-avatar-wrapper.speaking .ins-call-ripple.ring1 {
    animation: callRipple 1.5s infinite ease-out;
}
.ins-call-avatar-wrapper.speaking .ins-call-ripple.ring2 {
    animation: callRipple 1.5s infinite ease-out 0.75s;
}
@keyframes callRipple {
    0% { width: 120px; height: 120px; opacity: 0.8; border-width: 2px; }
    100% { width: 240px; height: 240px; opacity: 0; border-width: 0px; }
}
.ins-call-avatar-wrapper.speaking .ins-call-avatar {
    transform: scale(1.05); box-shadow: 0 0 30px rgba(255,255,255,0.2);
}

.ins-call-name { font-size: 28px; font-weight: 300; color: #FFF; letter-spacing: 2px; margin-bottom: 8px; }
.ins-call-status { font-size: 14px; color: rgba(255,255,255,0.5); font-family: monospace; letter-spacing: 1px; }

/* 通话中的文字流 (完美内部滑动，不顶按键) */
.ins-call-chat-area {
    flex: 1; /* 占据中间所有剩余空间 */
    position: relative; 
    z-index: 10; 
    padding: 0 20px;
    display: flex; 
    flex-direction: column; 
    overflow: hidden; /* 关键：限制外层高度，防止撑开屏幕 */
    mask-image: linear-gradient(to bottom, transparent, black 10%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%);
}
.ins-call-messages {
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    overflow-y: auto; /* 关键：内容过长时在内部滚动 */
    padding-top: 20px;
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch; /* 苹果丝滑滚动 */
}
.ins-call-messages::-webkit-scrollbar { display: none; }

.ins-call-msg {
    max-width: 85%; padding: 12px 16px; border-radius: 16px; font-size: 15px; line-height: 1.5;
    color: #FFF; animation: wcFadeIn 0.3s ease; word-break: break-word; flex-shrink: 0;
}
.ins-call-msg.me { align-self: flex-end; background: rgba(255,255,255,0.15); border-bottom-right-radius: 4px; }
.ins-call-msg.them { align-self: flex-start; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); border-bottom-left-radius: 4px; }

/* 底部操作区 (死死钉在底部) */
.ins-call-footer {
    position: relative; 
    z-index: 10; 
    flex-shrink: 0; /* 关键：绝对不允许被上面的文字挤压变形或顶下去 */
    padding: 10px 30px calc(env(safe-area-inset-bottom, 20px) + 20px) 30px; 
}

.ins-call-actions-row { display: flex; justify-content: center; gap: 40px; }
.ins-call-btn {
    width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: transform 0.2s; box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
.ins-call-btn:active { transform: scale(0.9); }
.ins-call-btn svg { width: 32px; height: 32px; fill: #FFF; }
.ins-call-btn.reject { background: #FF3B30; }
.ins-call-btn.accept { background: #34C759; }
.ins-call-btn.reject.small { width: 56px; height: 56px; margin: 20px auto 0 auto; }
.ins-call-btn.reject.small svg { width: 24px; height: 24px; }

.ins-call-actions-active { display: flex; flex-direction: column; width: 100%; }
.ins-call-input-row {
    display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.1);
    padding: 8px 12px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
}
.ins-call-input-row input {
    flex: 1; background: transparent; border: none; color: #FFF; font-size: 15px; outline: none;
}
.ins-call-input-row input::placeholder { color: rgba(255,255,255,0.4); }
.ins-call-send-btn, .ins-call-ai-btn {
    background: transparent; border: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.ins-call-send-btn svg { width: 20px; height: 20px; stroke: #FFF; fill: none; stroke-width: 2; }
.ins-call-ai-btn svg { width: 22px; height: 22px; fill: #AF52DE; }

/* 聊天界面的通话记录气泡 */
.wc-bubble.call-record {
    background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important;
}
.ins-call-record-card {
    display: flex; align-items: center; gap: 10px; background: #FFF; border: 1px solid #E5E5EA;
    padding: 10px 16px; border-radius: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.ins-call-record-card svg { width: 20px; height: 20px; }
.ins-call-record-text { font-size: 14px; color: #111; font-weight: 500; }
.ins-call-record-time { font-size: 12px; color: #888; font-family: monospace; margin-left: 8px; }
/* ========================================== */
/* 语音通话 - 动态呼吸音波样式 */
/* ========================================== */
.ins-call-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.ins-call-voice-wave {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 16px;
    opacity: 1;
    transition: opacity 0.3s ease;
}
.ins-call-voice-wave.hidden {
    opacity: 0;
}

.ins-call-voice-wave .wave-bar {
    width: 3px;
    background-color: #AF52DE; /* 神秘的紫色音波 */
    border-radius: 2px;
    animation: callVoiceWave 1s infinite ease-in-out;
}

.ins-call-voice-wave .wave-bar:nth-child(1) { height: 8px; animation-delay: 0s; }
.ins-call-voice-wave .wave-bar:nth-child(2) { height: 16px; animation-delay: 0.2s; }
.ins-call-voice-wave .wave-bar:nth-child(3) { height: 10px; animation-delay: 0.4s; }
.ins-call-voice-wave .wave-bar:nth-child(4) { height: 14px; animation-delay: 0.1s; }

@keyframes callVoiceWave {
    0%, 100% { height: 6px; }
    50% { height: 16px; }
}
/* ========================================== */
/* 📱 iOS Standalone 全屏模式专属安全区适配 */
/* ========================================== */

.ios-standalone .screen {
    padding-top: max(env(safe-area-inset-top), 47px) !important;
}

.ios-standalone .wc-chat-footer {
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
}

.ios-standalone .ins-music-tabbar,
.ios-standalone .ls-tabbar,
.ios-standalone .ins-forum-tabbar {
    padding-bottom: env(safe-area-inset-bottom) !important;
    height: calc(60px + env(safe-area-inset-bottom)) !important;
}

.ios-standalone .settings-modal {
    padding-top: 0 !important;
}

.ios-standalone .settings-header {
    height: calc(50px + env(safe-area-inset-top, 20px)) !important;
    padding-top: env(safe-area-inset-top, 20px) !important;
}

.ios-standalone .dream-fullscreen-view,
.ios-standalone #wc-view-phone-sim,
.ios-standalone #wc-view-shopping {
    padding-top: 0 !important;
}