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

/* 【v9】可编辑区域白名单：允许长按弹出系统复制/粘贴菜单 + 允许文本选择（覆盖 body 的 user-select:none） */
input,
textarea,
[contenteditable="true"],
[contenteditable=""] {
    -webkit-touch-callout: default;
    -webkit-user-select: text;
    user-select: text;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    /* 修复 iOS Safari 长按消息出现蓝色文本选择高亮的问题。
       通过继承传到所有子元素；input/textarea/contenteditable（白名单）和
       .novel-reader-content（共伴划线批注依赖）等显式设 user-select:text 的区域不受影响。 */
    -webkit-user-select: none;
    user-select: none;
}

/* ===== 开屏动画（网页 PWA + APK WebView 通用） =====
   不透明纯白铺满，首帧即遮住加载期 .phone-frame 的黑底/黑边与蓝条；
   云朵用 mix-blend-mode:multiply 与白底相乘 → 图标自带的白方块彻底隐形、
   只留水墨云，无论图标实际底色是 #fff 还是 #fafafa 都完美融合。 */
#app-splash {
    position: fixed;
    inset: 0;
    z-index: 2147483000; /* 高于锁屏(9999)/弹窗/一切加载期元素 */
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#app-splash .app-splash-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    transform: translateZ(0);
    animation: appSplashIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#app-splash .app-splash-cloud {
    width: 42vw;
    max-width: 188px;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    mix-blend-mode: multiply;
    animation: appSplashFloat 3.4s ease-in-out 0.9s infinite;
}
#app-splash .app-splash-title {
    font-size: 22px;
    letter-spacing: 4px;
    color: #1a1a1a;
    font-weight: 500;
}
@keyframes appSplashIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes appSplashFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
#app-splash.app-splash-hide {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
}
@media (prefers-reduced-motion: reduce) {
    #app-splash .app-splash-inner { animation-duration: 0.01ms; }
    #app-splash .app-splash-cloud { animation: none; }
}

/* 移动端适配类 */
body.mobile-adapted {
    padding: 0;
    overflow: hidden;
}

.phone-container {
    perspective: 1000px;
}

.phone-frame {
    width: 390px;
    height: 726px;
    background: #000;
    border-radius: 42px;
    box-shadow: 
        0 0 0 2px #1a1a1a,
        0 0 0 3px #2d2d2d,
        0 5px 15px rgba(0, 0, 0, 0.2),
        0 15px 35px rgba(0, 0, 0, 0.15),
        0 30px 60px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    border: 3px solid #0a0a0a;
}

/* 用户强制保持外框（由开关控制）——覆盖响应式规则 */
body.keep-frame .phone-frame {
    width: 390px !important;
    height: 726px !important;
    background: #000 !important;
    border-radius: 42px !important;
    box-shadow: 0 0 0 2px #1a1a1a, 0 0 0 3px #2d2d2d, 0 5px 15px rgba(0,0,0,0.2), 0 15px 35px rgba(0,0,0,0.15), 0 30px 60px rgba(0,0,0,0.1) !important;
    border: 3px solid #0a0a0a !important;
    overflow: hidden !important;
    margin: 0 auto !important;
}

/* 锁屏界面 */
.lock-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lock-screen.unlocking {
    transform: translateY(-100%);
}

.lock-screen.hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.lock-screen-wallpaper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    background-size: cover;
    background-position: center;
}

.lock-screen-overlay {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 60px 30px 40px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
    color: white;
    z-index: 1;
}

.lock-time {
    text-align: center;
}

.lock-hours {
    font-size: 76px;
    font-weight: 300;
    letter-spacing: -2px;
    margin-bottom: 8px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.lock-date {
    font-size: 18px;
    font-weight: 400;
    opacity: 0.9;
    text-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

.lock-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.lock-hint {
    font-size: 14px;
    opacity: 0.8;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    animation: lockHintPulse 2s ease-in-out infinite;
}

@keyframes lockHintPulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.5; }
}

.lock-unlock-bar {
    width: 100%;
    height: 60px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.unlock-slider {
    position: absolute;
    left: 4px;
    top: 4px;
    width: 52px;
    height: 52px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    transition: transform 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.unlock-slider::before {
    content: '⬆';
    font-size: 20px;
    color: #666;
}

/* ===== 锁屏密码输入面板 ===== */
.lock-password-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.lock-password-panel.active {
    display: flex;
}

.lock-password-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 30px;
}

.lock-password-title {
    font-size: 20px;
    font-weight: 300;
    color: white;
    letter-spacing: 1px;
}

.lock-password-dots {
    display: flex;
    gap: 16px;
    padding: 10px 0;
}

.password-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.7);
    background: transparent;
    transition: background 0.15s ease;
}

.password-dot.filled {
    background: white;
    border-color: white;
}

.lock-password-error {
    font-size: 13px;
    color: #ff6b6b;
    min-height: 18px;
    text-align: center;
}

.lock-numpad {
    display: grid;
    grid-template-columns: repeat(3, 75px);
    gap: 12px;
    justify-content: center;
}

.numpad-key {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.numpad-key:active {
    background: rgba(255, 255, 255, 0.3);
}

.numpad-key.numpad-empty {
    border: none;
    background: transparent;
    pointer-events: none;
}

.numpad-key.numpad-delete {
    font-size: 22px;
    border: none;
    background: transparent;
}

.numpad-key.numpad-delete:active {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
}

.lock-password-cancel {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    cursor: pointer;
    padding: 8px 20px;
    margin-top: 5px;
}

.lock-password-reset {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    cursor: pointer;
    padding: 6px 16px;
    margin-top: 4px;
}

@keyframes passwordShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

.lock-password-dots.shake {
    animation: passwordShake 0.4s ease;
}

/* 无外框模式 - 用户关闭外框开关时（全屏铺满） */
.phone-frame.frameless {
    width: 100vw !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* 全屏模式下，取消 phone-container 的 perspective 以恢复 fixed 定位行为 */
body.fullscreen-mode .phone-container {
    perspective: none;
}

/* 移动端全屏显示 — 缩小触发阈值以避免平板竖屏误触发 */
@media (max-width: 600px) {
    body {
        padding: 0;
    }
}

/* 如果需要强制在更小设备上隐藏外框（可被脚本控制），
   使用 .force-fullscreen 类而不是全局媒体查询 */
@media (max-width: 420px) {
    .phone-frame.force-fullscreen {
        width: 100vw;
        height: 100vh;
        max-height: none;
        border-radius: 0;
        border: none;
        box-shadow: none;
    }
}

/* 状态栏 */
.status-bar {
    height: 30px;
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    font-size: 12px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    color: white;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 状态栏隐藏 */
.status-bar.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
}

.status-bar > * {
    pointer-events: auto;
}

/* 非主屏页面的状态栏样式 */
.page:not(#home) ~ .status-bar,
.page:not(.active) ~ .status-bar {
    background: rgba(255, 255, 255, 0.98);
    color: #333;
}

.page#home.active ~ .status-bar {
    background: transparent;
    color: #1a1a1a;
}

.status-left, .status-right {
    display: flex;
    gap: 6px;
    align-items: center;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.status-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    min-width: 0;
}

.battery-text {
    font-size: 12px;
}

.battery-icon-container {
    display: flex;
    align-items: center;
    gap: 1px;
}

.battery-body {
    width: 20px;
    height: 10px;
    border: 1.5px solid currentColor;
    border-radius: 2px;
    padding: 1px;
    display: flex;
    align-items: center;
}

.battery-level {
    height: 100%;
    width: 100%;
    background: currentColor;
    border-radius: 1px;
}

.battery-tip {
    width: 2px;
    height: 6px;
    background: currentColor;
    border-radius: 0 1px 1px 0;
}

/* 屏幕内容区域 */
.screen-content {
    height: 100%;
    background: #f5f5f5;
    position: relative;
    overflow: hidden;
    border-radius: 39px;
}

/* 夜间模式 - 自然深色主题 */
.phone-frame.night-mode {
    background: #121212;
    transition: background 0.3s ease;
}

.phone-frame.night-mode .screen-content {
    background: linear-gradient(to bottom, #121212, #0a0a0a);
}

.phone-frame.night-mode .status-bar {
    background: rgba(18, 18, 18, 0.98);
    backdrop-filter: blur(20px);
    color: #e8e8e8;
}

.phone-frame.night-mode .time {
    color: #e8e8e8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.phone-frame.night-mode .battery-text,
.phone-frame.night-mode .battery-body,
.phone-frame.night-mode .battery-tip {
    color: #e8e8e8;
}

.phone-frame.night-mode .wallpaper {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
}

.phone-frame.night-mode .home-widget {
    background: rgba(28, 28, 30, 0.92) !important;
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* 夜间模式下有图片时不遮挡 */
.phone-frame.night-mode .home-widget.has-image {
    background: transparent !important;
    backdrop-filter: none;
}

.phone-frame.night-mode .widget-info {
    color: #d1d1d6;
}

.phone-frame.night-mode .widget-time {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.phone-frame.night-mode .widget-date {
    color: #c7c7cc;
}

.phone-frame.night-mode .widget-name {
    color: #e8e8e8;
}

.phone-frame.night-mode .widget-id {
    color: #8e8e93;
}

.phone-frame.night-mode .widget-signature {
    color: #aeaeb2;
}

.phone-frame.night-mode .widget-weather-box {
    color: #c7c7cc;
}

.phone-frame.night-mode .note-widget {
    background: rgba(28, 28, 30, 0.92) !important;
    backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.phone-frame.night-mode .note-title {
    color: #e8e8e8;
}

.phone-frame.night-mode .note-line p {
    color: #c7c7cc;
}

.phone-frame.night-mode .icon-box {
    background: rgba(44, 44, 46, 0.85) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .icon-label {
    color: #e8e8e8;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.phone-frame.night-mode .home-bottom-nav {
    background: rgba(28, 28, 30, 0.95);
    backdrop-filter: blur(30px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.3);
}

.phone-frame.night-mode .home-nav-item span {
    color: #e8e8e8;
}

.phone-frame.night-mode .nav-icon {
    filter: brightness(1.2);
}

.phone-frame.night-mode .page {
    background: #0a0a0a;
}

.phone-frame.night-mode .page-header {
    background: rgba(28, 28, 30, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.phone-frame.night-mode .header-title {
    color: #ffffff;
}

.phone-frame.night-mode .back-btn {
    color: #0a84ff;
    background: rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .back-btn:active {
    background: rgba(255, 255, 255, 0.12);
}

.phone-frame.night-mode .weather-settings-btn {
    background: rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .weather-settings-btn .dot {
    background: #e8e8e8;
}

.phone-frame.night-mode .weather-settings-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.phone-frame.night-mode .weather-settings-btn:active {
    background: rgba(255, 255, 255, 0.12);
}

.phone-frame.night-mode .theme-section,
.phone-frame.night-mode .settings-section {
    background: rgba(28, 28, 30, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.phone-frame.night-mode .section-title {
    color: #e8e8e8;
}

.phone-frame.night-mode .wallpaper-card,
.phone-frame.night-mode .css-scheme-card,
.phone-frame.night-mode .app-card {
    background: rgba(44, 44, 46, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.phone-frame.night-mode .wallpaper-preview {
    background: rgba(28, 28, 30, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .wallpaper-card-header,
.phone-frame.night-mode .scheme-name,
.phone-frame.night-mode .app-card-name {
    color: #d1d1d6;
}

.phone-frame.night-mode .scheme-status,
.phone-frame.night-mode .wallpaper-placeholder,
.phone-frame.night-mode .security-hint,
.phone-frame.night-mode .frame-hint {
    color: #8e8e93;
}

.phone-frame.night-mode .change-wallpaper-btn,
.phone-frame.night-mode .scheme-edit-btn,
.phone-frame.night-mode .change-icon-btn,
.phone-frame.night-mode .css-action-btn {
    background: rgba(58, 58, 60, 0.9);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.phone-frame.night-mode .change-wallpaper-btn:active,
.phone-frame.night-mode .scheme-edit-btn:active,
.phone-frame.night-mode .change-icon-btn:active,
.phone-frame.night-mode .css-action-btn:active {
    background: rgba(72, 72, 74, 0.9);
}

.phone-frame.night-mode .reset-app-btn {
    background: rgba(58, 58, 60, 0.9);
    color: #d1d1d6;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.phone-frame.night-mode .reset-app-btn:active {
    background: rgba(72, 72, 74, 0.9);
}

.phone-frame.night-mode .delete-wallpaper-btn {
    background: rgba(44, 44, 46, 0.9);
    border-color: #ff453a;
    color: #ff453a;
}

.phone-frame.night-mode .security-label,
.phone-frame.night-mode .frame-label {
    color: #e8e8e8;
}

.phone-frame.night-mode .password-setting {
    background: rgba(28, 28, 30, 0.8);
    backdrop-filter: blur(10px);
    border-color: rgba(255, 255, 255, 0.06);
}

.phone-frame.night-mode .password-label {
    color: #d1d1d6;
}

.phone-frame.night-mode .password-input {
    background: rgba(44, 44, 46, 0.85);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.phone-frame.night-mode .password-input:focus {
    border-color: #0a84ff;
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
}

.phone-frame.night-mode .password-input::placeholder {
    color: #636366;
}

.phone-frame.night-mode .save-password-btn {
    background: rgba(58, 58, 60, 0.9);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.phone-frame.night-mode .save-password-btn:active {
    background: rgba(72, 72, 74, 0.9);
}

.phone-frame.night-mode .theme-option {
    background: rgba(44, 44, 46, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .theme-option.active {
    background: rgba(58, 58, 60, 0.9);
    border-color: #0a84ff;
    box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.2);
}

.phone-frame.night-mode .theme-option span {
    color: #d1d1d6;
}

.phone-frame.night-mode .theme-option.active span {
    color: #ffffff;
}

.phone-frame.night-mode .theme-preview {
    border-color: rgba(255, 255, 255, 0.1);
}

.phone-frame.night-mode .toggle-switch input:checked + .toggle-slider {
    background: #30d158;
    border: none;
}

.phone-frame.night-mode .toggle-slider {
    background: rgba(72, 72, 74, 0.9);
}

.phone-frame.night-mode .toggle-slider:before {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.phone-frame.night-mode .home-indicator {
    background: rgba(235, 235, 245, 0.3);
}

.phone-frame.night-mode .drift-bottle-widget {
    background: transparent;
}

.phone-frame.night-mode .wave {
    opacity: 0.6;
}

.phone-frame.night-mode .bottle {
    filter: brightness(0.8);
}

.phone-frame.night-mode .page-indicators .indicator {
    background: rgba(235, 235, 245, 0.2);
}

.phone-frame.night-mode .page-indicators .indicator.active {
    background: rgba(235, 235, 245, 0.6);
}

.phone-frame.night-mode .settings-item {
    background: rgba(44, 44, 46, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .settings-label {
    color: #e8e8e8;
}

.phone-frame.night-mode .settings-value {
    color: #8e8e93;
}

/* 夜间模式下的锁屏 */
.phone-frame.night-mode .lock-screen {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
}

.phone-frame.night-mode .lock-screen-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.5));
}

.phone-frame.night-mode .lock-hours,
.phone-frame.night-mode .lock-date {
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.phone-frame.night-mode .lock-hint {
    color: rgba(235, 235, 245, 0.8);
}

.phone-frame.night-mode .unlock-slider {
    background: rgba(235, 235, 245, 0.3);
}

/* 夜间模式下的模态框 */
.phone-frame.night-mode .modal-content {
    background: rgba(28, 28, 30, 0.98);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.phone-frame.night-mode .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .modal-header h3 {
    color: #ffffff;
}

.phone-frame.night-mode .modal-close {
    color: #8e8e93;
}

.phone-frame.night-mode .modal-close:hover {
    color: #ffffff;
}

.phone-frame.night-mode .css-input,
.phone-frame.night-mode .css-code-editor {
    background: rgba(44, 44, 46, 0.9);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.12);
}

.phone-frame.night-mode .css-input:focus,
.phone-frame.night-mode .css-code-editor:focus {
    border-color: #0a84ff;
    background: rgba(58, 58, 60, 0.9);
}

.phone-frame.night-mode .css-label {
    color: #d1d1d6;
}

.phone-frame.night-mode .css-export-btn,
.phone-frame.night-mode .css-cancel-btn {
    background: rgba(58, 58, 60, 0.9);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.12);
}

.phone-frame.night-mode .css-delete-btn {
    background: rgba(44, 44, 46, 0.9);
    border-color: #ff453a;
    color: #ff453a;
}

.phone-frame.night-mode .css-save-btn {
    background: #0a84ff;
    color: #ffffff;
    border: none;
}

.phone-frame.night-mode .css-save-btn:active {
    background: #0077ed;
}

/* 夜间模式 - 主题app内的图标边框优化 */
.phone-frame.night-mode .app-card-icon-box {
    background: rgba(44, 44, 46, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 夜间模式 - 字体app优化 */
.phone-frame.night-mode .font-current {
    background: rgba(28, 28, 30, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .font-name,
.phone-frame.night-mode .font-preview-text {
    color: #e8e8e8;
}

.phone-frame.night-mode .font-custom-slots {
    gap: 12px;
}

.phone-frame.night-mode .font-slot {
    background: rgba(44, 44, 46, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .font-slot.empty {
    background: rgba(28, 28, 30, 0.8);
    border: 1px dashed rgba(255, 255, 255, 0.12);
}

.phone-frame.night-mode .slot-icon {
    background: rgba(58, 58, 60, 0.9);
    border: none;
}

.phone-frame.night-mode .slot-name {
    color: #d1d1d6;
}

.phone-frame.night-mode .slot-actions button {
    background: rgba(58, 58, 60, 0.9);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.12);
}

.phone-frame.night-mode .delete-font-btn {
    background: rgba(44, 44, 46, 0.9);
    border-color: #ff453a;
    color: #ff453a;
}

.phone-frame.night-mode .global-font-value,
.phone-frame.night-mode .global-font-hex {
    color: #8e8e93;
}

.phone-frame.night-mode .global-font-slider::-webkit-slider-thumb {
    background: #8e8e93;
}

.phone-frame.night-mode .global-font-color-input {
    background: rgba(44, 44, 46, 0.9);
    border-color: rgba(255, 255, 255, 0.12);
}

.phone-frame.night-mode .global-font-color-reset {
    background: rgba(58, 58, 60, 0.9);
    border-color: rgba(255, 255, 255, 0.12);
    color: #d1d1d6;
}

.phone-frame.night-mode .global-font-hint {
    color: #636366;
}

/* 夜间模式 - 设置app优化 */
.phone-frame.night-mode .avatar-section {
    background: rgba(28, 28, 30, 0.8);
    border-color: rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .avatar-container {
    background: rgba(44, 44, 46, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
}

.phone-frame.night-mode .avatar-name,
.phone-frame.night-mode .avatar-id {
    color: #e8e8e8;
}

.phone-frame.night-mode .avatar-id {
    color: #8e8e93;
}

.phone-frame.night-mode .avatar-edit-btn {
    background: rgba(58, 58, 60, 0.9);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.12);
}

.phone-frame.night-mode .input-group input,
.phone-frame.night-mode .input-group textarea {
    background: rgba(44, 44, 46, 0.85);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.12);
}

.phone-frame.night-mode .input-group input:focus,
.phone-frame.night-mode .input-group textarea:focus {
    border-color: #0a84ff;
    background: rgba(58, 58, 60, 0.9);
}

.phone-frame.night-mode .input-group input::placeholder,
.phone-frame.night-mode .input-group textarea::placeholder {
    color: #636366;
}

.phone-frame.night-mode .input-label {
    color: #d1d1d6;
}

.phone-frame.night-mode .settings-item-value {
    color: #8e8e93;
}

/* 夜间模式 - 天气app优化 */
.phone-frame.night-mode .weather-main {
    background: rgba(28, 28, 30, 0.8);
    border-color: rgba(255, 255, 255, 0.06);
}

.phone-frame.night-mode .weather-temp {
    color: #ffffff;
}

.phone-frame.night-mode .weather-content {
    background: #000000;
}

.phone-frame.night-mode .weather-main-view,
.phone-frame.night-mode .weather-settings-view {
    background: #000000;
}

.phone-frame.night-mode .current-weather {
    background: rgba(28, 28, 30, 0.9);
    border-color: rgba(255, 255, 255, 0.06);
}

.phone-frame.night-mode .weather-temp {
    color: #e8e8e8;
}

.phone-frame.night-mode .weather-desc,
.phone-frame.night-mode .weather-location {
    color: #c7c7cc;
}

.phone-frame.night-mode .weather-details {
    background: rgba(28, 28, 30, 0.8);
    border-color: rgba(255, 255, 255, 0.06);
}

.phone-frame.night-mode .detail-item {
    background: rgba(28, 28, 30, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .detail-label {
    color: #8e8e93;
}

.phone-frame.night-mode .detail-value {
    color: #e8e8e8;
}

.phone-frame.night-mode .forecast-section {
    background: rgba(28, 28, 30, 0.9);
    border-color: rgba(255, 255, 255, 0.06);
}

.phone-frame.night-mode .section-title {
    color: #e8e8e8;
}

.phone-frame.night-mode .forecast-item {
    background: rgba(44, 44, 46, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
}

.phone-frame.night-mode .weather-emoji,
.phone-frame.night-mode .forecast-emoji {
    color: #ccc;
}

.phone-frame.night-mode .rain-icon-lines::before,
.phone-frame.night-mode .rain-icon-small::before {
    background:
        linear-gradient(#e8e8e8 0 0) 20% 30%/2px 12px,
        linear-gradient(#e8e8e8 0 0) 40% 45%/2px 16px,
        linear-gradient(#e8e8e8 0 0) 60% 35%/2px 14px,
        linear-gradient(#e8e8e8 0 0) 80% 50%/2px 11px;
    background-repeat: no-repeat;
}

.phone-frame.night-mode .rain-icon-small::before {
    background:
        linear-gradient(#e8e8e8 0 0) 25% 30%/1.5px 8px,
        linear-gradient(#e8e8e8 0 0) 75% 40%/1.5px 10px;
    background-repeat: no-repeat;
}

.phone-frame.night-mode .forecast-day {
    color: #e8e8e8;
}

/* 动态天气效果层 */
.dynamic-weather-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
}

/* 雨滴动画 */
.raindrop,
.weather-raindrop {
    position: absolute;
    top: -50px;
    width: 1px;
    height: 30px;
    background: linear-gradient(to bottom, transparent, rgba(153, 153, 153, 0.25), rgba(153, 153, 153, 0.5));
    animation: raindrop-fall linear infinite;
}

@keyframes raindrop-fall {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(calc(100vh + 100px));
        opacity: 0;
    }
}

/* 天气雪花动画 */
.weather-snowflake {
    position: absolute;
    top: -20px;
    color: #999;
    animation: weather-snowflake-fall linear infinite;
    text-shadow: 0 0 3px rgba(153, 153, 153, 0.4);
    pointer-events: none;
    opacity: 0.9;
}

@keyframes weather-snowflake-fall {
    0% {
        transform: translateY(-20px) translateX(0) rotate(0deg);
        opacity: 0;
    }
    5% {
        opacity: 0.9;
    }
    95% {
        opacity: 0.9;
    }
    100% {
        transform: translateY(1000px) translateX(120px) rotate(360deg);
        opacity: 0;
    }
}

.phone-frame.night-mode .weather-snowflake {
    color: #ddd;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

/* 雾层效果 - 清透 */
.weather-fog-layer {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(200, 200, 200, 0.15), rgba(200, 200, 200, 0.05) 60%, transparent 80%);
    pointer-events: none;
    filter: blur(40px);
    animation: fog-drift linear infinite;
}

@keyframes fog-drift {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 0.5;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        transform: translateX(30%) translateY(10%);
        opacity: 0.5;
    }
}

/* 霾层效果 - 浓厚 */
.weather-haze-layer {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(180, 175, 160, 0.25), rgba(180, 175, 160, 0.12) 60%, transparent 80%);
    pointer-events: none;
    filter: blur(35px);
    animation: haze-drift linear infinite;
}

@keyframes haze-drift {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 0.6;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: translateX(25%) translateY(8%);
        opacity: 0.6;
    }
}

/* 夜间模式下的雾霾效果 */
.phone-frame.night-mode .weather-fog-layer {
    background: radial-gradient(ellipse at center, rgba(150, 150, 150, 0.2), rgba(150, 150, 150, 0.08) 60%, transparent 80%);
}

.phone-frame.night-mode .weather-haze-layer {
    background: radial-gradient(ellipse at center, rgba(140, 135, 120, 0.3), rgba(140, 135, 120, 0.15) 60%, transparent 80%);
}

/* 水雾云团效果 */
.rain-mist-cloud {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(153, 153, 153, 0.18), rgba(153, 153, 153, 0.08) 50%, transparent 75%);
    pointer-events: none;
    animation: mist-cloud-float ease-in-out infinite;
    filter: blur(20px);
}

@keyframes mist-cloud-float {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1) translateY(0);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.15) translateY(-15px);
    }
}

/* 雪花动画（原有预留） */
.snowflake {
    position: absolute;
    top: -20px;
    color: rgba(255, 255, 255, 0.9);
    animation: old-snowflake-fall linear infinite;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
}

@keyframes old-snowflake-fall {
    0% {
        transform: translateY(-20px) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(calc(100vh + 20px)) translateX(50px);
        opacity: 0;
    }
}

/* 夜间模式下的雨滴颜色调整 */
.phone-frame.night-mode .raindrop {
    background: linear-gradient(to bottom, transparent, rgba(200, 200, 200, 0.2), rgba(200, 200, 200, 0.4));
}

.phone-frame.night-mode .rain-mist-cloud {
    background: radial-gradient(circle at center, rgba(200, 200, 200, 0.15), rgba(200, 200, 200, 0.06) 50%, transparent 75%);
}

.phone-frame.night-mode .forecast-temp {
    color: #c7c7cc;
}

/* 夜间模式 - 天气设置页 */
.phone-frame.night-mode .settings-content {
    background: #000000;
}

.phone-frame.night-mode .settings-section {
    background: rgba(28, 28, 30, 0.9);
    border-color: rgba(255, 255, 255, 0.06);
}

.phone-frame.night-mode .setting-label {
    color: #e8e8e8;
}

.phone-frame.night-mode .setting-input,
.phone-frame.night-mode .setting-select,
.phone-frame.night-mode .season-textarea-unified {
    background: rgba(44, 44, 46, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
    color: #e8e8e8;
}

.phone-frame.night-mode .save-settings-btn {
    background: rgba(44, 44, 46, 0.8);
    color: #e8e8e8;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.phone-frame.night-mode .save-settings-btn:hover {
    background: rgba(58, 58, 60, 0.8);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.phone-frame.night-mode .save-settings-btn:active {
    background: rgba(72, 72, 74, 0.8);
}

.phone-frame.night-mode .setting-input:focus,
.phone-frame.night-mode .setting-select:focus,
.phone-frame.night-mode .season-textarea-unified:focus {
    background: rgba(44, 44, 46, 0.8);
    border-color: #0a84ff;
}

.phone-frame.night-mode .setting-input::placeholder,
.phone-frame.night-mode .season-textarea-unified::placeholder {
    color: #8e8e93;
}

.phone-frame.night-mode .toggle-slider {
    background-color: #48484a;
}

.phone-frame.night-mode .setting-hint,
.phone-frame.night-mode .settings-hint {
    color: #8e8e93;
}

/* 夜间模式 - 日历app优化 */
.phone-frame.night-mode .calendar-header {
    background: rgba(28, 28, 30, 0.9);
    border-color: rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .calendar-month {
    color: #ffffff;
}

.phone-frame.night-mode .calendar-grid {
    background: rgba(28, 28, 30, 0.8);
}

.phone-frame.night-mode .calendar-day {
    color: #e8e8e8;
}

.phone-frame.night-mode .calendar-day.other-month {
    color: #48484a;
}

.phone-frame.night-mode .calendar-day.today {
    background: #0a84ff;
    color: #ffffff;
}

.phone-frame.night-mode .weekday {
    color: #8e8e93;
}

/* 夜间模式 - 微信app优化 */
.phone-frame.night-mode .wechat-header {
    background: rgba(28, 28, 30, 0.95);
    border-color: rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .wechat-title {
    color: #ffffff;
}

.phone-frame.night-mode .chat-list {
    background: #0a0a0a;
}

.phone-frame.night-mode .chat-item {
    background: rgba(28, 28, 30, 0.8);
    border-color: rgba(255, 255, 255, 0.06);
}

.phone-frame.night-mode .chat-item:active {
    background: rgba(44, 44, 46, 0.9);
}

.phone-frame.night-mode .chat-avatar {
    border-color: rgba(255, 255, 255, 0.1);
}

.phone-frame.night-mode .chat-name {
    color: #e8e8e8;
}

.phone-frame.night-mode .chat-preview {
    color: #8e8e93;
}

.phone-frame.night-mode .chat-time {
    color: #636366;
}

/* 夜间模式 - AI聊天页面优化 */
.phone-frame.night-mode .ai-chat-header {
    background: rgba(28, 28, 30, 0.95);
    border-color: rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .ai-messages {
    background: #0a0a0a;
}

.phone-frame.night-mode .ai-message-content {
    background: rgba(44, 44, 46, 0.9);
    color: #e8e8e8;
    border-color: rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .ai-message.assistant .ai-message-content {
    background: rgba(58, 58, 60, 0.9);
}

.phone-frame.night-mode .ai-input-area {
    background: rgba(28, 28, 30, 0.95);
    border-color: rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .ai-input {
    background: rgba(44, 44, 46, 0.9);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.12);
}

.phone-frame.night-mode .ai-input::placeholder {
    color: #636366;
}

.phone-frame.night-mode .ai-send-btn {
    background: #0a84ff;
}

.phone-frame.night-mode .ai-send-btn:disabled {
    background: rgba(58, 58, 60, 0.7);
}

/* 夜间模式 - 世界书和其他页面 */
.phone-frame.night-mode .book-content,
.phone-frame.night-mode .meet-content {
    background: #0a0a0a;
    color: #d1d1d6;
}

.phone-frame.night-mode .content-text {
    color: #d1d1d6;
}

/* 夜间模式 - 文本选择高亮 */
.phone-frame.night-mode ::selection {
    background: rgba(10, 132, 255, 0.4);
    color: #ffffff;
}

/* 夜间模式的平滑过渡 */
.phone-frame,
.screen-content,
.status-bar,
.wallpaper,
.home-widget,
.note-widget,
.icon-box,
.home-bottom-nav,
.page,
.page-header,
.theme-section,
.settings-section,
.font-slot,
.app-card,
.wallpaper-card,
.css-scheme-card,
.settings-item,
.chat-item,
.ai-message-content,
input,
textarea,
button {
    /* 【切桌面/点app卡顿修复】原 transition: all 让浏览器每次样式重算都评估全部属性，是 trace
       实测 UpdateLayoutTree 30%、transitionend 192 次的推手。改为只过渡实际用到的具体属性
       （全部状态动画经核实仅 transform/background/box-shadow，外加常见 opacity/border-color/
       color/filter 兜底），降重算成本且不再对布局属性做过渡。 */
    transition-property: transform, opacity, background-color, box-shadow, border-color, color, filter;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.phone-frame.night-mode .theme-option {
    background: rgba(40, 40, 40, 0.9);
    border-color: rgba(80, 80, 80, 0.5);
}

.phone-frame.night-mode .toggle-switch input:checked + .toggle-slider {
    background: rgba(100, 100, 100, 0.9);
}

.phone-frame.night-mode .home-indicator {
    background: rgba(200, 200, 200, 0.5);
}

.page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(0.85);
    transform-origin: center center;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fafafa;
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
    display: flex;
    flex-direction: column;
    border-radius: 39px;
}

.page#home {
    padding: 0;
    background: transparent;
    transform: scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 0;
}

/* 当其他页面活跃时，隐藏 home 页面防止 backdrop-filter 叠加导致模糊 */
.page.active:not(#home) ~ #home,
.phone-screen:has(.page.active:not(#home)) #home:not(.active) {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.page:not(#home) {
    display: flex;
    flex-direction: column;
    padding-top: 0;
}

.page.active {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
    pointer-events: auto;
    z-index: 10;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 【发热优化】隐藏页面强制暂停 CSS 动画，避免后台 GPU 持续合成
   visibility:hidden 不会自动暂停 @keyframes 动画，需显式 paused
   收益：暴雨 150 雨滴 + 雾团 blur(20px)、漂流瓶 wave/雪花、朋友圈雪景等不可见时全部停帧
   触发：
     - .page 没有 .active 且不是 #home（即任何"备用"app 页面）
     - #home 内联 style 含 visibility: hidden（由 script.js:573 切到非 home 页时设置）
   不触发：
     - 当前激活页面 (.page.active)
     - 模态/弹窗（在 active 页面内或 body 直接子元素）
     - .slide-in / .slide-out / .closing 切页（用 transition 不是 animation）
     - lock-screen / status-bar / bgm-lyrics-overlay 等 .page 外的全局元素 */
.page:not(.active):not(#home),
.page:not(.active):not(#home) *,
.page:not(.active):not(#home) *::before,
.page:not(.active):not(#home) *::after,
#home[style*="visibility: hidden"],
#home[style*="visibility: hidden"] *,
#home[style*="visibility: hidden"] *::before,
#home[style*="visibility: hidden"] *::after {
    animation-play-state: paused !important;
}

/* App内页面滑动切换 */
.page.slide-out {
    transform: translateX(-100%);
    opacity: 1;
    visibility: visible;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.page.slide-in {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    z-index: 10;
}

.page.slide-from-right {
    transform: translateX(100%);
    opacity: 1;
    visibility: visible;
}

.page.closing {
    opacity: 0 !important;
    transform: scale(0.85) !important;
    z-index: 15 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1), opacity 0.2s cubic-bezier(0.4, 0, 1, 1);
    pointer-events: none !important;
}

.page-title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

/* 页面顶部导航栏 */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 45px 20px 12px;
    background: white;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.back-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    font-size: 28px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    padding: 0;
    line-height: 1;
}

.back-btn:hover {
    background: #f5f5f5;
}

.back-btn:active {
    transform: scale(0.92);
    background: #e8e8e8;
}

/* 天气页面头部操作区 */
.weather-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 天气刷新按钮 */
.weather-refresh-btn {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    border-radius: 50%;
    transition: all 0.3s ease;
    padding: 0;
}

.weather-refresh-btn:hover {
    background: #f5f5f5;
}

.weather-refresh-btn:active {
    transform: rotate(180deg);
    background: #e8e8e8;
}

/* 天气设置按钮 */
.weather-settings-btn {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 50%;
    transition: all 0.2s ease;
    padding: 0;
}

.weather-settings-btn .dot {
    width: 4px;
    height: 4px;
    background: #333;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.weather-settings-btn:hover {
    background: #f5f5f5;
}

.weather-settings-btn:active {
    transform: scale(0.92);
    background: #e8e8e8;
}

.header-title-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: 600;
    color: #262626;
    letter-spacing: 0.3px;
    margin: 0;
}

.header-spacer {
    width: 40px;
}

/* 详情页刷新按钮 */
.es-detail-refresh-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #667eea;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
}

.es-detail-refresh-btn:active {
    transform: scale(0.9);
}

.es-detail-refresh-btn .refresh-icon {
    display: inline-block;
}

/* 空白主屏 */
.home-screen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.wallpaper {
    width: 100%;
    height: 100%;
    background: #fafafa;
    position: relative;
    overflow: hidden;
}

/* 多页面容器 */
.home-pages-container {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
    position: relative;
}

.home-page {
    min-width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* 主屏App网格 */
.home-apps {
    padding: 50px 20px 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px 10px;
    width: 100%;
    margin-bottom: 100px;
}

/* 第二页独立6×4网格定义 */
.home-page:nth-child(2) .home-apps {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 13.5px 10px;
}

/* 4x2相册小部件包装器 */
.widget-wrapper {
    grid-column: 1 / 5; /* 占据4列 */
    grid-row: span 2; /* 占据2行 */
    position: relative;
    margin-bottom: 130px; /* 为姓名、ID、签名和定位留出空间 */
}

/* 2x2便签部件 */
.note-widget {
    grid-column: 1 / 3; /* 占据第1-2列 */
    grid-row: 3 / 5; /* 占据第3-4行 */
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 
                0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.note-widget:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.4);
}

.note-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
}

.note-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: visible;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    position: absolute;
    left: 0;
}

.note-avatar:hover {
    transform: scale(1.05);
}

.note-avatar.has-image .avatar-icon {
    display: none;
}

/* 小头像图标 (28px容器) */
.icon-avatar-small {
    width: 14px;
    height: 14px;
    position: relative;
    display: inline-block;
}

.icon-avatar-small::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border: 1.5px solid #999;
    border-radius: 50%;
}

.icon-avatar-small::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 11px;
    height: 5px;
    border: 1.5px solid #999;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    border-top: none;
}

.note-title {
    font-size: 14px;
    font-weight: 500;
    color: #666;
    font-style: italic;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 2px 8px;
    border-radius: 6px;
}

.note-title:hover {
    background: rgba(0, 0, 0, 0.05);
}

.note-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
}

.note-line {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 8px 4px;
    font-size: 11px;
    line-height: 1.5;
    color: #666;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.note-line:last-child {
    border-bottom: none;
}

.note-line:hover {
    background: rgba(0, 0, 0, 0.02);
}

.note-line p {
    margin: 0;
    color: #999;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* 4x2相册小部件 */
.home-widget {
    width: 100%;
    height: 100%;
    min-height: 140px;
    background: #f8f8f8;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    border: 1.5px dashed #d0d0d0;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.home-widget:active {
    transform: scale(0.98);
}

.widget-placeholder {
    font-size: 48px;
    opacity: 0.25;
    transition: opacity 0.2s ease;
}

.home-widget.has-image {
    border-style: solid;
    border-color: #e8e8e8;
}

.home-widget.has-image .widget-placeholder {
    display: none;
}

/* 头像框 */
.widget-avatar {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #f8f8f8;
    background-size: cover;
    background-position: center;
    border: 3px solid #fafafa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.widget-avatar:active {
    transform: translateX(-50%) scale(0.95);
}

.avatar-icon {
    opacity: 0.4;
}

.widget-avatar.has-image .avatar-icon {
    display: none;
}

/* 大头像图标 (54px容器) */
.icon-avatar-large {
    width: 26px;
    height: 26px;
    position: relative;
    display: inline-block;
}

.icon-avatar-large::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border: 2px solid #999;
    border-radius: 50%;
}

.icon-avatar-large::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 10px;
    border: 2px solid #999;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    border-top: none;
}

/* 姓名和ID信息 */
.widget-info {
    position: absolute;
    bottom: -125px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
}

.widget-datetime {
    position: absolute;
    left: 20px;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}

.widget-time {
    font-size: 22px;
    font-weight: 600;
    color: #666;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.5px;
}

.widget-date {
    font-size: 11px;
    color: #999;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    width: 100%;
}

.widget-weather-box {
    position: absolute;
    right: 20px;
    top: 0;
    pointer-events: none;
}

#widget-weather {
    font-size: 16px;
    font-weight: 500;
    color: #666;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.5px;
    word-spacing: 4px;
}

.widget-name {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 2px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.widget-name:hover {
    color: #666;
}

.widget-id {
    font-size: 12px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s ease;
}

.widget-id:hover {
    color: #666;
}

.widget-signature {
    font-size: 13px;
    color: #888;
    margin-top: 8px;
    padding: 0 30px;
    line-height: 1.4;
    cursor: pointer;
    transition: color 0.2s ease;
}

.widget-signature:hover {
    color: #666;
}

.widget-location {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 12px;
    color: #999;
    cursor: pointer;
    transition: color 0.2s ease;
}

.widget-location:hover {
    color: #666;
}

.location-icon {
    width: 14px;
    height: 14px;
    position: relative;
    display: inline-block;
}

.location-icon::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: #999;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    top: 0;
    left: 1px;
}

.location-icon::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 5.5px;
}

.widget-location:hover .location-icon::before {
    background: #666;
}

.location-text {
    font-size: 12px;
}

.app-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.app-icon:active {
    transform: scale(0.8);
}

.app-icon.launching {
    animation: appLaunch 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    z-index: 1000;
}

/* App图标位置控制 */
.app-weather {
    grid-column: 3;
    grid-row: 3;
}

.app-calendar {
    grid-column: 4;
    grid-row: 3;
}

.app-wechat {
    grid-column: 3;
    grid-row: 4;
}

.app-meet {
    grid-column: 4;
    grid-row: 4;
}

.app-worldbook {
    grid-column: 1;
    grid-row: 5;
}

.app-findphone {
    grid-column: 2;
    grid-row: 5;
}

.app-memory {
    grid-column: 1;
    grid-row: 3;
}

.app-monitor {
    grid-column: 4;
    grid-row: 4;
}

.app-work {
    grid-column: 4;
    grid-row: 5;
}

.app-endlesssummer {
    grid-column: 2;
    grid-row: 6;
}

.app-qingshi {
    grid-column: 1;
    grid-row: 6;
}

.app-trace {
    grid-column: 2;
    grid-row: 3;
}

.app-dreamland {
    grid-column: 1;
    grid-row: 4;
}

.app-homegarden {
    grid-column: 2;
    grid-row: 4;
}

/* 第二页顶部 照片墙 widget（占 row 1-2 全宽，内含 3 张等宽照片） */
.p2-photo-widget {
    grid-column: 1 / 5;
    grid-row: 1 / 3;
    display: flex;
    gap: 2px;
    background: transparent;
    overflow: hidden;
}

.p2-photo-slot {
    flex: 1 1 0;
    min-width: 0;
    background-color: #f0f0f0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: opacity 0.15s ease;
    position: relative;
    overflow: hidden;
}

.p2-photo-slot:active {
    opacity: 0.7;
}

/* 第二页第 4 个独立大 slot（占 row 5 col 1-2），方角，与顶部 3 个 slot 共享所有行为 */
.p2-photo-slot-large {
    grid-column: 1 / 3;
    grid-row: 5;
    margin: 0 9px 9px 0;
    box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.13);
    overflow: visible;
}

/* 第二页 行6 列3-4 帖子 widget（昵称 + 时间 + 头像 + 正文） */
.post-widget {
    grid-column: 3 / 5;
    grid-row: 6;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 6px;
    overflow: hidden;
}

.post-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.post-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.post-name {
    color: #333;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.2;
}

.post-time {
    color: #999;
    font-size: 9px;
    cursor: pointer;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f0f0f0;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.post-text {
    color: #333;
    font-size: 11px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.post-ecg-line {
    width: 100%;
    height: 8px;
    display: block;
    color: #aaa;
    margin-top: -3px;
}

/* 帖子右下角圆角气泡：外灰圈 + 白圈 + 灰底 + 加深灰文字（极紧凑，宽度自适应） */
.post-bubble {
    align-self: flex-end;
    background: #d9d9d9;
    color: #4a4a4a;
    padding: 0 8px;
    border-radius: 9px;
    border: 1px solid #fff;
    box-shadow: 0 0 0 1px #bcbcbc;
    font-size: 10px;
    line-height: 1.2;
    margin-top: 0;
    margin-right: 2px;
    /* 跟随文字自动变长，但最长不超 post-widget 左边缘 */
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
}

.post-bubble-inner {
    display: inline-block;
    white-space: nowrap;
    position: relative;
    left: 0;
}

/* 文字超出宽度时启用滚动：原始位置静止 → 滚到完全消失左边 → 立即跳回原始位置重来 */
/* 用 left 而非 transform，避免 GPU 光栅化导致字体子像素抗锯齿丢失（文字发模糊） */
.post-bubble.scrolling .post-bubble-inner {
    animation: post-bubble-scroll var(--bubble-scroll-dur, 15s) linear infinite;
}

@keyframes post-bubble-scroll {
    0%, 8%    { left: 0; }
    92%, 100% { left: var(--bubble-end, -100%); }
}

/* slot 左下可编辑文字（压在图片底边 + 右下阴影范围） */
.slot-caption {
    position: absolute;
    left: 17px;
    bottom: -9px;
    z-index: 5;
    color: #555;
    font-size: 11px;
    font-weight: 200;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

.drift-bottle-widget {
    grid-column: 3 / 5;
    grid-row: 5;
}

@keyframes appLaunch {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.15);
        opacity: 0;
    }
}

.icon-box {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1.5px solid #e0e0e0;
    transition: all 0.3s ease;
}

.icon-emoji {
    font-size: 32px;
}

/* 线条图标基础样式 */
.icon-line {
    display: block;
    width: 32px;
    height: 32px;
    position: relative;
}

/* 天气图标 - 太阳 */
.icon-weather::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #666;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-weather::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: 
        linear-gradient(#666 0 0) 50% 0/2px 4px,
        linear-gradient(#666 0 0) 50% 100%/2px 4px,
        linear-gradient(#666 0 0) 0 50%/4px 2px,
        linear-gradient(#666 0 0) 100% 50%/4px 2px;
    background-repeat: no-repeat;
}

/* 日历图标 */
.icon-calendar::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 18px;
    border: 2px solid #666;
    border-radius: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
}

.icon-calendar::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background: #666;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
}

/* 微信图标 - 简约对话气泡 */
.icon-wechat::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #666;
    border-radius: 50%;
    top: 28%;
    left: 22%;
}

.icon-wechat::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid #666;
    border-radius: 50%;
    bottom: 28%;
    right: 22%;
}

/* 世界书图标 - 书本 */
.icon-worldbook::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 22px;
    border: 2px solid #666;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-worldbook::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 22px;
    background: #666;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 查手机图标 - 手机+定位 */
.icon-findphone::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 20px;
    border: 2px solid #666;
    border-radius: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-findphone::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    border: 2px solid #666;
    border-radius: 50%;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 遇见图标 - 心形 */
.icon-meet::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid #666;
    border-radius: 50%;
    top: 30%;
    left: 28%;
}

.icon-meet::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid #666;
    border-radius: 50%;
    top: 30%;
    right: 28%;
}

/* 记忆图标 - 波浪云朵+星星 */
.icon-memory::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 13px;
    border: 2px solid #666;
    /* 波浪云朵效果 */
    border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-memory::after {
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 三颗星星用交叉线条绘制，分布在云朵周围 */
    background:
        /* 右上大星星 */
        linear-gradient(#666 0 0) 80% 15%/2px 8px,
        linear-gradient(#666 0 0) 80% 15%/8px 2px,
        /* 左侧中星星 */
        linear-gradient(#666 0 0) 18% 38%/1.5px 6px,
        linear-gradient(#666 0 0) 18% 38%/6px 1.5px,
        /* 右下小星星 */
        linear-gradient(#666 0 0) 76% 72%/1.5px 4px,
        linear-gradient(#666 0 0) 76% 72%/4px 1.5px;
    background-repeat: no-repeat;
}

/* 监控图标 - 监控摄像头 */
.icon-monitor::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid #666;
    border-radius: 50%;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
}

.icon-monitor::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 10px;
    background: #666;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
}

/* 打工图标 - 扳手 */
.icon-work::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 3px;
    background: #666;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.icon-work::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 10px;
    border: 2px solid #666;
    border-radius: 3px 3px 0 0;
    border-bottom: none;
    top: 40%;
    right: 30%;
    transform: rotate(45deg);
}

/* 无尽夏图标 */
.icon-endlesssummer::before {
    content: '❀';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 23px;
    color: #666;
    line-height: 1;
}

.icon-endlesssummer::after {
    content: none;
}

/* 情事了了图标 - 羽毛笔 SVG 勾勒 */
.icon-qingshi {
    color: #666;
}

.icon-qingshi svg {
    position: absolute;
    width: 26px;
    height: 26px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
}

/* 宴卡图标 - 卡带 SVG 勾勒 */
.icon-cartridge {
    color: #666;
}

.icon-cartridge svg {
    position: absolute;
    width: 26px;
    height: 26px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
}

/* 宴卡 grid 定位 - 第二页底行 col 3（work/endlesssummer/qingshi 之间空位） */
.app-cartridge {
    grid-column: 3;
    grid-row: 4;
}

/* ===== 景匣 jingxia ===== */
.app-jingxia {
    grid-column: 1;
    grid-row: 1;
}

.icon-jingxia {
    color: #666;
}

.icon-jingxia svg {
    position: absolute;
    width: 26px;
    height: 26px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
}

.jingxia-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.jingxia-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.jingxia-card {
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    background: #f3f1ec;
    border: 1px solid #e3ded3;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;
}

.jingxia-card-cover {
    flex: 1;
    background-color: #e8e4da;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #b8b0a0;
}

.jingxia-card-name {
    padding: 8px 10px;
    font-size: 13px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jingxia-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #9a9486;
    text-align: center;
}

.jingxia-empty-sub {
    font-size: 12px;
    color: #b3ab9c;
}

.jingxia-add-btn {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #666;
    cursor: pointer;
    padding: 0 4px;
}

/* ===== 景匣编辑器 jingxia-editor (1a) ===== */
#jingxia-editor {
    background: #f7f5f0;
}

.jx-editor-spacer {
    width: 40px;
    flex: 0 0 auto;
}

.jx-stage {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #e9e5dc;
    touch-action: none; /* 编辑面禁用原生滚动/缩放，手势完全由 JS 接管 */
}

.jx-canvas {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: top left;
    background: #cfe3d6;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.jx-piece {
    position: absolute;
    left: 0;
    top: 0;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.jx-piece.selected .jx-piece-inner {
    outline: 2px dashed #6b8f71;
    outline-offset: 3px;
}

.jx-piece-inner {
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jx-piece-inner img {
    display: block;
    width: 100%;
    height: 100%;
}

.jx-placeholder {
    font-size: 90px;
    line-height: 1;
}

.jx-palette {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    padding: 12px;
    overflow-x: auto;
    background: #fff;
    border-top: 1px solid #e3ded3;
}

.jx-palette-item {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: #f3f1ec;
    border: 1px solid #e3ded3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    cursor: pointer;
}

/* 选中部件操作栏（舞台内绝对定位浮层，显隐不触发画布重算） */
.jx-actionbar {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    padding: 6px 8px;
    max-width: calc(100% - 24px);
    overflow-x: auto;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e3ded3;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s;
}

.jx-actionbar.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.jx-actionbar button {
    flex: 0 0 auto;
    min-width: 38px;
    height: 38px;
    border: none;
    border-radius: 10px;
    background: #f3f1ec;
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jx-actionbar button:active {
    background: #e3ded3;
}

/* 编辑器顶栏控件（网格开关 / 复位视图） */
.jx-editor-tools {
    display: flex;
    gap: 6px;
}

.jx-editor-tools button {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 9px;
    background: #f3f1ec;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jx-editor-tools button.active {
    background: #cfe3d6;
    color: #2f4f3a;
}

.jx-editor-tools button:disabled {
    opacity: 0.35;
    cursor: default;
}

/* 编辑器标题（景匣名可能很长）—— 仅作用于此 id，不碰共用的 .header-title */
#jx-editor-title {
    max-width: 52%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== 宴卡主页样式（复古黑白灰方角） ===== */

/* page:not(#home) 已是 flex column；cartridge-content 撑满剩余 */
.cartridge-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: #fafafa;
}

/* 宴卡暂未完成：页面内容先隐藏成空白（保留标题栏的返回 + 标题），将来恢复删除此块即可 */
#cartridge .cartridge-content,
#cartridge .cart-upload-btn {
    display: none !important;
}

/* 右上上传按钮 */
.cart-upload-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #999;
    background: #fff;
    color: #333;
    font-size: 18px;
    cursor: pointer;
    border-radius: 0;
    line-height: 1;
    padding: 0;
}
.cart-upload-btn:active {
    background: #333;
    color: #fff;
}

/* 空状态 - 在 cartridge-content 内 flex 1 撑满后居中 */
.cart-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.cart-empty-icon {
    width: 80px;
    height: 80px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: #999;
    background: #fff;
}
.cart-empty-icon svg {
    width: 48px;
    height: 48px;
}
.cart-empty-text {
    color: #999;
    font-size: 13px;
    margin-bottom: 24px;
    letter-spacing: 0.5px;
}
.cart-add-btn {
    background: #fff;
    border: 1px solid #333;
    color: #333;
    padding: 10px 24px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 0;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}
.cart-add-btn:active {
    background: #333;
    color: #fff;
}

/* 卡片网格（1.c 起填充） */
.cart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}
.cart-card {
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    border-radius: 0;
}
.cart-card:active {
    background: #f0f0f0;
}
.cart-cover {
    aspect-ratio: 1;
    background: #f5f5f5;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
}
.cart-cover svg {
    width: 40%;
    height: 40%;
}
.cart-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cart-name {
    padding: 8px 10px 2px;
    font-size: 13px;
    color: #333;
    font-family: 'Courier New', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.5px;
}
.cart-sub {
    padding: 0 10px 8px;
    font-size: 11px;
    color: #999;
}

/* ===== 宴卡上传 Modal（复古方角，必须 absolute 不能 fixed） ===== */
.cart-upload-modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.cart-modal-dialog {
    width: 85%;
    max-width: 320px;
    background: #fff;
    border: 1px solid #333;
    border-radius: 0;
    font-family: 'Courier New', monospace;
}
.cart-modal-header {
    padding: 12px 16px;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    color: #333;
    letter-spacing: 1px;
}
.cart-modal-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cart-form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cart-form-label {
    font-size: 12px;
    color: #666;
    letter-spacing: 0.5px;
}
.cart-form-value {
    font-size: 12px;
    color: #333;
    word-break: break-all;
    line-height: 1.4;
}
.cart-form-sub {
    font-size: 11px;
    color: #999;
}
.cart-form-input {
    padding: 8px 10px;
    border: 1px solid #ccc;
    background: #fafafa;
    font-size: 13px;
    color: #333;
    border-radius: 0;
    outline: none;
    font-family: 'Courier New', monospace;
    width: 100%;
    box-sizing: border-box;
}
.cart-form-input:focus {
    border-color: #333;
    background: #fff;
}
.cart-cover-picker {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cart-cover-preview {
    width: 60px;
    height: 60px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.cart-cover-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cart-cover-placeholder {
    font-size: 11px;
    color: #999;
}
.cart-cover-btn {
    padding: 6px 12px;
    border: 1px solid #999;
    background: #fff;
    color: #333;
    font-size: 12px;
    cursor: pointer;
    border-radius: 0;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}
.cart-cover-btn:active {
    background: #333;
    color: #fff;
}
.cart-modal-footer {
    display: flex;
    border-top: 1px solid #ccc;
}
.cart-modal-btn {
    flex: 1;
    padding: 12px;
    border: none;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
    border-radius: 0;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}
.cart-modal-cancel {
    color: #666;
    border-right: 1px solid #ccc;
}
.cart-modal-confirm {
    color: #333;
    font-weight: 600;
}
.cart-modal-btn:active {
    background: #f0f0f0;
}
/* 单按钮 footer 时移除尾随的 border-right */
.cart-modal-footer > .cart-modal-cancel:only-child {
    border-right: none;
}

/* ===== 选 char 列表 ===== */
.cart-char-list {
    max-height: 360px;
    overflow-y: auto;
}
.cart-char-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}
.cart-char-item:last-child {
    border-bottom: none;
}
.cart-char-item:active {
    background: #f0f0f0;
}
.cart-char-avatar {
    width: 36px;
    height: 36px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    flex-shrink: 0;
    overflow: hidden;
}
.cart-char-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cart-char-name {
    flex: 1;
    font-size: 13px;
    color: #333;
    font-family: 'Courier New', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cart-char-tag {
    font-size: 10px;
    color: #999;
    border: 1px solid #ccc;
    padding: 1px 6px;
    letter-spacing: 0.5px;
    font-family: 'Courier New', monospace;
}
.cart-char-empty {
    padding: 40px 20px;
    text-align: center;
    color: #999;
    font-size: 13px;
    font-family: 'Courier New', monospace;
}

/* ===== 游戏全屏 layer（盖一切） ===== */
.cart-game-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 99998;
}
.cart-game-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
    display: block;
    z-index: 1;
}
.cart-game-close {
    position: absolute;
    top: max(48px, env(safe-area-inset-top, 0px));
    right: 8px;
    width: 32px;
    height: 32px;
    border: 1px solid #999;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    font-size: 20px;
    line-height: 1;
    cursor: move;
    border-radius: 0;
    padding: 0;
    z-index: 99999;
    font-family: 'Courier New', monospace;
    touch-action: none;
    user-select: none;
}
.cart-game-close:active {
    background: #333;
    color: #fff;
}

/* ===== 占位悬浮聊天气泡（1.d 占位，1.e 才响应展开） ===== */
.cart-floating-chat {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 60px;
    background: #fff;
    border: 1px solid #333;
    border-radius: 0;
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    z-index: 99999;
    font-family: 'Courier New', monospace;
    cursor: move;
    user-select: none;
    touch-action: none;
    transition: opacity 0.3s ease;
}
.cart-floating-chat.faded {
    opacity: 0.4;
}
.cart-floating-chat:active {
    background: #f5f5f5;
}
.cart-floating-chat-avatar {
    width: 36px;
    height: 36px;
    border: 1px solid #999;
    background: #f5f5f5;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart-floating-chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cart-floating-chat-name {
    font-size: 9px;
    color: #333;
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

/* 2.c.0: 浮窗操作面板（浮窗点击弹出） */
.cart-fab-panel {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #333;
    border-radius: 0;
    z-index: 100000;
    font-family: 'Courier New', monospace;
    white-space: nowrap;
}
.cart-fab-btn {
    display: block;
    width: 100%;
    padding: 8px 18px;
    border: none;
    background: #fff;
    color: #333;
    font-size: 13px;
    cursor: pointer;
    border-radius: 0;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
    border-bottom: 1px solid #ccc;
    white-space: nowrap;
}
.cart-fab-btn:last-child {
    border-bottom: none;
}
.cart-fab-btn:active {
    background: #333;
    color: #fff;
}

/* 2.c.1 浮窗错误红点（LLM 失败时显示） */
.cart-fab-error-dot {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 12px;
    height: 12px;
    background: #c33;
    border: 1px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    z-index: 2;
}
.cart-floating-chat.has-error .cart-fab-error-dot {
    display: block;
}

/* 商城图标 - 购物袋 SVG 勾勒 */
.icon-shop {
    color: #666;
}

.icon-shop svg {
    position: absolute;
    width: 26px;
    height: 26px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
}

/* 商城 grid 定位 - 第二页 col 3 row 4（踪迹下方） */
.app-shop {
    grid-column: 3;
    grid-row: 5;
}

/* 第二页 搜索记录小组件（占 row 3 col 3-4） */
.search-widget {
    grid-column: 3 / 5;
    grid-row: 3;
    background: transparent;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    overflow: hidden;
}

.search-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #8a8a8a;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1px;
    padding-bottom: 5px;
    border-bottom: 2px solid #d8d8d8;
}

.search-widget-title,
.search-widget-clear {
    cursor: pointer;
    padding: 1px 2px;
}

.search-widget-item {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #222;
    font-size: 11px;
    font-weight: 500;
}

/* 第一条搜索：加深 + 加粗，icon 跟随文字色 */
.search-widget-item:first-of-type {
    color: #111;
    font-weight: 600;
}

/* 第二条搜索：整体浅一档，icon 同色，整体水平镜像翻转 */
.search-widget-item:last-of-type {
    color: #666;
    transform: scaleX(-1);
}

.search-widget-icon {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

.search-widget-item-text {
    flex: 1;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.search-widget-item-x {
    width: 13px;
    height: 13px;
    color: #b0b0b0;
    flex-shrink: 0;
}

/* 云栖图标 - 云朵上的兔子 */
.icon-homegarden::before {
    content: '';
    position: absolute;
    /* 云朵主体 */
    width: 18px;
    height: 9px;
    background: #666;
    border-radius: 9px;
    bottom: 32%;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 
        -6px -3px 0 -1px #666,
        6px -2px 0 -2px #666,
        0px -6px 0 -2px #666;
}

.icon-homegarden::after {
    content: '';
    position: absolute;
    /* 兔子轮廓 - 简约兔头 */
    width: 10px;
    height: 10px;
    border: 2px solid #666;
    border-radius: 50%;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    background: 
        /* 左耳 */
        linear-gradient(#666 0 0) -4px -8px/2px 6px,
        /* 右耳 */
        linear-gradient(#666 0 0) 8px -8px/2px 6px;
    background-repeat: no-repeat;
}

/* 眠梦图标 - 月牙+星星 */
.icon-dreamland::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid #666;
    border-radius: 50%;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    /* 用阴影遮挡形成月牙 */
    box-shadow: 5px -3px 0 -1px #666 inset;
    background: transparent;
}

.icon-dreamland::after {
    content: '✦';
    position: absolute;
    font-size: 9px;
    color: #666;
    top: 28%;
    right: 26%;
    line-height: 1;
}

/* 设置图标 - 齿轮 */
.icon-settings::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #666;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-settings::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: 
        linear-gradient(#666 0 0) 50% 0/2px 5px,
        linear-gradient(#666 0 0) 50% 100%/2px 5px,
        linear-gradient(#666 0 0) 0 50%/5px 2px,
        linear-gradient(#666 0 0) 100% 50%/5px 2px;
    background-repeat: no-repeat;
}

/* 字体图标 - A字 */
.icon-font::before {
    content: 'A';
    position: absolute;
    font-size: 24px;
    font-weight: 600;
    color: #666;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
}

/* 主题图标 - 调色板 */
.icon-theme::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid #666;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-theme::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: #666;
    border-radius: 50%;
    top: 35%;
    left: 40%;
}

/* 设置页面图标 */
/* 手机图标 */
.icon-phone::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 16px;
    border: 2px solid #666;
    border-radius: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-phone::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 2px;
    background: #666;
    border-radius: 1px;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
}

/* 铃铛图标 */
.icon-bell::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 12px;
    border: 2px solid #666;
    border-radius: 50% 50% 0 0;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-bell::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 2px;
    background: #666;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
}

/* 声音图标 */
.icon-sound::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 10px;
    border: 2px solid #666;
    border-right: none;
    border-radius: 4px 0 0 4px;
    top: 50%;
    left: 35%;
    transform: translateY(-50%);
}

.icon-sound::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-top: 2px solid #666;
    border-right: 2px solid #666;
    border-radius: 0 50% 0 0;
    top: 50%;
    right: 30%;
    transform: translateY(-50%) rotate(45deg);
}

/* 显示图标 */
.icon-display::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 12px;
    border: 2px solid #666;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-display::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 2px;
    background: #666;
    border-radius: 1px;
    top: 45%;
    left: 50%;
    transform: translateX(-50%);
}

/* 墙纸图标 */
.icon-wallpaper::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 14px;
    border: 2px solid #666;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-wallpaper::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    border: 2px solid #666;
    border-radius: 50%;
    top: 25%;
    right: 25%;
}

/* 锁图标 */
.icon-lock::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 8px;
    border: 2px solid #666;
    border-radius: 2px;
    bottom: 30%;
    left: 50%;
    transform: translateX(-50%);
}

.icon-lock::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 8px;
    border: 2px solid #666;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
}

/* 电池图标 */
.icon-battery::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 8px;
    border: 2px solid #666;
    border-radius: 1px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-battery::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 4px;
    background: #666;
    border-radius: 0 1px 1px 0;
    top: 50%;
    right: 28%;
    transform: translateY(-50%);
}

/* 存储图标 */
.icon-storage::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 12px;
    border: 2px solid #666;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-storage::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 2px;
    background: #666;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 天气页面图标 */
/* 大太阳图标 */
.icon-sun-large {
    width: 60px;
    height: 60px;
}

.icon-sun-large::before {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border: 3px solid #666;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-sun-large::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: 
        linear-gradient(#666 0 0) 50% 0/3px 10px,
        linear-gradient(#666 0 0) 50% 100%/3px 10px,
        linear-gradient(#666 0 0) 0 50%/10px 3px,
        linear-gradient(#666 0 0) 100% 50%/10px 3px,
        linear-gradient(45deg, #666 0 0) 15% 15%/3px 10px,
        linear-gradient(-45deg, #666 0 0) 85% 15%/3px 10px,
        linear-gradient(45deg, #666 0 0) 85% 85%/3px 10px,
        linear-gradient(-45deg, #666 0 0) 15% 85%/3px 10px;
    background-repeat: no-repeat;
}

/* 小太阳图标 */
.icon-sun-small {
    width: 24px;
    height: 24px;
}

.icon-sun-small::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid #666;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-sun-small::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: 
        linear-gradient(#666 0 0) 50% 0/2px 4px,
        linear-gradient(#666 0 0) 50% 100%/2px 4px,
        linear-gradient(#666 0 0) 0 50%/4px 2px,
        linear-gradient(#666 0 0) 100% 50%/4px 2px;
    background-repeat: no-repeat;
}

/* 水滴图标 */
.icon-droplet::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 16px;
    border: 2px solid #666;
    border-radius: 50% 50% 50% 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* 风图标 */
.icon-wind::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 2px;
    background: #666;
    border-radius: 1px;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
}

.icon-wind::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 2px;
    background: #666;
    border-radius: 1px;
    top: 65%;
    left: 50%;
    transform: translateX(-50%);
}

/* 温度计图标 */
.icon-thermometer::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 14px;
    border: 2px solid #666;
    border-radius: 4px 4px 50% 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-thermometer::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: #666;
    border-radius: 50%;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
}

/* 眼睛图标 */
.icon-eye::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 10px;
    border: 2px solid #666;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-eye::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: #666;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 多云图标 */
.icon-cloudy::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 8px;
    border: 2px solid #666;
    border-radius: 50% 50% 0 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-cloudy::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 6px;
    border: 2px solid #666;
    border-radius: 50% 50% 0 0;
    top: 55%;
    left: 35%;
    transform: translateY(-50%);
}

/* 雨天图标 */
.icon-rainy::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 8px;
    border: 2px solid #666;
    border-radius: 50% 50% 0 0;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
}

.icon-rainy::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    background: 
        linear-gradient(#666 0 0) 30% 50%/2px 6px,
        linear-gradient(#666 0 0) 70% 50%/2px 6px;
    background-repeat: no-repeat;
}

/* 小定位图标 */
.icon-location-small {
    width: 12px;
    height: 12px;
    display: inline-block;
    vertical-align: middle;
}

.icon-location-small::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 10px;
    border: 2px solid #666;
    border-radius: 50% 50% 50% 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.icon-location-small::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    background: #666;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 微信页面图标 */
/* 用户图标 */
.icon-user {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #f0f0f0;
}

.icon-user::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #666;
    border-radius: 50%;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
}

.icon-user::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 12px;
    border: 2px solid #666;
    border-radius: 50% 50% 0 0;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
}

/* 群组图标 */
.icon-group {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #f0f0f0;
}

.icon-group::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid #666;
    border-radius: 50%;
    top: 25%;
    left: 35%;
}

.icon-group::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid #666;
    border-radius: 50%;
    top: 25%;
    right: 35%;
}

/* 遇见页面图标 */
/* 大用户图标 */
/* 世界书页面图标 */
/* 书籍封面图标 */
.icon-book-cover {
    width: 100%;
    height: 160px;
    border-radius: 8px;
    position: relative;
}

.icon-book-cover::before {
    content: '';
    position: absolute;
    width: 60%;
    height: 70%;
    border: 3px solid rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-book-cover::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 70%;
    background: rgba(255, 255, 255, 0.6);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-label {
    font-size: 11px;
    color: #333;
    text-align: center;
    font-weight: 500;
    margin-top: 2px;
}

/* 主屏底部导航栏 */
.home-bottom-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: transparent;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 20px;
}

.home-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 8px 20px;
    transition: all 0.3s ease;
    border-radius: 12px;
}

.home-nav-item:active {
    transform: scale(0.92);
    background: rgba(0, 0, 0, 0.05);
}

.home-nav-item .nav-icon {
    font-size: 26px;
    color: #333;
    transition: transform 0.3s ease;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 12px;
    border: 1.5px solid #e0e0e0;
}

.home-nav-item:hover .nav-icon {
    transform: scale(1.1);
}

.home-nav-item span {
    font-size: 12px;
    color: #333;
    font-weight: 500;
}

/* 页面指示器 */
.page-indicators {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.indicator.active {
    background: rgba(0, 0, 0, 0.6);
    width: 20px;
    border-radius: 3px;
}

/* 设置页 */
#settings .settings-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    padding-bottom: 40px;
    background: #fafafa;
}

.settings-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.settings-section .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.settings-section .setting-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.settings-section .setting-item:last-child {
    margin-bottom: 0;
}

/* 连接成功提示 */
.connection-success-tip {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #065f46;
    animation: slideDown 0.3s ease;
}

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

.connection-success-tip svg {
    flex-shrink: 0;
}

.setting-label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.setting-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
}

.setting-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.setting-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    transition: all 0.2s;
}

.setting-textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.setting-hint {
    font-size: 12px;
    color: #999;
    line-height: 1.5;
    margin-top: 6px;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.setting-slider {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: #e0e0e0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.setting-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    transition: all 0.2s;
}

.setting-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.setting-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.slider-value {
    min-width: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #667eea;
}

.save-settings-btn {
    flex: 1;
    padding: 12px;
    background: #f5f5f5;
    color: #333;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.save-settings-btn:hover {
    background: #e8e8e8;
    transform: translateY(-1px);
}

.save-settings-btn:active {
    background: #d8d8d8;
    transform: translateY(0);
}

.test-connection-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: white;
    color: #667eea;
    border: 1px solid #667eea;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.test-connection-btn:hover {
    background: #f0f4ff;
}

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

.test-connection-btn.loading {
    pointer-events: none;
    opacity: 0.6;
}

.test-connection-btn.success {
    background: #10b981;
    color: white;
    border-color: #10b981;
}

.test-connection-btn.error {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
}

.button-group {
    display: flex;
    gap: 12px;
    width: 100%;
}

.backup-buttons {
    display: flex;
    gap: 12px;
}

.backup-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: white;
    color: #667eea;
    border: 1px solid #667eea;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

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

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

.backup-btn.danger {
    color: #e74c3c;
    border-color: #e74c3c;
    width: 100%;
}

.backup-btn.danger:hover {
    background: #e74c3c;
    color: white;
}

.backup-btn svg {
    flex-shrink: 0;
}

/* ===== API报错记录样式 ===== */
.api-error-section .section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.api-error-section .section-title-row .section-title {
    margin: 0;
    padding: 0;
    border: none;
}

.clear-logs-btn {
    padding: 4px 12px;
    font-size: 12px;
    color: #999;
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.clear-logs-btn:hover {
    color: #e74c3c;
    border-color: #e74c3c;
}

.api-error-logs-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.api-error-empty-tip {
    text-align: center;
    padding: 20px;
    color: #10b981;
    font-size: 14px;
}

.api-error-log-item {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 12px;
    font-size: 13px;
}

.api-error-log-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.api-error-log-icon {
    font-size: 14px;
}

.api-error-log-time {
    color: #666;
    font-size: 12px;
}

.api-error-log-source {
    background: #fee2e2;
    color: #b91c1c;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
}

.api-error-log-content {
    margin-bottom: 10px;
}

.api-error-log-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.api-error-log-status .status-code {
    background: #dc2626;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.api-error-log-status .error-type {
    color: #b91c1c;
    font-weight: 600;
}

.api-error-log-message {
    color: #7f1d1d;
    word-break: break-all;
    line-height: 1.4;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.api-error-log-model {
    color: #888;
    font-size: 11px;
    margin-top: 4px;
}

.api-error-log-suggestion {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 10px;
    background: #ecfdf5;
    border-radius: 8px;
    border: 1px solid #a7f3d0;
}

.api-error-log-suggestion .suggestion-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.api-error-log-suggestion .suggestion-text {
    color: #065f46;
    line-height: 1.4;
}

.view-all-logs-btn {
    width: 100%;
    padding: 10px;
    background: #f3f4f6;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    color: #6b7280;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.view-all-logs-btn:hover {
    background: #e5e7eb;
    color: #374151;
}

/* API报错记录弹窗 */
.api-error-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
    box-sizing: border-box;
}

.api-error-modal-content {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    max-height: 80dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.api-error-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}

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

.api-error-modal-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    color: #666;
    cursor: pointer;
}

.api-error-modal-close:hover {
    background: #e5e7eb;
}

.api-error-modal-body {
    padding: 16px 20px;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-height: 0;
    max-height: calc(80vh - 70px);
    max-height: calc(80dvh - 70px);
}

/* 夜间模式适配 */
.phone-frame.night-mode .api-error-log-item {
    background: #2d1f1f;
    border-color: #5c3030;
}

.phone-frame.night-mode .api-error-log-time,
.phone-frame.night-mode .api-error-log-model {
    color: #999;
}

.phone-frame.night-mode .api-error-log-source {
    background: #5c3030;
    color: #fca5a5;
}

.phone-frame.night-mode .api-error-log-status .error-type {
    color: #fca5a5;
}

.phone-frame.night-mode .api-error-log-message {
    color: #fca5a5;
}

.phone-frame.night-mode .api-error-log-suggestion {
    background: #1a2e1f;
    border-color: #2d5a3d;
}

.phone-frame.night-mode .api-error-log-suggestion .suggestion-text {
    color: #6ee7b7;
}

.phone-frame.night-mode .api-error-empty-tip {
    color: #6ee7b7;
}

.phone-frame.night-mode .view-all-logs-btn {
    background: #2d2d2d;
    border-color: #444;
    color: #aaa;
}

.phone-frame.night-mode .clear-logs-btn {
    color: #888;
    border-color: #555;
}

/* ===== API预设选择器样式 ===== */
.api-preset-selector {
    background: #f8f8f8;
    padding: 14px !important;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
    margin-bottom: 16px;
}

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

.preset-header .setting-label {
    margin: 0;
    font-weight: 600;
    color: #333;
}

.preset-action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: none;
    background: #667eea;
    color: white;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.preset-action-btn:hover {
    background: #5a6fd6;
    transform: translateY(-1px);
}

.preset-action-btn:active {
    transform: translateY(0);
}

.preset-select-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}

.preset-select-wrapper select {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    cursor: pointer;
}

.preset-select-wrapper select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.preset-manage-btn {
    padding: 10px 14px;
    border: 1px solid #e0e0e0;
    background: white;
    color: #666;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.preset-manage-btn:hover {
    background: #667eea;
    border-color: #667eea;
    color: white;
}

/* ===== API预设管理弹窗样式 ===== */
.preset-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.preset-modal {
    width: 90%;
    max-width: 360px;
    max-height: 80vh;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    animation: slideUp 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

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

.preset-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}

.preset-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

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

.preset-modal-close:hover {
    background: #ddd;
    color: #333;
}

.preset-modal-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}

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

.preset-item {
    display: flex;
    align-items: center;
    padding: 14px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    transition: all 0.2s;
}

.preset-item:hover {
    background: #f0f0f0;
    border-color: #ddd;
}

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

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

.preset-item-detail {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preset-item-actions {
    display: flex;
    gap: 6px;
    margin-left: 10px;
}

.preset-item-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.preset-edit-btn {
    background: #e8e8e8;
    color: #666;
}

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

.preset-delete-btn {
    background: #fee2e2;
    color: #dc2626;
}

.preset-delete-btn:hover {
    background: #dc2626;
    color: white;
}

.preset-empty {
    text-align: center;
    padding: 30px 20px;
    color: #888;
}

.preset-empty p {
    margin: 0 0 8px 0;
}

.preset-empty-hint {
    font-size: 12px;
    color: #aaa;
}

/* 预设编辑表单 */
.preset-edit-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.preset-form-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.preset-form-item label {
    font-size: 13px;
    font-weight: 500;
    color: #555;
}

.preset-form-item input {
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
}

.preset-form-item input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.preset-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.preset-cancel-btn,
.preset-save-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.preset-cancel-btn {
    background: #f0f0f0;
    color: #666;
}

.preset-cancel-btn:hover {
    background: #e0e0e0;
}

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

.preset-save-btn:hover {
    background: #5a6fd6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* 夜间模式适配 */
.phone-frame.night-mode .api-preset-selector {
    background: #2a2a2a;
    border-color: #444;
}

.phone-frame.night-mode .preset-header .setting-label {
    color: #e8e8e8;
}

.phone-frame.night-mode .preset-select-wrapper select {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

.phone-frame.night-mode .preset-manage-btn {
    background: #2a2a2a;
    border-color: #444;
    color: #aaa;
}

.phone-frame.night-mode .preset-modal {
    background: #1e1e1e;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.phone-frame.night-mode .preset-modal-header {
    background: #2a2a2a;
    border-bottom-color: #333;
}

.phone-frame.night-mode .preset-modal-header h3 {
    color: #e8e8e8;
}

.phone-frame.night-mode .preset-modal-close {
    background: #444;
    color: #aaa;
}

.phone-frame.night-mode .preset-item {
    background: #2a2a2a;
    border-color: #333;
}

.phone-frame.night-mode .preset-item-name {
    color: #e0e0e0;
}

.phone-frame.night-mode .preset-item-detail {
    color: #888;
}

.phone-frame.night-mode .preset-form-item label {
    color: #aaa;
}

.phone-frame.night-mode .preset-form-item input {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}

.phone-frame.night-mode .preset-cancel-btn {
    background: #333;
    color: #aaa;
}

.settings-group {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
}

.settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #f8f8f8;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.settings-item:active {
    background: #fafafa;
    transform: scale(0.98);
}

/* 夜间模式 */
.phone-frame.night-mode .settings-section {
    background: #1e1e1e;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.phone-frame.night-mode .section-title {
    color: #e8e8e8;
    border-bottom-color: #333;
}

.phone-frame.night-mode .setting-label {
    color: #e8e8e8;
}

.phone-frame.night-mode .setting-input,
.phone-frame.night-mode .setting-textarea {
    background: #2a2a2a;
    border-color: #444;
    color: #e8e8e8;
}

.phone-frame.night-mode .setting-input:focus,
.phone-frame.night-mode .setting-textarea:focus {
    border-color: #667eea;
}

.phone-frame.night-mode .setting-hint {
    color: #888;
}

.phone-frame.night-mode .backup-btn {
    background: #2a2a2a;
    color: #667eea;
}

.phone-frame.night-mode .backup-btn:hover {
    background: #667eea;
    color: white;
}

.settings-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #333;
}

.settings-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    position: relative;
}

.settings-arrow {
    font-size: 18px;
    color: #ccc;
}

/* 设置空状态 */
.settings-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.empty-text {
    font-size: 15px;
    color: #999;
    margin: 0;
}

/* 字体页 */
.font-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    background: #fafafa;
}

.font-preview {
    background: white;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    border: 1px solid #f0f0f0;
}

.preview-text {
    font-size: 15px;
    color: #333;
    transition: all 0.3s ease;
    line-height: 1.6;
}

.font-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #f0f0f0;
}

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

.font-size-control {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

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

.size-label.large {
    font-size: 20px;
}

.size-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #e0e0e0;
    border-radius: 3px;
    outline: none;
}

.size-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #333;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.size-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #333;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.size-value {
    text-align: center;
    font-size: 14px;
    color: #666;
    font-weight: 600;
}

.font-list {
    display: flex;
    flex-direction: column;
}

.font-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
    color: #333;
}

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

.font-item:active {
    background: linear-gradient(to right, #fafafa, #f9f9f9);
    transform: scale(0.98);
}

.font-item .check-mark {
    color: #333;
    font-size: 20px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s;
}

.font-item.active .check-mark {
    opacity: 1;
}

/* 当前字体信息 */
.current-font-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(240, 240, 245, 0.4), rgba(245, 245, 250, 0.3));
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    color: #333;
    box-shadow: 0 8px 32px rgba(150, 150, 180, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

.current-font-info span {
    font-size: 16px;
    font-weight: 600;
}

.reset-font-btn {
    padding: 6px 16px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #333;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.reset-font-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

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

/* 全局字体设置 */
.global-font-controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.global-font-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.global-font-value,
.global-font-hex {
    font-size: 12px;
    color: #666;
    font-family: monospace;
}

.global-font-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: #ddd;
    outline: none;
}

.global-font-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #666;
    cursor: pointer;
}

.global-font-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.global-font-color-input {
    width: 36px;
    height: 36px;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    padding: 2px;
    cursor: pointer;
    background: white;
}

.global-font-color-reset {
    padding: 6px 10px;
    background: white;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: 11px;
    color: #666;
    cursor: pointer;
}

.global-font-color-reset:active {
    transform: scale(0.96);
}

.global-font-hint {
    font-size: 11px;
    color: #999;
}

/* 字体列表 */
.font-name {
    font-size: 15px;
}

.section-subtitle {
    font-size: 13px;
    font-weight: 400;
    color: #999;
    margin-left: 6px;
}

/* 新增卡槽按钮 */
.add-font-slot-btn {
    float: right;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid #d0d0d0;
    background: white;
    color: #666;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    margin-top: -3px;
    transition: all 0.2s;
}

.add-font-slot-btn:active {
    transform: scale(0.9);
    background: #f0f0f0;
}

.phone-frame.night-mode .add-font-slot-btn {
    background: rgba(58, 58, 60, 0.9);
    border-color: rgba(255, 255, 255, 0.12);
    color: #d1d1d6;
}

/* 自定义字体卡槽 */
.custom-font-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 510px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

.custom-font-list::-webkit-scrollbar {
    width: 4px;
}

.custom-font-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}

.custom-font-list::-webkit-scrollbar-track {
    background: transparent;
}

.custom-font-slot {
    display: flex;
    align-items: center;
    padding: 16px;
    border: 2px dashed #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: #fafafa;
}

.custom-font-slot:hover {
    border-color: #999;
    background: #f5f5f5;
}

.custom-font-slot.active {
    border-color: #333;
    background: white;
    border-style: solid;
}

.custom-font-slot.has-font {
    border-style: solid;
    border-color: #d0d0d0;
    background: white;
}

.custom-font-slot.has-font:hover {
    border-color: #999;
}

.slot-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: #f5f5f5;
    color: #666;
    flex-shrink: 0;
}

.custom-font-slot.empty .slot-icon {
    background: #e0e0e0;
    color: #999;
}

.slot-info {
    flex: 1;
    margin-left: 14px;
    min-width: 0;
}

.slot-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

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

.slot-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.slot-btn {
    padding: 6px 12px;
    border: 1px solid #e0e0e0;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: #666;
    transition: all 0.2s;
}

.slot-btn:hover {
    background: #fafafa;
    border-color: #999;
}

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

.slot-btn.delete-btn:hover {
    color: #f44336;
    border-color: #f44336;
}

.slot-check {
    margin-left: 8px;
    color: #333;
    font-size: 18px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s;
}

.custom-font-slot.active .slot-check {
    opacity: 1;
}

/* 字体模态框特殊样式 */
.font-name-input-group {
    margin-bottom: 16px;
}

.import-type-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.import-type-selector .source-option {
    flex: 1;
}

.import-url-group {
    margin-bottom: 16px;
}

.import-file-group {
    margin-bottom: 16px;
}

.input-hint {
    margin-top: 8px;
    font-size: 12px;
    color: #999;
    text-align: left;
}

.file-input-hidden {
    display: none;
}

.file-upload-box {
    border: 2px dashed #e0e0e0;
    border-radius: 10px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #fafafa;
}

.file-upload-box:active {
    background: #f0f0f0;
    transform: scale(0.98);
}

.file-upload-box .upload-icon {
    font-size: 40px;
    margin-bottom: 10px;
    opacity: 0.5;
}

.file-upload-box .upload-text {
    font-size: 14px;
    color: #333;
    margin-bottom: 6px;
    font-weight: 500;
}

.file-upload-box .upload-hint {
    font-size: 12px;
    color: #999;
}

.selected-file-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: #f5f5f5;
    border-radius: 8px;
    margin-top: 10px;
}

.file-name-display {
    font-size: 13px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.file-remove-btn {
    width: 26px;
    height: 26px;
    border: none;
    background: #d0d0d0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.file-remove-btn:active {
    background: #bbb;
    transform: scale(0.9);
}

/* 天气页 */
#weather {
    position: relative;
    overflow: hidden;
}

#weather:not(.active) .weather-main-view,
#weather:not(.active) .weather-settings-view {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.weather-main-view,
.weather-settings-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fafafa;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    pointer-events: auto;
    overflow: hidden;
}

.weather-settings-view .page-header {
    flex-shrink: 0;
}

.weather-main-view {
    transform: translateX(0);
    z-index: 2;
}

.weather-main-view.slide-left {
    transform: translateX(-100%);
    z-index: 1;
}

.weather-settings-view {
    transform: translateX(100%);
    z-index: 1;
}

.weather-settings-view.active {
    transform: translateX(0);
    z-index: 2;
}

.weather-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    background: #fafafa;
}

.current-weather {
    background: white;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    color: #333;
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.weather-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 12px;
    opacity: 0.9;
}

.weather-emoji {
    font-size: 56px;
    line-height: 60px;
    text-align: center;
    color: #999;
    font-weight: 300;
}

/* 雨滴线条图标 */
.rain-icon-lines {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rain-icon-lines::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    background:
        linear-gradient(#666 0 0) 20% 30%/2px 12px,
        linear-gradient(#666 0 0) 40% 45%/2px 16px,
        linear-gradient(#666 0 0) 60% 35%/2px 14px,
        linear-gradient(#666 0 0) 80% 50%/2px 11px;
    background-repeat: no-repeat;
}

.rain-icon-small {
    position: relative;
    display: inline-block;
}

.rain-icon-small::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background:
        linear-gradient(#666 0 0) 25% 30%/1.5px 8px,
        linear-gradient(#666 0 0) 75% 40%/1.5px 10px;
    background-repeat: no-repeat;
}

.weather-temp {
    font-size: 52px;
    font-weight: 300;
    margin-bottom: 8px;
    color: #333;
}

.weather-desc {
    font-size: 18px;
    margin-bottom: 6px;
    color: #666;
    font-weight: 400;
}

.weather-location {
    font-size: 14px;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.weather-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.detail-item {
    background: white;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px solid #f0f0f0;
    transition: all 0.2s ease;
}

.detail-item:active {
    transform: scale(0.98);
    background: #f9f9f9;
}

.detail-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 8px;
    opacity: 0.8;
}

.detail-label {
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}

.detail-value {
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

.forecast-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #f0f0f0;
}

.weather-virtual-city-label {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.35);
    margin-top: 4px;
    text-align: center;
}

.weather-source-info {
    text-align: center;
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    padding: 12px 0 20px;
}

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

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

.forecast-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: #fafafa;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.forecast-item:active {
    background: #f5f5f5;
    border-color: #e8e8e8;
}

.weather-expired-tip {
    text-align: center;
    padding: 36px 20px;
    color: #999;
    font-size: 14px;
    line-height: 1.6;
    background: #fafafa;
    border-radius: 8px;
    border: 1px dashed #e0e0e0;
}

.forecast-day {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    width: 60px;
}

.forecast-icon {
    width: 24px;
    height: 24px;
    flex: 1;
    text-align: center;
    opacity: 0.9;
    margin: 0 auto;
}

.forecast-emoji {
    font-size: 20px;
    line-height: 24px;
    color: #999;
    font-weight: 300;
}

.forecast-temp {
    font-size: 14px;
    color: #666;
    font-weight: 400;
    width: 80px;
    text-align: right;
}

/* 天气设置页 */
#weather .weather-settings-view .settings-content {
    padding: 20px;
    padding-bottom: 40px;
    background: #fafafa;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.settings-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #f0f0f0;
}

.setting-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.setting-item:last-child {
    margin-bottom: 0;
}

.setting-label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.setting-input,
.setting-select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    color: #333;
    background: white;
    transition: all 0.2s ease;
    outline: none;
    cursor: pointer;
}

.setting-input:disabled,
.setting-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f7fafc;
}

.setting-select {
    appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1.5L6 6.5L11 1.5" stroke="%23667eea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.setting-select option {
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.4;
}

.setting-select optgroup {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    padding: 6px 12px;
}

.setting-input:focus,
.setting-select:focus {
    border-color: #0a84ff;
    background: #fafafa;
}

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

/* 开关按钮 */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 51px;
    height: 31px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 31px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 27px;
    width: 27px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #0a84ff;
}

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

/* 自定义四季输入 - 统一文本框 */
.season-textarea-unified {
    width: 100%;
    min-height: 180px;
    padding: 14px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    background: white;
    resize: vertical;
    font-family: inherit;
    transition: all 0.2s ease;
    outline: none;
}

.season-textarea-unified:focus {
    border-color: #0a84ff;
    background: #fafafa;
}

.season-textarea-unified::placeholder {
    color: #999;
    line-height: 1.6;
}

/* 保存按钮 */
.settings-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.save-settings-btn {
    padding: 14px 40px;
    background: #f5f5f5;
    color: #333;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.save-settings-btn:hover {
    background: #e8e8e8;
    transform: translateY(-2px);
}

.save-settings-btn:active {
    background: #d8d8d8;
    transform: translateY(0);
}

.settings-hint {
    font-size: 13px;
    color: #999;
    text-align: center;
    line-height: 1.5;
    max-width: 300px;
}

/* 主题页 */
.theme-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    background: #fafafa;
}

.theme-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #f0f0f0;
}

/* 壁纸设置 */
.wallpaper-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.wallpaper-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wallpaper-card-header {
    font-size: 12px;
    font-weight: 600;
    color: #666;
    text-align: center;
}

.wallpaper-current {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.wallpaper-preview {
    width: 100%;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e0e0e0;
    position: relative;
}

.wallpaper-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wallpaper-placeholder {
    color: #999;
    font-size: 12px;
    text-align: center;
    padding: 0 10px;
}

.wallpaper-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.change-wallpaper-btn {
    width: 100%;
    padding: 6px;
    background: white;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    color: #333;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.change-wallpaper-btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

.delete-wallpaper-btn {
    width: 100%;
    padding: 6px;
    background: white;
    border: 2px solid #f44336;
    border-radius: 6px;
    color: #f44336;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.delete-wallpaper-btn:active {
    transform: scale(0.98);
    background: #fff5f5;
}

.wallpaper-url-group,
.wallpaper-file-group {
    margin-top: 8px;
}

/* 密码与安全 */
.security-settings {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.security-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

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

.security-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

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

/* 开关按钮 */
.toggle-switch {
    position: relative;
    width: 50px;
    height: 28px;
    display: inline-block;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 14px;
    transition: 0.3s;
}

.toggle-slider:before {
    content: '';
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background: white;
    border: 1px solid #d0d0d0;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(22px);
    background: #333;
}

/* 密码设置区域 */
.password-setting {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.password-setting.hidden {
    display: none;
}

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

.password-label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
}

.optional-hint {
    font-size: 12px;
    font-weight: 400;
    color: #999;
}

.password-input {
    padding: 8px 10px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: 13px;
    color: #333;
    background: white;
    transition: all 0.2s;
}

.password-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.save-password-btn {
    padding: 8px;
    background: white;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.save-password-btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

.theme-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 14px;
    border-radius: 10px;
    border: 1.5px solid #e8e8e8;
    transition: all 0.2s ease;
    position: relative;
    background: white;
}

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

.theme-option.active {
    border-color: #666;
    background: #fafafa;
}

.theme-preview {
    width: 100%;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
}

.light-preview {
    background: #f9f9f9;
}

.dark-preview {
    background: #2a2a2a;
}

.theme-preview .preview-bar {
    height: 16px;
    background: rgba(0, 0, 0, 0.05);
}

.dark-preview .preview-bar {
    background: rgba(255, 255, 255, 0.1);
}

.theme-preview .preview-content {
    height: 84px;
    padding: 8px;
}

.theme-option span:not(.check-mark) {
    font-size: 13px;
    color: #333;
    font-weight: 500;
}

.theme-option .check-mark {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #666;
    font-size: 18px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.2s;
}

.theme-option.active .check-mark {
    opacity: 1;
}

/* 手机外框设置 */
.phone-frame-setting {
    display: flex;
    flex-direction: column;
}

.frame-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

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

.frame-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.frame-hint {
    font-size: 11px;
    color: #999;
}

/* 无外框模式样式（全屏铺满） */
.phone-frame.frameless {
    width: 100vw !important;
    height: 100vh !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.phone-frame.frameless .screen-content {
    border-radius: 0 !important;
}

.phone-frame.frameless .page {
    border-radius: 0 !important;
}

/* ===== 底部安全区适配（用户手动开启） ===== */

/* 全屏模式高度修正：优先使用 dvh（动态视口高度） */
body.bottom-safe-fix.fullscreen-mode .phone-frame.frameless {
    height: 100dvh !important;
}

/* 不支持 dvh 的浏览器回退方案 */
@supports not (height: 1dvh) {
    body.bottom-safe-fix.fullscreen-mode .phone-frame.frameless {
        height: calc(100vh - 24px) !important;
    }
}

/* 主屏底部导航栏 */
body.bottom-safe-fix.fullscreen-mode .home-bottom-nav {
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
}

/* 页面指示器位置调整 */
body.bottom-safe-fix.fullscreen-mode .page-indicators {
    bottom: calc(90px + max(24px, env(safe-area-inset-bottom, 0px)));
}

/* 微信底部导航栏 */
body.bottom-safe-fix.fullscreen-mode .wechat-tabbar {
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
}

/* 聊天输入框容器：对齐项目既有的聊天框避让公式（见下方 .chat-input-container.collapse-mode），
   只吃真实安全区 max(env, --android-nav-bottom)，不加 24px 硬底。
   原因：聊天框处在定高 frame 的 flex 列底部，多余硬底会把消息区顶上去；env=0 的非
   standalone 浏览器里那 24px 是凭空死高（即本次"聊天被顶上去"bug）。dock/tabbar 仍保留
   24px 兜底——它们是悬浮坞/滚动容器，与聊天框诉求不同，不在此处理。 */
body.bottom-safe-fix.fullscreen-mode .chat-input-container {
    padding-bottom: calc(8px + max(env(safe-area-inset-bottom, 0px), var(--android-nav-bottom, 0px)));
}

/* 键盘弹出归零：APK 键盘升起后 --android-nav-bottom 仍是收起时的导航栏高度
   （MainActivity 仅在键盘收起时上报），导航栏已被键盘遮住无需避让，否则键盘上方留白块。
   仅 APK 设 android-keyboard-open（web 永不命中），不带 .collapse-mode 以同时覆盖
   展开/折叠两态；特异性 (0,4,1) 高于上面的开关规则，确保归零生效。 */
body.bottom-safe-fix.fullscreen-mode.android-keyboard-open .chat-input-container {
    padding-bottom: 8px;
}

/* 遇见页面底部 */
body.bottom-safe-fix.fullscreen-mode .meet-persona-grid {
    padding-bottom: calc(20px + max(24px, env(safe-area-inset-bottom, 0px)));
}

/* 设置页面底部 */
body.bottom-safe-fix.fullscreen-mode .settings-content {
    padding-bottom: calc(40px + max(24px, env(safe-area-inset-bottom, 0px)));
}

/* 朋友圈列表底部 */
body.bottom-safe-fix.fullscreen-mode .moments-list {
    padding-bottom: calc(20px + max(24px, env(safe-area-inset-bottom, 0px)));
}

/* ===== 顶部安全区适配 - 灵动岛/刘海（用户手动开启） ===== */

/* 通用页面顶栏 */
body.top-safe-fix.fullscreen-mode .page-header {
    padding-top: max(45px, calc(12px + env(safe-area-inset-top, 0px)));
}

/* 聊天窗口顶栏 */
body.top-safe-fix.fullscreen-mode .chat-window-header {
    margin-top: max(36px, calc(8px + env(safe-area-inset-top, 0px)));
}

/* 发朋友圈页面顶栏 */
body.top-safe-fix.fullscreen-mode .post-moment-header {
    padding-top: max(44px, calc(12px + env(safe-area-inset-top, 0px)));
}

/* 纪念日页面顶栏 */
body.top-safe-fix.fullscreen-mode .memory-header {
    padding-top: max(45px, calc(12px + env(safe-area-inset-top, 0px)));
}

/* 梦境子页面顶栏 */
body.top-safe-fix.fullscreen-mode .dreamland-subpage-header {
    padding-top: max(45px, calc(12px + env(safe-area-inset-top, 0px)));
}

/* 通话界面顶部 */
body.top-safe-fix.fullscreen-mode .call-header {
    padding-top: max(40px, calc(12px + env(safe-area-inset-top, 0px)));
}

/* 虚拟状态栏 */
body.top-safe-fix.fullscreen-mode .status-bar {
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(30px + env(safe-area-inset-top, 0px));
}

/* 主屏图标区域 */
body.top-safe-fix.fullscreen-mode .home-apps {
    padding-top: max(50px, calc(10px + env(safe-area-inset-top, 0px)));
}

/* 锁屏界面 */
body.top-safe-fix.fullscreen-mode .lock-screen-overlay {
    padding-top: max(60px, calc(12px + env(safe-area-inset-top, 0px)));
}

/* ===== 网页端原生状态栏模式（PWA 加桌面，非 APK，非外框） =====
   由 ios-pwa.js 的 detectNativeStatusBar() 在 standalone 且非 APK 时给 body 加
   .native-statusbar。隐藏 App 自画的假状态栏，露出系统原生状态栏；顶距用 max(12px, env)。
   env(safe-area-inset-top) 是"只动有问题的用户"的精确开关：
     - 有留白(Model B，内容排系统栏下方，env=0) → 取 12px，露白消失；
     - 没问题(Model A，内容已在栏背后，env=栏高) → 取栏高，与原一致、零变化。
   仅非外框(:not(.keep-frame))生效。APK 经 !window.AndroidNative 排除，永远进不来。 */
body.native-statusbar:not(.keep-frame) .status-bar              { display: none !important; }
body.native-statusbar:not(.keep-frame) .page-header            { padding-top: max(12px, env(safe-area-inset-top, 0px)) !important; }
body.native-statusbar:not(.keep-frame) .post-moment-header     { padding-top: max(12px, env(safe-area-inset-top, 0px)) !important; }
body.native-statusbar:not(.keep-frame) .memory-header          { padding-top: max(12px, env(safe-area-inset-top, 0px)) !important; }
body.native-statusbar:not(.keep-frame) .dreamland-subpage-header { padding-top: max(12px, env(safe-area-inset-top, 0px)) !important; }
body.native-statusbar:not(.keep-frame) .call-header            { padding-top: max(12px, env(safe-area-inset-top, 0px)) !important; }
body.native-statusbar:not(.keep-frame) .home-apps              { padding-top: max(12px, env(safe-area-inset-top, 0px)) !important; }
/* 聊天顶栏 + 线下/我谕固定坐标系协调平移：原顶栏 margin-top:36px，配套固定元素
   (offline-meeting-card 44/84/114、wuyu-active-bar 120/150)都按此校准。native 下顶栏顶距
   收成 max(12px,env)，故每个固定 top 同步减去同一 delta(36-max(12px,env))=原值-36+max(12px,env)，
   相对位置不变；Model A(env=36) 时全等于原值、零变化。 */
body.native-statusbar:not(.keep-frame) .chat-window-header     { margin-top: max(12px, env(safe-area-inset-top, 0px)) !important; }
body.native-statusbar:not(.keep-frame) .offline-meeting-card   { top: calc(8px + max(12px, env(safe-area-inset-top, 0px))) !important; }
body.native-statusbar:not(.keep-frame) .offline-meeting-card.collapsed { top: calc(48px + max(12px, env(safe-area-inset-top, 0px))) !important; }
body.native-statusbar:not(.keep-frame) .chat-window.has-inject-bar .offline-meeting-card.collapsed { top: calc(78px + max(12px, env(safe-area-inset-top, 0px))) !important; }
body.native-statusbar:not(.keep-frame) .chat-window:has(#offline-meeting-card:not([style*="display: none"])) .wuyu-active-bar { top: calc(84px + max(12px, env(safe-area-inset-top, 0px))) !important; }
body.native-statusbar:not(.keep-frame) .chat-window.has-inject-bar:has(#offline-meeting-card:not([style*="display: none"])) .wuyu-active-bar { top: calc(114px + max(12px, env(safe-area-inset-top, 0px))) !important; }

/* ===== 底部按钮修复 - 聊天输入栏按钮消失（用户手动开启） ===== */

/* 消除input内在最小宽度，防止撑开flex容器导致右侧按钮溢出隐藏 */
body.bottom-toolbar-fix.fullscreen-mode .chat-main-input .chat-input {
    min-width: 0;
    width: 0;
}

/* 强制保护右侧按钮不被挤压 */
body.bottom-toolbar-fix.fullscreen-mode .chat-main-input .chat-ai-reply-btn,
body.bottom-toolbar-fix.fullscreen-mode .chat-main-input .chat-send-btn {
    flex-shrink: 0;
    min-width: 36px;
}

/* 功能栏防溢出 */
body.bottom-toolbar-fix.fullscreen-mode .chat-functions {
    max-width: 100%;
    box-sizing: border-box;
}

/* ===== Android 键盘弹出适配 ===== */
/* adjustResize + Java ViewTreeObserver → JS 内联 height 样式设置 phone-frame 绝对高度 */
/* body.android-keyboard-open 类作为 CSS 钩子保留 */

/* App图标定制 */
.icon-customize-section {
    display: flex;
    flex-direction: column;
}

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

/* 全局CSS美化 */
.css-customize-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.css-schemes-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.css-scheme-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.2s;
}

.css-scheme-card.active {
    border-color: #333;
    background: #fafafa;
}

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

.scheme-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.scheme-status {
    font-size: 11px;
    color: #999;
}

.css-scheme-card.active .scheme-status {
    color: #333;
}

.scheme-edit-btn {
    padding: 6px 12px;
    background: white;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    color: #333;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.scheme-edit-btn:active {
    transform: scale(0.96);
}

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

.css-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    background: white;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    color: #333;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

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

.action-icon {
    font-size: 16px;
}

/* CSS编辑弹窗 */
.css-editor-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
}

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

.css-editor-content {
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
}

.css-editor-content .modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 60vh;
    overflow-y: auto;
}

.css-name-group,
.css-code-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.css-label {
    font-size: 13px;
    font-weight: 600;
    color: #555;
}

.css-input {
    padding: 10px 12px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: 14px;
    color: #333;
    background: white;
}

.css-input:focus {
    outline: none;
    border-color: #333;
}

.css-code-editor {
    min-height: 200px;
    padding: 12px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: 13px;
    font-family: 'Courier New', monospace;
    color: #333;
    background: #f9f9f9;
    resize: vertical;
}

.css-code-editor:focus {
    outline: none;
    border-color: #333;
    background: white;
}

.css-editor-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid #e0e0e0;
}

.css-action-right {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.css-export-btn,
.css-delete-btn,
.css-cancel-btn,
.css-save-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.css-export-btn {
    background: white;
    border: 1px solid #d0d0d0;
    color: #333;
}

.css-delete-btn {
    background: white;
    border: 1px solid #f44336;
    color: #f44336;
}

.css-cancel-btn {
    background: white;
    border: 1px solid #d0d0d0;
    color: #666;
}

.css-save-btn {
    background: #333;
    border: 1px solid #333;
    color: white;
}

.css-export-btn:active,
.css-delete-btn:active,
.css-cancel-btn:active,
.css-save-btn:active {
    transform: scale(0.96);
}

/* 2*1漂流瓶部件 - 锁定第5行第3-4列 */
.drift-bottle-widget {
    background: transparent;
    overflow: visible;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.drift-bottle-widget:hover {
    opacity: 0.7;
}

.drift-bottle-widget:active {
    transform: scale(0.9);
}

.ocean-scene {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 8px 16px 12px 8px;
}

/* 波浪线条 - 三层断断续续的波浪线 */
.wave {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
}

/* 第一层波浪 - 最上层 */
.wave-1 {
    bottom: 18px;
}

.wave-1::before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, 
        #ccc 0%, #ccc 15%, transparent 15%, transparent 20%,
        #ccc 20%, #ccc 35%, transparent 35%, transparent 40%,
        #ccc 40%, #ccc 60%, transparent 60%, transparent 65%,
        #ccc 65%, #ccc 80%, transparent 80%, transparent 85%,
        #ccc 85%, #ccc 100%
    );
    border-radius: 50%;
    transform: scaleY(1.5);
}

/* 第二层波浪 - 中间层 */
.wave-2 {
    bottom: 12px;
}

.wave-2::before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(90deg,
        transparent 0%, transparent 5%,
        #ccc 5%, #ccc 25%, transparent 25%, transparent 30%,
        #ccc 30%, #ccc 50%, transparent 50%, transparent 55%,
        #ccc 55%, #ccc 70%, transparent 70%, transparent 75%,
        #ccc 75%, #ccc 95%, transparent 95%
    );
    border-radius: 50%;
    opacity: 0.8;
}

/* 第三层波浪 - 最下层 */
.wave-3 {
    bottom: 6px;
}

.wave-3::before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(90deg,
        #ccc 0%, #ccc 10%, transparent 10%, transparent 18%,
        #ccc 18%, #ccc 40%, transparent 40%, transparent 45%,
        #ccc 45%, #ccc 55%, transparent 55%, transparent 62%,
        #ccc 62%, #ccc 85%, transparent 85%, transparent 90%,
        #ccc 90%, #ccc 100%
    );
    border-radius: 50%;
    opacity: 0.6;
}

/* 雪花 - 字符符号，大小不一 */
.snowflake {
    position: absolute;
    pointer-events: none;
    color: #999;
    line-height: 1;
}

.snowflake-1 {
    left: 8%;
    top: 15%;
    font-size: 14px;
}

.snowflake-2 {
    left: 28%;
    top: 8%;
    font-size: 11px;
}

.snowflake-3 {
    left: 72%;
    top: 42%;
    font-size: 8px;
}

.snowflake-5 {
    left: 45%;
    top: 35%;
    font-size: 6px;
}

.snowflake-6 {
    left: 82%;
    top: 18%;
    font-size: 7px;
}

.snowflake-7 {
    left: 18%;
    top: 48%;
    font-size: 9px;
}

.snowflake-8 {
    left: 58%;
    top: 12%;
    font-size: 15px;
}

.snowflake-9 {
    left: 35%;
    top: 28%;
    font-size: 10px;
}

.snowflake-10 {
    left: 12%;
    top: 38%;
    font-size: 7px;
}

.snowflake-11 {
    left: 65%;
    top: 8%;
    font-size: 6px;
}

.snowflake-12 {
    left: 50%;
    top: 45%;
    font-size: 8px;
}

.snowflake-13 {
    left: 88%;
    top: 35%;
    font-size: 12px;
}

.snowflake-14 {
    left: 25%;
    top: 18%;
    font-size: 9px;
}

.snowflake-15 {
    left: 75%;
    top: 28%;
    font-size: 13px;
}

.snowflake-16 {
    left: 42%;
    top: 5%;
    font-size: 7px;
}

/* 漂流瓶 - ins风格优化 */
.bottle {
    position: relative;
    transform: rotate(-20deg);
    z-index: 10;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.bottle-body {
    width: 18px;
    height: 26px;
    border: 1.5px solid #999;
    border-radius: 3px 3px 6px 6px;
    position: relative;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.3) 0%, 
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%);
}

.bottle-body::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 3px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 1px;
}

.bottle-neck {
    width: 8px;
    height: 6px;
    border: 1.5px solid #999;
    border-bottom: none;
    border-radius: 2px 2px 0 0;
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.2);
}

.bottle-cap {
    width: 10px;
    height: 3px;
    background: linear-gradient(180deg, #b8977d 0%, #a07855 100%);
    border-radius: 1.5px 1.5px 0 0;
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.2);
}

.bottle-cap::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.bottle-message {
    width: 8px;
    height: 12px;
    border: 1px solid #bbb;
    border-radius: 1px;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, 
        rgba(255, 248, 230, 0.8) 0%,
        rgba(255, 245, 220, 0.6) 100%);
    box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.05);
}

.bottle-message::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 1.5px;
    width: 4px;
    height: 0.5px;
    background: #ddd;
    box-shadow: 
        0 2px 0 0 #ddd,
        0 4px 0 0 #ddd;
}

.app-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    transition: all 0.2s ease;
}

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

.app-card-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    overflow: hidden;
}

.app-card-icon-box.is-image,
.icon-box.is-image,
.nav-icon.is-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
}

.app-card-name {
    font-size: 11px;
    color: #333;
    font-weight: 500;
}

.app-card-buttons {
    display: flex;
    gap: 4px;
    width: 100%;
}

.change-icon-btn {
    flex: 1;
    padding: 5px;
    background: #333;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.change-icon-btn:active {
    transform: scale(0.96);
}

.reset-app-btn {
    flex: 1;
    padding: 5px;
    background: white;
    color: #666;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reset-app-btn:active {
    transform: scale(0.96);
}

/* 弹窗样式 */
.icon-modal,
.url-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
}

.icon-modal.show,
.url-modal.show {
    display: flex;
}

.modal-content {
    position: relative;
    background: white;
    border-radius: 24px;
    width: 75%;
    max-width: 280px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.12);
    animation: modalSlideUp 0.25s ease;
    z-index: 2;
    pointer-events: auto;
    text-align: center;
    overflow: hidden;
}

/* 投放/回复弹窗：统一白粉风（与捡拾信件一致，无渐变） */
#reply-modal-overlay { z-index: 10001; }
#bottle-throw-modal, #bottle-reply-modal {
    background-color: #fffafc;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13"><circle cx="2.5" cy="2.5" r="1" fill="%239699a1" fill-opacity="0.13"/></svg>');
    border-radius: 20px;
    box-shadow: 0 12px 36px rgba(107, 123, 149, 0.22);
    width: 90%;
    max-width: 340px;
}

#bottle-throw-modal .modal-header, #bottle-reply-modal .modal-header {
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 20px 20px 0 0;
}

#bottle-throw-modal .modal-header h3, #bottle-reply-modal .modal-header h3 {
    color: #3A4A5C;
    font-weight: 600;
}

#bottle-throw-modal .modal-close, #bottle-reply-modal .modal-close {
    color: #9aa3b2;
}

#bottle-throw-modal .modal-body, #bottle-reply-modal .modal-body {
    background: transparent;
    padding: 20px;
}

#bottle-throw-modal .bottle-textarea, #bottle-reply-modal .bottle-textarea {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(239, 159, 187, 0.3);
    border-radius: 10px;
    color: #3A4A5C;
    line-height: 1.8;
    resize: none;
}

#bottle-throw-modal .bottle-textarea:focus, #bottle-reply-modal .bottle-textarea:focus {
    border-color: rgba(239, 159, 187, 0.55);
    outline: none;
    background: #fff;
}

#bottle-throw-modal .modal-footer, #bottle-reply-modal .modal-footer {
    background: transparent;
    border-radius: 0 0 20px 20px;
    padding: 16px;
}

#bottle-throw-modal .modal-btn-primary, #bottle-reply-modal .modal-btn-primary {
    background: #f7d3df;
    color: #9a536e;
}

#bottle-throw-modal .modal-btn-secondary, #bottle-reply-modal .modal-btn-secondary {
    background: #fbe4ed;
    color: #a4768a;
}

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

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: none;
    background: linear-gradient(to bottom, #fafafa 0%, #ffffff 100%);
    border-radius: 24px 24px 0 0;
}

.modal-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0 auto;
}

.modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    font-size: 20px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 50%;
    position: absolute;
    right: 12px;
    top: 12px;
}

.modal-close:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #333;
}

.modal-close:active {
    transform: scale(0.9);
}

.modal-body {
    padding: 20px 24px 24px 24px;
}

.source-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fafafa;
    border: 1.5px solid #e8e8e8;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 12px;
}

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

.source-option:hover {
    border-color: #333;
    background: white;
}

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

.option-icon {
    font-size: 32px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 12px;
    border: 1.5px solid #e0e0e0;
}

.option-text {
    flex: 1;
}

.option-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

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

/* text-edit-modal 颜色选择行 */
.text-edit-color-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 4px;
    padding: 0 2px;
}

.text-edit-color-label {
    font-size: 13px;
    color: #555;
    flex-shrink: 0;
}

.text-edit-color-input {
    width: 34px;
    height: 28px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.text-edit-color-reset {
    padding: 4px 11px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: #555;
    margin-left: auto;
}

.text-edit-color-reset:active {
    background: #e8e8e8;
}

.url-modal-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e8e8e8;
    border-radius: 12px;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
    margin-bottom: 16px;
    background: #fafafa;
}

.url-modal-input:focus {
    border-color: #999;
    background: white;
}

.modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

/* 导出弹窗样式 */
.export-option-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.export-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #f8f8f8;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.export-option:active {
    background: #f0f0f0;
}

.export-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #333;
}

.export-option span {
    font-size: 14px;
    color: #333;
}

.export-single-select {
    margin-top: 10px;
}

.export-single-select select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    background: white;
    color: #333;
}

#export-format-hint {
    margin-top: 10px;
    font-size: 12px;
    color: #888;
}

.modal-cancel-btn,
.modal-confirm-btn,
.modal-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-btn {
    background: #f0f0f0;
    color: #333;
}

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

.modal-btn-danger {
    background: #ff3b30;
    color: white;
}

.modal-btn-danger:active {
    background: #e62e24;
}

/* 分类列表样式 */
.category-list-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.category-list-title {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
    font-weight: 500;
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #f5f5f5;
    border-radius: 8px;
    transition: background 0.2s;
}

.category-item:hover {
    background: #ebebeb;
}

.category-name {
    font-size: 14px;
    color: #333;
    flex: 1;
}

.category-delete-btn {
    background: none;
    border: none;
    color: #fa5151;
    font-size: 20px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
    line-height: 1;
}

.category-delete-btn:hover {
    background: rgba(250, 81, 81, 0.1);
}

.category-delete-btn:active {
    background: rgba(250, 81, 81, 0.2);
}

.modal-cancel-btn {
    background: #f5f5f5;
    color: #666;
}

.modal-cancel-btn:hover {
    background: #e8e8e8;
}

.modal-confirm-btn {
    background: #333;
    color: white;
}

.modal-confirm-btn:hover {
    background: #1a1a1a;
}

.modal-cancel-btn:active,
.modal-confirm-btn:active {
    transform: scale(0.96);
}

/* 日历页 */
.calendar-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 20px 40px 20px;
    flex: 1;
    overflow-y: auto;
    background: #fafafa;
}

/* 虚拟时间状态提示（白色窄条卡片） */
.calendar-virtual-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 16px;
    padding: 10px 24px;
    border: 1px solid #f0f0f0;
    text-align: center;
    font-size: 12px;
    color: #666;
}

/* 当前日期显示 */
.calendar-today {
    display: flex;
    align-items: center;
    gap: 20px;
    background: white;
    border-radius: 16px;
    padding: 20px 24px;
    border: 1px solid #f0f0f0;
}

/* 国家日历选择器 */
.calendar-country-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: white;
    border-radius: 16px;
    padding: 12px 24px;
    border: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s ease;
}
.calendar-country-selector:active {
    background: #f5f5f5;
}
#calendar-country-label {
    font-size: 14px;
    color: #333;
}

.today-date {
    font-size: 56px;
    font-weight: 600;
    color: #333;
    line-height: 1;
}

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

.today-weekday {
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

.today-lunar {
    font-size: 13px;
    color: #999;
}

/* 月历卡片 */
.calendar-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #f0f0f0;
    overflow: hidden;
    min-width: 0;
}

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

/* 可编辑日历标题 */
.calendar-month-editor {
    display: flex;
    align-items: center;
    gap: 4px;
}

.calendar-year-input,
.calendar-month-input {
    width: 50px;
    height: 32px;
    border: 2px solid #f0f0f0;
    border-radius: 6px;
    background: white;
    color: #333;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    padding: 0;
    transition: all 0.2s ease;
}

.calendar-year-input {
    width: 60px;
}

.calendar-year-input:focus,
.calendar-month-input:focus {
    outline: none;
    border-color: #333;
    background: #fafafa;
}

.calendar-separator {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.calendar-month {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.calendar-nav-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: #f8f8f8;
    border-radius: 8px;
    font-size: 18px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-nav-btn:hover {
    background: #f0f0f0;
}

.calendar-nav-btn:active {
    transform: scale(0.92);
}

/* 星期标题 */
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
    min-width: 0;
}

.weekday-item {
    text-align: center;
    font-size: 12px;
    color: #999;
    padding: 8px 0;
    min-width: 0;
}

/* 日历网格 */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    min-width: 0;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #333;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    padding: 4px;
    min-width: 0;
    overflow: hidden;
}

.calendar-day.other-month {
    color: #ccc;
}

.calendar-day.today {
    background: #333;
    color: white;
    font-weight: 600;
}

.calendar-day:hover:not(.today) {
    background: #f9f9f9;
}

.calendar-day:active:not(.today) {
    background: #f5f5f5;
}

/* 夜间模式 */
.phone-frame.night-mode .calendar-content {
    background: #000;
}

.phone-frame.night-mode .calendar-today,
.phone-frame.night-mode .calendar-card {
    background: rgba(44, 44, 46, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
}

.phone-frame.night-mode .today-date,
.phone-frame.night-mode .today-weekday,
.phone-frame.night-mode .calendar-month {
    color: #e8e8e8;
}

.phone-frame.night-mode .today-lunar,
.phone-frame.night-mode .weekday-item {
    color: #999;
}

.phone-frame.night-mode .calendar-day {
    color: #e8e8e8;
}

.phone-frame.night-mode .calendar-day.other-month {
    color: #666;
}

.phone-frame.night-mode .calendar-day.today {
    background: #e8e8e8;
    color: #000;
}

.phone-frame.night-mode .calendar-day:hover:not(.today) {
    background: rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .calendar-nav-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #999;
}

.phone-frame.night-mode .calendar-nav-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* 虚拟日历确认对话框 */
.calendar-confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.calendar-confirm-modal.active {
    display: flex;
}

.calendar-confirm-content {
    background: white;
    border-radius: 16px;
    padding: 24px;
    width: 280px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: modalSlideUp 0.3s ease;
}

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

.calendar-confirm-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 12px 0;
    text-align: center;
}

.calendar-confirm-text {
    font-size: 14px;
    color: #666;
    margin: 0 0 20px 0;
    text-align: center;
    line-height: 1.6;
}

.calendar-time-editor {
    margin: 15px 0;
    padding: 12px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
}

.time-input-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
}

.time-input-group label {
    font-weight: 500;
}

.time-input-group span {
    font-weight: 600;
    color: #666;
}

.time-input {
    width: 50px;
    height: 36px;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    transition: all 0.2s ease;
}

.time-input:focus {
    outline: none;
    border-color: #333;
    background: #f9f9f9;
}

.calendar-confirm-buttons {
    display: flex;
    gap: 12px;
}

.calendar-confirm-btn {
    flex: 1;
    height: 40px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.calendar-confirm-btn.cancel {
    background: #f5f5f5;
    color: #666;
}

.calendar-confirm-btn.cancel:hover {
    background: #ebebeb;
}

.calendar-confirm-btn.confirm {
    background: #333;
    color: white;
}

.calendar-confirm-btn.confirm:hover {
    background: #1a1a1a;
}

.calendar-confirm-btn:active {
    transform: scale(0.96);
}

/* 夜间模式 */
.phone-frame.night-mode .calendar-year-input,
.phone-frame.night-mode .calendar-month-input {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e8e8e8;
}

.phone-frame.night-mode .calendar-year-input:focus,
.phone-frame.night-mode .calendar-month-input:focus {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
}

.phone-frame.night-mode .calendar-separator {
    color: #999;
}

.phone-frame.night-mode .calendar-confirm-content {
    background: rgba(44, 44, 46, 0.95);
}

.phone-frame.night-mode .calendar-confirm-title {
    color: #e8e8e8;
}

.phone-frame.night-mode .calendar-confirm-text {
    color: #999;
}

.phone-frame.night-mode .calendar-confirm-btn.cancel {
    background: rgba(255, 255, 255, 0.1);
    color: #999;
}

.phone-frame.night-mode .calendar-confirm-btn.cancel:hover {
    background: rgba(255, 255, 255, 0.15);
}

.phone-frame.night-mode .calendar-confirm-btn.confirm {
    background: #e8e8e8;
    color: #000;
}

.phone-frame.night-mode .calendar-confirm-btn.confirm:hover {
    background: #fff;
}

/* 微信页 */
.wechat-header {
    position: relative;
}

.wechat-header-actions {
    display: flex;
    align-items: center;
    gap: 0;
}

.wechat-weather-btn {
    position: absolute;
    bottom: -45px;
    right: 80px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
    z-index: 10;
}

.wechat-refresh-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #333;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
    flex-shrink: 0;
}

.wechat-add-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
    flex-shrink: 0;
}

.wechat-weather-btn .weather-icon {
    font-size: 26px;
    color: #8bb4d9;
    transition: color 0.2s;
    line-height: 1;
    display: block;
}

.wechat-weather-btn.active .weather-icon {
    color: #8bb4d9;
}

.wechat-refresh-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}

.wechat-add-btn svg {
    width: 24px;
    height: 24px;
    display: block;
}

.wechat-refresh-btn.loading svg {
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.wechat-weather-btn:active,
.wechat-refresh-btn:active,
.wechat-add-btn:active {
    transform: scale(0.9);
}

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

/* 微信功能菜单 */
.wechat-menu {
    position: absolute;
    top: 52px;
    right: 10px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 100;
    min-width: 140px;
    max-width: calc(100% - 20px);
}

.wechat-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 14px;
    color: #333;
}

.wechat-menu-item:hover {
    background: #f5f5f5;
}

.wechat-menu-item:active {
    background: #e8e8e8;
}

.wechat-menu-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* 朋友圈空状态 */
.moments-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.moments-empty .empty-icon {
    margin-bottom: 20px;
    opacity: 0.6;
}

.moments-empty .empty-text {
    font-size: 14px;
    color: #999;
}

/* AI头像样式 */
.chat-avatar.ai-avatar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-avatar.ai-avatar svg {
    stroke: white;
}

/* SVG图标样式 */
.contact-icon svg,
.me-icon svg {
    display: block;
}

.moments-avatar svg {
    display: block;
}

.wechat-main {
    flex: 1;
    overflow-y: auto;
    background: #f7f7f7;
    position: relative;
}

.wechat-tab-content {
    display: none;
    height: 100%;
    overflow-y: auto;
}

.wechat-tab-content.active {
    display: block;
}

/* 聊天列表 */
.chat-list {
    display: flex;
    flex-direction: column;
    background: #f5f5f5;
}

.chat-item {
    display: flex;
    gap: 12px;
    padding: 8px 16px;
    background: white;
    border: 1px solid rgba(220, 220, 220, 0.6);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 8px 4px 8px;
    
    /* 水珠凸起效果 */
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.9),
        inset 0 -1px 1px rgba(0, 0, 0, 0.03),
        0 2px 4px rgba(0, 0, 0, 0.05),
        0 1px 2px rgba(0, 0, 0, 0.03);
}

.chat-item:first-child {
    margin-top: 8px;
}

.chat-item:active {
    background: rgba(248, 248, 248, 0.95);
    transform: scale(0.98);
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.8),
        inset 0 -1px 1px rgba(0, 0, 0, 0.05),
        0 1px 2px rgba(0, 0, 0, 0.04);
}

.chat-avatar {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: #f8f8f8;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.chat-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

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

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

.chat-time {
    font-size: 12px;
    color: #b3b3b3;
}

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

.ai-avatar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 置顶聊天样式 */
.chat-item.pinned {
    background: rgba(235, 235, 235, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 1),
        inset 0 -1px 1px rgba(0, 0, 0, 0.05),
        0 2px 4px rgba(0, 0, 0, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.04);
}

.chat-item.pinned:active {
    background: rgba(225, 225, 225, 0.85);
}

/* 置顶提示条 */
.pinned-indicator {
    font-size: 11px;
    color: #999;
    padding: 4px 16px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}

/* 聊天长按操作弹窗 */
.chat-action-popup {
    position: fixed;
    /* 由 JS 动态设置 left 和 top */
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    overflow: hidden;
    min-width: 140px;
}

.chat-action-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 14px;
    color: #333;
}

.chat-action-item:active {
    background: #f5f5f5;
}

.chat-action-item svg {
    flex-shrink: 0;
}

.chat-action-divider {
    height: 1px;
    background: #e8e8e8;
    margin: 0 8px;
}

.chat-action-danger {
    color: #ee0a24;
}

.chat-action-danger svg {
    stroke: #ee0a24;
}

/* 通讯录 */
.contacts-list {
    background: #f5f5f5;
}

.contact-group {
    border-bottom: none;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: transparent;
}

/* 联系人分组容器 */
.contact-group-container {
    margin-bottom: 20px;
}

.contact-group-title {
    font-size: 14px;
    color: #888;
    font-weight: 600;
    padding: 8px 16px;
    text-transform: uppercase;
}

.contact-group-list {
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(230, 230, 230, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 通讯录联系人卡片 - 所有都使用圆角 */
.contact-item.contact-card {
    border-radius: 10px;
}

.contact-item.contact-card:hover {
    background: rgba(210, 210, 210, 0.7);
}

.contact-item.contact-card:active {
    background: rgba(190, 190, 190, 0.8);
}

.contact-item.special {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px dashed #d0d0d0;
    border-bottom: 1px dashed #d0d0d0;
}

.contact-item:active {
    background: #f5f5f5;
}

.contact-item.special:active {
    background: rgba(255, 255, 255, 0.5);
}

.contact-icon {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.contact-avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: #f8f8f8;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: #999;
    flex-shrink: 0;
}

.contact-info {
    flex: 1;
}

.contact-name {
    font-size: 15px;
    color: #333;
    flex: 1;
}

.contact-badge {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
}

.badge-dot {
    display: block;
    width: 8px;
    height: 8px;
    background: #ff3b30;
    border-radius: 50%;
    animation: badge-pulse 2s infinite;
}

@keyframes badge-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.contact-section-title {
    padding: 8px 16px;
    font-size: 13px;
    color: #999;
    background: #f7f7f7;
    font-weight: 500;
}

/* 新的朋友页面 */
#new-friends {
    overflow: hidden !important;
    background: white;
}

#new-friends .page-header {
    flex-shrink: 0;
}

.new-friends-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: white;
    min-height: 0;
    position: relative;
    z-index: 10;
}

.friend-requests-list {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.friend-request-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px dashed #d0d0d0;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.friend-request-item:hover {
    background: rgba(255, 255, 255, 0.5);
}

.friend-request-item:active {
    background: rgba(255, 255, 255, 0.6);
}

.friend-request-avatar {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid #e0e0e0;
}

.friend-request-avatar svg {
    width: 100%;
    height: 100%;
}

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

.friend-request-name {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.friend-request-message {
    font-size: 13px;
    color: #888;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-request-time {
    font-size: 12px;
    color: #999;
    flex-shrink: 0;
}

.friend-request-status {
    font-size: 13px;
    color: #999;
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    flex-shrink: 0;
}

/* 好友申请详情页 */
#friend-request-detail {
    background: #f7f7f7;
}

.friend-detail-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
}

.friend-detail-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    gap: 16px;
}

.friend-detail-avatar {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

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

.friend-detail-name {
    font-size: 17px;
    font-weight: 500;
    color: #333;
    margin-bottom: 6px;
}

.friend-detail-wechat-id {
    font-size: 13px;
    color: #888;
    margin-bottom: 4px;
}

.friend-detail-region {
    font-size: 13px;
    color: #888;
    margin-bottom: 12px;
}

.friend-detail-signature {
    font-size: 13px;
    color: #888;
    margin-bottom: 12px;
}

.friend-detail-section {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.friend-detail-label {
    font-size: 13px;
    color: #999;
    margin-bottom: 6px;
}

.friend-detail-message {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    word-wrap: break-word;
}

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

.friend-detail-value {
    font-size: 15px;
    color: #333;
}

.friend-detail-actions {
    display: flex;
    gap: 12px;
    padding: 0 16px 16px;
    position: sticky;
    bottom: 0;
    background: #f7f7f7;
    padding-top: 12px;
}

.friend-detail-btn {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: none;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.friend-detail-btn.accept-btn {
    background: #f0f0f0;
    color: #07c160;
    border: none;
}

.friend-detail-btn.accept-btn:hover {
    background: #e5e5e5;
}

.friend-detail-btn.accept-btn:active {
    background: #d8d8d8;
}

.friend-detail-btn.reject-btn {
    background: #f0f0f0;
    color: #fa5151;
    border: none;
}

.friend-detail-btn.reject-btn:hover {
    background: #e5e5e5;
}

.friend-detail-btn.reject-btn:active {
    background: #d8d8d8;
}

/* ===== 群聊列表页面 ===== */
.group-chats-content {
    height: calc(100% - 50px);
    overflow-y: auto;
    padding: 15px;
    background: #f7f7f7;
}

.group-chats-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.group-chat-item {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px dashed #d0d0d0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.group-chat-item:hover {
    background: rgba(255, 255, 255, 0.5);
    border-color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.group-chat-item:active {
    transform: translateY(0);
}

.group-chat-avatar {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #f0f0f0;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.group-avatar-grid {
    width: 100%;
    height: 100%;
    display: grid;
    gap: 1px;
    background: white;
}

.group-avatar-grid.grid-1 {
    grid-template-columns: 1fr;
}

.group-avatar-grid.grid-4 {
    grid-template-columns: repeat(2, 1fr);
}

.group-avatar-grid.grid-9 {
    grid-template-columns: repeat(3, 1fr);
}

.group-avatar-item {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #e0e0e0;
}

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

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

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

.group-chat-members {
    font-size: 13px;
    color: #888;
}

.group-chats-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: #ccc;
}

.group-chats-empty svg {
    margin-bottom: 16px;
    opacity: 0.5;
}

.group-chats-empty p {
    font-size: 15px;
    color: #999;
}

/* ===== 标签列表页面 ===== */
.header-action-btn {
    padding: 6px 16px;
    background: transparent;
    color: #667eea;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.header-action-btn:hover {
    background: rgba(102, 126, 234, 0.1);
}

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

.tags-content {
    height: calc(100% - 50px);
    overflow-y: auto;
    padding: 15px;
    background: #f7f7f7;
}

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

.tag-item {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px dashed #d0d0d0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tag-item:hover {
    background: rgba(255, 255, 255, 0.5);
    border-color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.tag-item:active {
    transform: translateY(0);
}

.tag-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

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

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

.tag-count {
    font-size: 13px;
    color: #888;
}

.tags-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: #ccc;
}

.tags-empty svg {
    margin-bottom: 16px;
    opacity: 0.5;
}

.tags-empty p {
    font-size: 15px;
    color: #999;
    margin: 4px 0;
}

.tags-empty .empty-hint {
    font-size: 13px;
    color: #bbb;
}

/* ===== 标签编辑页面 ===== */
.tag-edit-content {
    height: calc(100% - 50px);
    overflow-y: auto;
    padding: 15px;
    background: #f7f7f7;
}

.tag-edit-form {
    background: white;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
}

.tag-colors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 8px;
}

.tag-color-item {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: 3px solid transparent;
}

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

.tag-color-item.selected {
    border-color: #333;
    box-shadow: 0 0 0 2px white, 0 0 0 4px #333;
}

.tag-members-count {
    font-size: 15px;
    color: #666;
    padding: 10px 0;
}

.delete-tag-btn {
    width: 100%;
    padding: 14px;
    background: white;
    color: #ff3b30;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.delete-tag-btn:hover {
    background: #ffebee;
}

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

/* ===== 标签详情页面 ===== */
.tag-detail-content {
    height: calc(100% - 50px);
    overflow-y: auto;
    padding: 15px;
    background: #f7f7f7;
}

.tag-info-section {
    background: white;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}

.save-name-btn {
    width: 100%;
    padding: 12px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 10px;
}

.save-name-btn:hover {
    background: #5568d3;
}

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

.tag-members-section {
    background: white;
    border-radius: 12px;
    padding: 15px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.section-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.add-member-btn {
    padding: 6px 14px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.add-member-btn:hover {
    background: #5568d3;
}

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

.tag-members-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tag-member-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    position: relative;
}

.remove-member-btn {
    margin-left: auto;
    padding: 6px 12px;
    background: #ff3b30;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.remove-member-btn:hover {
    background: #e62e24;
}

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

.tag-members-empty {
    padding: 40px 20px;
    text-align: center;
    color: #999;
}

.tag-members-empty p {
    margin: 4px 0;
}

.tag-members-empty .empty-hint {
    font-size: 13px;
    color: #bbb;
}

/* ===== 选择联系人页面 ===== */
.select-contacts-content {
    height: calc(100% - 50px);
    overflow-y: auto;
    padding: 15px;
    background: #f7f7f7;
}

.select-contacts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.select-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.select-contact-item:hover {
    background-color: #f5f5f5;
}

.select-contact-item.selected {
    background-color: #f5f5f5;
}

.select-contact-item .contact-avatar {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.select-contact-item .contact-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.select-contact-item .contact-name {
    flex: 1;
    cursor: pointer;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #999;
}

.empty-state svg {
    margin-bottom: 16px;
}

.empty-state p {
    font-size: 15px;
    color: #999;
}

/* 朋友圈 */
/* 朋友圈顶部区域 */
.moments-header {
    position: relative;
    height: 200px;
    padding: 8px 12px 0 12px;
}

.moments-cover {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
    border-radius: 8px;
    border: 1px dashed #d0d0d0;
}

.moments-cover:active {
    opacity: 0.95;
}

.moments-cover-icon {
    pointer-events: none;
    opacity: 0.2;
    transition: opacity 0.2s;
}

.moments-cover:hover .moments-cover-icon {
    opacity: 0.3;
}

.moments-cover.has-image .moments-cover-icon {
    display: none;
}

/* 照相机图标 */
.icon-camera-cover {
    width: 60px;
    height: 60px;
    display: block;
    position: relative;
}

.icon-camera-cover::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 40px;
    border: 3px solid #999;
    border-radius: 8px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-camera-cover::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid #999;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-camera-small {
    width: 20px;
    height: 20px;
    display: block;
    position: relative;
}

.icon-camera-small::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 14px;
    border: 2px solid white;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-camera-small::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border: 2px solid white;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.moments-user-info {
    position: absolute;
    bottom: -15px;
    right: 16px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 12px;
    z-index: 10;
}

.moments-avatar {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    background: #f8f8f8;
    border: 2px solid rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

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

.moments-avatar.has-image .avatar-icon-wechat {
    display: none;
}

/* 微信统一头像图标 */
.avatar-icon-wechat {
    width: 28px;
    height: 28px;
    position: relative;
    display: inline-block;
    opacity: 0.4;
}

.avatar-icon-wechat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 13px;
    height: 13px;
    border: 2px solid #999;
    border-radius: 50%;
}

.avatar-icon-wechat::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 11px;
    border: 2px solid #999;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    border-top: none;
}

.moments-username {
    color: white;
    font-size: 16px;
    font-weight: 500;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-bottom: 4px;
}

.moments-signature {
    position: absolute;
    bottom: -38px;
    right: 16px;
    color: #999;
    font-size: 11px;
    max-width: calc(100% - 120px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    z-index: 10;
}

.moments-content {
    padding-top: 30px;
    position: relative;
    overflow: hidden;
}

.moments-weather-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.moments-snowflake {
    position: absolute;
    top: -20px;
    color: #999;
    animation: moments-snowflake-fall linear infinite;
    text-shadow: 0 0 3px rgba(153, 153, 153, 0.4);
    pointer-events: none;
    opacity: 0.9;
}

@keyframes moments-snowflake-fall {
    0% {
        transform: translateY(-20px) translateX(0) rotate(0deg);
        opacity: 0;
    }
    5% {
        opacity: 0.9;
    }
    92% {
        opacity: 0.9;
    }
    100% {
        transform: translateY(calc(100vh - 94px)) translateX(120px) rotate(360deg);
        opacity: 0;
    }
}

.moments-list {
    padding-bottom: 20px;
    position: relative;
    z-index: 2;
}

/* 朋友圈动态项 */
.moment-item {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    margin: 16px 12px;
    background: rgba(248, 248, 248, 0.10);
    backdrop-filter: blur(8px);
    border: 1px dashed #d0d0d0;
    border-radius: 8px;
}

.moment-avatar {
    width: 42px;
    height: 42px;
    border-radius: 4px;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

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

.moment-avatar .avatar-icon-wechat {
    width: 20px;
    height: 20px;
}

.moment-avatar .avatar-icon-wechat::before {
    width: 9px;
    height: 9px;
}

.moment-avatar .avatar-icon-wechat::after {
    width: 16px;
    height: 8px;
}

.moment-content {
    flex: 1;
    min-width: 0;
}

.moment-username {
    font-size: 15px;
    color: #a8909e;
    font-weight: 500;
    margin-bottom: 4px;
    cursor: pointer;
}

.moment-text {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 8px;
    word-wrap: break-word;
}

.moment-images {
    display: grid;
    gap: 6px;
    margin-bottom: 8px;
}

.moment-images.single {
    grid-template-columns: 1fr;
    max-width: 200px;
}

.moment-images.double {
    grid-template-columns: repeat(2, 1fr);
    max-width: 240px;
}

.moment-images.multi {
    grid-template-columns: repeat(3, 1fr);
    max-width: 270px;
}

.moment-image {
    width: 100%;
    aspect-ratio: 1;
    background: #fafafa;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #e8e8e8;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.moment-image:hover {
    border-color: #d0d0d0;
    background: #f5f5f5;
}

.moment-image-text {
    background: #f0f0f0;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.moment-image-text-content {
    display: none;
}

.moment-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.moment-image:active {
    transform: scale(0.96);
}

.moment-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #999;
    margin-top: 8px;
}

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

.moment-actions {
    display: flex;
    gap: 0;
    align-items: center;
}

.moment-action-btn {
    background: none;
    border: 1px dashed #d0d0d0;
    border-radius: 4px;
    color: #999;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-right: -1px;
    position: relative;
}

.moment-action-btn:last-child {
    margin-right: 0;
}

.moment-action-btn:hover {
    background: #f5f5f5;
    border-color: #a8909e;
    border-style: solid;
}

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

/* 朋友圈卡片弹窗 */
.moment-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
}

.moment-modal.active {
    display: flex;
}

/* 朋友圈操作菜单 */
.moment-action-list {
    border-bottom: 8px solid #f0f0f0;
}

.moment-action-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    font-size: 15px;
    color: #333;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
}

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

.moment-action-item:active {
    background: #e8e8e8;
}

.moment-action-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
}

.moment-action-danger {
    color: #e74c3c;
}

.moment-action-cancel {
    justify-content: center;
    font-size: 15px;
    color: #666;
    border-bottom: none;
}

/* 批量选择模式 */
.moment-item.batch-selectable {
    position: relative;
    padding-left: 40px;
}

.moment-item.batch-selectable::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 20px;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
}

.moment-item.batch-selected::before {
    background: #07c160;
    border-color: #07c160;
}

.moment-item.batch-selected::after {
    content: '✓';
    position: absolute;
    left: 14px;
    top: 18px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
}

/* 批量操作栏 */
.moment-batch-toolbar {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    padding: 10px 16px;
    z-index: 100;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
}

.batch-toolbar-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.batch-select-all-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.batch-select-all-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #07c160;
}

.batch-count {
    font-size: 13px;
    color: #999;
}

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

.batch-btn {
    flex: 1;
    padding: 10px 0;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

.batch-btn-append {
    background: #f5b0c4;
    color: #fff;
}

.batch-btn-regenerate {
    background: #d4b8c1;
    color: #fff;
}

.batch-btn-cancel {
    background: #f5f5f5;
    color: #666;
    flex: 0.6;
}

.batch-btn:active {
    opacity: 0.8;
}

.moment-modal .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
    pointer-events: none;
}

.visibility-option {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 14px;
    color: #333;
}

.visibility-option:last-child {
    border-bottom: none;
}

.visibility-option:hover {
    background: #f5f5f5;
}

.visibility-option:active {
    background: #e8e8e8;
}

/* 朋友圈点赞评论区域 */
.moment-interactions {
    margin-top: 6px;
    background: #f5f5f5;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 12px;
}

.moment-likes {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #a8909e;
    line-height: 1.5;
}

.moment-likes-icon {
    font-size: 14px;
    color: #a8909e;
    flex-shrink: 0;
}

.moment-likes-list {
    flex: 1;
    word-break: break-all;
}

.moment-comments {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #e8e8e8;
}

.moment-likes + .moment-comments {
    border-top: 1px solid #e8e8e8;
}

.moment-comment-item {
    color: #333;
    line-height: 1.5;
    margin-bottom: 2px;
}

.moment-comment-item:last-child {
    margin-bottom: 0;
}

.moment-comment-reply {
    color: #a8909e;
    cursor: pointer;
    font-size: 12px;
    margin-left: 4px;
}

.moment-comment-author {
    color: #a8909e;
    font-weight: 500;
}

.moment-comment-content {
    color: #333;
}

/* 点赞图标 - 封闭爱心线条 */
/* 点赞图标 - 单个灰色爱心 */
.icon-like {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-like::before {
    content: '❤';
    font-size: 16px;
    color: #999;
    line-height: 1;
    transform: translateY(-1px);
}

.moment-action-btn:hover .icon-like::before {
    color: #a8909e;
}

/* 已点赞状态 */
.moment-action-btn.liked .icon-like::before {
    color: #e74c3c;
}

/* 评论图标 - 简约线条风 */
.icon-comment {
    width: 18px;
    height: 18px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-comment::before {
    content: '';
    position: absolute;
    width: 13px;
    height: 10px;
    border: 1.5px solid #999;
    border-radius: 2px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%);
}

.icon-comment::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #999;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 80%);
}

.moment-action-btn:hover .icon-comment::before {
    border-color: #a8909e;
}

.moment-action-btn:hover .icon-comment::after {
    border-top-color: #a8909e;
}

/* 转发图标 - 简约线条风 */
.icon-share {
    width: 18px;
    height: 18px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-share::before {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid #999;
    border-right: 1.5px solid #999;
    transform: translate(-50%, -50%) rotate(-45deg);
    left: 50%;
    top: 40%;
}

.icon-share::after {
    content: '';
    position: absolute;
    width: 1.5px;
    height: 9px;
    background: #999;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -30%);
}

.moment-action-btn:hover .icon-share::before {
    border-color: #a8909e;
}

.moment-action-btn:hover .icon-share::after {
    background: #a8909e;
}

/* 分组可见图标 - 简约线条风 */
.icon-visibility {
    width: 18px;
    height: 18px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 人形头部 */
.icon-visibility::before {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    border: 1.5px solid #999;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -130%);
}

/* 人形身体 */
.icon-visibility::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 6px;
    border: 1.5px solid #999;
    border-radius: 0 0 6px 6px;
    border-top: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 0%);
}

.moment-action-btn:hover .icon-visibility::before,
.moment-action-btn:hover .icon-visibility::after {
    border-color: #a8909e;
}

.moment-action-btn:active {
    color: #666;
}

.moment-image {
    aspect-ratio: 1;
    background: #f0f0f0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.moment-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.moment-time {
    font-size: 13px;
    color: #b3b3b3;
}

.moment-actions {
    display: flex;
    gap: 12px;
}

.moment-action {
    font-size: 13px;
    color: #576b95;
    cursor: pointer;
}

.moment-comments {
    margin-top: 8px;
    padding: 8px 12px;
    background: #f7f7f7;
    border-radius: 4px;
}

.moment-comment {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 4px;
}

.moment-comment:last-child {
    margin-bottom: 0;
}

.comment-user {
    color: #576b95;
    font-weight: 500;
}

.comment-text {
    color: #333;
}

/* 我的页面 */
.me-profile {
    background: white;
    margin-bottom: 16px;
}

.me-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.me-avatar {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    flex-shrink: 0;
}

.me-info {
    flex: 1;
}

.me-name {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin-bottom: 6px;
}

.me-id {
    font-size: 13px;
    color: #b3b3b3;
}

.me-qr {
    font-size: 24px;
    cursor: pointer;
}

.me-list {
    background: white;
}

.me-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.me-item:active {
    background: #f5f5f5;
}

.me-icon {
    font-size: 24px;
    width: 28px;
    text-align: center;
}

.me-label {
    font-size: 15px;
    color: #333;
}

/* 微信底部导航 */
/* 发朋友圈弹窗 */
.post-moment-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

.post-moment-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.post-moment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 44px 16px 12px 16px;
    background: #f7f7f7;
    border-bottom: 1px solid #e0e0e0;
}

.post-moment-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    color: #000;
}

.post-moment-cancel,
.post-moment-send {
    background: none;
    border: none;
    color: #576b95;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
}

.post-moment-send {
    color: #999;
    font-weight: 500;
}

.post-moment-body {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

.post-moment-textarea {
    width: 100%;
    min-height: 150px;
    border: 1px dashed #d0d0d0;
    background: rgba(248, 248, 248, 0.5);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 12px;
    font-size: 16px;
    resize: none;
    outline: none;
    margin-bottom: 16px;
}

.post-moment-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.post-moment-image-item {
    position: relative;
    width: 100%;
    padding-top: 100%;
    background: #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
}

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

.post-moment-image-item .image-text-desc {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 12px;
    text-align: center;
    word-break: break-word;
}

.post-moment-image-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    z-index: 2;
}

.post-moment-add-image {
    margin-top: 8px;
}

.add-image-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(248, 248, 248, 0.5);
    backdrop-filter: blur(8px);
    border: 1px dashed #d0d0d0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-image-btn:hover {
    border-color: #07c160;
    background: rgba(240, 249, 244, 0.6);
}

.add-image-btn svg {
    color: #999;
}

.add-image-btn span {
    color: #666;
    font-size: 14px;
}

/* 图片来源选择弹窗 */
.image-source-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-source-content {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    width: 80%;
    max-width: 320px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.image-source-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid rgba(224, 224, 224, 0.5);
}

.image-source-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
}

.image-source-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}

.image-source-options {
    display: flex;
    padding: 24px 16px;
    gap: 16px;
}

.image-source-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 12px;
    background: #f5f5f5;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.image-source-option:hover {
    background: #e8e8e8;
}

.image-source-option svg {
    color: #576b95;
}

.image-source-option span {
    font-size: 14px;
    color: #333;
}

/* 文字描述图片弹窗 */
.text-image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.text-image-content {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalFadeIn 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

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

.text-image-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid rgba(224, 224, 224, 0.5);
}

.text-image-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
}

.text-image-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
}

.text-image-body {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

.text-image-textarea {
    width: 100%;
    min-height: 150px;
    border: 1px dashed #d0d0d0;
    background: rgba(248, 248, 248, 0.5);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 12px;
    font-size: 16px;
    resize: vertical;
    outline: none;
}

.text-image-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid rgba(224, 224, 224, 0.5);
}

.text-image-cancel,
.text-image-confirm {
    padding: 8px 24px;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.text-image-cancel {
    background: #f5f5f5;
    color: #666;
}

.text-image-cancel:hover {
    background: #e8e8e8;
}

.text-image-confirm {
    background: #999;
    color: white;
    font-weight: 500;
}

.text-image-confirm:hover {
    background: #888;
}

/* 分组可见性选择器 */
.post-moment-visibility,
.post-moment-location {
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(248, 248, 248, 0.5);
    backdrop-filter: blur(8px);
    border: 1px dashed #d0d0d0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.visibility-label,
.location-label {
    font-size: 14px;
    color: #666;
}

.visibility-selector,
.location-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.visibility-selector:hover,
.location-selector:hover {
    background: rgba(0, 0, 0, 0.05);
}

.visibility-selector svg,
.location-selector svg {
    color: #999;
}

.visibility-selector span,
.location-selector span {
    font-size: 14px;
    color: #333;
}

/* 分组选择弹窗 */
.visibility-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.visibility-modal-content {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    max-height: 60vh;
    overflow: hidden;
    animation: modalFadeIn 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

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

.visibility-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid rgba(224, 224, 224, 0.5);
}

.visibility-modal-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
}

.visibility-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}

.visibility-modal-body {
    padding: 8px 0;
}

.visibility-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.visibility-option:hover {
    background: #f5f5f5;
}

.option-avatar {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.visibility-option span {
    font-size: 16px;
    color: #333;
    flex: 1;
}

.visibility-check {
    font-size: 18px;
    color: #999;
    font-weight: bold;
}

.visibility-option-divider,
.location-option-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 8px 0;
}

.visibility-option.new-group,
.location-option.custom {
    color: #576b95;
}

.visibility-option.new-group svg,
.location-option.custom svg {
    color: #576b95;
}

/* 自定义位置弹窗 */
.custom-location-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10003;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.custom-location-content {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    animation: modalFadeIn 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.custom-location-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid rgba(224, 224, 224, 0.5);
}

.custom-location-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
}

.custom-location-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
}

.custom-location-body {
    padding: 16px;
}

.custom-location-input {
    width: 100%;
    padding: 12px;
    border: 1px dashed #d0d0d0;
    background: rgba(248, 248, 248, 0.5);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    font-size: 16px;
    outline: none;
}

.custom-location-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid rgba(224, 224, 224, 0.5);
}

.custom-location-cancel,
.custom-location-confirm {
    padding: 8px 24px;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.custom-location-cancel {
    background: #f5f5f5;
    color: #666;
}

.custom-location-cancel:hover {
    background: #e8e8e8;
}

.custom-location-confirm {
    background: #999;
    color: white;
    font-weight: 500;
}

.custom-location-confirm:hover {
    background: #888;
}

/* 新建分组弹窗 */
.new-group-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10003;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.new-group-content {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalFadeIn 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.new-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid rgba(224, 224, 224, 0.5);
}

.new-group-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
}

.new-group-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
}

.new-group-body {
    flex: 1;
    overflow-y: auto;
    background: rgba(247, 247, 247, 0.3);
}

.new-group-name-section {
    padding: 16px;
    background: rgba(255, 255, 255, 0.5);
}

.new-group-input {
    width: 100%;
    padding: 12px;
    border: 1px dashed #d0d0d0;
    background: rgba(248, 248, 248, 0.5);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    font-size: 16px;
    outline: none;
}

.new-group-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid rgba(224, 224, 224, 0.5);
    background: rgba(255, 255, 255, 0.3);
}

.new-group-cancel,
.new-group-confirm {
    padding: 8px 24px;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.new-group-cancel {
    background: #f5f5f5;
    color: #666;
}

.new-group-cancel:hover {
    background: #e8e8e8;
}

.new-group-confirm {
    background: #999;
    color: white;
    font-weight: 500;
}

.new-group-confirm:hover {
    background: #888;
}

.new-group-contacts-section {
    margin-top: 12px;
}

.new-group-section-title {
    padding: 12px 16px;
    font-size: 14px;
    color: #999;
    background: rgba(247, 247, 247, 0.3);
}

.new-group-contacts-list {
    background: rgba(255, 255, 255, 0.5);
}

.contact-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
}

.contact-item:hover {
    background: #f5f5f5;
}

.contact-checkbox {
    margin-right: 12px;
}

.contact-check {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #999;
}

.contact-info {
    flex: 1;
}

.contact-name {
    font-size: 16px;
    color: #333;
}

.no-contacts {
    padding: 60px 20px;
    text-align: center;
    color: #999;
    font-size: 14px;
}

/* 朋友圈分组设置弹窗 */
.moment-group-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10004;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.moment-group-content {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalFadeIn 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.moment-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid rgba(224, 224, 224, 0.5);
}

.moment-group-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
}

.moment-group-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
}

.moment-group-body {
    flex: 1;
    overflow-y: auto;
    background: rgba(247, 247, 247, 0.3);
}

.moment-group-section {
    margin-bottom: 12px;
}

.moment-group-section-title {
    padding: 12px 16px;
    font-size: 14px;
    color: #999;
    background: rgba(247, 247, 247, 0.3);
}

.moment-group-list,
.moment-contacts-list {
    background: rgba(255, 255, 255, 0.5);
}

.moment-group-item,
.moment-contact-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(240, 240, 240, 0.5);
    transition: all 0.2s ease;
    cursor: pointer;
}

.moment-group-item:hover,
.moment-contact-item:hover {
    background: rgba(245, 245, 245, 0.8);
}

.moment-group-item-checkbox,
.moment-contact-checkbox {
    margin-right: 12px;
}

.moment-group-check,
.moment-contact-check {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #999;
}

.moment-group-item-info,
.moment-contact-info {
    flex: 1;
}

.moment-group-item-name,
.moment-contact-name {
    font-size: 16px;
    color: #333;
}

.moment-group-item-count {
    font-size: 13px;
    color: #999;
    margin-top: 2px;
}

.moment-group-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid rgba(224, 224, 224, 0.5);
    background: rgba(255, 255, 255, 0.3);
}

.moment-group-cancel,
.moment-group-confirm {
    padding: 8px 24px;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.moment-group-cancel {
    background: #f5f5f5;
    color: #666;
}

.moment-group-cancel:hover {
    background: #e8e8e8;
}

.moment-group-confirm {
    background: #999;
    color: white;
    font-weight: 500;
}

.moment-group-confirm:hover {
    background: #888;
}

.visibility-option:not(.active) .visibility-check {
    display: none;
}

.wechat-tabbar {
    display: flex;
    background: #f7f7f7;
    border-top: 1px solid #e8e8e8;
    padding: 4px 0 8px 0;
    flex-shrink: 0;
}

.wechat-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wechat-tab-icon {
    font-size: 24px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wechat-tab.active .wechat-tab-icon {
    opacity: 1;
}

.wechat-tab-label {
    font-size: 10px;
    color: #999;
    transition: color 0.2s ease;
}

.wechat-tab.active .wechat-tab-label {
    color: #333;
}

.wechat-tab:active {
    transform: scale(0.95);
}

/* 夜间模式 */
.phone-frame.night-mode .wechat-add-btn {
    color: #e8e8e8;
}

.phone-frame.night-mode .wechat-main,
.phone-frame.night-mode .chat-list,
.phone-frame.night-mode .contacts-list,
.phone-frame.night-mode .moments-list,
.phone-frame.night-mode .me-profile,
.phone-frame.night-mode .me-list {
    background: #1c1c1e;
}

.phone-frame.night-mode .chat-item,
.phone-frame.night-mode .contact-item,
.phone-frame.night-mode .me-header {
    background: #1c1c1e;
    border-bottom-color: #2c2c2e;
}

.phone-frame.night-mode .chat-item:active,
.phone-frame.night-mode .contact-item:active,
.phone-frame.night-mode .me-item:active {
    background: #2c2c2e;
}

.phone-frame.night-mode .chat-name,
.phone-frame.night-mode .contact-name,
.phone-frame.night-mode .moment-text,
.phone-frame.night-mode .comment-text,
.phone-frame.night-mode .me-name,
.phone-frame.night-mode .me-label {
    color: #e8e8e8;
}

.phone-frame.night-mode .chat-avatar,
.phone-frame.night-mode .contact-icon,
.phone-frame.night-mode .moment-avatar {
    background: #2c2c2e;
}

/* contact-avatar保持渐变色 */
.phone-frame.night-mode .contact-avatar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.phone-frame.night-mode .moment-image {
    background: #2c2c2e;
}

.phone-frame.night-mode .moment-comments {
    background: #2c2c2e;
}

.phone-frame.night-mode .wechat-tabbar {
    background: #1c1c1e;
    border-top-color: #2c2c2e;
}

.phone-frame.night-mode .contact-section-title {
    background: #000;
    color: #666;
}

/* AI聊天页 */
.ai-chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #f5f5f5;
}

.ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ai-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    height: 100%;
}

.welcome-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.ai-welcome h3 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
}

.ai-welcome p {
    font-size: 14px;
    color: #666;
    margin: 4px 0;
}

.welcome-hint {
    font-size: 12px;
    color: #999;
    margin-top: 16px !important;
}

.ai-message {
    display: flex;
    gap: 10px;
    animation: messageSlideIn 0.3s ease;
}

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

.ai-message.user {
    flex-direction: row-reverse;
}

.ai-message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.ai-message.user .ai-message-avatar {
    background: #95ec69;
}

.ai-message.assistant .ai-message-avatar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.ai-message-bubble {
    max-width: 70%;
    padding: 0.4em 1em;
    border-radius: 0.9em;
    font-size: 13px;
    line-height: 1.4;
    word-wrap: break-word;
}

.ai-message.user .ai-message-bubble {
    background: rgba(220, 200, 210, 0.45);
    color: #222;
    border-radius: 0.9em 0.15em 0.9em 0.9em;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 
        0 0.3em 0.9em rgba(0, 0, 0, 0.1),
        0 0.15em 0.3em rgba(0, 0, 0, 0.08),
        inset 0 0.08em 0.15em rgba(255, 255, 255, 0.5),
        inset 0 -0.08em 0.15em rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.ai-message.assistant .ai-message-bubble {
    background: rgba(160, 160, 160, 0.4);
    color: #222;
    border-radius: 0.15em 0.9em 0.9em 0.9em;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 
        0 0.3em 0.9em rgba(0, 0, 0, 0.1),
        0 0.15em 0.3em rgba(0, 0, 0, 0.08),
        inset 0 0.08em 0.15em rgba(255, 255, 255, 0.5),
        inset 0 -0.08em 0.15em rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.ai-message-bubble.typing {
    display: flex;
    gap: 0.3em;
    padding: 0.5em 1.2em;
}

.typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #999;
    animation: typingDot 1.4s infinite;
}

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

.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingDot {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

.ai-input-area {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: white;
    border-top: 1px solid #e0e0e0;
}

.ai-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
}

.ai-input:focus {
    border-color: #667eea;
    background: #fafafa;
}

.ai-input:disabled {
    background: #f5f5f5;
    color: #999;
}

.ai-send-btn {
    padding: 10px 20px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-send-btn:hover:not(:disabled) {
    background: #5568d3;
}

.ai-send-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.ai-send-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.ai-error {
    text-align: center;
    padding: 12px;
    background: #ffebee;
    color: #c62828;
    border-radius: 8px;
    font-size: 13px;
}

/* 漂流瓶页 */
.driftbottle-content {
    display: flex;
    flex-direction: column;
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    background: #fafafa;
    gap: 20px;
}

/* App内海洋动画场景 - 海洋与粉色沙滩 */
.app-ocean-scene {
    height: 220px;
    flex-shrink: 0;
    background: linear-gradient(180deg,
        #EDF4F7 0%,
        #D8E5EC 20%,
        #C5D8E2 40%,
        #F5DEE3 60%,
        #FCDDE5 80%,
        #FFE5ED 100%
    );
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(130, 140, 150, 0.12);
}

/* 粉色沙滩层 */
.app-ocean-scene::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255, 220, 230, 0.25) 20%,
        rgba(255, 205, 220, 0.45) 50%,
        rgba(255, 215, 230, 0.6) 100%
    );
    pointer-events: none;
}

/* 月亮 */
.app-moon {
    position: absolute;
    top: 20%;
    right: 15%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 35% 35%,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 252, 245, 0.9) 25%,
        rgba(255, 250, 240, 0.85) 50%,
        rgba(250, 248, 240, 0.75) 75%,
        rgba(245, 245, 240, 0.65) 100%
    );
    box-shadow: 
        0 0 20px rgba(255, 255, 255, 0.4),
        0 0 40px rgba(255, 252, 235, 0.25),
        inset -5px -5px 15px rgba(230, 230, 225, 0.2);
    opacity: 0.9;
    z-index: 3;
}

/* 雾气效果 */
.app-ocean-scene::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: radial-gradient(
        ellipse at 50% 30%,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.15) 40%,
        transparent 70%
    );
    pointer-events: none;
}

/* App内波浪动画 - 灰白柔和，位于海洋与沙滩交界 */
.app-wave {
    position: absolute;
    bottom: 30%;
    left: 0;
    width: 200%;
    height: 60px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"><path d="M0,60 C150,90 350,30 600,60 C850,90 1050,30 1200,60 L1200,120 L0,120 Z" fill="%23ffffff" fill-opacity="0.35"/></svg>');
    background-size: 600px 60px;
    animation: app-wave-move 12s linear infinite;
    z-index: 5;
}

.app-wave-1 {
    bottom: 30%;
    opacity: 0.4;
    animation-duration: 12s;
}

.app-wave-2 {
    bottom: 32%;
    opacity: 0.3;
    animation-duration: 15s;
    animation-delay: -3s;
}

.app-wave-3 {
    bottom: 34%;
    opacity: 0.2;
    animation-duration: 18s;
    animation-delay: -6s;
}

@keyframes app-wave-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(-600px); }
}

/* 雪花飘落动画 */
.app-snowflake {
    position: absolute;
    top: -20px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    animation: app-snowfall linear infinite;
    pointer-events: none;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

.app-snow-1 { left: 10%; animation-duration: 8s; animation-delay: 0s; font-size: 16px; }
.app-snow-2 { left: 20%; animation-duration: 10s; animation-delay: 1s; font-size: 12px; }
.app-snow-3 { left: 30%; animation-duration: 12s; animation-delay: 2s; font-size: 14px; }
.app-snow-4 { left: 40%; animation-duration: 9s; animation-delay: 0.5s; font-size: 10px; }
.app-snow-5 { left: 50%; animation-duration: 11s; animation-delay: 1.5s; font-size: 13px; }
.app-snow-6 { left: 60%; animation-duration: 13s; animation-delay: 2.5s; font-size: 15px; }
.app-snow-7 { left: 70%; animation-duration: 10s; animation-delay: 0.8s; font-size: 11px; }
.app-snow-8 { left: 80%; animation-duration: 12s; animation-delay: 1.8s; font-size: 14px; }
.app-snow-9 { left: 15%; animation-duration: 14s; animation-delay: 3s; font-size: 12px; }
.app-snow-10 { left: 85%; animation-duration: 11s; animation-delay: 2.2s; font-size: 13px; }
.app-snow-11 { left: 25%; animation-duration: 9s; animation-delay: 0.3s; font-size: 10px; }
.app-snow-12 { left: 90%; animation-duration: 13s; animation-delay: 2.8s; font-size: 15px; }

@keyframes app-snowfall {
    0% {
        transform: translateY(-20px) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(240px) translateX(30px) rotate(360deg);
        opacity: 0;
    }
}

/* 沙滩装饰雪花 - 静态分布 */
.app-beach-snow {
    position: absolute;
    color: rgba(255, 255, 255, 0.7);
    pointer-events: none;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
    z-index: 8;
}

.app-beach-snow-1 { bottom: 15%; left: 12%; font-size: 18px; opacity: 0.8; }
.app-beach-snow-2 { bottom: 8%; left: 28%; font-size: 14px; opacity: 0.6; }
.app-beach-snow-3 { bottom: 22%; left: 45%; font-size: 20px; opacity: 0.7; }
.app-beach-snow-4 { bottom: 12%; left: 58%; font-size: 12px; opacity: 0.65; }
.app-beach-snow-5 { bottom: 18%; left: 72%; font-size: 16px; opacity: 0.75; }
.app-beach-snow-6 { bottom: 10%; left: 85%; font-size: 15px; opacity: 0.7; }
.app-beach-snow-7 { bottom: 25%; left: 35%; font-size: 13px; opacity: 0.6; }
.app-beach-snow-8 { bottom: 6%; left: 65%; font-size: 22px; opacity: 0.8; }

/* A3 占位场景底色（步骤1：验证切换/加权；步骤2精修美术替换） */
/* ===== 提问·雾 ===== */
.app-ocean-scene.scene-question { background: linear-gradient(180deg, #b9bec4 0%, #cdd1d5 55%, #dde0e2 100%); }
.app-ocean-scene.scene-question .app-moon,
.app-ocean-scene.scene-question .app-wave,
.app-ocean-scene.scene-question .app-snowflake,
.app-ocean-scene.scene-question .app-beach-snow { display: none; }
.app-ocean-scene.scene-question::before,
.app-ocean-scene.scene-question::after { display: none; }
.app-ocean-scene.scene-question .app-mist,
.app-ocean-scene.scene-question .app-qrain,
.app-ocean-scene.scene-question .app-qpath { display: block; }
/* 天空雾团：复用主页 .rain-mist-cloud（正圆 + blur + 浮动，与主页同款） */
.app-mist { display: none; z-index: 1; }
.app-mist-1 { width: 120px; height: 120px; top: 4%;  left: -6%; animation-duration: 8s; }
.app-mist-2 { width: 150px; height: 150px; top: 12%; left: 44%; animation-duration: 9s; animation-delay: -3s; }
.app-mist-3 { width: 100px; height: 100px; top: -4%; left: 66%; animation-duration: 7s; animation-delay: -6s; }
/* 小雨：斜向细条纹背景纯竖向下滚，无缝 */
.app-qrain {
    display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 5;
    background-image: linear-gradient(105deg, transparent 46%, rgba(150,160,170,.22) 50%, transparent 54%);
    background-size: 20px 24px;
    animation: app-qrain-fall .6s linear infinite;
}
@keyframes app-qrain-fall { from { background-position: 0 0; } to { background-position: 0 24px; } }
/* 蜿蜒小路（SVG 弯路，远端渐隐入雾） */
.app-qpath { display: none; position: absolute; left: 0; bottom: 0; width: 100%; height: 62%; z-index: 2; }
.app-ocean-scene.scene-story    { background: linear-gradient(180deg, #ffd9a8 0%, #ff9e7d 50%, #c98aa8 100%); }
.app-ocean-scene.scene-time     { background: linear-gradient(180deg, #0a0e1a 0%, #1a2236 100%); }
.app-ocean-scene.scene-keepsake { background: linear-gradient(180deg, #0d1030 0%, #1a1f4a 100%); }

/* App内漂浮的瓶子 - 冷色调 */
.app-floating-bottle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 60px;
    animation: app-bottle-float 6s ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(107, 123, 149, 0.3));
    z-index: 10;
}

@keyframes app-bottle-float {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(-5deg);
    }
    50% {
        transform: translate(-50%, -60%) rotate(5deg);
    }
}

.app-bottle-body {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 40px;
    background: linear-gradient(135deg, 
        rgba(232, 238, 242, 0.85) 0%, 
        rgba(176, 196, 222, 0.75) 50%,
        rgba(143, 163, 193, 0.65) 100%
    );
    border-radius: 8px 8px 12px 12px;
    box-shadow: inset 2px 2px 8px rgba(255, 255, 255, 0.5),
                inset -2px -2px 8px rgba(107, 123, 149, 0.2),
                0 4px 8px rgba(107, 123, 149, 0.25);
}

.app-bottle-body::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 4px;
    width: 4px;
    height: 20px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.7), transparent);
    border-radius: 2px;
}

.app-bottle-neck {
    position: absolute;
    bottom: 38px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 15px;
    background: linear-gradient(135deg, 
        rgba(232, 238, 242, 0.8) 0%, 
        rgba(176, 196, 222, 0.7) 100%
    );
    border-radius: 2px 2px 0 0;
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.5),
                0 2px 4px rgba(107, 123, 149, 0.2);
}

.app-bottle-cap {
    position: absolute;
    bottom: 53px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 8px;
    background: linear-gradient(135deg, #8FA3C1 0%, #6B7B95 100%);
    border-radius: 4px 4px 2px 2px;
    box-shadow: 0 2px 4px rgba(107, 123, 149, 0.4);
}

.app-bottle-cap::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 2px;
    background: rgba(107, 123, 149, 0.4);
    border-radius: 1px;
}

.bottle-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.action-card {
    background: white;
    border-radius: 16px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.action-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.action-card:active {
    transform: translateY(0);
}

.action-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 12px;
    background: white;
    border: 1px solid #d0d0d0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.icon-count {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    z-index: 2;
}

.icon-throw, .icon-pick {
    width: 30px;
    height: 30px;
    position: relative;
    display: inline-block;
}

/* 投放图标 */
.icon-throw::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 18px;
    border: 2px solid white;
    border-radius: 2px 2px 4px 4px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(15deg);
}

.icon-throw::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 2px;
    background: white;
    top: 30%;
    right: 20%;
    transform: rotate(15deg);
    border-radius: 1px;
    box-shadow: 2px -2px 0 0 white, 4px -4px 0 0 white;
}

/* 捡拾图标 */
.icon-pick::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid white;
    border-radius: 50%;
    bottom: 30%;
    left: 50%;
    transform: translateX(-50%);
}

.icon-pick::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 12px;
    background: white;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 1px;
}

.action-card h3 {
    font-size: 16px;
    margin: 0 0 8px 0;
    color: #333;
}

.action-card p {
    font-size: 12px;
    margin: 0;
    color: #999;
    line-height: 1.4;
}

.my-bottles {
    background: white;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.section-title {
    font-size: 16px;
    margin: 0 0 16px 0;
    color: #333;
    font-weight: 600;
}

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

.bottle-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8f8f8;
    border-radius: 12px;
}

.bottle-mini-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #EDF4F7 0%, #F5DEE3 100%);
    border: 1px solid rgba(200, 220, 235, 0.5);
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.bottle-mini-icon svg { width: 22px; height: 22px; color: #7a90ad; }

/* 刷新按钮 */
.refresh-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    color: #333;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.refresh-btn:hover {
    opacity: 0.7;
}

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

.refresh-btn.spinning {
    animation: spin-refresh 1s linear infinite;
}

.refresh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@keyframes spin-refresh {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 回复标识 */
.reply-badge {
    color: #ff6b6b;
    font-weight: 500;
}

.bottle-info {
    flex: 1;
}

.bottle-preview {
    margin: 0 0 4px 0;
    font-size: 14px;
    color: #666;
}

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

/* 漂流瓶弹窗遮罩层 */
.bottle-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    pointer-events: none;
}

.bottle-modal-overlay.show {
    display: flex;
}

.bottle-modal-overlay.show .modal-content {
    pointer-events: auto;
    opacity: 1;
    transform: scale(1);
}

/* 动画瓶子 - 投放和捡拾时的临时元素 */
.app-bottle-anim {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    transform-origin: center center;
}

/* 复用主屏漂流瓶样式 */
.app-bottle-anim .bottle {
    position: relative;
    transform: rotate(-20deg) scale(2);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
}

.app-bottle-anim .bottle-body {
    width: 18px;
    height: 26px;
    border: 1.5px solid #999;
    border-radius: 3px 3px 6px 6px;
    position: relative;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.3) 0%, 
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%);
}

.app-bottle-anim .bottle-body::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 3px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 1px;
}

.app-bottle-anim .bottle-neck {
    width: 8px;
    height: 6px;
    border: 1.5px solid #999;
    border-bottom: none;
    border-radius: 2px 2px 0 0;
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.2);
}

.app-bottle-anim .bottle-cap {
    width: 10px;
    height: 3px;
    background: linear-gradient(180deg, #b8977d 0%, #a07855 100%);
    border-radius: 1.5px 1.5px 0 0;
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.2);
}

.app-bottle-anim .bottle-cap::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.app-bottle-anim .bottle-message {
    width: 8px;
    height: 12px;
    border: 1px solid #bbb;
    border-radius: 1px;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, 
        rgba(255, 248, 230, 0.8) 0%,
        rgba(255, 245, 220, 0.6) 100%);
    box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.05);
}

.app-bottle-anim .bottle-message::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 1.5px;
    width: 4px;
    height: 0.5px;
    background: #ddd;
    box-shadow: 
        0 2px 0 0 #ddd,
        0 4px 0 0 #ddd;
}

/* 投放动画：从底部中心 → 抛向远方海面 */
@keyframes bottle-throw {
    0% {
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%) scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        bottom: 60%;
        left: 70%;
        transform: translateX(-50%) scale(0.3) rotate(360deg);
        opacity: 0;
    }
}

/* 捡拾动画：从远方海面 → 飘到底部 */
@keyframes bottle-pickup {
    0% {
        bottom: 60%;
        left: 30%;
        transform: scale(0.3) rotate(0deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%) scale(1) rotate(360deg);
        opacity: 1;
    }
}

.app-bottle-anim.throwing {
    animation: bottle-throw 1.2s ease-out forwards;
}

.app-bottle-anim.picking {
    animation: bottle-pickup 1.2s ease-in forwards;
}

/* 选择弹窗（捡到瓶子后） */
.bottle-choice-modal {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    padding: 24px 20px 32px;
    border-radius: 20px 20px 0 0;
    z-index: 30;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.bottle-choice-modal.show {
    transform: translateY(0);
}

.choice-content {
    text-align: center;
}

.choice-content p {
    font-size: 16px;
    color: #333;
    margin: 0 0 20px 0;
    font-weight: 500;
}

.choice-btn {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 12px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.open-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.open-btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

.throwback-btn {
    background: #f5f5f5;
    color: #666;
}

.throwback-btn:active {
    transform: scale(0.98);
    background: #e8e8e8;
}

/* 信页样式内容弹窗 */
.bottle-letter-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 40px 20px;
}

.bottle-letter-modal.show {
    display: flex;
}

.letter-content {
    background-color: #fffafc;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13"><circle cx="2.5" cy="2.5" r="1" fill="%239699a1" fill-opacity="0.13"/></svg>');
    border-radius: 20px;
    width: 100%;
    max-width: 320px;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 12px 36px rgba(107, 123, 149, 0.22);
    position: relative;
    padding: 28px 24px 22px;
    animation: letterUnfold 0.4s ease;
}

@keyframes letterUnfold {
    0% {
        transform: scale(0.8) rotateX(-15deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotateX(0);
        opacity: 1;
    }
}

.letter-content::before { display: none; }

.letter-header {
    text-align: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.letter-icon {
    width: 44px;
    height: 5px;
    margin: 0 auto 14px;
    border-radius: 3px;
    background: linear-gradient(90deg, #C5D8E2 0%, #F5DEE3 55%, #FCDDE5 100%);
}

.letter-from {
    font-size: 13px;
    color: #8A96A8;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* 匿名颜色区分 */
.anonymous-normal {
    color: #3A4A5C;
}

.anonymous-contact {
    color: #6B7B95;
    cursor: pointer;
    transition: color 0.2s;
}

.anonymous-contact:hover {
    color: #4F5D75;
}

.anonymous-contact::after {
    content: '❓';
    font-size: 12px;
    margin-left: 4px;
    opacity: 0.6;
}

/* 往来对话线 */
.letter-replies {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #EEF1F4;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.replies-title {
    text-align: center;
    font-size: 11px;
    color: #A6AEBB;
    margin-bottom: 4px;
    letter-spacing: 1px;
}

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

.reply-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    line-height: 1.5;
    cursor: pointer;
}

.reply-from {
    font-size: 12px;
    color: #8B7355;
    font-weight: 500;
    margin-bottom: 5px;
}

.reply-content {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #3A4A5C;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-time {
    font-size: 11px;
    color: #B6BDC8;
    margin-top: 4px;
    text-align: right;
}

/* 漂流瓶回信：未读红点 + 单行细横条（点击展开） */
.bottle-unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff5a5f; margin-left: 6px; vertical-align: middle; }
.reply-item.reply-mine  { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(239,159,187,.55); }
.reply-item.reply-other { background: #fbf7f2; }
.reply-who { flex-shrink: 0; font-size: 11px; color: #8A96A8; }
.reply-item.expanded { align-items: flex-start; }
.reply-item.expanded .reply-content { white-space: pre-wrap; overflow: visible; text-overflow: clip; word-wrap: break-word; }

.letter-body {
    position: relative;
    z-index: 1;
    padding: 2px;
    margin-bottom: 6px;
}

.letter-text {
    font-size: 15px;
    line-height: 1.85;
    color: #3A4A5C;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.letter-footer {
    text-align: center;
    position: relative;
    z-index: 1;
}

.letter-reply-btn {
    padding: 9px 22px;
    background: #f7d3df;
    color: #9a536e;
    border: none;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
    margin-right: 8px;
}

.letter-reply-btn:active {
    transform: scale(0.95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.letter-keepsake { margin: 4px 0 10px; }
.letter-keepsake .bgm-title { white-space: normal; }
.letter-keepsake .voice-message-container { display: inline-block; background: #f3f4f6; border-radius: 12px; color: rgba(0, 0, 0, 0.65); }
.letter-keepsake .voice-message-container .voice-text { color: rgba(0, 0, 0, 0.82); border-top-color: rgba(0, 0, 0, 0.06); }
.letter-keepsake .keepsake-photo { max-width: 100%; border-radius: 10px; display: block; }
.letter-keepsake .keepsake-photo-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px; background: #f3f4f6; border: 1px dashed rgba(0, 0, 0, 0.18); border-radius: 12px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.letter-keepsake .keepsake-photo-placeholder .kp-icon { font-size: 28px; opacity: 0.65; }
.letter-keepsake .keepsake-photo-placeholder .kp-desc { font-size: 13px; color: rgba(0, 0, 0, 0.7); text-align: center; }
.letter-keepsake .keepsake-photo-placeholder .kp-hint { font-size: 11px; color: rgba(0, 0, 0, 0.4); }

.letter-close-btn {
    padding: 9px 24px;
    background: #fbe4ed;
    color: #a4768a;
    border: none;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
}

.letter-close-btn:active {
    transform: scale(0.95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* 删除确认弹窗 */
.bottle-delete-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bottle-delete-modal.show {
    opacity: 1;
}

.delete-modal-content {
    background: white;
    border-radius: 16px;
    padding: 24px;
    width: 85%;
    max-width: 280px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    animation: modalSlideUp 0.25s ease;
}

.delete-modal-text {
    font-size: 16px;
    color: #333;
    text-align: center;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.delete-modal-buttons {
    display: flex;
    gap: 12px;
}

.delete-modal-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cancel-btn {
    background: #f5f5f5;
    color: #666;
}

.cancel-btn:active {
    background: #e8e8e8;
    transform: scale(0.98);
}

.confirm-btn {
    background: #ff6b6b;
    color: white;
}

.confirm-btn:active {
    background: #ff5252;
    transform: scale(0.98);
}

/* ===== 查手机 App ===== */

/* 主页面 */
.fp-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    background: #f7f7f7;
}

.fp-tabs {
    display: flex;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    padding: 0 16px;
    flex-shrink: 0;
}

.fp-tab {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    font-size: 15px;
    color: #999;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.fp-tab.active {
    color: #333;
    font-weight: 600;
    border-bottom-color: #333;
}

.fp-tab-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* 联系人列表 */
.fp-contact-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background 0.15s;
}

.fp-contact-item:active {
    background: #f0f0f0;
}

.fp-contact-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    overflow: hidden;
}

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

.fp-contact-info {
    flex: 1;
    margin-left: 14px;
    min-width: 0;
}

.fp-contact-name {
    font-size: 16px;
    font-weight: 500;
    color: #222;
}

.fp-contact-status {
    font-size: 13px;
    color: #999;
    margin-top: 3px;
}

.fp-contact-arrow {
    color: #ccc;
    font-size: 18px;
    flex-shrink: 0;
}

/* 被查记录卡片 */
.fp-log-item {
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

.fp-log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.fp-log-who {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fp-log-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e8e8e8;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

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

.fp-log-name {
    font-size: 15px;
    font-weight: 500;
    color: #222;
}

.fp-log-time {
    font-size: 12px;
    color: #bbb;
}

.fp-log-detail {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

.fp-log-discovered {
    display: inline-block;
    font-size: 12px;
    color: #e74c3c;
    background: #fef0ef;
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 6px;
}

/* 空状态 */
.fp-empty {
    text-align: center;
    padding: 60px 20px;
    color: #bbb;
}

.fp-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.fp-empty-text {
    font-size: 14px;
}

/* 解锁页 */
.fp-unlock-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 40px 20px 30px;
    background: #fafafa;
}

.fp-unlock-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    overflow: hidden;
    margin-bottom: 12px;
}

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

.fp-unlock-name {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin-bottom: 24px;
}

.fp-unlock-hint {
    font-size: 14px;
    color: #999;
    margin-bottom: 20px;
    min-height: 20px;
}

.fp-unlock-hint.fp-hint-error {
    color: #e74c3c;
}

/* 密码点指示器 */
.fp-passcode-dots {
    display: flex;
    gap: 16px;
    margin-bottom: 36px;
}

.fp-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #ccc;
    background: transparent;
    transition: all 0.15s;
}

.fp-dot.fp-dot-filled {
    background: #333;
    border-color: #333;
}

/* 密码错误抖动动画 */
.fp-passcode-dots.fp-shake {
    animation: fpShake 0.4s ease;
}

@keyframes fpShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

/* 数字键盘 */
.fp-numpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 280px;
    width: 100%;
}

.fp-numpad-btn {
    width: 72px;
    height: 72px;
    border: none;
    border-radius: 50%;
    background: #fff;
    font-size: 28px;
    color: #222;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: background 0.1s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.fp-numpad-btn:active {
    background: #e5e5e5;
}

.fp-numpad-empty {
    background: transparent;
    box-shadow: none;
    cursor: default;
}

.fp-numpad-del {
    background: transparent;
    box-shadow: none;
    font-size: 22px;
    color: #666;
}

.fp-numpad-del:active {
    background: #f0f0f0;
}

.fp-attempts {
    margin-top: 20px;
    font-size: 13px;
    color: #bbb;
    min-height: 18px;
}

/* 对方手机桌面 */
.fp-desktop-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #fafafa;
    overflow-y: auto;
    padding-bottom: 20px;
}

/* 刷新按钮 */
.fp-refresh-btn {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    padding: 0;
}
.fp-refresh-btn:active {
    background: #f0f0f0;
}

/* 桌面4列网格 */
.fp-app-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px 10px;
    padding: 40px 20px 20px;
    justify-items: center;
}

.fp-app-item:last-child:nth-child(4n + 1) {
    grid-column: 2 / 4;
}

/* 末行恰好2个图标时（如10个App）居中：第1个落第2列，第2个落第3列 */
.fp-app-item:nth-child(4n + 1):nth-last-child(2) {
    grid-column: 2 / 3;
}
.fp-app-item:nth-child(4n + 1):nth-last-child(2) ~ .fp-app-item {
    grid-column: 3 / 4;
}

.fp-app-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.fp-app-item:active {
    transform: scale(0.92);
}

/* 图标盒 */
.fp-icon-box {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: white;
    border: 1.5px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s;
    position: relative;
}

.fp-icon-box.fp-has-badge::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    background: #ff3b30;
    border-radius: 50%;
    border: 2px solid white;
}

.fp-icon {
    width: 32px;
    height: 32px;
}

.fp-icon-label {
    font-size: 11px;
    color: #333;
    font-weight: 500;
    text-align: center;
}

/* 被发现风险条 */
.fp-risk-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 12px;
    margin-top: auto;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.fp-risk-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.fp-risk-text {
    font-size: 13px;
    color: #666;
    flex-shrink: 0;
}

#fp-risk-level {
    font-weight: 600;
}

.fp-risk-track {
    flex: 1;
    height: 6px;
    background: #eee;
    border-radius: 3px;
    overflow: hidden;
}

.fp-risk-fill {
    height: 100%;
    width: 15%;
    background: #999;
    border-radius: 3px;
    transition: width 0.5s, background 0.5s;
}

.fp-risk-fill.fp-risk-medium {
    background: #f39c12;
}

.fp-risk-fill.fp-risk-high {
    background: #e74c3c;
}

/* 维度详情页 */
.fp-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #f7f7f7;
}

/* 设置列表页 */
.fp-settings-body {
    padding: 10px 0;
}
.fp-settings-list {
    background: white;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
.fp-settings-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}
.fp-settings-item:last-child {
    border-bottom: none;
}
.fp-settings-item:active {
    background: #f5f5f5;
}
.fp-settings-icon {
    width: 28px;
    height: 28px;
    margin-right: 12px;
    flex-shrink: 0;
}
.fp-settings-icon svg {
    width: 100%;
    height: 100%;
}
.fp-settings-text {
    flex: 1;
    font-size: 15px;
    color: #333;
}
.fp-settings-arrow {
    color: #ccc;
    font-size: 18px;
}

/* 维度通用卡片 */
.fp-card {
    background: white;
    margin: 10px 16px;
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid #f0f0f0;
}
.fp-card-header {
    font-size: 13px;
    color: #999;
    margin-bottom: 10px;
    font-weight: 500;
}
.fp-record {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
}
.fp-record:last-child {
    border-bottom: none;
}
.fp-record-time {
    font-size: 12px;
    color: #999;
    min-width: 45px;
    flex-shrink: 0;
}
.fp-record-content {
    flex: 1;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}
.fp-record-meta {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}
.fp-record-deleted {
    opacity: 0.4;
    text-decoration: line-through;
}
.fp-amount-expense { color: #333; }
.fp-amount-income { color: #4CAF50; }
.fp-tag {
    display: inline-block;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 4px;
    background: #f5f5f5;
    color: #666;
    margin-left: 6px;
}

/* 生成加载overlay */
.fp-generating-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.fp-generating-icon {
    font-size: 48px;
    animation: fp-pulse 1.5s infinite;
}
.fp-generating-text {
    font-size: 16px;
    color: #333;
    margin-top: 16px;
}
.fp-generating-progress {
    font-size: 13px;
    color: #999;
    margin-top: 8px;
}
.fp-generating-bar {
    width: 200px;
    height: 4px;
    background: #eee;
    border-radius: 2px;
    margin-top: 12px;
    overflow: hidden;
}
.fp-generating-fill {
    height: 100%;
    background: #666;
    border-radius: 2px;
    transition: width 0.5s;
}
@keyframes fp-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
}

/* Toast 提示 */
.fp-toast {
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0,0,0,0.75);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}
.fp-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 维度内Tab */
.fp-dim-tabs {
    display: flex;
    gap: 0;
    background: white;
    border-radius: 10px;
    margin: 0 16px 10px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
}
.fp-dim-tab {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: 13px;
    color: #999;
    cursor: pointer;
    border-right: 1px solid #f0f0f0;
    transition: all 0.2s;
}
.fp-dim-tab:last-child {
    border-right: none;
}
.fp-dim-tab.active {
    color: #333;
    font-weight: 600;
    background: #f8f8f8;
}

/* 详情页通用列表条目（保留兼容） */
.fp-list-card {
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

.fp-list-card-title {
    font-size: 15px;
    font-weight: 500;
    color: #222;
    margin-bottom: 6px;
}

.fp-list-card-sub {
    font-size: 13px;
    color: #999;
}

.fp-list-card-body {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin-top: 8px;
}

/* 加载中状态 */
.fp-loading {
    text-align: center;
    padding: 40px 20px;
    color: #bbb;
    font-size: 14px;
}

.fp-loading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid #e5e5e5;
    border-top-color: #999;
    border-radius: 50%;
    animation: fpSpin 0.8s linear infinite;
    margin: 0 auto 12px;
}

@keyframes fpSpin {
    to { transform: rotate(360deg); }
}

/* 强制解锁面板 */
.fp-force-panel {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.fp-force-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 39px;
}

.fp-force-sheet {
    position: relative;
    z-index: 1;
    width: 100%;
    background: #fff;
    border-radius: 18px 18px 0 0;
    padding: 24px 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
    animation: fp-sheet-up 0.3s ease-out;
}

@keyframes fp-sheet-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.fp-force-title {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 18px;
}

.fp-force-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    background: #f5f5f5;
    font-size: 15px;
    color: #333;
    cursor: pointer;
    margin-bottom: 10px;
    text-align: left;
}

.fp-force-btn:active {
    background: #eaeaea;
}

.fp-force-btn small {
    color: #999;
    font-size: 12px;
    margin-left: auto;
}

.fp-force-bypass {
    background: #fff3f3;
    color: #e74c3c;
}

.fp-force-bypass:active {
    background: #ffe8e8;
}

.fp-force-warn {
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.fp-force-quit {
    color: #999;
}

/* 强制解锁遮罩 */
.fp-bypass-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 39px;
}

.fp-bypass-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: fpSpin 0.8s linear infinite;
    margin-bottom: 16px;
}

.fp-bypass-text {
    color: #fff;
    font-size: 15px;
}

/* 被发现遮罩 */
.fp-discovered-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 245, 245, 0.97);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.fp-discovered-icon {
    font-size: 56px;
    animation: fp-pulse 1.5s infinite;
}
.fp-discovered-text {
    font-size: 18px;
    color: #e57373;
    margin-top: 20px;
    font-weight: 500;
}

/* 日记展开折叠 */
.fp-diary-content {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    transition: max-height 0.3s ease;
}
.fp-diary-collapsed {
    max-height: 60px;
    overflow: hidden;
}
.fp-diary-toggle {
    font-size: 12px;
    color: #999;
    text-align: right;
    padding-top: 4px;
    cursor: pointer;
}

/* 世界书页 */
.worldbook-content {
    display: flex;
    flex-direction: column;
    padding: 12px 15px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fafafa;
}

.add-worldbook-btn {
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.add-worldbook-btn:hover {
    opacity: 0.7;
}

/* 世界书顶栏按钮 */
.worldbook-header-left,
.worldbook-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 正常模式头部 */
.worldbook-normal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.worldbook-normal-header .header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* 多选模式头部 */
.worldbook-multiselect-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
}

.multiselect-cancel-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 15px;
    padding: 8px 0;
    cursor: pointer;
}

.multiselect-count {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.multiselect-delete-btn {
    background: none;
    border: none;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 0;
    cursor: pointer;
}

.multiselect-delete-btn:active {
    opacity: 0.5;
}

.worldbook-import-btn,
.worldbook-export-btn,
.worldbook-category-btn,
.worldbook-filter-btn {
    background: none;
    border: none;
    color: #666;
    padding: 0;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.worldbook-import-btn:active,
.worldbook-export-btn:active,
.worldbook-category-btn:active,
.worldbook-filter-btn:active {
    background: rgba(0, 0, 0, 0.05);
}

/* 筛选按钮激活状态 */
.worldbook-filter-btn.filter-active {
    color: #333;
    position: relative;
}

.worldbook-filter-btn.filter-active::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    background: #333;
    border-radius: 50%;
}

/* 筛选选项列表 */
.filter-options-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.filter-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.2s;
}

.filter-option:last-child {
    border-bottom: none;
}

.filter-option:active {
    background: #f5f5f5;
}

.filter-option.active {
    background: #f8f8f8;
}

.filter-option-name {
    font-size: 15px;
    color: #333;
}

.filter-option.active .filter-option-name {
    color: #333;
    font-weight: 500;
}

.filter-check {
    color: #333;
    font-size: 16px;
    font-weight: 600;
}

/* 世界书网格布局 */
.worldbook-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0;
    min-width: 0;
}

.worldbook-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid rgba(0, 0, 0, 0.05);
    min-height: 120px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    position: relative;
}

.worldbook-card:active {
    background: rgba(255, 255, 255, 0.8);
    transform: scale(0.98);
}

/* 多选模式卡片选中状态 */
.worldbook-card.selected {
    border-color: #333;
    background: rgba(255, 255, 255, 0.9);
}

.worldbook-card .card-check {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    background: #333;
    color: white;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.worldbook-card.selected .card-check {
    display: flex;
}

.worldbook-card-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.worldbook-card-preview {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    flex: 1;
}

.worldbook-card-date {
    font-size: 11px;
    color: #999;
    margin-top: 8px;
}

.worldbook-empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #999;
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

/* 世界书空状态图标 - 灰色系 */
.worldbook-empty-icon {
    position: relative;
    width: 60px;
    height: 50px;
    margin: 0 auto 20px;
}

.worldbook-empty-icon::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 40px;
    border: 3px solid #999;
    border-radius: 0 6px 6px 0;
    border-left: none;
    top: 50%;
    left: 50%;
    transform: translate(-45%, -50%);
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
}

.worldbook-empty-icon::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 12px;
    border-color: transparent transparent transparent #999;
    top: 50%;
    left: 50%;
    transform: translate(-250%, -50%);
}

.empty-text {
    font-size: 16px;
    margin-bottom: 8px;
}

.empty-hint {
    font-size: 13px;
    color: #bbb;
}

.worldbook-editor-content {
    padding: 15px;
    overflow-y: auto;
    height: calc(100% - 50px);
}

.save-worldbook-btn {
    background: none;
    border: none;
    color: #666;
    font-size: 15px;
    font-weight: 500;
    padding: 0 15px;
    cursor: pointer;
}

.save-worldbook-btn:active {
    opacity: 0.5;
}

.delete-worldbook-btn {
    width: 100%;
    padding: 12px;
    background: #333;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 20px;
}

.delete-worldbook-btn:active {
    background: #555;
}

/* ========== 世界书条目系统样式 ========== */

/* 字数统计 */
.worldbook-stats {
    padding: 10px 0 0 0;
}

.worldbook-stats .stats-text {
    font-size: 13px;
    color: #888;
}

/* 模式切换 */
.worldbook-mode-switch {
    display: flex;
    gap: 0;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 3px;
}

.mode-btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

.mode-btn.active {
    background: white;
    color: #333;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

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

/* 条目区域 */
.worldbook-entries-section {
    display: flex;
    flex-direction: column;
}

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

.entries-header .form-label {
    margin-bottom: 0;
}

.add-entry-btn {
    padding: 8px 14px;
    background: #555;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.add-entry-btn:active {
    background: #666;
    transform: scale(0.96);
}

/* 条目列表 */
.entries-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: none;  /* 移除高度限制，让条目完全展开 */
    overflow-y: visible;
}

.entries-empty {
    text-align: center;
    color: #999;
    padding: 40px 20px;
    font-size: 14px;
    background: #f8f8f8;
    border-radius: 8px;
}

/* 条目卡片 */
.entry-card {
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    overflow: hidden;
}

.entry-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
}

.entry-number {
    width: 24px;
    height: 24px;
    background: #666;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.entry-keys-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    background: white;
    min-width: 0;
}

.entry-keys-input:focus {
    outline: none;
    border-color: #666;
}

.entry-keys-input::placeholder {
    color: #bbb;
}

/* 启用开关 */
.entry-enabled-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.entry-enabled-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.entry-enabled-toggle .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 24px;
}

.entry-enabled-toggle .toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.entry-enabled-toggle input:checked + .toggle-slider {
    background-color: #666;
}

.entry-enabled-toggle input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

/* 删除按钮 */
.entry-delete-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: #333;
    color: white;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.entry-delete-btn:active {
    background: #555;
    transform: scale(0.9);
}

/* 条目标题/描述（酒馆格式的comment字段） */
.entry-comment {
    padding: 6px 12px;
    background: #f5f5f5;
    color: #666;
    font-size: 12px;
    border-bottom: 1px solid #eee;
}

/* 条目内容区 */
.entry-body {
    padding: 12px;
}

.entry-content {
    width: 100%;
    min-height: 80px;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    font-family: inherit;
}

.entry-content:focus {
    outline: none;
    border-color: #666;
}

.entry-content::placeholder {
    color: #bbb;
}

/* 人设页面的世界书关联 */
.worldbook-link-section {
    margin-bottom: 20px;
}

.worldbook-selection {
    background: white;
    border-radius: 12px;
    padding: 15px;
}

.worldbook-hint {
    font-size: 12px;
    color: #999;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* 世界书选择器样式 */
.worldbook-selector {
    margin-top: 8px;
}

.worldbook-selector-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.worldbook-selector-display:active {
    background: #f0f0f0;
    transform: scale(0.98);
}

.worldbook-selector-text {
    font-size: 14px;
    color: #333;
    flex: 1;
}

.worldbook-selector-text.has-selection {
    color: #888;
}

.worldbook-selector-arrow {
    font-size: 18px;
    color: #999;
    font-weight: bold;
    transition: transform 0.3s;
}

/* 世界书弹窗小卡片样式 */
.worldbook-modal-small {
    width: 85%;
    max-width: 360px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.12);
}

.worldbook-modal-small .modal-header {
    border-bottom: none;
    background: linear-gradient(to bottom, #fafafa 0%, #ffffff 100%);
    border-radius: 24px 24px 0 0;
}

.worldbook-modal-small .modal-footer {
    border-top: none;
    padding: 12px 20px 20px;
    justify-content: center;
}

.worldbook-modal-small .modal-btn-primary {
    background: #333;
    color: white;
    border-radius: 12px;
    padding: 12px 20px;
    width: 100%;
    font-weight: 500;
}

.worldbook-modal-small .modal-btn-primary:active {
    background: #1a1a1a;
}

.worldbook-modal-body {
    padding: 15px;
    overflow: hidden;
}

.worldbook-selector-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
}

/* 简约清新风格的世界书选项卡片 */
.worldbook-selector-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 12px;
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    border: 1.5px solid #e8e8e8;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 95px;
    max-width: 110px;
    flex: 0 1 auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.worldbook-selector-item:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.worldbook-selector-item.selected {
    background: #f5f5f5;
    border-color: #333;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.worldbook-selector-checkbox {
    width: 24px;
    height: 24px;
    border: 2px solid #d0d0d0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
}

.worldbook-selector-item.selected .worldbook-selector-checkbox {
    background: #333;
    border-color: #333;
    transform: scale(1.1);
}

.worldbook-selector-checkbox::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s;
}

.worldbook-selector-item.selected .worldbook-selector-checkbox::after {
    opacity: 1;
    transform: scale(1);
}

.worldbook-selector-info {
    text-align: center;
    width: 100%;
}

.worldbook-selector-name {
    font-size: 13px;
    font-weight: 500;
    color: #444;
    margin-bottom: 5px;
    word-wrap: break-word;
    line-height: 1.3;
}

.worldbook-selector-desc {
    font-size: 10px;
    color: #aaa;
    line-height: 1.3;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.worldbook-selector-empty {
    text-align: center;
    padding: 50px 20px;
    color: #bbb;
    font-size: 13px;
    width: 100%;
    line-height: 1.6;
}

.worldbook-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.worldbook-checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    background: #fafafa;
    border-radius: 8px;
    cursor: pointer;
}

.worldbook-checkbox-item:active {
    background: #f0f0f0;
}

.worldbook-checkbox {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
}

.worldbook-checkbox-content {
    flex: 1;
}

.worldbook-checkbox-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

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

.worldbook-empty-hint {
    text-align: center;
    color: #bbb;
    font-size: 13px;
    padding: 20px;
}

/* 关系网入口 */
.relationship-entry-section {
    margin-bottom: 20px;
}
.relationship-entry-card {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: #fff;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    gap: 12px;
    border: 1px solid #f0f0f0;
}
.relationship-entry-card:active {
    background: #f8f8f8;
    transform: scale(0.985);
}
.relationship-entry-icon {
    font-size: 28px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f5ff;
    border-radius: 12px;
    flex-shrink: 0;
}
.relationship-entry-info {
    flex: 1;
    min-width: 0;
}
.relationship-entry-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}
.relationship-entry-desc {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}
.relationship-entry-arrow {
    font-size: 20px;
    color: #ccc;
    flex-shrink: 0;
}

/* 夜间模式 - 关系网入口 */
.phone-frame.night-mode .relationship-entry-card { background: #1c1c1e; border-color: #2c2c2e; }
.phone-frame.night-mode .relationship-entry-card:active { background: #2c2c2e; }
.phone-frame.night-mode .relationship-entry-icon { background: #1a2540; }
.phone-frame.night-mode .relationship-entry-title { color: #e0e0e0; }
.phone-frame.night-mode .relationship-entry-desc { color: #666; }
.phone-frame.night-mode .relationship-entry-arrow { color: #555; }

/* 遇见页 */
.meet-content {
    display: flex;
    flex-direction: column;
    padding: 12px;
    height: calc(100% - 50px);
    overflow: hidden;
    background: #fafafa;
    gap: 12px;
}

/* 上方区域 - 创建和自定义人设 */
.meet-top-section {
    display: flex;
    gap: 10px;
    height: 110px;
    flex-shrink: 0;
}

/* 左侧创建人设区域 */
.create-persona-box {
    width: 100px;
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
}

.create-persona-box:hover {
    border-color: #ddd;
    background: #fcfcfc;
}

.create-persona-box:active {
    transform: scale(0.98);
}

.create-box-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.plus-icon {
    font-size: 32px;
    color: #999;
    font-weight: 300;
    line-height: 1;
}

.create-persona-box:hover .plus-icon {
    color: #666;
}

.create-hint {
    font-size: 11px;
    color: #999;
    font-weight: 500;
}

.create-persona-box:hover .create-hint {
    color: #666;
}

/* 右侧已保存人设区域 */
.saved-personas-section {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 12px;
    overflow: hidden;
}

.saved-personas-scroll {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.saved-persona-placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #999;
    width: 100%;
}

.saved-persona-placeholder .placeholder-text {
    font-size: 13px;
    font-weight: 500;
}

.saved-persona-placeholder .placeholder-hint {
    font-size: 11px;
    opacity: 0.7;
}

/* 已保存的人设卡片 */
.saved-persona-card {
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 70px;
    flex-shrink: 0;
}

.saved-persona-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.saved-persona-info {
    text-align: center;
    width: 100%;
}

.saved-persona-name {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.saved-persona-wechat {
    font-size: 10px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.saved-persona-desc {
    font-size: 10px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* 中间区域 - 喜欢的人设待选区 */
.liked-personas-section {
    height: 130px;
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.section-title-bar {
    padding: 8px 12px;
    background: white;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-title-text {
    font-size: 13px;
    font-weight: 400;
    color: #333;
}

.liked-personas-scroll {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    background: #f7f7f7;
}

.liked-persona-placeholder {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #999;
}

.liked-persona-placeholder .placeholder-text {
    font-size: 13px;
    font-weight: 500;
}

.liked-persona-placeholder .placeholder-hint {
    font-size: 11px;
    opacity: 0.7;
}

/* 喜欢的人设卡片样式 */
.liked-persona-card {
    background: #fefafb;
    border: 1px solid #f8ecef;
    border-radius: 10px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 90px;
    flex-shrink: 0;
}

.liked-persona-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    border-color: #e0e0e0;
}

.liked-persona-info {
    text-align: center;
    width: 100%;
}

.liked-persona-name {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.liked-persona-age {
    font-size: 10px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* 下方交友卡片区域 */
.meet-cards-area {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.cards-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* 建立层叠上下文：profile-card 的负 z-index 叠层伪元素须锁在容器内，否则会沉到页面底色之下 */
    z-index: 0;
}

.no-cards-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #999;
}

.hint-icon {
    font-size: 48px;
    opacity: 0.5;
}

.hint-text {
    font-size: 14px;
    font-weight: 500;
}

.hint-subtext {
    font-size: 12px;
    opacity: 0.7;
}

/* 遇见空状态专属样式：hint-* 基础类被眠梦/IF线复用，只能在 .no-cards-hint 作用域内改 */
.no-cards-hint .hint-icon {
    line-height: 0;
    color: #ccc;
}

.no-cards-hint .hint-icon svg {
    display: block;
}

/* 刷新按钮 */
.refresh-meet-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

.refresh-meet-btn:hover {
    background: transparent;
    color: #333;
    transform: rotate(180deg);
}

.refresh-meet-btn:active {
    transform: rotate(180deg) scale(0.95);
}

/* 交友卡片样式（缩小版） */
.profile-card {
    width: 85%;
    max-width: 280px;
    height: 100%;
    max-height: 100%;
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: absolute;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 叠层假卡：交友卡一次只渲染一张，后层用伪元素模拟（负 z-index 依赖 .profile-card 不设 z-index） */
.profile-card::before,
.profile-card::after {
    content: '';
    position: absolute;
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
}

.profile-card::before {
    z-index: -1;
    top: 8px;
    bottom: 8px;
    left: 8px;
    right: -8px;
}

.profile-card::after {
    z-index: -2;
    top: 16px;
    bottom: 16px;
    left: 16px;
    right: -16px;
}

.profile-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f7f7f7;
    border: 1px solid #f0f0f0;
    box-shadow: inset 0 0 0 4px white;
    position: relative;
    margin-bottom: 2px;
}

.profile-name {
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

.profile-info {
    font-size: 13px;
    color: #999;
}

.profile-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.tag {
    padding: 4px 10px;
    background: #fafafa;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    font-size: 11px;
    color: #666;
}

.profile-bio {
    font-size: 12px;
    color: #666;
    text-align: center;
    line-height: 1.5;
    max-height: 3em;
    overflow: hidden;
}

.action-buttons {
    display: flex;
    gap: 16px;
    margin-top: 6px;
}

.action-btn {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    font-size: 28px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pass-btn {
    background: white;
    color: #bbb;
    border: 1px solid #ededed;
}

.pass-btn:hover {
    background: #f5f5f5;
}

.like-btn {
    background: #fdf2f5;
    color: white;
    border: 1px solid #f3dde3;
}

.like-btn:hover {
    background: #fbe9ee;
    border-color: #e8c4cd;
}

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

/* 按钮图标尺寸用 1em、描边用 currentColor：全局字体偏移/字体颜色功能对 .action-btn 注入 font-size 和 color，
   1em+currentColor 让 SVG 图标与原文本字符一样继续受这两个功能控制；pointer-events 保证 e.target 始终是按钮 */
.action-btn svg {
    width: 1em;
    height: 1em;
}

.action-btn svg,
.action-btn span {
    pointer-events: none;
}

.pass-btn span {
    font-size: 0.55em;
    font-weight: 500;
}

.like-btn svg {
    width: 0.8em;
    height: 0.8em;
}

/* ===== 遇见页夜间模式（统一前缀 .phone-frame.night-mode） ===== */
.phone-frame.night-mode .create-persona-box,
.phone-frame.night-mode .profile-card,
.phone-frame.night-mode .profile-card::before,
.phone-frame.night-mode .profile-card::after {
    background: #1c1c1e;
    border-color: #3a3a3c;
}

.phone-frame.night-mode .create-persona-box:hover {
    background: #2c2c2e;
    border-color: #48484a;
}

.phone-frame.night-mode .saved-persona-card,
.phone-frame.night-mode .saved-persona-card.stacked,
.phone-frame.night-mode .liked-persona-card {
    background: #2c2c2e;
    border-color: #3a3a3c;
}

.phone-frame.night-mode .profile-photo {
    background: #2c2c2e;
    border-color: #3a3a3c;
    box-shadow: inset 0 0 0 4px #1c1c1e;
    color: #8e8e93;
}

.phone-frame.night-mode .saved-persona-name,
.phone-frame.night-mode .liked-persona-name,
.phone-frame.night-mode .profile-name {
    color: #d1d1d6;
}

.phone-frame.night-mode .saved-persona-desc,
.phone-frame.night-mode .liked-persona-age,
.phone-frame.night-mode .profile-info,
.phone-frame.night-mode .section-title-text,
.phone-frame.night-mode .saved-persona-placeholder,
.phone-frame.night-mode .liked-persona-placeholder,
.phone-frame.night-mode .no-cards-hint,
.phone-frame.night-mode .refresh-meet-btn,
.phone-frame.night-mode .plus-icon,
.phone-frame.night-mode .create-hint {
    color: #8e8e93;
}

.phone-frame.night-mode .profile-bio,
.phone-frame.night-mode .saved-persona-wechat {
    color: #aeaeb2;
}

.phone-frame.night-mode .liked-personas-section {
    background: #1c1c1e;
    border-color: #3a3a3c;
}

.phone-frame.night-mode .section-title-bar {
    background: #1c1c1e;
    border-bottom-color: #3a3a3c;
}

.phone-frame.night-mode .liked-personas-scroll {
    background: #2c2c2e;
}

.phone-frame.night-mode .tag {
    background: #2c2c2e;
    border-color: #3a3a3c;
    color: #aeaeb2;
}

.phone-frame.night-mode .pass-btn {
    background: #2c2c2e;
    border-color: #3a3a3c;
    color: #8e8e93;
}

.phone-frame.night-mode .like-btn {
    background: #3a2c30;
    border-color: #5a4046;
    color: #d4899b;
}

.phone-frame.night-mode .card-count-badge {
    background: #3a3a3c;
    color: #aeaeb2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.phone-frame.night-mode .no-cards-hint .hint-icon {
    color: #5a5a5e;
}

/* ===== 创建人设页面样式 ===== */
.delete-persona-modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.delete-persona-btn {
    padding: 6px 16px;
    background: transparent;
    color: #ff3b30;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.delete-persona-btn:hover {
    background: rgba(255, 59, 48, 0.1);
}

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

.create-persona-content {
    height: calc(100% - 50px);
    overflow-y: auto;
    padding: 15px;
    background: #fafafa;
}

/* 微信信息区域 */
.wechat-info-section {
    background: white;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}

/* 人设信息区域 */
.persona-info-section {
    background: white;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}

/* 模式开关 */
.persona-mode-switch {
    background: white;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.switch-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    width: 100%;
    justify-content: space-between;
}

.switch-text {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.switch-input {
    display: none;
}

.switch-slider {
    position: relative;
    width: 48px;
    height: 26px;
    background: #ddd;
    border-radius: 26px;
    transition: all 0.3s;
}

.switch-slider::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    top: 2px;
    left: 2px;
    transition: all 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.switch-input:checked + .switch-slider {
    background: #333;
}

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

/* 表单区域 */
.simple-mode,
.detailed-mode {
    background: white;
    border-radius: 12px;
    padding: 15px;
}

.form-section {
    margin-bottom: 15px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 15px;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    margin-bottom: 8px;
}

.form-hint {
    font-size: 11px;
    color: #999;
    margin-top: 6px;
    line-height: 1.4;
}

.form-input,
.form-select {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e8e8e8;
    border-radius: 10px;
    font-size: 14px;
    color: #333;
    transition: all 0.2s;
    outline: none;
    background: white;
}

.form-input:focus,
.form-select:focus {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.02);
}

.form-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e8e8e8;
    border-radius: 10px;
    font-size: 14px;
    color: #333;
    resize: vertical;
    transition: all 0.2s;
    outline: none;
    font-family: inherit;
    line-height: 1.5;
}

.form-textarea:focus {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.02);
}

/* 人设头像上传 */
.persona-avatar-upload {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.avatar-preview {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f5f5f5;
    cursor: pointer;
    transition: all 0.2s;
}

.avatar-preview:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

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

.avatar-upload-hint {
    flex: 1;
}

.avatar-hint-text {
    font-size: 13px;
    color: #666;
    margin-bottom: 4px;
}

.avatar-hint-desc {
    font-size: 11px;
    color: #999;
    line-height: 1.4;
}

/* 头像上传弹窗 */
.persona-avatar-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 底部按钮 */
.create-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-bottom: 10px;
}

.cancel-create-btn,
.save-create-btn {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.cancel-create-btn {
    background: #f5f5f5;
    color: #666;
}

.cancel-create-btn:hover {
    background: #e8e8e8;
}

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

.save-create-btn {
    background: #333;
    color: white;
}

.save-create-btn:hover {
    background: #1a1a1a;
    color: white;
    box-shadow: none;
}

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

/* 好友申请开关样式 */
.friend-request-switch {
    background: #f8f9ff;
    border: 1px solid #e0e7ff;
    border-radius: 10px;
    padding: 12px 15px;
    margin-top: 12px;
}

.switch-text-small {
    font-size: 14px;
    color: #555;
    font-weight: 500;
}

.switch-slider-small {
    width: 42px;
    height: 24px;
    background: #ddd;
    border-radius: 24px;
    position: relative;
    transition: all 0.3s ease;
    display: inline-block;
    cursor: pointer;
}

.switch-slider-small::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    left: 2px;
    top: 2px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.switch-input:checked + .switch-slider-small {
    background: #f8a4b8;
}

.switch-input:checked + .switch-slider-small::before {
    transform: translateX(18px);
}

.switch-hint {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
    line-height: 1.4;
}

/* 搜索微信号弹窗 */
.search-input-group {
    margin-bottom: 15px;
}

.search-wechat-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
}

.search-wechat-input:focus {
    border-color: #07c160;
}

.search-wechat-btn {
    padding: 10px 20px;
    background: #07c160;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.search-wechat-btn:active {
    transform: scale(0.96);
}

.modal-btn-search {
    width: 100%;
    padding: 10px 20px;
    background: #8a8a8a;
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-btn-search:active {
    opacity: 0.8;
    transform: scale(0.98);
}

.search-result {
    margin-top: 20px;
}

/* 搜索弹窗特殊样式 */
#search-wechat-modal .modal-dialog {
    display: flex;
    flex-direction: column;
}

#search-wechat-modal .modal-body {
    padding: 30px 20px 20px;
    text-align: center;
}

#search-wechat-modal .modal-footer {
    padding: 12px 20px 30px;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: #f7f7f7;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.search-result-item:hover {
    background: #f0f0f0;
}

.search-result-avatar {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: bold;
    flex-shrink: 0;
}

.search-result-info {
    flex: 1;
}

.search-result-name {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.search-result-wechat-id {
    font-size: 13px;
    color: #888;
}

/* 好友信息预览 */
.friend-info-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: #f7f7f7;
    border-radius: 8px;
    margin-bottom: 15px;
}

.friend-preview-avatar {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 20px;
    font-weight: bold;
}

.friend-preview-name {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

/* 好友申请输入 */
.friend-request-input-group {
    margin-top: 15px;
}

.friend-request-hint {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
}

/* 收到的好友申请 */
.friend-request-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    background: #f7f7f7;
    border-radius: 8px;
}

.friend-request-avatar {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: bold;
    flex-shrink: 0;
}

.friend-request-content {
    flex: 1;
}

.friend-request-name {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 6px;
}

.friend-request-message {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
    line-height: 1.5;
}

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

.friend-request-btn {
    padding: 8px 20px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.friend-request-btn.accept {
    background: #07c160;
    color: white;
    border-color: #07c160;
}

.friend-request-btn:active {
    transform: scale(0.96);
}

/* 好友添加成功图标 */
.friend-added-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #07c160;
    color: white;
    font-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.modal-dialog-small {
    max-width: 320px;
}

/* ===== 我的面具人设样式 ===== */
.my-mask-persona-section {
    margin-top: 20px;
}

.section-divider {
    display: flex;
    align-items: center;
    margin: 25px 0 20px;
}

.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #ddd, transparent);
}

.divider-text {
    padding: 0 15px;
    font-size: 15px;
    font-weight: 600;
    color: #666;
    background: #fafafa;
}

.mask-persona-switch {
    background: #fff3e6;
    border: 1px solid #ffe0b3;
    border-radius: 10px;
    padding: 12px 15px;
    margin-bottom: 15px;
}

.mask-mode-switch {
    background: white;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mask-simple-mode,
.mask-detailed-mode {
    background: white;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}

/* 夜间模式适配 */
.phone-frame.night-mode .delete-persona-btn {
    color: #ff453a;
}

.phone-frame.night-mode .delete-persona-btn:hover {
    background: rgba(255, 69, 58, 0.15);
}

.phone-frame.night-mode .create-persona-content {
    background: #1a1a1a;
}

.phone-frame.night-mode .wechat-info-section,
.phone-frame.night-mode .persona-info-section {
    background: #2a2a2a;
}

.phone-frame.night-mode .persona-mode-switch,
.phone-frame.night-mode .simple-mode,
.phone-frame.night-mode .detailed-mode {
    background: #2a2a2a;
}

.phone-frame.night-mode .switch-text,
.phone-frame.night-mode .form-label {
    color: #aaa;
}

.phone-frame.night-mode .form-hint {
    color: #666;
}

.phone-frame.night-mode .form-input,
.phone-frame.night-mode .form-select,
.phone-frame.night-mode .form-textarea {
    background: #1f1f1f;
    border-color: #3a3a3a;
    color: #e0e0e0;
}

.phone-frame.night-mode .form-input:focus,
.phone-frame.night-mode .form-select:focus,
.phone-frame.night-mode .form-textarea:focus {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.phone-frame.night-mode .friend-request-switch {
    background: #2a2a2a;
    border-color: #3a3a3a;
}

.phone-frame.night-mode .avatar-preview {
    background: #1f1f1f;
}

.phone-frame.night-mode .avatar-hint-text {
    color: #aaa;
}

.phone-frame.night-mode .avatar-hint-desc {
    color: #666;
}

.phone-frame.night-mode .group-chats-content {
    background: #1a1a1a;
}

.phone-frame.night-mode .group-chat-item {
    background: rgba(42, 42, 42, 0.3);
    border-color: #3a3a3a;
}

.phone-frame.night-mode .group-chat-item:hover {
    background: rgba(42, 42, 42, 0.5);
    border-color: #667eea;
}

.phone-frame.night-mode .group-chat-name {
    color: #e0e0e0;
}

.phone-frame.night-mode .group-chat-members {
    color: #888;
}

.phone-frame.night-mode .group-chats-empty p {
    color: #666;
}

/* 标签页面夜间模式 */
.phone-frame.night-mode .header-action-btn {
    color: #7b8ff7;
}

.phone-frame.night-mode .header-action-btn:hover {
    background: rgba(123, 143, 247, 0.15);
}

.phone-frame.night-mode .tags-content,
.phone-frame.night-mode .tag-edit-content {
    background: #1c1c1e;
}

.phone-frame.night-mode .tag-item {
    background: rgba(58, 58, 60, 0.5);
    border-color: #444;
}

.phone-frame.night-mode .tag-item:hover {
    background: rgba(58, 58, 60, 0.8);
    border-color: #7b8ff7;
}

.phone-frame.night-mode .tag-name {
    color: #e0e0e0;
}

.phone-frame.night-mode .tag-count {
    color: #999;
}

.phone-frame.night-mode .tags-empty p {
    color: #aaa;
}

.phone-frame.night-mode .tags-empty .empty-hint {
    color: #888;
}

.phone-frame.night-mode .tag-edit-form {
    background: #2c2c2e;
}

.phone-frame.night-mode .tag-color-item.selected {
    border-color: #e0e0e0;
    box-shadow: 0 0 0 2px #2c2c2e, 0 0 0 4px #e0e0e0;
}

.phone-frame.night-mode .tag-members-count {
    color: #aaa;
}

.phone-frame.night-mode .delete-tag-btn {
    background: #2c2c2e;
    color: #ff453a;
}

.phone-frame.night-mode .delete-tag-btn:hover {
    background: #3a3a3c;
}

/* 标签详情页夜间模式 */
.phone-frame.night-mode .tag-detail-content,
.phone-frame.night-mode .select-contacts-content {
    background: #1c1c1e;
}

.phone-frame.night-mode .tag-info-section,
.phone-frame.night-mode .tag-members-section {
    background: #2c2c2e;
}


.phone-frame.night-mode .section-header {
    border-bottom-color: #3a3a3a;
}

.phone-frame.night-mode .save-name-btn,
.phone-frame.night-mode .add-member-btn {
    background: #5568d3;
}

.phone-frame.night-mode .save-name-btn:hover,
.phone-frame.night-mode .add-member-btn:hover {
    background: #667eea;
}

.phone-frame.night-mode .remove-member-btn {
    background: #e62e24;
}

.phone-frame.night-mode .remove-member-btn:hover {
    background: #ff3b30;
}

.phone-frame.night-mode .tag-members-empty {
    color: #888;
}

.phone-frame.night-mode .tag-members-empty .empty-hint {
    color: #666;
}

/* 通讯录夜间模式 */

.phone-frame.night-mode .contact-group-title {
    color: #666;
}


.phone-frame.night-mode .contact-item.special {
    background: rgba(42, 42, 42, 0.5);
    border-color: #3a3a3a;
}

.phone-frame.night-mode .contact-item.special:active {
    background: rgba(42, 42, 42, 0.8);
}

.phone-frame.night-mode .contact-item.contact-card:hover {
    background: rgba(60, 60, 60, 0.7);
}

.phone-frame.night-mode .contact-item.contact-card:active {
    background: rgba(70, 70, 70, 0.8);
}



.phone-frame.night-mode .switch-text-small,
.phone-frame.night-mode .switch-hint {
    color: #aaa;
}

.phone-frame.night-mode .search-wechat-input {
    background: #2a2a2a;
    border-color: #3a3a3a;
    color: #e0e0e0;
}

.phone-frame.night-mode .search-result-item,
.phone-frame.night-mode .friend-info-preview,
.phone-frame.night-mode .friend-request-item {
    background: #2a2a2a;
}

.phone-frame.night-mode .search-result-name,
.phone-frame.night-mode .friend-preview-name,
.phone-frame.night-mode .friend-request-name {
    color: #e0e0e0;
}

.phone-frame.night-mode .search-result-wechat-id,
.phone-frame.night-mode .friend-request-message {
    color: #888;
}

.phone-frame.night-mode .friend-request-btn {
    background: #2a2a2a;
    border-color: #3a3a3a;
    color: #e0e0e0;
}

.phone-frame.night-mode .friend-request-btn.accept {
    background: #07c160;
    color: white;
    border-color: #07c160;
}

.phone-frame.night-mode .friend-detail-signature {
    color: #aaa;
}

.phone-frame.night-mode .section-divider::before,
.phone-frame.night-mode .section-divider::after {
    background: linear-gradient(to right, transparent, #3a3a3a, transparent);
}

.phone-frame.night-mode .divider-text {
    color: #aaa;
    background: #1a1a1a;
}

.phone-frame.night-mode .mask-persona-switch {
    background: #2a2a2a;
    border-color: #3a3a3a;
}

.phone-frame.night-mode .mask-mode-switch,
.phone-frame.night-mode .mask-simple-mode,
.phone-frame.night-mode .mask-detailed-mode {
    background: #2a2a2a;
}

.phone-frame.night-mode .cancel-create-btn {
    background: #333;
    color: #aaa;
}

.phone-frame.night-mode .cancel-create-btn:hover {
    background: #3a3a3a;
}

/* 小部件自定义弹窗 */
.widget-customize-modal,
.widget-url-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2100;
    display: none;
    align-items: center;
    justify-content: center;
}

.widget-customize-modal.show,
.widget-url-modal.show {
    display: flex;
}

.widget-customize-modal .modal-content,
.widget-url-modal .modal-content {
    width: 70%;
    max-width: 280px;
    text-align: center;
}

.widget-customize-modal .modal-body,
.widget-url-modal .modal-body {
    text-align: center;
}

.widget-customize-modal .modal-header h3,
.widget-url-modal .modal-header h3 {
    text-align: center;
}

/* 滚动条样式 - 隐藏但保持滚动功能 */
::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    display: none;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: transparent;
}

/* Firefox 滚动条隐藏 */
* {
    scrollbar-width: none;
}

/* 夜间模式滚动条（已隐藏） */
.phone-frame.night-mode ::-webkit-scrollbar-thumb {
    background: transparent;
}

.phone-frame.night-mode ::-webkit-scrollbar-thumb:hover {
    background: transparent;
}

.phone-frame.night-mode ::-webkit-scrollbar-thumb:active {
    background: transparent;
}

/* 响应式设计 */
@media (max-width: 450px) {
    .phone-frame {
        width: 100%;
        height: 100vh;
        border-radius: 0;
        border: none;
    }
    
    body {
        padding: 0;
    }
}

/* 动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.settings-item, .font-item, .theme-option {
    animation: fadeIn 0.3s ease forwards;
}

.settings-item:nth-child(1) { animation-delay: 0.05s; }
.settings-item:nth-child(2) { animation-delay: 0.1s; }
.settings-item:nth-child(3) { animation-delay: 0.15s; }
.font-item:nth-child(1) { animation-delay: 0.05s; }
.font-item:nth-child(2) { animation-delay: 0.1s; }
.font-item:nth-child(3) { animation-delay: 0.15s; }
.font-item:nth-child(4) { animation-delay: 0.2s; }

/* 文本编辑模态框 */
.text-edit-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
}

.text-edit-modal.active {
    display: flex;
}

.text-edit-modal .modal-content {
    width: 70%;
    max-width: 280px;
    text-align: center;
}

.text-edit-modal .modal-body {
    text-align: center;
}

.text-edit-modal .modal-header h3 {
    text-align: center;
}

.text-edit-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid #e8e8e8;
    border-radius: 12px;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
    background: #fafafa;
    color: #333;
}

.text-edit-input:focus {
    border-color: #999;
    background: white;
}
/* 鑱婂ぉ绐楀彛鏍峰紡 */
.chat-window {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: 
        linear-gradient(135deg, rgba(250, 252, 255, 0.92) 0%, rgba(240, 245, 250, 0.88) 50%, rgba(250, 252, 255, 0.92) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(235, 240, 245, 0.9) 100%);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    box-shadow: 
        inset 0 0 60px rgba(255, 255, 255, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(255, 255, 255, 0.7),
        inset 1px 0 0 rgba(255, 255, 255, 0.3),
        inset -1px 0 0 rgba(255, 255, 255, 0.3),
        0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0;
}

.chat-window.has-wallpaper {
    border: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.chat-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px;
    margin: 36px 10px 0 10px;
    background: linear-gradient(135deg, 
        rgba(240, 245, 250, 0.9) 0%,
        rgba(230, 240, 245, 0.85) 50%,
        rgba(235, 242, 248, 0.88) 100%);
    backdrop-filter: blur(15px) saturate(130%);
    -webkit-backdrop-filter: blur(15px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    min-height: 44px;
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.06),
        inset 0 2px 4px rgba(255, 255, 255, 0.8),
        inset 3px 0 6px rgba(255, 255, 255, 0.4),
        inset -2px -2px 4px rgba(200, 220, 240, 0.15);
    position: relative;
    overflow: hidden;
    gap: 8px;
}

.chat-window-avatar {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
    color: #999;
    font-size: 14px;
    font-weight: 500;
}

.chat-window-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* 雾气效果层 */
.chat-window-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 30% 40%, rgba(220, 235, 245, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(230, 240, 250, 0.25) 0%, transparent 50%);
    filter: blur(15px);
    pointer-events: none;
    z-index: 0;
}

.chat-back-btn,
.chat-more-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
    color: rgba(60, 60, 67, 0.75);
    transition: all 0.2s;
}

.chat-back-btn:active,
.chat-more-btn:active {
    opacity: 0.5;
    transform: scale(0.95);
}

.chat-back-btn:active,
.chat-more-btn:active {
    opacity: 0.6;
}

/* 聊天标题区域包裹器（含状态栏） */
.chat-title-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
}
.chat-title-area .chat-window-title {
    flex: none;
    width: 100%;
}

.chat-window-title {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: rgba(60, 60, 67, 0.85);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
    position: relative;
    z-index: 1;
}

.chat-status-subtitle {
    font-size: 11px;
    color: #999;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
    line-height: 1.2;
}
.phone-frame.night-mode .chat-status-subtitle {
    color: #777;
}

/* 对方正在输入... 打字状态 */
.chat-window-title.typing-active {
    font-size: 13px;
    color: rgba(60, 60, 67, 0.55);
    font-weight: 400;
}

.chat-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: linear-gradient(180deg, 
        rgba(235, 235, 235, 0.6) 0%, 
        rgba(225, 225, 225, 0.5) 100%);
    position: relative;
    /* 滚动性能优化 - APK 特别优化 */
    will-change: scroll-position;
    contain: layout style;
    -webkit-overflow-scrolling: touch;
    /* 启用 GPU 加速 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* 防止触摸时卡顿 */
    touch-action: pan-y;
    /* 优化滚动性能 */
    overscroll-behavior: contain;
}

/* 雾气玻璃层 - 虚色层 (性能优化版) */
.chat-messages::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
    filter: blur(20px);
}

/* 果冻光泽高光 - 实色层 (性能优化版) */
.chat-messages::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 30%);
    pointer-events: none;
    z-index: 0;
}

.chat-messages > * {
    position: relative;
    z-index: 1;
}

.chat-date {
    text-align: center;
    font-size: 12px;
    color: rgba(60, 60, 67, 0.45);
    margin: 10px 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    /* 搜索跳转用 chat-date 作为锚点 scrollIntoView({block:'start'}) 时
       留 60px 顶部空间给 .expand-messages-btn (position:absolute; top:10px) 避免重叠 */
    scroll-margin-top: 60px;
}

/* 折叠消息样式 */
.collapsed-message {
    display: none !important;
}

/* 展开按钮样式 */
.expand-messages-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 13px;
    color: #576b95;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.expand-messages-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.02);
}

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

/* 搜索跳转后 cap 触发显示的"查看更多消息"按钮（in-flow 末尾，flex 容器中不被压缩） */
.chat-search-load-more-down {
    padding: 8px 20px;
    text-align: center;
    font-size: 13px;
    color: #576b95;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    margin: 10px auto;
    width: max-content;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    user-select: none;
    flex: 0 0 auto;
}
.chat-search-load-more-down:active {
    background: rgba(255, 255, 255, 1);
    transform: scale(0.98);
}
.phone-frame.night-mode .chat-search-load-more-down {
    background: rgba(28, 28, 30, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
    color: #0a84ff;
}
.phone-frame.night-mode .chat-search-load-more-down:active {
    background: rgba(40, 40, 42, 1);
}

.chat-message {
    display: flex;
    gap: 10px;
    max-width: 80%;
    /* 动画已移至 .new-message 类，避免历史消息重复动画 */
}

/* 仅新消息有入场动画 */
.chat-message.new-message {
    animation: messageSlide 0.2s ease;
}

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

.chat-message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-message.ai {
    align-self: flex-start;
}

.chat-message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 400;
    background: white;
    border: 1px solid #e0e0e0;
    color: #999;
    overflow: hidden;
}

.chat-message-content {
    padding: 0;
    border-radius: 0.9em;
    font-size: 13px;
    line-height: 1.4;
    word-wrap: break-word;
    display: inline-flex;
    align-items: center;
    min-height: calc(1.4em + 0.8em);
    padding: 0.4em 1em;
    box-sizing: border-box;
}

.chat-message.user .chat-message-content {
    background: linear-gradient(135deg, 
        rgba(240, 230, 235, 0.85) 0%, 
        rgba(235, 225, 230, 0.8) 100%);
    color: #222;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 0.9em;
    box-shadow: 
        0 0.4em 1.2em rgba(0, 0, 0, 0.08),
        0 0.2em 0.4em rgba(0, 0, 0, 0.06),
        inset 0 0.15em 0.3em rgba(255, 255, 255, 0.7),
        inset 0.15em 0 0.3em rgba(255, 255, 255, 0.3),
        inset -0.08em -0.08em 0.2em rgba(0, 0, 0, 0.08);
}

.chat-message.ai .chat-message-content {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.85) 0%, 
        rgba(252, 252, 252, 0.8) 100%);
    color: #222;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 0.9em;
    box-shadow: 
        0 0.4em 1.2em rgba(0, 0, 0, 0.08),
        0 0.2em 0.4em rgba(0, 0, 0, 0.06),
        inset 0 0.15em 0.3em rgba(255, 255, 255, 0.7),
        inset 0.15em 0 0.3em rgba(255, 255, 255, 0.3),
        inset -0.08em -0.08em 0.2em rgba(0, 0, 0, 0.08);
}

.chat-message-content img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.chat-message.user .chat-message-content img,
.chat-message.ai .chat-message-content img {
    background: transparent;
}

/* ========== 长按消息操作弹窗 ========== */
.message-action-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.message-action-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
}

.message-action-sheet {
    position: relative;
    width: calc(100% - 20px);
    max-width: 340px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: actionSheetUp 0.25s ease-out;
}

@keyframes actionSheetUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.message-action-buttons {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 14px;
    overflow: hidden;
}

.message-action-item {
    width: 100%;
    padding: 16px 20px;
    font-size: 17px;
    color: #333;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: background 0.15s;
}

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

.message-action-item:active {
    background: rgba(0, 0, 0, 0.05);
}

.message-action-item svg {
    flex-shrink: 0;
}

.message-action-cancel {
    width: 100%;
    padding: 16px 20px;
    font-size: 17px;
    font-weight: 600;
    color: #007AFF;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.15s;
}

.message-action-cancel:active {
    background: rgba(255, 255, 255, 0.8);
}

/* ========== 多选删除模式 ========== */

/* 多选模式工具栏 */
.multi-select-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.85) 0%, 
        rgba(250, 250, 250, 0.8) 100%);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 50px; /* 在 chat-window-header 下方 */
    z-index: 100;
}

.multi-select-cancel,
.multi-select-all {
    padding: 6px 14px;
    font-size: 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

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

.multi-select-cancel:active {
    background: rgba(0, 0, 0, 0.1);
}

.multi-select-all {
    color: #007AFF;
    background: rgba(0, 122, 255, 0.1);
}

.multi-select-all:active {
    background: rgba(0, 122, 255, 0.2);
}

.multi-select-count {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

/* 多选模式底部操作栏 */
.multi-select-actions {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(250, 250, 250, 0.9) 100%);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: center;
    z-index: 100;
}

.multi-select-delete-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 40px;
    font-size: 16px;
    color: white;
    background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
}

.multi-select-delete-btn:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(255, 77, 79, 0.4);
}

.multi-select-delete-btn:disabled {
    background: #ccc;
    box-shadow: none;
    cursor: not-allowed;
}

/* 多选模式下的消息样式 */
.chat-window.multi-select-mode .chat-message {
    position: relative;
    padding-left: 36px;
    transition: padding-left 0.25s ease;
}

/* 多选模式下时间戳不需要额外padding */
.chat-window.multi-select-mode .chat-date {
    padding-left: 0;
}

/* 复选框样式 */
.chat-window.multi-select-mode .chat-message::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 2px solid #ccc;
    border-radius: 50%;
    background: white;
    transition: all 0.2s;
}

.chat-window.multi-select-mode .chat-message.multi-selected::before {
    border-color: #07c160;
    background: #07c160;
}

/* 勾选图标 */
.chat-window.multi-select-mode .chat-message.multi-selected::after {
    content: '';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-60%) rotate(45deg);
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
}

/* 多选模式下隐藏输入区 */
.chat-window.multi-select-mode .chat-input-container {
    display: none !important;
}

/* 多选模式下隐藏原头部 */
.chat-window.multi-select-mode .chat-window-header {
    display: none !important;
}

/* 消息选中状态 */
.chat-message.selected .chat-message-content {
    box-shadow: 
        0 0 0 2px rgba(25, 118, 210, 0.3),
        0 0.4em 1.2em rgba(0, 0, 0, 0.08),
        0 0.2em 0.4em rgba(0, 0, 0, 0.06),
        inset 0 0.15em 0.3em rgba(255, 255, 255, 0.7),
        inset 0.15em 0 0.3em rgba(255, 255, 255, 0.3);
}

/* 时间戳选中状态 */
.chat-date.selected {
    background: rgba(25, 118, 210, 0.15);
    border-radius: 8px;
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.3);
}

/* ========== 引用预览条 ========== */

/* ========== 格式修正功能样式 ========== */

/* 格式修正弹窗 */
.format-fix-dialog {
    width: 380px;
    max-width: 95%;
    max-height: 80vh;
}

.format-fix-body {
    max-height: 60vh;
    overflow-y: auto;
    gap: 12px !important;
    padding: 16px 20px !important;
}

.format-fix-footer {
    display: flex;
    gap: 10px;
    padding: 12px 20px !important;
}

.chat-modal-btn-secondary {
    flex: 1;
    padding: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #666;
    background: #F5F5F5;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.chat-modal-btn-secondary:active {
    background: #E8E8E8;
}

/* 模式选择行 */
.format-fix-mode-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.format-fix-mode-row .chat-modal-label {
    margin-bottom: 0;
    white-space: nowrap;
}

.format-fix-mode-select {
    flex: 1;
    padding: 8px 12px;
    font-size: 14px;
    color: #333;
    background: #F7F7F7;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-appearance: none;
    appearance: none;
    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='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

.format-fix-mode-select:focus {
    border-color: #FFB7C5;
    box-shadow: 0 0 0 2px rgba(255, 183, 197, 0.2);
}

/* 折叠标题 */
.format-fix-collapse-header {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px 0;
    user-select: none;
}

.format-fix-collapse-header .chat-modal-label {
    margin-bottom: 0;
    cursor: pointer;
}

.format-fix-collapse-arrow {
    font-size: 10px;
    color: #999;
    transition: transform 0.2s;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}

.format-fix-collapse-arrow.expanded {
    transform: rotate(90deg);
}

/* 原始内容文本域 */
.format-fix-raw-textarea {
    width: 100%;
    min-height: 80px;
    max-height: 120px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: 'SF Mono', 'Menlo', monospace;
    color: #333;
    background: #F7F7F7;
    border: 1px solid transparent;
    border-radius: 8px;
    resize: vertical;
    line-height: 1.5;
    box-sizing: border-box;
    transition: all 0.2s;
}

.format-fix-raw-textarea:focus {
    outline: none;
    background: #FFFFFF;
    border-color: #FFB7C5;
    box-shadow: 0 0 0 2px rgba(255, 183, 197, 0.2);
}

.format-fix-hint {
    font-size: 12px;
    color: #999;
    font-weight: 400;
}

/* 段落标题 */
.format-fix-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.format-fix-section .chat-modal-label {
    margin-bottom: 0;
}

/* 修正结果标题行 */
.format-fix-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.format-fix-result-header .chat-modal-label {
    margin-bottom: 0;
}

/* 重新解析按钮 */
.format-fix-reparse-btn {
    padding: 4px 10px;
    font-size: 12px;
    color: #666;
    background: #F0F0F0;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.format-fix-reparse-btn:active {
    background: #E0E0E0;
}

/* 预览框 (修正前折叠区) */
.format-fix-preview-box {
    background: #F7F7F7;
    border: 1px solid #E8E8E8;
    border-radius: 10px;
    padding: 10px;
    max-height: 150px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 预览项 (修正前) */
.format-fix-preview-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    background: white;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.4;
}

.format-fix-type-badge {
    display: inline-block;
    flex-shrink: 0;
    padding: 1px 6px;
    font-size: 11px;
    color: #666;
    background: #E8E8E8;
    border-radius: 4px;
    font-weight: 500;
    margin-top: 1px;
}

.format-fix-preview-text {
    flex: 1;
    word-break: break-all;
    color: #333;
}

.format-fix-mindcard-badge {
    display: inline-block;
    flex-shrink: 0;
    padding: 1px 6px;
    font-size: 11px;
    color: #8E24AA;
    background: #F3E5F5;
    border-radius: 4px;
    margin-top: 1px;
}

.format-fix-empty {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 16px 0;
}

/* 交互卡片容器 */
.format-fix-items-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
    padding: 2px 0;
}

/* 单张交互卡片 */
.format-fix-item-card {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 8px;
    background: #F7F7F7;
    border: 1px solid #EBEBEB;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
}

/* 序号标记 */
.format-fix-item-seq {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #E8E8E8;
    color: #999;
    font-size: 11px;
    cursor: pointer;
    user-select: none;
    margin-top: 1px;
}
.format-fix-item-seq-input {
    width: 28px;
    height: 20px;
    border: 1px solid #999;
    border-radius: 4px;
    text-align: center;
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 1px;
    -moz-appearance: textfield;
    appearance: textfield;
}
.format-fix-item-seq-input::-webkit-outer-spin-button,
.format-fix-item-seq-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 类型徽章 */
.format-fix-item-badge {
    display: inline-block;
    flex-shrink: 0;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
    margin-top: 1px;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s;
}

.format-fix-item-badge:active {
    transform: scale(0.95);
}

/* 文字: 深灰底白字 */
.format-fix-item-badge.type-text {
    color: #fff;
    background: #666;
}

/* 旁白: 浅灰底灰字+斜体 */
.format-fix-item-badge.type-narrator {
    color: #888;
    background: #E8E8E8;
    font-style: italic;
}

/* 主动: 中灰底白字 */
.format-fix-item-badge.type-proactive {
    color: #fff;
    background: #999;
}

/* 特殊类型: 不可点击 */
.format-fix-item-badge.type-special {
    color: #999;
    background: #F0F0F0;
    cursor: default;
}

.format-fix-item-badge.type-special:active {
    transform: none;
}

/* 卡片内容 */
.format-fix-item-content {
    flex: 1;
    word-break: break-all;
    color: #333;
    cursor: text;
    min-height: 18px;
}

/* 内容编辑态 */
.format-fix-item-edit-textarea {
    flex: 1;
    min-height: 40px;
    padding: 4px 6px;
    font-size: 13px;
    color: #333;
    background: #fff;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    resize: vertical;
    line-height: 1.4;
    font-family: inherit;
    box-sizing: border-box;
}

.format-fix-item-edit-textarea:focus {
    outline: none;
    border-color: #999;
}

/* 操作按钮组 */
.format-fix-item-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    margin-top: 1px;
}

.format-fix-item-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #999;
    background: transparent;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}

.format-fix-item-btn:active {
    background: #E8E8E8;
}

.format-fix-item-btn:disabled {
    color: #D0D0D0;
    border-color: #F0F0F0;
    cursor: default;
}

.format-fix-item-btn:disabled:active {
    background: transparent;
}

/* 心声标记 */
.format-fix-item-mindcard {
    font-size: 10px;
    color: #999;
    margin-left: 2px;
}

/* 拆分编辑区 */
.format-fix-split-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.format-fix-split-hint {
    font-size: 11px;
    color: #999;
}

.format-fix-split-textarea {
    width: 100%;
    min-height: 50px;
    padding: 8px;
    font-size: 13px;
    color: #333;
    background: #fff;
    border: 1px solid #D0D0D0;
    border-radius: 6px;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
    line-height: 1.5;
}

.format-fix-split-textarea:focus {
    outline: none;
    border-color: #999;
}

.format-fix-split-actions {
    display: flex;
    gap: 8px;
}

.format-fix-split-btn {
    flex: 1;
    padding: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    background: #F0F0F0;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}

.format-fix-split-btn:active {
    background: #E0E0E0;
}

.format-fix-split-cancel {
    color: #999;
    background: #F7F7F7;
}

/* 格式修正 - 添加消息按钮 */
.format-fix-add-wrap {
    text-align: center;
    margin-top: 8px;
}
.format-fix-add-btn {
    background: none;
    border: 1px dashed #D0D0D0;
    color: #999;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    width: 100%;
}
.format-fix-add-btn:active {
    background: #F5F5F5;
}
.format-fix-add-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 6px;
}
.format-fix-add-type-btn {
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid #E0E0E0;
    background: #F7F7F7;
    color: #666;
    font-size: 12px;
    cursor: pointer;
}
.format-fix-add-type-btn:active {
    background: #E8E8E8;
}

/* 格式修正 - 红包/转账编辑器 */
.format-fix-special-edit {
    display: flex;
    gap: 4px;
    align-items: center;
    flex: 1;
}
.format-fix-special-input {
    flex: 1;
    padding: 4px 6px;
    border: 1px solid #D0D0D0;
    border-radius: 4px;
    font-size: 12px;
    color: #333;
    background: #fff;
}
.format-fix-special-input:focus {
    outline: none;
    border-color: #999;
}
.format-fix-special-input[type="number"] {
    max-width: 80px;
}
.format-fix-special-save {
    background: #666;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
}
.format-fix-special-save:active {
    background: #555;
}

/* 多选操作栏的通用按钮样式 */
.multi-select-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 30px;
    font-size: 16px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.multi-select-fix-btn {
    color: #333;
    background: linear-gradient(135deg, #F5F5F5 0%, #E8E8E8 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.multi-select-fix-btn:active {
    transform: scale(0.98);
}

.multi-select-fix-btn:disabled {
    background: #E8E8E8;
    color: #BBB;
    box-shadow: none;
    cursor: not-allowed;
}

/* 多选操作栏flex间距 */
.multi-select-actions {
    gap: 12px;
}

/* ========== 格式修正夜间模式 ========== */
.phone-frame.night-mode .format-fix-dialog {
    background: #1C1C1E;
}

.phone-frame.night-mode .format-fix-mode-select {
    background: #2C2C2E;
    border-color: #3A3A3C;
    color: #E5E5E7;
}

.phone-frame.night-mode .format-fix-collapse-arrow {
    color: #8E8E93;
}

.phone-frame.night-mode .format-fix-raw-textarea {
    background: #2C2C2E;
    color: #E5E5E7;
}

.phone-frame.night-mode .format-fix-raw-textarea:focus {
    background: #3A3A3C;
    border-color: #FFB7C5;
}

.phone-frame.night-mode .format-fix-reparse-btn {
    color: #AAA;
    background: #3A3A3C;
    border-color: #4A4A4C;
}

.phone-frame.night-mode .format-fix-preview-box {
    background: #2C2C2E;
    border-color: #3A3A3C;
}

.phone-frame.night-mode .format-fix-preview-item {
    background: #3A3A3C;
}

.phone-frame.night-mode .format-fix-type-badge {
    background: #4A4A4C;
    color: #AAA;
}

.phone-frame.night-mode .format-fix-preview-text {
    color: #E5E5E7;
}

.phone-frame.night-mode .format-fix-empty {
    color: #8E8E93;
}

/* 交互卡片夜间模式 */
.phone-frame.night-mode .format-fix-item-card {
    background: #2C2C2E;
    border-color: #3A3A3C;
}

.phone-frame.night-mode .format-fix-item-seq {
    background: #3A3A3C;
    color: #8E8E93;
}
.phone-frame.night-mode .format-fix-item-seq-input {
    background: #2C2C2E;
    border-color: #636366;
    color: #E5E5E7;
}

.phone-frame.night-mode .format-fix-item-badge.type-text {
    color: #E5E5E7;
    background: #555;
}

.phone-frame.night-mode .format-fix-item-badge.type-narrator {
    color: #8E8E93;
    background: #3A3A3C;
}

.phone-frame.night-mode .format-fix-item-badge.type-proactive {
    color: #E5E5E7;
    background: #666;
}

.phone-frame.night-mode .format-fix-item-badge.type-special {
    color: #666;
    background: #2C2C2E;
}

.phone-frame.night-mode .format-fix-item-content {
    color: #E5E5E7;
}

.phone-frame.night-mode .format-fix-item-edit-textarea {
    color: #E5E5E7;
    background: #3A3A3C;
    border-color: #4A4A4C;
}

.phone-frame.night-mode .format-fix-item-edit-textarea:focus {
    border-color: #666;
}

.phone-frame.night-mode .format-fix-item-btn {
    color: #8E8E93;
    border-color: #3A3A3C;
}

.phone-frame.night-mode .format-fix-item-btn:active {
    background: #4A4A4C;
}

.phone-frame.night-mode .format-fix-item-btn:disabled {
    color: #4A4A4C;
    border-color: #2C2C2E;
}

.phone-frame.night-mode .format-fix-split-hint {
    color: #8E8E93;
}

.phone-frame.night-mode .format-fix-split-textarea {
    color: #E5E5E7;
    background: #3A3A3C;
    border-color: #4A4A4C;
}

.phone-frame.night-mode .format-fix-split-textarea:focus {
    border-color: #666;
}

.phone-frame.night-mode .format-fix-split-btn {
    color: #E5E5E7;
    background: #4A4A4C;
}

.phone-frame.night-mode .format-fix-split-cancel {
    color: #8E8E93;
    background: #3A3A3C;
}

/* 添加消息按钮 & 红包转账编辑器 - 夜间模式 */
.phone-frame.night-mode .format-fix-add-btn {
    border-color: #4A4A4C;
    color: #8E8E93;
}
.phone-frame.night-mode .format-fix-add-btn:active {
    background: #3A3A3C;
}
.phone-frame.night-mode .format-fix-add-type-btn {
    border-color: #4A4A4C;
    background: #3A3A3C;
    color: #AAA;
}
.phone-frame.night-mode .format-fix-add-type-btn:active {
    background: #4A4A4C;
}
.phone-frame.night-mode .format-fix-special-input {
    background: #3A3A3C;
    border-color: #4A4A4C;
    color: #E5E5E7;
}
.phone-frame.night-mode .format-fix-special-input:focus {
    border-color: #666;
}
.phone-frame.night-mode .format-fix-special-save {
    background: #555;
}
.phone-frame.night-mode .format-fix-special-save:active {
    background: #666;
}

.phone-frame.night-mode .chat-modal-btn-secondary {
    background: #3A3A3C;
    color: #E5E5E7;
}

.phone-frame.night-mode .multi-select-fix-btn {
    background: linear-gradient(135deg, #3A3A3C 0%, #4A4A4C 100%);
    color: #E5E5E7;
}

.phone-frame.night-mode .multi-select-fix-btn:disabled {
    background: #2C2C2E;
    color: #666;
}

.quote-preview {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.5) 0%, 
        rgba(250, 250, 250, 0.45) 100%);
    backdrop-filter: blur(20px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-bottom: none;
    
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    
    animation: slideDown 0.3s ease;
}

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

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

.quote-preview-label {
    font-size: 12px;
    color: #666;
    font-weight: 500;
    flex-shrink: 0;
}

.quote-preview-text {
    font-size: 13px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quote-preview-cancel {
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #666;
}

.quote-preview-cancel:hover {
    background: rgba(0, 0, 0, 0.1);
}

.quote-preview-cancel:active {
    background: rgba(0, 0, 0, 0.15);
}

/* ========== 消息内的引用内容 ========== */
.message-quote {
    background: rgba(0, 0, 0, 0.05);
    border-left: 3px solid rgba(25, 118, 210, 0.5);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    color: #666;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-self: stretch; /* 让引用框适应wrapper宽度 */
}

.chat-message.user .message-quote {
    border-left-color: rgba(240, 100, 150, 0.5);
}

/* ========== 撤回消息样式 ========== */
.chat-message.recalled {
    max-width: 100%;
    justify-content: center;
}

.chat-message.recalled .chat-message-avatar {
    display: none;
}

.chat-message.recalled .chat-message-content {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    color: #999;
    font-size: 12px;
    font-style: italic;
    padding: 0.3em 0.8em;
}

/* AI撤回可点击 */
.chat-message.ai.recalled .chat-message-content {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
}

.chat-message.ai.recalled .chat-message-content:hover {
    color: #666;
}

/* ========== AI撤回消息查看弹窗 ========== */
/* 撤回消息弹窗遮罩 - 限制在手机屏幕内 */
#recalled-message-modal.modal-overlay {
    position: absolute;
    z-index: 10000;
}

    .recalled-message-dialog {
        width: 85%;
        max-width: 240px;
    background: #ffffff;
    backdrop-filter: none;
    border: none;
    border-radius: 12px;
    padding: 0;
    max-height: 35vh;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.recalled-message-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-bottom: 1px solid #e8e8e8;
}

.recalled-message-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #333;
}



.recalled-message-content {
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    color: #333;
    max-height: calc(35vh - 45px);
    overflow-y: auto;
    word-wrap: break-word;
    text-align: center;
}

/* ========== 夜间模式适配 ========== */
.phone-frame.night-mode .message-action-overlay {
    background: rgba(0, 0, 0, 0.6);
}

.phone-frame.night-mode .message-action-buttons {
    background: rgba(42, 42, 42, 0.95);
}

.phone-frame.night-mode .message-action-item {
    color: #e0e0e0;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.phone-frame.night-mode .message-action-item:active {
    background: rgba(255, 255, 255, 0.1);
}

.phone-frame.night-mode .message-action-cancel {
    background: rgba(42, 42, 42, 0.95);
    color: #5AC8FA;
}

.phone-frame.night-mode .quote-preview {
    background: linear-gradient(135deg, 
        rgba(42, 42, 42, 0.95) 0%, 
        rgba(38, 38, 38, 0.9) 100%);
    border-color: #555;
}

.phone-frame.night-mode .quote-preview-label,
.phone-frame.night-mode .quote-preview-text {
    color: #e0e0e0;
}

.phone-frame.night-mode .quote-preview-cancel {
    background: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

.phone-frame.night-mode .message-quote {
    background: rgba(255, 255, 255, 0.05);
    color: #999;
}

.phone-frame.night-mode .recalled-message-dialog {
    background: linear-gradient(135deg, 
        rgba(42, 42, 42, 0.98) 0%, 
        rgba(38, 38, 38, 0.95) 100%);
    border-color: #555;
}

.phone-frame.night-mode .recalled-message-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.phone-frame.night-mode .recalled-message-header h3,
.phone-frame.night-mode .recalled-message-content {
    color: #e0e0e0;
}

.phone-frame.night-mode .modal-close-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

.chat-message-loading {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.chat-loading-dot {
    width: 6px;
    height: 6px;
    background: #999;
    border-radius: 50%;
    animation: loadingDot 1.4s infinite;
}

.chat-loading-dot:nth-child(1) {
    animation-delay: 0s;
}

.chat-loading-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.chat-loading-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes loadingDot {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

.chat-input-container {
    background: 
        linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.85) 100%);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    padding: 8px 10px;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 -2px 12px rgba(0, 0, 0, 0.05);
    position: relative;
}

/* 底部边缘果冻厚度 */
.chat-input-container::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(200, 215, 230, 0.4) 20%, 
        rgba(200, 215, 230, 0.4) 80%, 
        transparent 100%);
}

.chat-main-input {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.chat-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid rgba(200, 210, 220, 0.3);
    border-radius: 8px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: linear-gradient(135deg, #ffffff 0%, #fafcff 100%);
    color: rgba(60, 60, 67, 0.9);
    box-shadow: 
        inset 0 1px 2px rgba(0, 0, 0, 0.05),
        0 1px 3px rgba(0, 0, 0, 0.04);
}

.chat-input::placeholder {
    color: rgba(60, 60, 67, 0.25);
}

.chat-input:focus {
    border-color: rgba(0, 122, 255, 0.4);
    background: linear-gradient(135deg, #ffffff 0%, #fafcff 100%);
    box-shadow: 
        inset 0 1px 2px rgba(0, 0, 0, 0.05),
        0 0 0 3px rgba(0, 122, 255, 0.1),
        0 2px 8px rgba(0, 122, 255, 0.1);
}

.chat-ai-reply-btn,
.chat-send-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
    color: #666;
}

.chat-ai-reply-btn:active,
.chat-send-btn:active {
    background: #f0f0f0;
}

.chat-functions {
    display: flex;
    gap: 2px;
    padding: 0 2px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    touch-action: pan-x;
    /* 隐藏滚动条 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.chat-functions::-webkit-scrollbar {
    display: none;
}

.chat-func-btn {
    flex-shrink: 0;
    width: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    transition: background 0.2s;
    border-radius: 4px;
}

.chat-func-btn:active {
    background: #f0f0f0;
}

.chat-func-btn span {
    font-size: 10px;
    color: #999;
    white-space: nowrap;
}

/* 功能键折叠模式 + 按钮 */
.chat-plus-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border: none;
    border-radius: 50%;
    color: #666;
    cursor: pointer;
    flex-shrink: 0;
    margin-right: 8px;
    transition: background 0.2s;
}

.chat-plus-btn:active {
    background: #e0e0e0;
}

.phone-frame.night-mode .chat-plus-btn {
    background: #333;
    color: #999;
}

.phone-frame.night-mode .chat-plus-btn:active {
    background: #444;
}

/* 折叠模式时隐藏底部功能栏 */
.chat-input-container.collapse-mode .chat-functions {
    display: none;
}

/* 折叠模式：功能栏被隐藏后，输入框需自行避让系统底部导航栏（3键导航 env 失效，
   用原生上报的 --android-nav-bottom；web/iOS 回退 env，注入前回退 0 = 当前行为） */
.chat-input-container.collapse-mode {
    padding-bottom: calc(8px + max(env(safe-area-inset-bottom, 0px), var(--android-nav-bottom, 0px)));
}

/* 键盘弹出时 WebView 已 resize 到键盘顶部，导航栏在键盘后面无需避让，归零避免白块 */
body.android-keyboard-open .chat-input-container.collapse-mode {
    padding-bottom: 8px;
}

/* 功能键弹窗样式 */
.chat-func-popup-dialog {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    width: 320px;
    max-width: 90%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    animation: popupSlideUp 0.2s ease-out;
}

@keyframes popupSlideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.chat-func-popup-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.chat-func-popup-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    transition: background 0.2s;
    border-radius: 8px;
}

.chat-func-popup-btn:active {
    background: #f0f0f0;
}

.chat-func-popup-btn span {
    font-size: 10px;
    color: #999;
    white-space: nowrap;
}

.phone-frame.night-mode .chat-func-popup-dialog {
    background: #2a2a2a;
}

.phone-frame.night-mode .chat-func-popup-btn {
    color: #999;
}

.phone-frame.night-mode .chat-func-popup-btn:active {
    background: #333;
}

.phone-frame.night-mode .chat-func-popup-btn span {
    color: #777;
}

/* 澶滈棿妯″紡 */
.phone-frame.night-mode .chat-window {
    background: #1a1a1a;
}

.phone-frame.night-mode .chat-window-header {
    background: #2a2a2a;
    border-bottom-color: #333;
}

.phone-frame.night-mode .chat-window-title,
.phone-frame.night-mode .chat-back-btn,
.phone-frame.night-mode .chat-more-btn {
    color: #e0e0e0;
}

.phone-frame.night-mode .chat-message.ai .chat-message-content {
    background: #2a2a2a;
    color: #e0e0e0;
    border-color: #444;
}

.phone-frame.night-mode .chat-message.user .chat-message-content {
    background: #2a2a2a;
    color: #e0e0e0;
    border-color: #444;
}

.phone-frame.night-mode .chat-message-avatar {
    background: #2a2a2a;
    border-color: #444;
    color: #777;
}

.phone-frame.night-mode .chat-input-container {
    background: #2a2a2a;
    border-top-color: #333;
}

.phone-frame.night-mode .chat-input {
    background: #1a1a1a;
    border-color: #333;
    color: #e0e0e0;
}

.phone-frame.night-mode .chat-input:focus {
    border-color: #7c8db5;
}

.phone-frame.night-mode .chat-ai-reply-btn,
.phone-frame.night-mode .chat-send-btn {
    color: #999;
}

.phone-frame.night-mode .chat-ai-reply-btn:active,
.phone-frame.night-mode .chat-send-btn:active {
    background: #333;
}

.phone-frame.night-mode .chat-func-btn {
    color: #999;
}

.phone-frame.night-mode .chat-func-btn:active {
    background: #333;
}

.phone-frame.night-mode .chat-func-btn span {
    color: #777;
}
/* 表情面板 - 横版居中样式 */
.emoji-panel-container {
    width: 340px !important;
    max-width: 90% !important;
}

.emoji-panel-container .chat-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
}

.emoji-tabs {
    display: flex;
    gap: 16px;
    /* 【v7】支持多分类时横向滚动 */
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    align-items: center;
}
.emoji-tabs::-webkit-scrollbar { display: none; }

.emoji-tab {
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    /* 【v7】防止横向滚动时被压缩 */
    flex-shrink: 0;
}

.emoji-tab svg {
    display: block;
}

.emoji-tab.active {
    opacity: 1;
    color: #333;
}

/* 【v7】文字 tab（用户自定义分类） */
.emoji-tab-text {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    color: #888;
    opacity: 1;  /* 覆盖 .emoji-tab 的 opacity:0.5 */
}
.emoji-tab-text.active {
    color: #333;
    background: #f0f0f0;
    font-weight: 600;
    opacity: 1;
}

.emoji-manage-btn {
    font-size: 14px;
    color: #333;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 500;
}

.emoji-panel-container .chat-modal-body {
    padding: 16px 20px;
    max-height: 300px;
    overflow-y: auto;
}

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

.emoji-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    background: #F7F7F7;
    transition: background 0.2s;
    padding: 4px;
    min-height: 80px;
    min-width: 0;
}

.emoji-item:active {
    background: #E0E0E0;
}

.emoji-item img {
    width: 100%;
    flex: 1;
    object-fit: contain;
    max-height: 60px;
}

.emoji-item-desc {
    font-size: 10px;
    color: #999;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
    margin-top: 2px;
}

/* 表情管理界面 - 横版居中样式 */
.emoji-manager-container {
    width: 340px !important;
    max-width: 90% !important;
}

.emoji-manager-container .chat-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
}

.emoji-manager-back {
    background: none;
    border: none;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
}

.emoji-manager-title {
    font-size: 17px;
    font-weight: 600;
    color: #333;
}

.emoji-add-btn {
    font-size: 14px;
    color: #333;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 500;
}

.emoji-manager-container .chat-modal-body {
    padding: 16px 20px;
    max-height: 360px;
    overflow-y: auto;
}

.emoji-manager-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Phase 2 修正：分类绑定 checkbox + 偷取池虚拟组 */
.emoji-cat-bind-cb {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
    /* 【v7】黑色勾选（覆盖系统默认蓝/红） */
    accent-color: #333;
}

/* 【v7】emoji-manager 顶部挂载说明 */
.emoji-manager-tip {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    margin-top: 12px;
}
.emoji-manager-tip b { color: #333; }

/* 【v8】分类折叠按钮 */
.emoji-cat-collapse-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border-radius: 4px;
}
.emoji-cat-collapse-btn:active {
    background: #e5e5e5;
}

.emoji-cat-block-stolen {
    background: #fafafa;
}

.emoji-cat-block-stolen .emoji-cat-header {
    background: #f0f0f0;
}

.emoji-cat-stolen-title {
    flex: 1;
    color: #555;
    font-size: 13px;
}

.emoji-manager-item {
    position: relative;
    background: #F7F7F7;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.emoji-manager-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    padding: 4px;
}

.emoji-manager-item-desc {
    font-size: 11px;
    color: #666;
    text-align: center;
    padding: 4px 6px;
    background: #f0f0f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emoji-manager-item-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* 表情作用域标签 */
.emoji-scope-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #666;
    margin-top: 12px;
}

.emoji-scope-tag {
    font-size: 9px;
    background: #e3f2fd;
    color: #1976d2;
    padding: 1px 4px;
    border-radius: 3px;
    margin-right: 4px;
}

/* 批量描述编辑器 */
.emoji-batch-desc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.emoji-batch-desc-thumb {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 6px;
    background: #f5f5f5;
    flex-shrink: 0;
}

.emoji-batch-desc-input {
    flex: 1;
    min-width: 0;
}

#emoji-batch-desc-list {
    max-height: 240px;
    overflow-y: auto;
}

/* 表情添加选项按钮 */
.emoji-add-options {
    display: flex;
    gap: 12px;
}

.emoji-add-option-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 16px;
    background: #F7F7F7;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.emoji-add-option-btn:active {
    background: #E0E0E0;
}

.emoji-add-option-btn svg {
    display: block;
    color: #666;
}

.emoji-add-option-btn span {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

/* ============ Phase 2: 表情分类管理 ============ */

/* 危险按钮（用于"一起删除"等不可逆操作） */
.chat-modal-btn-danger {
    background: #ff3b30;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
}

.chat-modal-btn-danger:active {
    background: #e62e24;
}

/* 表情管理 - 头部右侧"新建分类"按钮 */
.emoji-cat-create-btn {
    font-size: 14px;
    color: #333;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 500;
}

/* 分类容器 */
.emoji-cat-block {
    margin-bottom: 16px;
    border: 1px solid #ececec;
    border-radius: 8px;
    overflow: hidden;
}

/* 分类标题行 */
.emoji-cat-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: #f7f7f7;
    border-bottom: 1px solid #ececec;
}

.emoji-cat-name-input {
    flex: 1;
    min-width: 0;
    border: 1px solid transparent;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    padding: 4px 6px;
    border-radius: 4px;
}

.emoji-cat-name-input:focus {
    border-color: #ddd;
    background: #fff;
    outline: none;
}

.emoji-cat-name-input:disabled {
    color: #888;
    cursor: not-allowed;
}

.emoji-cat-btn {
    background: none;
    border: none;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    font-size: 14px;
    border-radius: 4px;
    flex-shrink: 0;
}

.emoji-cat-btn:not(:disabled):active {
    background: #e5e5e5;
}

.emoji-cat-btn:disabled {
    color: #ccc;
    cursor: not-allowed;
}

.emoji-cat-btn-delete {
    color: #ee0a24;
}

.emoji-cat-btn-delete:disabled {
    color: #ccc;
}

/* 分类下的表情网格 */
.emoji-cat-body {
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.emoji-cat-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #aaa;
    font-size: 12px;
    padding: 16px 0;
}

/* 分类内"添加表情"按钮 */
.emoji-cat-add-btn {
    grid-column: 1 / -1;
    padding: 8px;
    background: #f7f7f7;
    color: #666;
    border: 1px dashed #ccc;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
}

.emoji-cat-add-btn:active {
    background: #ececec;
}

/* 分类内表情卡片（含移动+删除按钮） */
.emoji-cat-item {
    position: relative;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* 【v8】防止双击编辑时选中文字（双击触发编辑模态）*/
    user-select: none;
    -webkit-user-select: none;
}

.emoji-cat-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    padding: 2px;
}

.emoji-cat-item-desc {
    font-size: 10px;
    color: #666;
    text-align: center;
    padding: 2px 4px;
    background: #fafafa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emoji-cat-item-actions {
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    gap: 2px;
}

.emoji-cat-item-action {
    width: 18px;
    height: 18px;
    background: rgba(0,0,0,0.55);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.emoji-cat-item-action:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* 上传弹窗的"分类"下拉（已弃用：Phase 2 v2 移除上传分类下拉，仅 emoji-move-cat-select 仍用此类） */
.emoji-cat-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    margin-top: 4px;
}

/* ============ 【批量删除】多选模式 ============ */
.emoji-bulk-mode-entry {
    display: block;
    width: 100%;
    padding: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #333;
    cursor: pointer;
}
.emoji-bulk-mode-entry:active { background: #e5e5e5; }

/* 【表情包视觉识别 toggle 行】per-char 开关在表情管理面板顶部 */
.emoji-vision-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    gap: 10px;
}
.emoji-vision-toggle-label {
    flex: 1;
    min-width: 0;
}
.emoji-vision-toggle-title {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    margin-bottom: 3px;
}
.emoji-vision-toggle-info {
    font-size: 11px;
    color: #999;
    line-height: 1.4;
}

.emoji-bulk-action-bar {
    display: flex;
    gap: 6px;
    padding: 8px;
    margin-bottom: 12px;
    background: #f7f7f7;
    border-radius: 8px;
    border: 1px solid #ececec;
}

.emoji-bulk-btn {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    font-size: 12px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.emoji-bulk-btn:active { background: #e5e5e5; }
.emoji-bulk-btn:disabled { color: #ccc; cursor: not-allowed; background: #fafafa; }

.emoji-bulk-btn-danger { color: #ee0a24; border-color: #ee0a24; }
.emoji-bulk-btn-danger:disabled { color: #ccc; border-color: #ddd; }

/* 选中态：黑边 + 右上角 ✓ */
.emoji-cat-item-selected {
    border-color: #333 !important;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
}
.emoji-cat-item-selected::after {
    content: '✓';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    background: #333;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* 进入 bulk-mode 后隐藏所有易误触的操作元素，仅保留卡片本体可选 */
.emoji-manager-container.bulk-mode .emoji-cat-item-actions,
.emoji-manager-container.bulk-mode .emoji-cat-add-btn,
.emoji-manager-container.bulk-mode .emoji-cat-btn-up,
.emoji-manager-container.bulk-mode .emoji-cat-btn-down,
.emoji-manager-container.bulk-mode .emoji-cat-btn-clear,
.emoji-manager-container.bulk-mode .emoji-cat-btn-delete,
.emoji-manager-container.bulk-mode .emoji-cat-bind-cb,
.emoji-manager-container.bulk-mode #emoji-cat-create-btn {
    display: none !important;
}

/* bulk-mode 时分类名输入框禁用编辑（视觉上保持，不允许操作） */
.emoji-manager-container.bulk-mode .emoji-cat-name-input {
    pointer-events: none;
}

/* ============ Phase 2 END ============ */

/* 弹窗样式 */
.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    pointer-events: auto;
}

/* 弹窗遮罩层 */
.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 底部弹窗样式 (仿照功能面板) */
.modal-bottom-sheet {
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    border-radius: 12px 12px 0 0 !important;
    margin: 0 !important;
    animation: slideUp 0.3s ease-out !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.modal-bottom-sheet .modal-header {
    border-bottom: none;
    padding: 12px 16px;
}

.modal-bottom-sheet .modal-body {
    padding: 0 16px 20px 16px;
}

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

.modal-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 12px;
    width: 75%;
    max-width: 280px;
    overflow: hidden;
    z-index: 10000;
}

/* 账号鉴权恢复弹窗：已移出设置页滚动容器，对话框交给遮罩 flex 居中（不用 fixed） */
#reauth-recovery-modal .modal-dialog {
    position: static;
    top: auto;
    left: auto;
    transform: none;
}

/* 群主移交弹窗：放 .screen-content 直接子，对话框交给遮罩 flex 居中（不用 fixed） */
#group-transfer-owner-modal .modal-dialog {
    position: static;
    top: auto;
    left: auto;
    transform: none;
}

/* 申请回群弹窗：同上 */
#appeal-rejoin-modal .modal-dialog {
    position: static;
    top: auto;
    left: auto;
    transform: none;
}

/* char 申请回群弹窗：同上 */
#char-rejoin-modal .modal-dialog {
    position: static;
    top: auto;
    left: auto;
    transform: none;
}

/* 入群邀请弹窗：同上 */
#invite-modal .modal-dialog {
    position: static;
    top: auto;
    left: auto;
    transform: none;
}

/* 聊天背景弹窗 - 重构 */
.chat-bg-dialog {
    border-radius: 24px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    flex-direction: column;
}

.chat-bg-dialog .modal-body {
    padding: 20px 24px 24px 24px;
}

.chat-bg-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.chat-bg-tab {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fafafa;
    border: 1.5px solid #e8e8e8;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: inherit;
    font-family: inherit;
}

.chat-bg-tab:hover {
    border-color: #333;
    background: white;
}

.chat-bg-tab:active {
    transform: scale(0.98);
}

.chat-bg-tab.active {
    border-color: #333;
    background: white;
}

.chat-bg-url-group,
.chat-bg-file-group {
    margin-bottom: 16px;
}

.chat-bg-reset-link {
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
    color: #999;
    cursor: pointer;
}

.chat-bg-reset-link:active {
    color: #666;
}

/* 【同步到所有联系人】两个链接横向并排容器
 * 子选择器精确,避免影响其它单独使用 .chat-bg-reset-link 的场景;
 * margin-top 移到容器,子链接 margin 归零,视觉间距与原版一致 */
.chat-bg-action-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 12px;
}
.chat-bg-action-links > .chat-bg-reset-link {
    margin-top: 0;
}

/* TA的记忆弹窗 */
#ai-memory-modal {
    width: 88%;
    max-width: 420px;
}

#ai-memory-modal .modal-body {
    padding: 16px;
}

/* URL输入弹窗 - 横向展开 */
#chat-bg-url-modal {
    width: 85%;
    max-width: 420px;
}

#chat-bg-url-modal .modal-body {
    padding: 16px;
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.modal-close {
    font-size: 24px;
    color: #999;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.modal-body {
    padding: 20px;
}

.modal-label {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.modal-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}

.modal-input:focus {
    outline: none;
    border-color: #333;
}

.modal-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}

.modal-textarea:focus {
    outline: none;
    border-color: #333;
}

.modal-footer {
    padding: 12px 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    gap: 12px;
    justify-content: center;
}

.modal-btn-secondary,
.modal-btn-primary {
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.modal-btn-secondary {
    background: #f0f0f0;
    color: #666;
}

.modal-btn-primary {
    background: #333;
    color: white;
}

.modal-btn-secondary:active,
.modal-btn-primary:active {
    opacity: 0.8;
}

/* 夜间模式 - 表情面板 */
.phone-frame.night-mode .emoji-panel {
    background: #2a2a2a;
    border-top-color: #333;
}

.phone-frame.night-mode .emoji-panel-header {
    border-bottom-color: #333;
}

.phone-frame.night-mode .emoji-manage-btn {
    color: #7c8db5;
}

.phone-frame.night-mode .emoji-item:active {
    background: #333;
}

.phone-frame.night-mode .emoji-manager {
    background: #1a1a1a;
}

.phone-frame.night-mode .emoji-manager-header {
    background: #2a2a2a;
    border-bottom-color: #333;
}

.phone-frame.night-mode .emoji-manager-title {
    color: #e0e0e0;
}

.phone-frame.night-mode .emoji-manager-back,
.phone-frame.night-mode .emoji-add-btn {
    color: #7c8db5;
}

.phone-frame.night-mode .emoji-manager-item {
    background: #2a2a2a;
    border-color: #333;
}

.phone-frame.night-mode .emoji-item-desc {
    color: #777;
}

.phone-frame.night-mode .emoji-scope-tag {
    background: #1a3a5c;
    color: #64b5f6;
}

.phone-frame.night-mode .emoji-scope-label {
    color: #999;
}

.phone-frame.night-mode .emoji-batch-desc-thumb {
    background: #333;
}

.phone-frame.night-mode .modal-dialog {
    background: #2a2a2a;
}

.phone-frame.night-mode .modal-header {
    border-bottom-color: #333;
}

.phone-frame.night-mode .modal-header h3 {
    color: #e0e0e0;
}

.phone-frame.night-mode .modal-close {
    color: #999;
}

/* 梦境弹窗夜间模式 */
.phone-frame.night-mode .dream-dialog {
    background: rgba(60, 50, 80, 0.85); /* 深紫色毛玻璃 */
}

.phone-frame.night-mode .dream-body {
    background: rgba(40, 35, 55, 0.5); /* 深紫背景 */
}

.phone-frame.night-mode .dream-card {
    background: rgba(70, 60, 90, 0.6);
    border-color: rgba(123, 107, 141, 0.3);
}

.phone-frame.night-mode .dream-time-badge {
    background: rgba(123, 107, 141, 0.2);
    border-color: rgba(123, 107, 141, 0.3);
    color: #B8A8C8;
}

.phone-frame.night-mode .dream-time-badge svg {
    stroke: #9D8DAD;
}

.phone-frame.night-mode .dream-text {
    color: #C4B4D4; /* 浅紫粉色文字 */
    background-image: repeating-linear-gradient(
        transparent,
        transparent 26px,
        #6B5B7B 26px, /* 更深的线条颜色 */
        #6B5B7B 27px
    );
}

.phone-frame.night-mode .dream-empty {
    color: #9D8DAD;
}

.phone-frame.night-mode .dream-loading {
    color: #B8A8C8;
}

.phone-frame.night-mode .dream-spinner {
    border-color: #6B5B7B;
    border-top-color: #9D8DAD;
}

.phone-frame.night-mode #dream-modal .modal-header {
    background: rgba(80, 70, 100, 0.4);
    border-bottom-color: rgba(123, 107, 141, 0.4);
}

.phone-frame.night-mode #dream-modal .modal-header h3 {
    color: #C4B4D4;
}

.phone-frame.night-mode #dream-modal .modal-close {
    color: #9D8DAD;
    background: rgba(80, 70, 100, 0.5);
}

.phone-frame.night-mode #dream-modal .modal-close:hover {
    color: #C4B4D4;
    background: rgba(100, 90, 120, 0.7);
}

.phone-frame.night-mode .modal-label {
    color: #999;
}

.phone-frame.night-mode .modal-input {
    background: #1a1a1a;
    border-color: #333;
    color: #e0e0e0;
}

.phone-frame.night-mode .modal-textarea {
    background: #1a1a1a;
    border-color: #333;
    color: #e0e0e0;
}

.phone-frame.night-mode .emoji-add-option-btn {
    background: #333;
    border-color: #444;
    color: #999;
}

.phone-frame.night-mode .emoji-add-option-btn:active {
    background: #2a2a2a;
}

.phone-frame.night-mode .emoji-tab {
    color: #999;
}

.phone-frame.night-mode .emoji-tab.active {
    color: #7c8db5;
}

.phone-frame.night-mode .modal-footer {
    border-top-color: #333;
}

.phone-frame.night-mode .modal-btn-secondary {
    background: #333;
    color: #999;
}

/* 位置功能 */
.location-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.location-option-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.location-option-btn:active {
    background: #e5e5e5;
    transform: scale(0.98);
}

.location-option-btn svg {
    flex-shrink: 0;
    color: #576b95;
}

.location-option-text {
    flex: 1;
}

.location-option-text h4 {
    margin: 0 0 4px 0;
    font-size: 15px;
    color: #333;
    font-weight: 500;
}

.location-option-text p {
    margin: 0;
    font-size: 12px;
    color: #999;
}

.location-input-group {
    margin-bottom: 16px;
}

.location-input-group:last-child {
    margin-bottom: 0;
}

.location-map {
    width: 100%;
    height: 180px;
    background: #f5f5f5;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
}

.location-map-marker {
    position: absolute;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
}

.location-map-marker.user {
    color: #576b95;
}

.location-map-marker.ai {
    color: #ff6b6b;
}

.location-map-line {
    position: absolute;
    height: 2px;
    background: repeating-linear-gradient(
        to right,
        #999 0px,
        #999 5px,
        transparent 5px,
        transparent 10px
    );
    transform-origin: left center;
}

.location-distance {
    text-align: center;
    padding: 12px;
    background: #f5f5f5;
    border-radius: 8px;
    margin-bottom: 12px;
}

.location-distance-value {
    font-size: 24px;
    font-weight: 600;
    color: #576b95;
    margin-bottom: 4px;
}

.location-distance-label {
    font-size: 12px;
    color: #999;
}

/* 夜间模式 - 位置 */
.phone-frame.night-mode .location-option-btn {
    background: #333;
    border-color: #444;
}

.phone-frame.night-mode .location-option-btn:active {
    background: #2a2a2a;
}

.phone-frame.night-mode .location-option-text h4 {
    color: #e0e0e0;
}

.phone-frame.night-mode .location-option-text p {
    color: #999;
}

.phone-frame.night-mode .location-map {
    background: #2a2a2a;
}

.phone-frame.night-mode .location-distance {
    background: #2a2a2a;
}

/* 面板遮罩层 */
.panel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 280px;
    background: transparent;
    z-index: 99;
}

/* 通话窗口 */
.call-window {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(200, 200, 200, 0.4);
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.call-window.video-call {
    background: rgba(0, 0, 0, 0.6);
}

/* 毛玻璃背景层 */
.call-blur-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: -1;
}

.call-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 20px;
    flex-shrink: 0;
}

.call-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
    margin-bottom: 20px;
    border: 3px solid rgba(255,255,255,0.3);
}

.call-avatar.large {
    width: 100px;
    height: 100px;
    font-size: 40px;
}

.call-avatar.small {
    width: 60px;
    height: 60px;
    font-size: 24px;
    border: 2px solid rgba(255,255,255,0.3);
}

.call-name {
    font-size: 24px;
    color: white;
    font-weight: 500;
    margin-bottom: 8px;
}

.call-status {
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 8px;
}

.call-duration {
    font-size: 16px;
    color: white;
    margin-bottom: 10px;
}

.call-messages-container {
    flex: 1;
    width: 100%;
    max-width: 100%;
    overflow-y: auto;
    padding: 0 15px;
    margin-bottom: 0;
}

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

.call-message {
    padding: 8px 12px;
    border-radius: 6px;
    max-width: 70%;
    word-wrap: break-word;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.3);
    color: white;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -webkit-user-select: none;
    user-select: none;
}

.call-message.user {
    align-self: flex-end;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 6px 6px 1px 6px;
}

.call-message.ai {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 6px 6px 6px 1px;
}

/* 视频通话旁白消息 */
.call-message.narrator {
    align-self: center;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    font-size: 13px;
    max-width: 85%;
    text-align: center;
    padding: 4px 8px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.call-input-container {
    width: 100%;
    padding: 10px 15px;
    background: transparent;
    flex-shrink: 0;
}

.call-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 4px 4px 4px 15px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.call-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 0;
    font-size: 14px;
    color: white;
    outline: none;
}

.call-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.call-ai-reply-btn,
.call-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(200, 200, 200, 0.6);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: rgba(200, 200, 200, 0.9);
    flex-shrink: 0;
}

.call-ai-reply-btn:active,
.call-send-btn:active {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0.95);
}

.call-controls {
    width: 100%;
    padding: 15px 20px 25px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-shrink: 0;
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
}

.call-window.connected .call-controls {
    position: relative;
    bottom: auto;
}

.call-control-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ff4444;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
    color: white;
}

.call-control-btn.accept {
    background: #07c160;
}

/* 来电状态下的控制栏布局 */
.call-window.incoming-call .call-controls {
    justify-content: space-around;
    padding: 0 40px 40px;
}

.call-window.incoming-call .call-control-btn.accept {
    display: flex !important;
}

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

/* 通话连接状态控制 */
.call-connected-only {
    display: none !important;
}

.call-window.connected .call-connected-only {
    display: flex !important;
}

.call-window.connected .call-messages-container.call-connected-only {
    display: flex !important;
}

.call-window.connected .call-input-container.call-connected-only {
    display: flex !important;
}

/* === 语音通话特定样式重构 (文字模拟模式) === */
#voice-call-window .call-header {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 30vh; /* 呼叫中：视觉重心在中上部 */
}

#voice-call-window.connected .call-header {
    margin-top: 0; /* 接通后：移动到顶部 */
    padding-top: 50px; /* 增加顶部内边距 */
    padding-bottom: 10px;
    transform: scale(0.9); /* 整体稍微缩小 */
}

/* 接通后头像变小 */
#voice-call-window.connected .call-avatar {
    width: 50px;
    height: 50px;
    font-size: 20px;
    margin-bottom: 5px;
    border-width: 2px;
}

#voice-call-window.connected .call-name {
    font-size: 16px;
    margin-bottom: 2px;
}

#voice-call-window.connected .call-status {
    display: none;
}

#voice-call-window.connected .call-duration {
    font-size: 12px;
    margin-bottom: 5px;
    opacity: 0.8;
}

/* 消息列表区域 */
#voice-call-window.connected .call-messages-container {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    padding: 10px 15px;
    display: block !important; /* 覆盖默认的 flex */
}

/* 输入区域 */
#voice-call-window.connected .call-input-container {
    width: 100%;
    padding: 10px 15px;
    backdrop-filter: blur(10px);
    display: block !important;
    flex-shrink: 0;
}

#voice-call-window .call-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

#voice-call-window .call-input {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 8px 12px;
    height: 36px;
    color: white;
    flex: 1; /* 占据剩余空间 */
}

/* 按钮样式微调 */
#voice-call-window .call-ai-reply-btn,
#voice-call-window .call-send-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 控制栏在接通后不再绝对定位，而是作为流布局的一部分 */
#voice-call-window.connected .call-controls {
    position: static;
    padding: 10px 0 30px;
    margin-top: 0;
    width: 100%;
}

/* === 语音通话拟真屏（批次1：仅结构与静态样式，逻辑见批次2） === */
#voice-call-window { --call-font-color: #ffffff; background: #000; }
#voice-call-window .call-name,
#voice-call-window .call-status,
#voice-call-window .call-duration { color: var(--call-font-color); }

/* 头像放大（覆盖旧文字模拟接通后的 50px / base 80px） */
#voice-call-window .call-avatar,
#voice-call-window.connected .call-avatar {
    width: 96px; height: 96px; font-size: 38px; border-width: 3px; margin-bottom: 12px;
}

/* 消息列表：纯文本+下划线（仿线下），无气泡背景；char左虚线 / user右实线 / 旁白中斜体 */
#voice-call-window .call-message {
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    border-radius: 0; max-width: 80%; padding: 6px 2px 7px;
    color: var(--call-font-color); font-size: 13px; line-height: 1.5;
}
#voice-call-window .call-message.ai { align-self: flex-start; border-bottom: 1px dashed var(--call-font-color); }
#voice-call-window .call-message.user { align-self: flex-end; border-bottom: 1px solid var(--call-font-color); }
#voice-call-window .call-message.narrator {
    align-self: center; border-bottom: none; font-style: italic; opacity: .7; max-width: 88%; text-align: center; font-size: 12px;
}
/* 输入框去掉内层圆角/底色，只保留外层 .call-input-row 的 pill */
#voice-call-window .call-input { background: transparent; border-radius: 0; padding: 8px 0; }

/* 背景层：不透明，盖掉 .call-window 半透明底，z-index:-1 沿用 .call-blur-bg 手法不挡 UI */
#voice-call-window .call-bg { position: absolute; inset: 0; z-index: -1; background: #000; overflow: hidden; }
#voice-call-window .call-bg-img { width: 100%; height: 100%; object-fit: cover; }
#voice-call-window .call-blur-bg { display: none; }

/* 右上角设置入口；来电/回看态隐藏 */
/* 齿轮是"进设置改字色"的恢复入口，必须与用户可调字色解绑：
   固定白图标 + 较深芯片，任何背景/壁纸/字色下都可见，避免黑字黑底软锁死 */
#voice-call-window .call-settings-btn {
    position: absolute; top: 40px; right: 16px; width: 36px; height: 36px;
    border-radius: 50%; border: none; background: rgba(0,0,0,0.5);
    color: #fff; display: flex; align-items: center;
    justify-content: center; z-index: 25; cursor: pointer;
}
#voice-call-window.incoming-call .call-settings-btn,
#voice-call-window.review-mode .call-settings-btn { display: none !important; }

/* AI 说话波纹；恒占位避免跳动，opacity 切换；接通且 .ai-speaking 才动 */
#voice-call-window .call-wave {
    display: flex; align-items: flex-end; justify-content: center;
    gap: 3px; height: 0; margin-top: 0; opacity: 0; overflow: hidden; transition: opacity .25s;
}
#voice-call-window .call-wave span {
    width: 3px; height: 6px; border-radius: 2px;
    background: var(--call-font-color); opacity: .85;
}
#voice-call-window.ai-speaking .call-wave { opacity: 1; height: 16px; margin-top: 6px; }
#voice-call-window.ai-speaking .call-wave span { animation: vcWave .9s ease-in-out infinite; }
#voice-call-window.ai-speaking .call-wave span:nth-child(2) { animation-delay: .15s; }
#voice-call-window.ai-speaking .call-wave span:nth-child(3) { animation-delay: .30s; }
#voice-call-window.ai-speaking .call-wave span:nth-child(4) { animation-delay: .45s; }
#voice-call-window.ai-speaking .call-wave span:nth-child(5) { animation-delay: .60s; }
@keyframes vcWave { 0%,100% { transform: scaleY(.5); } 50% { transform: scaleY(2.6); } }

/* 单条字幕方案已弃用：改回线下式消息列表（见上方 .call-message 规则），列表常显，
   endCall/showCallLog 沿用 #voice-call-messages，回看一致 */

/* 麦克风键：移到挂断键旁的控制区，白底黑图标，与挂断键同 60px */
#voice-call-window .call-mic-btn {
    width: 60px; height: 60px; border: none; border-radius: 50%;
    background: #fff; color: #000;
    display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
#voice-call-window .call-mic-btn:active { transform: scale(0.95); }
#voice-call-window .call-mic-btn.recording { background: #ff4444; color: #fff; animation: vcMic 1s ease-in-out infinite; }
@keyframes vcMic { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* 通话设置面板：默认滑出屏外，.open 滑入（逻辑见批次2） */
#voice-call-window .call-settings-panel {
    position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column;
    background: rgba(20,20,20,0.96); color: #fff;
    transform: translateX(100%); transition: transform .3s ease;
}
#voice-call-window .call-settings-panel.open { transform: translateX(0); }
#voice-call-window .call-settings-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 50px 20px 16px; font-size: 17px; font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
#voice-call-window .call-settings-close { background: none; border: none; color: #fff; cursor: pointer; padding: 4px; }
#voice-call-window .call-settings-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
#voice-call-window .call-settings-row { margin-bottom: 18px; }
#voice-call-window .call-settings-row-main { display: flex; align-items: center; justify-content: space-between; }
#voice-call-window .call-settings-label { font-size: 15px; }
#voice-call-window .call-settings-hint { margin: 8px 0 0; font-size: 12px; color: rgba(255,255,255,0.5); }
#voice-call-window .call-settings-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 18px 0; }
#voice-call-window .call-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
#voice-call-window .call-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
#voice-call-window .call-switch-track {
    position: absolute; inset: 0; background: rgba(255,255,255,0.2);
    border-radius: 24px; transition: background .2s; cursor: pointer;
}
#voice-call-window .call-switch-track::before {
    content: ''; position: absolute; width: 20px; height: 20px; left: 2px; top: 2px;
    background: #fff; border-radius: 50%; transition: transform .2s;
}
#voice-call-window .call-switch input:checked + .call-switch-track { background: #07c160; }
#voice-call-window .call-switch input:checked + .call-switch-track::before { transform: translateX(20px); }
#voice-call-window .call-switch input:disabled + .call-switch-track { opacity: .4; cursor: not-allowed; }
#voice-call-window .call-bg-config { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
#voice-call-window .call-bg-thumb {
    width: 56px; height: 56px; border-radius: 8px; background: #000;
    background-size: cover; background-position: center; flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.15);
}
#voice-call-window .call-bg-actions { display: flex; flex-direction: column; gap: 8px; }
#voice-call-window .call-settings-btn-sm {
    padding: 7px 14px; border-radius: 16px; border: none; font-size: 13px;
    background: rgba(255,255,255,0.15); color: #fff; cursor: pointer;
}
#voice-call-window .call-settings-btn-sm.ghost { background: transparent; border: 1px solid rgba(255,255,255,0.25); }
#voice-call-window .call-fontcolor-config { display: flex; gap: 12px; margin-top: 10px; }
#voice-call-window .call-fontcolor-opt {
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
    border: 2px solid rgba(255,255,255,0.4); background: #fff; padding: 0; position: relative; overflow: hidden;
}
#voice-call-window .call-fontcolor-opt.dark { background: #000; }
#voice-call-window .call-fontcolor-opt.custom {
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    display: inline-flex;
}
#voice-call-window .call-fontcolor-opt.custom input[type=color] {
    position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; border: none; cursor: pointer;
}
#voice-call-window .call-fontcolor-opt.active { outline: 2px solid var(--call-font-color); outline-offset: 2px; }
#voice-call-window .call-settings-subrow {
    display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: rgba(255,255,255,0.75);
}
#voice-call-window .call-settings-num {
    width: 56px; padding: 5px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.1); color: #fff; font-size: 13px; text-align: center;
}

/* === 视频通话拟真样式：逐条镜像语音(#voice-call-window 18890-19118)，仅背景 #000→#141414；
   不改任何 #voice 选择器（零语音回归）；@keyframes vcWave/vcMic 复用语音块不重声明 === */
/* — 镜像"语音文字模拟模式"布局块 — */
#video-call-window .call-header {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 30vh;
}
#video-call-window.connected .call-header {
    margin-top: 0;
    padding-top: 50px;
    padding-bottom: 10px;
    transform: scale(0.9);
}
#video-call-window.connected .call-avatar {
    width: 50px;
    height: 50px;
    font-size: 20px;
    margin-bottom: 5px;
    border-width: 2px;
}
#video-call-window.connected .call-name {
    font-size: 16px;
    margin-bottom: 2px;
}
#video-call-window.connected .call-status {
    display: none;
}
#video-call-window.connected .call-duration {
    font-size: 12px;
    margin-bottom: 5px;
    opacity: 0.8;
}
#video-call-window.connected .call-messages-container {
    flex: 1;
    width: 100%;
    overflow-y: auto;
    padding: 10px 15px;
    display: block !important;
}
#video-call-window.connected .call-input-container {
    width: 100%;
    padding: 10px 15px;
    backdrop-filter: blur(10px);
    display: block !important;
    flex-shrink: 0;
}
#video-call-window .call-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
#video-call-window .call-input {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 8px 12px;
    height: 36px;
    color: white;
    flex: 1;
}
#video-call-window .call-ai-reply-btn,
#video-call-window .call-send-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
#video-call-window.connected .call-controls {
    position: static;
    padding: 10px 0 30px;
    margin-top: 0;
    width: 100%;
}

/* — 镜像"语音拟真屏"块，背景深灰近黑 #141414 — */
#video-call-window { --call-font-color: #ffffff; background: #141414; }
#video-call-window.video-call { background: #141414; }
#video-call-window .call-name,
#video-call-window .call-status,
#video-call-window .call-duration { color: var(--call-font-color); }
#video-call-window .call-avatar,
#video-call-window.connected .call-avatar {
    width: 96px; height: 96px; font-size: 38px; border-width: 3px; margin-bottom: 12px;
}
#video-call-window .call-message {
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    border-radius: 0; max-width: 80%; padding: 6px 2px 7px;
    color: var(--call-font-color); font-size: 13px; line-height: 1.5;
}
#video-call-window .call-message.ai { align-self: flex-start; border-bottom: 1px dashed var(--call-font-color); }
#video-call-window .call-message.user { align-self: flex-end; border-bottom: 1px solid var(--call-font-color); }
#video-call-window .call-message.narrator {
    align-self: center; border-bottom: none; font-style: italic; opacity: .7; max-width: 88%; text-align: center; font-size: 12px;
}
#video-call-window .call-input { background: transparent; border-radius: 0; padding: 8px 0; }

#video-call-window .call-bg { position: absolute; inset: 0; z-index: -1; background: #141414; overflow: hidden; }
#video-call-window .call-bg-img { width: 100%; height: 100%; object-fit: cover; }
#video-call-window .call-blur-bg { display: none; }

#video-call-window .call-settings-btn {
    position: absolute; top: 40px; right: 16px; width: 36px; height: 36px;
    border-radius: 50%; border: none; background: rgba(0,0,0,0.5);
    color: #fff; display: flex; align-items: center;
    justify-content: center; z-index: 25; cursor: pointer;
}
#video-call-window.incoming-call .call-settings-btn,
#video-call-window.review-mode .call-settings-btn { display: none !important; }

#video-call-window .call-wave {
    display: flex; align-items: flex-end; justify-content: center;
    gap: 3px; height: 0; margin-top: 0; opacity: 0; overflow: hidden; transition: opacity .25s;
}
#video-call-window .call-wave span {
    width: 3px; height: 6px; border-radius: 2px;
    background: var(--call-font-color); opacity: .85;
}
#video-call-window.ai-speaking .call-wave { opacity: 1; height: 16px; margin-top: 6px; }
#video-call-window.ai-speaking .call-wave span { animation: vcWave .9s ease-in-out infinite; }
#video-call-window.ai-speaking .call-wave span:nth-child(2) { animation-delay: .15s; }
#video-call-window.ai-speaking .call-wave span:nth-child(3) { animation-delay: .30s; }
#video-call-window.ai-speaking .call-wave span:nth-child(4) { animation-delay: .45s; }
#video-call-window.ai-speaking .call-wave span:nth-child(5) { animation-delay: .60s; }

#video-call-window .call-mic-btn,
#video-call-window .call-cam-btn {
    width: 60px; height: 60px; border: none; border-radius: 50%;
    background: #fff; color: #000;
    display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
#video-call-window .call-mic-btn:active,
#video-call-window .call-cam-btn:active { transform: scale(0.95); }
#video-call-window .call-mic-btn.recording { background: #ff4444; color: #fff; animation: vcMic 1s ease-in-out infinite; }
#video-call-window .call-cam-btn.off { background: rgba(255,255,255,.25); color: rgba(255,255,255,.7); }

/* 右上画中画自视小窗：紧贴齿轮下方（齿轮底 ≈76px，留 12px 间隙）；唯一相对语音新增 */
.video-self-preview {
    position: absolute; top: 88px; right: 14px; width: 96px; height: 128px;
    border-radius: 10px; overflow: hidden; z-index: 20;
    background: #000; border: 1px solid rgba(255,255,255,.25);
    display: flex; align-items: center; justify-content: center;
}
.video-self-preview #video-call-self-video {
    width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1);
}
.video-self-preview .video-self-placeholder { color: rgba(255,255,255,.55); display: flex; }
.video-self-preview.cam-on { background: #000; }

#video-call-window .call-settings-panel {
    position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column;
    background: rgba(20,20,20,0.96); color: #fff;
    transform: translateX(100%); transition: transform .3s ease;
}
#video-call-window .call-settings-panel.open { transform: translateX(0); }
#video-call-window .call-settings-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 50px 20px 16px; font-size: 17px; font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
#video-call-window .call-settings-close { background: none; border: none; color: #fff; cursor: pointer; padding: 4px; }
#video-call-window .call-settings-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
#video-call-window .call-settings-row { margin-bottom: 18px; }
#video-call-window .call-settings-row-main { display: flex; align-items: center; justify-content: space-between; }
#video-call-window .call-settings-label { font-size: 15px; }
#video-call-window .call-settings-hint { margin: 8px 0 0; font-size: 12px; color: rgba(255,255,255,0.5); }
#video-call-window .call-settings-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 18px 0; }
#video-call-window .call-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
#video-call-window .call-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
#video-call-window .call-switch-track {
    position: absolute; inset: 0; background: rgba(255,255,255,0.2);
    border-radius: 24px; transition: background .2s; cursor: pointer;
}
#video-call-window .call-switch-track::before {
    content: ''; position: absolute; width: 20px; height: 20px; left: 2px; top: 2px;
    background: #fff; border-radius: 50%; transition: transform .2s;
}
#video-call-window .call-switch input:checked + .call-switch-track { background: #07c160; }
#video-call-window .call-switch input:checked + .call-switch-track::before { transform: translateX(20px); }
#video-call-window .call-switch input:disabled + .call-switch-track { opacity: .4; cursor: not-allowed; }
#video-call-window .call-bg-config { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
#video-call-window .call-bg-thumb {
    width: 56px; height: 56px; border-radius: 8px; background: #141414;
    background-size: cover; background-position: center; flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.15);
}
#video-call-window .call-bg-actions { display: flex; flex-direction: column; gap: 8px; }
#video-call-window .call-settings-btn-sm {
    padding: 7px 14px; border-radius: 16px; border: none; font-size: 13px;
    background: rgba(255,255,255,0.15); color: #fff; cursor: pointer;
}
#video-call-window .call-settings-btn-sm.ghost { background: transparent; border: 1px solid rgba(255,255,255,0.25); }
#video-call-window .call-fontcolor-config { display: flex; gap: 12px; margin-top: 10px; }
#video-call-window .call-fontcolor-opt {
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
    border: 2px solid rgba(255,255,255,0.4); background: #fff; padding: 0; position: relative; overflow: hidden;
}
#video-call-window .call-fontcolor-opt.dark { background: #000; }
#video-call-window .call-fontcolor-opt.custom {
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    display: inline-flex;
}
#video-call-window .call-fontcolor-opt.custom input[type=color] {
    position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; border: none; cursor: pointer;
}
#video-call-window .call-fontcolor-opt.active { outline: 2px solid var(--call-font-color); outline-offset: 2px; }
#video-call-window .call-settings-subrow {
    display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: rgba(255,255,255,0.75);
}
#video-call-window .call-settings-num {
    width: 56px; padding: 5px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.1); color: #fff; font-size: 13px; text-align: center;
}

/* === 输入区/发送/AI 回复键跟随字体颜色（修白底黑字下这些控件仍白色看不见的 bug） === */
#voice-call-window .call-input,
#video-call-window .call-input { color: var(--call-font-color); }
#voice-call-window .call-input::placeholder,
#video-call-window .call-input::placeholder { color: var(--call-font-color); opacity: .5; }
#voice-call-window .call-ai-reply-btn,
#voice-call-window .call-send-btn,
#video-call-window .call-ai-reply-btn,
#video-call-window .call-send-btn {
    color: var(--call-font-color);
    background: color-mix(in srgb, var(--call-font-color) 15%, transparent);
}

/* === 回看模式样式 === */
.call-window.review-mode .call-input-container,
.call-window.review-mode .call-controls,
.call-window.review-mode .video-self-preview {
    display: none !important;
}

.call-window.review-mode .call-close-btn {
    display: flex !important;
    position: absolute;
    top: 40px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    border: none;
    color: white;
    align-items: center;
    justify-content: center;
    z-index: 100;
    cursor: pointer;
}

.call-window.review-mode .call-header {
    margin-top: 0 !important;
    padding-top: 50px;
    padding-bottom: 10px;
    transform: scale(0.9);
}

.call-window.review-mode .call-messages-container {
    display: block !important;
    padding-bottom: 40px; /* 底部留白 */
}

/* 可点击的通话记录气泡 */
.message-bubble.clickable {
    cursor: pointer;
    position: relative;
}

.message-bubble.clickable:active {
    opacity: 0.8;
}

.message-bubble.clickable::after {
    content: '>';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 14px;
    font-family: monospace;
}

/* 红包卡片样式 */
.redpacket-card {
    width: 230px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
}

.redpacket-main {
    background: #FF7F9F; /* 蜜桃粉 */
    padding: 15px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.redpacket-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
}

.redpacket-icon svg {
    width: 32px;
    height: 32px;
    fill: #FFD700;
}

.redpacket-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.redpacket-message {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.redpacket-footer {
    padding: 4px 12px;
    font-size: 11px;
    color: #999;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}

/* 转账卡片样式 */
.transfer-card {
    width: 230px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    border: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
}

.transfer-main {
    background: #FFB7C5; /* 樱花粉 */
    padding: 15px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
}

.transfer-icon {
    width: 36px;
    height: 36px;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.transfer-icon svg {
    width: 36px;
    height: 36px;
    fill: #fff;
}

.transfer-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.transfer-amount {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.transfer-message {
    color: rgba(255,255,255,0.9);
    font-size: 12px;
}

.transfer-footer {
    padding: 4px 12px;
    font-size: 11px;
    color: #999;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}

/* 夜间模式下的转账卡片 */
.phone-frame.night-mode .transfer-card {
    background: #2a2a2a;
    border-color: #3a3a3a;
}

/* 红包和转账卡片不显示气泡背景 */
.chat-message .chat-message-content:has(.redpacket-card),
.chat-message .chat-message-content:has(.transfer-card),
.chat-message .chat-message-content:has(.location-card) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    backdrop-filter: none !important;
}

.phone-frame.night-mode .transfer-title {
    color: #999;
}

.phone-frame.night-mode .transfer-amount {
    color: #e0e0e0;
}

.phone-frame.night-mode .transfer-note {
    color: #777;
}

/* 夜间模式下通话窗口 */
.phone-frame.night-mode .call-window {
    background: rgba(40, 40, 40, 0.4);
}

.phone-frame.night-mode .call-window.video-call {
    background: rgba(0, 0, 0, 0.7);
}

.phone-frame.night-mode .call-input-row {
    background: rgba(80, 80, 80, 0.3);
}

.phone-frame.night-mode .call-ai-reply-btn {
    border-color: rgba(150, 150, 150, 0.6);
    color: rgba(180, 180, 180, 0.9);
}

/* 夜间模式 */
.phone-frame.night-mode .call-input {
    background: rgba(255,255,255,0.15);
    color: white;
}

.phone-frame.night-mode .call-send-btn {
    background: rgba(255,255,255,0.2);
    color: white;
}

/* ===== 层叠卡片样式（淡粉色） ===== */
.stacked-cards-container {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.saved-persona-card.stacked {
    position: absolute;
    width: 85%;
    max-width: 280px;
    height: 100%;
    justify-content: center;
    background: #fdf2f5;
    border: 1px solid #f3dde3;
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    transform-origin: left center;
    pointer-events: none;
}

.stacked-cards-container:hover .saved-persona-card.stacked:first-child {
    transform: translateX(0) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.card-count-badge {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    width: 32px;
    height: 32px;
    background: #f5f5f5;
    color: #666;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    z-index: 200;
}

/* ===== 网格浏览页面样式（6行2列，12个位置） ===== */
.personas-grid-container {
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 6px;
    overflow-y: auto;
    height: calc(100% - 50px);
}

.persona-grid-card {
    background: white;
    border-radius: 12px;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #f0f0f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.25s ease;
    cursor: pointer;
    height: 70px;
    user-select: none;
    position: relative;
}

.persona-grid-card:hover {
    background: white;
    border-color: #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

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

.persona-grid-name {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    text-align: center;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.persona-grid-wechat {
    font-size: 10px;
    color: #666;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* 夜间模式适配 */
.phone-frame.night-mode .persona-grid-card {
    background: #1c1c1e;
    border-color: #3a3a3c;
    box-shadow: none;
}

.phone-frame.night-mode .persona-grid-card:hover {
    background: #2c2c2e;
    border-color: #48484a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.phone-frame.night-mode .persona-grid-name {
    color: #d1d1d6;
}

.phone-frame.night-mode .persona-grid-wechat {
    color: #8e8e93;
}

/* ===== 关系网列表页样式 ===== */

/* 右上角添加按钮 */
.rel-add-btn {
    background: none;
    border: none;
    color: #333;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
}
.rel-add-btn:active {
    background: rgba(0,0,0,0.06);
}

/* 分类标签栏 */
.rel-category-tabs {
    display: flex;
    gap: 0;
    padding: 8px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
    flex-shrink: 0;
}
.rel-category-tabs::-webkit-scrollbar { display: none; }

.rel-tab-item {
    flex-shrink: 0;
    padding: 6px 14px;
    font-size: 13px;
    color: #888;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    user-select: none;
}
.rel-tab-item:active {
    transform: scale(0.95);
}
.rel-tab-item.active {
    background: #f0f0f0;
    color: #333;
    font-weight: 600;
}

/* 卡片列表容器 */
.rel-list-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 单张关系卡片 */
.rel-card {
    display: flex;
    align-items: center;
    height: 72px;
    background: #fff;
    border-radius: 12px;
    padding: 0 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border: 1px solid #f2f2f2;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    position: relative;
    flex-shrink: 0;
}
.rel-card:active {
    background: #f9f9f9;
    transform: scale(0.985);
}

/* 头像 */
.rel-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}
.rel-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 中间信息区 */
.rel-card-info {
    flex: 1;
    min-width: 0;
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}
.rel-card-name {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rel-card-relation {
    font-size: 12px;
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rel-card-desc {
    font-size: 11px;
    color: #aaa;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 右侧亲密度 + 类型标识 */
.rel-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    margin-left: 10px;
    flex-shrink: 0;
    gap: 4px;
}
.rel-card-intimacy {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}
.rel-card-intimacy.level-low { color: #999; }
.rel-card-intimacy.level-mid { color: #333; }
.rel-card-intimacy.level-high { color: #e8854a; }
.rel-card-intimacy.level-max { color: #e04040; }

.rel-card-type-badge {
    font-size: 10px;
    color: #aaa;
    padding: 1px 6px;
    background: #f5f5f5;
    border-radius: 8px;
    white-space: nowrap;
}
.rel-card-wechat-badge {
    font-size: 10px;
    color: #888;
    margin-top: 1px;
}
.rel-edit-wechat-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 空状态 */
.rel-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}
.rel-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}
.rel-empty-text {
    font-size: 15px;
    color: #999;
    margin-bottom: 6px;
}
.rel-empty-hint {
    font-size: 12px;
    color: #bbb;
}

/* 添加关系类型选择弹窗 */
.rel-type-modal {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.rel-type-modal-mask {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
}
.rel-type-modal-sheet {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-width: 420px;
    padding: 20px 16px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    animation: rel-sheet-up 0.25s ease-out;
}
@keyframes rel-sheet-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.rel-type-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 16px;
}
.rel-type-modal-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.rel-type-modal-option:active {
    background: #f5f5f5;
}
.rel-type-modal-icon {
    font-size: 28px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
    border-radius: 12px;
    flex-shrink: 0;
}
.rel-type-modal-label {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}
.rel-type-modal-desc {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}
.rel-type-modal-cancel {
    text-align: center;
    padding: 14px;
    font-size: 15px;
    color: #999;
    cursor: pointer;
    margin-top: 8px;
    border-top: 1px solid #f0f0f0;
}
.rel-type-modal-cancel:active {
    color: #666;
}

/* 人设选择器弹窗 */
.rel-picker-modal {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1001;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.rel-picker-mask {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
}
.rel-picker-sheet {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-width: 420px;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    animation: rel-sheet-up 0.25s ease-out;
}
.rel-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.rel-picker-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}
.rel-picker-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.rel-picker-close:active {
    background: #f0f0f0;
}
.rel-picker-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
.rel-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}
.rel-picker-item:active {
    background: #f5f5f5;
}
.rel-picker-item.disabled {
    opacity: 0.4;
    pointer-events: none;
}
.rel-picker-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0e0e0, #c8c8c8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}
.rel-picker-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rel-picker-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}
.rel-picker-hint {
    font-size: 11px;
    color: #aaa;
}

/* 夜间模式 - 关系网 */
.phone-frame.night-mode .rel-add-btn { color: #e0e0e0; }
.phone-frame.night-mode .rel-category-tabs { background: #1c1c1e; border-bottom-color: #333; }
.phone-frame.night-mode .rel-tab-item { color: #888; }
.phone-frame.night-mode .rel-tab-item.active { background: #333; color: #e0e0e0; }
.phone-frame.night-mode .rel-list-content { background: #000; }
.phone-frame.night-mode .rel-card { background: #1c1c1e; border-color: #2c2c2e; box-shadow: none; }
.phone-frame.night-mode .rel-card:active { background: #2c2c2e; }
.phone-frame.night-mode .rel-card-avatar { background: linear-gradient(135deg, #3a3a3c, #2c2c2e); }
.phone-frame.night-mode .rel-card-name { color: #e0e0e0; }
.phone-frame.night-mode .rel-card-relation { color: #888; }
.phone-frame.night-mode .rel-card-desc { color: #666; }
.phone-frame.night-mode .rel-card-type-badge { background: #2c2c2e; color: #888; }
.phone-frame.night-mode .rel-card-wechat-badge { color: #666; }
.phone-frame.night-mode .rel-empty-text { color: #666; }
.phone-frame.night-mode .rel-empty-hint { color: #555; }
.phone-frame.night-mode .rel-type-modal-sheet { background: #1c1c1e; }
.phone-frame.night-mode .rel-type-modal-title { color: #e0e0e0; }
.phone-frame.night-mode .rel-type-modal-option:active { background: #2c2c2e; }
.phone-frame.night-mode .rel-type-modal-icon { background: #2c2c2e; }
.phone-frame.night-mode .rel-type-modal-label { color: #e0e0e0; }
.phone-frame.night-mode .rel-type-modal-desc { color: #666; }
.phone-frame.night-mode .rel-type-modal-cancel { color: #666; border-top-color: #333; }
.phone-frame.night-mode .rel-picker-sheet { background: #1c1c1e; }
.phone-frame.night-mode .rel-picker-title { color: #e0e0e0; }
.phone-frame.night-mode .rel-picker-close { color: #888; }
.phone-frame.night-mode .rel-picker-close:active { background: #2c2c2e; }
.phone-frame.night-mode .rel-picker-item:active { background: #2c2c2e; }
.phone-frame.night-mode .rel-picker-name { color: #e0e0e0; }
.phone-frame.night-mode .rel-picker-hint { color: #666; }
.phone-frame.night-mode .rel-picker-avatar { background: linear-gradient(135deg, #3a3a3c, #2c2c2e); }

/* ===== 关系编辑页样式 ===== */

.rel-edit-save-btn {
    background: none;
    border: none;
    color: #333;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 12px;
}
.rel-edit-save-btn:active { opacity: 0.6; }

.rel-edit-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px;
    padding-bottom: 40px;
}

/* 对象信息卡 */
.rel-edit-target-card {
    display: flex;
    align-items: center;
    padding: 14px;
    background: #f8f8f8;
    border-radius: 12px;
    margin-bottom: 8px;
    gap: 12px;
}
.rel-edit-target-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e0e0e0, #c8c8c8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    font-weight: 600;
    overflow: hidden;
    flex-shrink: 0;
}
.rel-edit-target-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rel-edit-target-name { font-size: 16px; font-weight: 600; color: #333; }
.rel-edit-target-type { font-size: 12px; color: #999; margin-top: 2px; }

/* 分类选择器 */
.rel-edit-category-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.rel-edit-cat-pill {
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    background: #f0f0f0;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.rel-edit-cat-pill:active { transform: scale(0.95); }
.rel-edit-cat-pill.active { background: #333; color: #fff; }

/* 亲密度滑块 */
.rel-edit-intimacy-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.rel-edit-intimacy-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: #e0e0e0;
    border-radius: 2px;
    outline: none;
}
.rel-edit-intimacy-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #333;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.rel-edit-intimacy-value {
    font-size: 22px;
    font-weight: 700;
    min-width: 30px;
    text-align: center;
}
.rel-edit-intimacy-value.level-low { color: #999; }
.rel-edit-intimacy-value.level-mid { color: #333; }
.rel-edit-intimacy-value.level-high { color: #e8854a; }
.rel-edit-intimacy-value.level-max { color: #e04040; }

/* NPC资料区 */
.rel-edit-npc-section { margin-top: 8px; }
.rel-edit-npc-avatar-upload {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
}
.rel-edit-npc-avatar-preview {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

/* 共同事件 */
.rel-edit-events-empty {
    padding: 16px;
    text-align: center;
    color: #bbb;
    font-size: 13px;
}
.rel-edit-event-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #f8f8f8;
    border-radius: 10px;
    margin-bottom: 8px;
}
.rel-edit-event-info { flex: 1; min-width: 0; }
.rel-edit-event-date { font-size: 11px; color: #999; margin-right: 8px; }
.rel-edit-event-text { font-size: 13px; color: #333; }
.rel-edit-event-delete {
    background: none;
    border: none;
    color: #ccc;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    flex-shrink: 0;
}
.rel-edit-event-delete:active { color: #e04040; }

.rel-edit-add-event-btn {
    width: 100%;
    padding: 12px;
    border: 1.5px dashed #ddd;
    border-radius: 10px;
    background: none;
    color: #999;
    font-size: 13px;
    cursor: pointer;
    margin-top: 4px;
    transition: all 0.2s;
}
.rel-edit-add-event-btn:active { background: #f5f5f5; border-color: #ccc; }

/* 危险操作区 */
.rel-edit-danger-zone {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}
.rel-edit-delete-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: #fff0f0;
    color: #e04040;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.rel-edit-delete-btn:active { background: #ffe0e0; transform: scale(0.98); }

/* 夜间模式 - 编辑页 */
.phone-frame.night-mode .rel-edit-save-btn { color: #6aadff; }
.phone-frame.night-mode .rel-edit-content { background: #000; }
.phone-frame.night-mode .rel-edit-target-card { background: #1c1c1e; }
.phone-frame.night-mode .rel-edit-target-name { color: #e0e0e0; }
.phone-frame.night-mode .rel-edit-target-type { color: #888; }
.phone-frame.night-mode .rel-edit-target-avatar { background: linear-gradient(135deg, #3a3a3c, #2c2c2e); }
.phone-frame.night-mode .rel-edit-cat-pill { background: #2c2c2e; color: #999; }
.phone-frame.night-mode .rel-edit-cat-pill.active { background: #e0e0e0; color: #1a1a1a; }
.phone-frame.night-mode .rel-edit-intimacy-slider { background: #333; }
.phone-frame.night-mode .rel-edit-npc-avatar-preview { background: #2c2c2e; }
.phone-frame.night-mode .rel-edit-event-item { background: #1c1c1e; }
.phone-frame.night-mode .rel-edit-event-text { color: #e0e0e0; }
.phone-frame.night-mode .rel-edit-event-date { color: #666; }
.phone-frame.night-mode .rel-edit-event-delete { color: #555; }
.phone-frame.night-mode .rel-edit-events-empty { color: #555; }
.phone-frame.night-mode .rel-edit-add-event-btn { border-color: #333; color: #666; }
.phone-frame.night-mode .rel-edit-add-event-btn:active { background: #1c1c1e; }
.phone-frame.night-mode .rel-edit-danger-zone { border-top-color: #333; }
.phone-frame.night-mode .rel-edit-delete-btn { background: #2c1010; color: #ff6060; }
.phone-frame.night-mode .rel-edit-delete-btn:active { background: #3c1010; }

/* ===== 遇见app样式 ===== */

/* ===== 微信"我的"页面样式 ===== */
.me-profile-card {
    background: white;
    padding: 20px;
    margin: 15px 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #f0f0f0;
}

.me-profile-card:active {
    background: #fafafa;
    transform: scale(0.98);
}

.me-avatar-circle {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.05);
}

.me-profile-info {
    flex: 1;
}

.me-nickname {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.me-wechat-id {
    font-size: 13px;
    color: #888;
}

.me-arrow {
    font-size: 20px;
    color: #d0d0d0;
    transition: transform 0.2s;
}

.me-profile-card:active .me-arrow {
    transform: translateX(3px);
}

.me-section {
    background: white;
    margin: 10px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #f0f0f0;
}

.me-item {
    display: flex;
    align-items: center;
    padding: 16px 15px;
    cursor: pointer;
    transition: all 0.2s;
    gap: 12px;
    border-bottom: 1px solid #f8f8f8;
}

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

.me-item:active {
    background: #fafafa;
    transform: scale(0.98);
}

.me-icon {
    font-size: 24px;
    width: 32px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

.me-label {
    flex: 1;
    font-size: 15px;
    color: #1a1a1a;
    font-weight: 500;
}

.me-arrow-small {
    font-size: 16px;
    color: #d0d0d0;
    transition: transform 0.2s;
}

.me-item:active .me-arrow-small {
    transform: translateX(3px);
}

/* 真实人设设置页 */
.user-persona-container {
    padding: 15px;
    overflow-y: auto;
    height: calc(100% - 50px);
}

.persona-mode-switch {
    background: white;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 15px;
}

.mode-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 14px;
    color: #666;
}

.mode-toggle {
    position: relative;
    width: 50px;
    height: 26px;
    -webkit-appearance: none;
    appearance: none;
    background: #ccc;
    outline: none;
    border-radius: 13px;
    cursor: pointer;
    transition: 0.3s;
}

.mode-toggle:checked {
    background: #07c160;
}

.mode-toggle:before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    background: white;
    transition: 0.3s;
}

.mode-toggle:checked:before {
    left: 26px;
}

.user-mode-content {
    background: white;
    padding: 15px;
    border-radius: 12px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    font-family: inherit;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

.form-actions {
    padding: 15px;
}

.save-btn {
    width: 100%;
    padding: 15px;
    background: #f5f5f5;
    color: #333;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.save-btn:hover {
    background: #e8e8e8;
}

.save-btn:active {
    background: #d8d8d8;
}

/* 支付页面 */
.wallet-container {
    padding: 15px;
    overflow-y: auto;
    height: calc(100% - 50px);
    background: #fafafa;
}

/* 零钱卡片 - 丰富设计 */
.wallet-change-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    padding: 40px 20px;
    border-radius: 16px;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.change-card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.change-icon-wrapper {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.change-icon {
    width: 24px;
    height: 24px;
    position: relative;
    display: block;
}

.change-icon::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 14px;
    border: 2px solid #666;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.change-icon::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border: 2px solid #666;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.change-title {
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

.change-balance-section {
    margin-bottom: 12px;
    width: 100%;
    text-align: center;
}

.change-balance-label {
    font-size: 13px;
    color: #888;
    margin-bottom: 8px;
    text-align: center;
}

.change-balance-amount {
    font-size: 42px;
    font-weight: 300;
    color: #333;
    letter-spacing: -2px;
    text-align: center;
}

.change-desc {
    font-size: 13px;
    color: #999;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    width: 100%;
    text-align: center;
}

.wallet-section {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
}

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

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

.wallet-item:active {
    background: #f5f5f5;
}

.wallet-item-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.wallet-item-icon .icon-line {
    width: 24px;
    height: 24px;
}

.wallet-item-content {
    flex: 1;
}

.wallet-item-title {
    font-size: 16px;
    color: #333;
    margin-bottom: 2px;
}

.wallet-item-desc {
    font-size: 13px;
    color: #999;
}

.wallet-arrow {
    font-size: 18px;
    color: #ccc;
}

/* 银行卡列表样式 */
.bank-card-modal-content {
    width: 90%;
    max-width: 380px;
    max-height: 80vh;
}

.bank-card-modal-content .modal-body {
    max-height: calc(80vh - 60px);
    overflow-y: auto;
}

.bank-card-list {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 15px;
}

.bank-card-item {
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.bank-card-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #999 0%, #666 100%);
}

.bank-card-item:active {
    transform: scale(0.98);
    border-color: #999;
}

.bank-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.bank-card-bank {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.bank-card-type {
    font-size: 12px;
    color: #666;
    background: rgba(255, 255, 255, 0.5);
    padding: 2px 8px;
    border-radius: 4px;
}

.bank-card-number {
    font-size: 16px;
    color: #666;
    letter-spacing: 2px;
    font-family: 'Courier New', monospace;
    margin-bottom: 12px;
}

.bank-card-balance {
    font-size: 13px;
    color: #888;
}

.bank-card-balance-amount {
    font-size: 20px;
    font-weight: 500;
    color: #333;
    margin-top: 4px;
}

.add-bank-card-btn {
    width: 100%;
    padding: 15px;
    background: white;
    border: 2px dashed #d0d0d0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    color: #666;
}

.add-bank-card-btn:hover {
    border-color: #999;
    background: #f8f8f8;
}

.add-bank-card-btn:active {
    transform: scale(0.98);
}

.add-bank-card-btn .add-icon {
    font-size: 20px;
    font-weight: 300;
}

.bank-card-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}

.bank-card-empty-icon {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: 12px;
}

/* 朋友圈背景上传样式 */
.cover-upload-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#moments-cover-modal {
    z-index: 10000;
}

.cover-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f8f8f8;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.cover-option:hover {
    background: #f0f0f0;
    border-color: #d0d0d0;
}

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

.cover-option-icon {
    font-size: 24px;
}

.cover-option-text {
    font-size: 15px;
    color: #333;
    font-weight: 500;
}

/* 空状态 */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #999;
}

.empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.empty-state p {
    font-size: 14px;
}

/* 夜间模式 */
.phone-frame.night-mode .me-profile-card,
.phone-frame.night-mode .me-section,
.phone-frame.night-mode .user-mode-content,
.phone-frame.night-mode .wallet-change-card,
.phone-frame.night-mode .wallet-section {
    background: #2c2c2e;
}

.phone-frame.night-mode .wallet-change-card {
    background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%);
    border-color: #3a3a3c;
}

.phone-frame.night-mode .change-icon-wrapper {
    background: linear-gradient(135deg, #3a3a3c 0%, #2c2c2e 100%);
}

.phone-frame.night-mode .change-icon::before,
.phone-frame.night-mode .change-icon::after {
    border-color: #999;
}

.phone-frame.night-mode .me-nickname,
.phone-frame.night-mode .change-title,
.phone-frame.night-mode .change-balance-amount,
.phone-frame.night-mode .wallet-item-title {
    color: white;
}

.phone-frame.night-mode .change-balance-label,
.phone-frame.night-mode .change-desc,
.phone-frame.night-mode .wallet-item-desc {
    color: #999;
}

.phone-frame.night-mode .change-desc {
    border-top-color: #3a3a3c;
}

.phone-frame.night-mode .wallet-item {
    border-bottom-color: #3a3a3c;
}

.phone-frame.night-mode .wallet-item:active {
    background: #3a3a3c;
}

.phone-frame.night-mode .bank-card-item {
    background: linear-gradient(135deg, #3a3a3c 0%, #2c2c2e 100%);
}

.phone-frame.night-mode .bank-card-bank,
.phone-frame.night-mode .bank-card-balance-amount {
    color: white;
}

.phone-frame.night-mode .bank-card-type {
    background: rgba(255, 255, 255, 0.1);
    color: #ccc;
}

.phone-frame.night-mode .bank-card-number,
.phone-frame.night-mode .bank-card-balance {
    color: #999;
}

.phone-frame.night-mode .add-bank-card-btn {
    background: #1c1c1e;
    border-color: #3a3a3c;
    color: #999;
}

.phone-frame.night-mode .add-bank-card-btn:hover {
    background: #2c2c2e;
    border-color: #666;
}

.phone-frame.night-mode .moments-content {
    background: #1c1c1e;
}

.phone-frame.night-mode .moment-item {
    background: #2c2c2e;
    border-bottom-color: #3a3a3c;
}



.phone-frame.night-mode .cover-option {
    background: #2c2c2e;
    border-color: #3a3a3c;
}

.phone-frame.night-mode .cover-option:hover {
    background: #3a3a3c;
    border-color: #555;
}

.phone-frame.night-mode .cover-option-text {
    color: white;
}


.phone-frame.night-mode .bank-card-empty {
    color: #999;
}

.phone-frame.night-mode .form-group input,
.phone-frame.night-mode .form-group textarea {
    background: #1c1c1e;
    border-color: #3a3a3c;
    color: white;
}

/* 头像上传区 */
.avatar-upload-section {
    display: flex;
    justify-content: center;
    padding: 20px;
    background: white;
    margin: 10px;
    border-radius: 12px;
}

.avatar-upload-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 8px;
    border: 2px dashed #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;
}

.avatar-upload-box:hover .avatar-preview {
    border-color: #07c160;
}

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

.avatar-upload-hint {
    font-size: 13px;
    color: #999;
}

/* 设置区域 */
.settings-section {
    background: white;
    margin: 10px;
    border-radius: 12px;
    overflow: hidden;
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    padding: 15px;
    background: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
}

.section-content {
    padding: 15px;
}

/* 夜间模式 */
.phone-frame.night-mode .avatar-upload-section {
    background: #2c2c2e;
}


.phone-frame.night-mode .avatar-preview {
    border-color: #3a3a3c;
}

/* 用户人设详细模式 - form-row支持 */
.section-content .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.section-content .form-row .form-group {
    margin-bottom: 0;
}

.section-content .form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

/* 微信app内部图标 - 清新简约线条风格 */

/* 底栏图标基础样式 */
.wechat-tab-icon .icon-line {
    width: 24px;
    height: 24px;
}

/* 微信图标 - 对话气泡 */
.icon-wechat-tab::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid #666;
    border-radius: 50%;
    top: 2px;
    left: 2px;
}

.icon-wechat-tab::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid #666;
    border-radius: 50%;
    bottom: 2px;
    right: 2px;
}

.wechat-tab.active .icon-wechat-tab::before,
.wechat-tab.active .icon-wechat-tab::after {
    border-color: #333;
}

/* 通讯录图标 - 书本 */
.icon-contacts-tab::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 18px;
    border: 2px solid #666;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-contacts-tab::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 2px;
    background: #666;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wechat-tab.active .icon-contacts-tab::before {
    border-color: #333;
}

.wechat-tab.active .icon-contacts-tab::after {
    background: #333;
}

/* 朋友圈图标 - 相机 */
.icon-moments-tab::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 14px;
    border: 2px solid #666;
    border-radius: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-moments-tab::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border: 2px solid #666;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wechat-tab.active .icon-moments-tab::before,
.wechat-tab.active .icon-moments-tab::after {
    border-color: #333;
}

/* 我图标 - 人像 */
.icon-me-tab::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid #666;
    border-radius: 50%;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
}

.icon-me-tab::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 10px;
    border: 2px solid #666;
    border-radius: 50% 50% 0 0;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: none;
}

.wechat-tab.active .icon-me-tab::before,
.wechat-tab.active .icon-me-tab::after {
    border-color: #333;
}

/* 我的页面图标 */
.me-icon .icon-line {
    width: 24px;
    height: 24px;
}

/* 支付图标 - 钱包 */
.icon-wallet::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 14px;
    border: 2px solid #666;
    border-radius: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-wallet::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 4px;
    border: 2px solid #666;
    border-radius: 0 0 4px 4px;
    border-top: none;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
}

/* 零钱图标 - 纸币 */
.icon-change::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 14px;
    border: 2px solid #666;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-change::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border: 2px solid #666;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 银行卡图标 - 灰色系主屏风格 */
.icon-bank-card::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 14px;
    border: 2px solid #999;
    border-radius: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, #f5f5f5 0%, #e8e8e8 100%);
}

.icon-bank-card::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 3px;
    background: #999;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
}

/* 账单图标 - 文档 */
.icon-bills::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 20px;
    border: 2px solid #666;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-bills::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 2px;
    background: #666;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -3px);
    box-shadow: 0 4px 0 #666, 0 8px 0 #666;
}

/* 夜间模式 */
.phone-frame.night-mode .icon-wechat-tab::before,
.phone-frame.night-mode .icon-wechat-tab::after,
.phone-frame.night-mode .icon-contacts-tab::before,
.phone-frame.night-mode .icon-moments-tab::before,
.phone-frame.night-mode .icon-moments-tab::after,
.phone-frame.night-mode .icon-me-tab::before,
.phone-frame.night-mode .icon-me-tab::after,
.phone-frame.night-mode .icon-wallet::before,
.phone-frame.night-mode .icon-wallet::after,
.phone-frame.night-mode .icon-change::before,
.phone-frame.night-mode .icon-change::after,
.phone-frame.night-mode .icon-bank-card::before,
.phone-frame.night-mode .icon-bills::before {
    border-color: #999;
}

.phone-frame.night-mode .icon-bank-card::before {
    background: linear-gradient(180deg, #3a3a3c 0%, #2c2c2e 100%);
}

.phone-frame.night-mode .icon-contacts-tab::after,
.phone-frame.night-mode .icon-bank-card::after,
.phone-frame.night-mode .icon-bills::after {
    background: #999;
}

.phone-frame.night-mode .wechat-tab.active .icon-wechat-tab::before,
.phone-frame.night-mode .wechat-tab.active .icon-wechat-tab::after,
.phone-frame.night-mode .wechat-tab.active .icon-contacts-tab::before,
.phone-frame.night-mode .wechat-tab.active .icon-contacts-tab::after,
.phone-frame.night-mode .wechat-tab.active .icon-moments-tab::before,
.phone-frame.night-mode .wechat-tab.active .icon-moments-tab::after,
.phone-frame.night-mode .wechat-tab.active .icon-me-tab::before,
.phone-frame.night-mode .wechat-tab.active .icon-me-tab::after {
    border-color: #e8e8e8;
}

.phone-frame.night-mode .wechat-tab.active .icon-contacts-tab::after {
    background: #e8e8e8;
}

/* 联系人详情页 */
#contact-detail-page {
    background: #f7f7f7;
}

.contact-detail-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
}

/* 个人信息页 */
.fp-me-profile-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
}

.me-profile-avatar-small {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f0f0f0;
}

.me-profile-avatar-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* (已合并到 .contact-detail-info 内) */

/* 支付页header文字按钮 */
.header-text-btn {
    background: none;
    border: none;
    color: #333;
    font-size: 14px;
    padding: 8px 12px;
    cursor: pointer;
}

/* 明细流水页 */
.fp-transactions-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px;
}

.fp-trans-date-group {
    margin-bottom: 16px;
}

.fp-trans-date {
    font-size: 13px;
    color: #999;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.fp-trans-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
}

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

.fp-trans-desc {
    font-size: 15px;
    color: #333;
}

.fp-trans-time {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

.fp-trans-amount {
    font-size: 15px;
    color: #333;
    font-weight: 500;
    flex-shrink: 0;
    margin-left: 12px;
}

.fp-trans-amount.income {
    color: #e64340;
}

/* 联系人信息卡片 */
.contact-detail-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    gap: 16px;
}

.contact-detail-avatar {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: white;
    border: 1px solid #e0e0e0;
}

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

.contact-detail-avatar svg {
    width: 100%;
    height: 100%;
}

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

.contact-detail-name {
    font-size: 17px;
    font-weight: 500;
    color: #333;
    margin-bottom: 6px;
}

.contact-detail-nickname {
    font-size: 13px;
    color: #888;
    margin-bottom: 4px;
}

.contact-detail-wechat-id {
    font-size: 13px;
    color: #888;
    margin-bottom: 4px;
}

.contact-detail-region {
    font-size: 13px;
    color: #888;
    margin-bottom: 4px;
}

/* 朋友圈入口 */
.contact-moments-entry {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.contact-moments-entry:hover {
    background: #f9f9f9;
}

.contact-moments-entry:active {
    background: #f0f0f0;
}

.moments-entry-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

.moments-entry-text {
    flex: 1;
    font-size: 15px;
    color: #333;
}

.moments-entry-arrow {
    font-size: 20px;
    color: #999;
}

/* 操作按钮 */
.contact-detail-actions {
    display: flex;
    gap: 12px;
}

.contact-detail-btn {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: none;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.contact-detail-btn.contact-message-btn {
    background: rgba(102, 102, 102, 0.7);
    color: white;
}

.contact-detail-btn.contact-message-btn:hover {
    background: rgba(85, 85, 85, 0.8);
}

.contact-detail-btn.contact-message-btn:active {
    background: rgba(68, 68, 68, 0.9);
}

.contact-detail-btn.contact-call-btn {
    background: #f0f0f0;
    color: #333;
}

.contact-detail-btn.contact-call-btn:hover {
    background: #e8e8e8;
}

.contact-detail-btn.contact-call-btn:active {
    background: #d8d8d8;
}

/* 音视频通话选择弹窗 */
.call-type-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.call-type-modal.active {
    display: flex;
}

.call-type-content {
    position: relative;
    width: 300px;
    background: white;
    border-radius: 16px;
    padding: 20px;
    z-index: 10001;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.call-type-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.call-type-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.call-type-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #f0f0f0;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.call-type-close:hover {
    background: #e0e0e0;
}

.call-type-options {
    display: flex;
    gap: 16px;
}

.call-type-option {
    flex: 1;
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.call-type-option:hover {
    background: #e8f5e9;
    border-color: #07c160;
}

.call-type-option:active {
    background: #d5f0da;
}

.call-option-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #07c160;
}

.call-option-text {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

/* 夜间模式 - 联系人详情 */
.phone-frame.night-mode #contact-detail-page {
    background: #1c1c1c;
}

.phone-frame.night-mode .contact-detail-card,
.phone-frame.night-mode .contact-moments-entry {
    background: #2c2c2e;
}

.phone-frame.night-mode .contact-detail-avatar {
    background: #2c2c2e;
    border-color: #3a3a3a;
}

.phone-frame.night-mode .contact-detail-name,
.phone-frame.night-mode .moments-entry-text {
    color: #e8e8e8;
}

.phone-frame.night-mode .contact-detail-nickname,
.phone-frame.night-mode .contact-detail-wechat-id,
.phone-frame.night-mode .contact-detail-region,
.phone-frame.night-mode .contact-detail-signature,
.phone-frame.night-mode .moments-entry-arrow {
    color: #999;
}

.phone-frame.night-mode .contact-detail-btn.contact-call-btn {
    background: #3a3a3c;
    color: #e8e8e8;
}

.phone-frame.night-mode .contact-detail-btn.contact-call-btn:hover {
    background: #48484a;
}

.phone-frame.night-mode .call-type-content {
    background: #2c2c2e;
}

.phone-frame.night-mode .call-type-title {
    color: #e8e8e8;
}

.phone-frame.night-mode .call-type-header {
    border-bottom-color: #3a3a3a;
}

.phone-frame.night-mode .call-type-close {
    background: #3a3a3c;
    color: #999;
}

.phone-frame.night-mode .call-type-option {
    background: #1c1c1e;
    border-color: #3a3a3a;
}

.phone-frame.night-mode .call-option-icon {
    background: #2c2c2e;
}

.phone-frame.night-mode .call-option-text {
    color: #e8e8e8;
}

/* 联系人朋友圈页面 */
#contact-moments-page {
    background: #f7f7f7;
}

#contact-moments-page .page-header {
    background: white;
}

.contact-moments-container {
    height: calc(100% - 50px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 夜间模式 - 联系人朋友圈 */
.phone-frame.night-mode #contact-moments-page {
    background: #1c1c1c;
}

.phone-frame.night-mode #contact-moments-page .page-header {
    background: #2c2c2e;
    border-bottom-color: #3a3a3a;
}

.phone-frame.night-mode #contact-moments-page .header-title {
    color: #e8e8e8;
}

/* 我的朋友圈页面 */
#my-moments-page {
    background: #f7f7f7;
}

#my-moments-page .page-header {
    background: white;
}

.my-moments-container {
    height: calc(100% - 50px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 夜间模式 - 我的朋友圈 */
.phone-frame.night-mode #my-moments-page {
    background: #1c1c1c;
}

.phone-frame.night-mode #my-moments-page .page-header {
    background: #2c2c2e;
    border-bottom-color: #3a3a3a;
}

.phone-frame.night-mode #my-moments-page .header-title {
    color: #e8e8e8;
}

/* ==================== 聊天设置页面 ==================== */
.chat-settings-content {
    padding: 20px 0;
}

.settings-section {
    margin-bottom: 20px;
    background: white;
    border-radius: 0;
}

.settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: white;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s;
}

.settings-item:active {
    background: #f5f5f5;
}

.settings-header {
    padding: 10px 20px 5px;
    font-size: 13px;
    color: #999;
    font-weight: 500;
}

.settings-item-column {
    display: flex;
    flex-direction: column;
    padding: 15px 20px;
    background: white;
    border-bottom: 1px solid #f0f0f0;
}

.settings-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 8px;
}

.settings-input-number {
    width: 80px;
    padding: 6px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
    outline: none;
}

.settings-input-number:focus {
    border-color: #576b95;
}

.settings-select {
    padding: 6px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    background-color: white;
    outline: none;
    cursor: pointer;
}

.settings-select:focus {
    border-color: #576b95;
}

.settings-item-info {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.settings-input-small {
    width: 70px;
    padding: 6px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
    outline: none;
}

.settings-input-small:focus {
    border-color: #576b95;
}

.reply-count-input-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
    font-size: 14px;
}

.reply-count-input-wrapper .settings-input-small {
    width: 50px;
}

/* ========== 查找聊天记录页（黑白灰） ========== */
#chat-search { background: #f5f5f5; }

#chat-search .page-header.chat-search-header {
    padding: 45px 14px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f5f5f5;
    flex: 0 0 auto;
}
#chat-search .chat-search-header .back-btn {
    font-size: 28px;
    color: #333;
    background: transparent;
    border: none;
    padding: 0 6px;
    cursor: pointer;
    line-height: 1;
    flex: 0 0 auto;
}
#chat-search .chat-search-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 7px 10px;
    min-width: 0;
}
#chat-search .chat-search-icon { flex: 0 0 14px; }
#chat-search .chat-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #333;
    padding: 0;
    min-width: 0;
}
#chat-search .chat-search-input::placeholder { color: #999; }
#chat-search .chat-search-clear {
    border: none;
    background: #c8c8c8;
    color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    line-height: 16px;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    flex: 0 0 18px;
    text-align: center;
}

#chat-search .chat-search-filters {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    overflow-x: auto;
    white-space: nowrap;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    -webkit-overflow-scrolling: touch;
    flex: 0 0 auto;
}
#chat-search .chat-search-filters::-webkit-scrollbar { display: none; }
#chat-search .chat-search-chip {
    flex: 0 0 auto;
    border: 1px solid #d0d0d0;
    background: #fff;
    color: #555;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
#chat-search .chat-search-chip.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

#chat-search .chat-search-calendar-wrap {
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    padding: 12px 14px;
    flex: 0 0 auto;
}
#chat-search .chat-search-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
#chat-search .chat-search-cal-nav {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 22px;
    color: #333;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
#chat-search .chat-search-cal-nav:active {
    background: #f0f0f0;
    border-radius: 50%;
}
#chat-search .chat-search-cal-title {
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
}
#chat-search .chat-search-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}
#chat-search .chat-search-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
#chat-search .chat-search-cal-day {
    aspect-ratio: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    color: #1a1a1a;
    cursor: pointer;
    position: relative;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#chat-search .chat-search-cal-day.other-month {
    color: transparent;
    pointer-events: none;
    cursor: default;
}
#chat-search .chat-search-cal-day.no-msg {
    color: #c8c8c8;
    pointer-events: none;
    cursor: default;
}
#chat-search .chat-search-cal-day.has-msg {
    font-weight: 600;
}
#chat-search .chat-search-cal-day.has-msg::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #333;
}
#chat-search .chat-search-cal-day.has-msg:active {
    background: #f0f0f0;
}

#chat-search .chat-search-results {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
}
#chat-search .chat-search-empty {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 60px 20px;
}

#chat-search .chat-search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
    cursor: pointer;
    transition: background 0.15s;
}
#chat-search .chat-search-result-item:active { background: #f5f5f5; }
#chat-search .chat-search-result-avatar {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 6px;
    background: #d8d8d8;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
}
#chat-search .chat-search-result-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#chat-search .chat-search-result-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
#chat-search .chat-search-result-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
#chat-search .chat-search-result-name {
    font-size: 14px;
    color: #1a1a1a;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
#chat-search .chat-search-result-time {
    font-size: 11px;
    color: #999;
    flex: 0 0 auto;
}
#chat-search .chat-search-result-snippet {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#chat-search .chat-search-result-snippet em {
    color: #1a1a1a;
    font-style: normal;
    font-weight: 600;
}

/* chat-window 命中消息高亮（中性灰闪烁） */
.chat-message.chat-search-hit {
    animation: chat-search-flash 1.6s ease-out 1;
}
@keyframes chat-search-flash {
    0%, 100% { background-color: transparent; }
    20%, 60% { background-color: rgba(0, 0, 0, 0.08); }
}

/* 夜间模式 */
.phone-frame.night-mode #chat-search { background: #1c1c1c; }
.phone-frame.night-mode #chat-search .page-header.chat-search-header { background: #1c1c1c; }
.phone-frame.night-mode #chat-search .chat-search-header .back-btn { color: #e8e8e8; }
.phone-frame.night-mode #chat-search .chat-search-input-wrap {
    background: #2c2c2e;
    border-color: #3a3a3a;
}
.phone-frame.night-mode #chat-search .chat-search-input { color: #e8e8e8; }
.phone-frame.night-mode #chat-search .chat-search-input::placeholder { color: #8e8e93; }
.phone-frame.night-mode #chat-search .chat-search-icon { stroke: #8e8e93; }
.phone-frame.night-mode #chat-search .chat-search-clear { background: #555; }
.phone-frame.night-mode #chat-search .chat-search-filters {
    background: #1c1c1c;
    border-bottom-color: #3a3a3a;
}
.phone-frame.night-mode #chat-search .chat-search-chip {
    background: #2c2c2e;
    color: #c8c8c8;
    border-color: #3a3a3a;
}
.phone-frame.night-mode #chat-search .chat-search-chip.active {
    background: #e8e8e8;
    color: #1a1a1a;
    border-color: #e8e8e8;
}
.phone-frame.night-mode #chat-search .chat-search-calendar-wrap {
    background: #2c2c2e;
    border-bottom-color: #3a3a3a;
}
.phone-frame.night-mode #chat-search .chat-search-cal-title { color: #e8e8e8; }
.phone-frame.night-mode #chat-search .chat-search-cal-nav { color: #e8e8e8; }
.phone-frame.night-mode #chat-search .chat-search-cal-nav:active { background: #3a3a3a; }
.phone-frame.night-mode #chat-search .chat-search-cal-weekdays { color: #8e8e93; }
.phone-frame.night-mode #chat-search .chat-search-cal-day { color: #e8e8e8; }
.phone-frame.night-mode #chat-search .chat-search-cal-day.no-msg { color: #555; }
.phone-frame.night-mode #chat-search .chat-search-cal-day.has-msg::after { background: #e8e8e8; }
.phone-frame.night-mode #chat-search .chat-search-cal-day.has-msg:active { background: #3a3a3a; }
.phone-frame.night-mode #chat-search .chat-search-results { background: #1c1c1c; }
.phone-frame.night-mode #chat-search .chat-search-empty { color: #8e8e93; }
.phone-frame.night-mode #chat-search .chat-search-result-item {
    background: #2c2c2e;
    border-bottom-color: #3a3a3a;
}
.phone-frame.night-mode #chat-search .chat-search-result-item:active { background: #3a3a3a; }
.phone-frame.night-mode #chat-search .chat-search-result-name { color: #e8e8e8; }
.phone-frame.night-mode #chat-search .chat-search-result-time { color: #8e8e93; }
.phone-frame.night-mode #chat-search .chat-search-result-snippet { color: #b0b0b0; }
.phone-frame.night-mode #chat-search .chat-search-result-snippet em { color: #fff; }

/* ===================================
   踪迹App样式
   ================================ */

/* 主屏图标 - 足迹路径 SVG */
.icon-trace {
    color: #666;
}

.icon-trace svg {
    position: absolute;
    width: 26px;
    height: 26px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
}

/* 踪迹App页面 */
#trace {
    background: #f5f5f5;
}

.trace-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 16px;
    gap: 16px;
}

.trace-detail {
    flex: 1;
    background: white;
    border-radius: 12px;
    padding: 20px;
    overflow-y: auto;
}

/* ========== 动画容器 ========== */
.trace-animation-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Instagram风格纯白背景 */
.trace-anim-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    z-index: -1;
}

/* ========== 浮现文字层 ========== */
.trace-text-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    font-family: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;
}

/* 每句话的容器 */
.trace-text-item {
    position: absolute;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(20px);
    display: inline-block;
    width: auto;
}

/* 显示状态 - 浮现动画 */
.trace-text-item.visible {
    animation: text-float-in 1.5s ease-out forwards;
}

@keyframes text-float-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 竖向排列 */
.trace-text-item.vertical {
    writing-mode: vertical-rl;
    white-space: normal;
}

/* 每个字的样式 */
.trace-text-char {
    display: inline-block;
    transition: transform 0.3s ease;
}

/* ========== 爱心雨滴动画 ========== */
.trace-heart {
    position: absolute;
    width: 55px;
    height: 55px;
    top: -100px;
    left: 50%;
    transform: translateX(-50%) scale(0.3);
    z-index: 10;
    filter: blur(2.5px) drop-shadow(0 8px 20px rgba(255, 105, 180, 0.6));
    opacity: 0;
}

/* 拖尾效果 - 更长更柔和 */
.trace-heart::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 200%;
    transform: translate(-50%, -80%);
    background: linear-gradient(to bottom, 
        rgba(255, 105, 180, 0) 0%,
        rgba(255, 105, 180, 0.6) 20%,
        rgba(255, 105, 180, 0.3) 60%,
        transparent 100%);
    filter: blur(12px);
    z-index: -1;
    opacity: 0;
}

/* 下落时显示拖尾 */
.trace-heart.dropping::after {
    animation: trail-fade 2.2s ease-out forwards;
}

@keyframes trail-fade {
    0% {
        opacity: 0;
        transform: translate(-50%, -80%) scaleY(0.5);
    }
    15% {
        opacity: 0.9;
        transform: translate(-50%, -60%) scaleY(2.5);
    }
    70% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scaleY(2);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -40%) scaleY(1.5);
    }
}

/* 雨滴下落动画 - 由小及大、旋转、有节奏停顿、更慢速度 */
.trace-heart.dropping {
    animation: heart-rain-drop 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes heart-rain-drop {
    0% {
        top: -100px;
        transform: translateX(-50%) scale(0.3) rotate(-20deg);
        opacity: 0;
        filter: blur(2.5px) drop-shadow(0 8px 20px rgba(255, 105, 180, 0.6));
    }
    8% {
        opacity: 1;
    }
    100% {
        top: calc(50% - 35px);
        transform: translateX(-50%) scale(1) rotate(35deg) translateY(15px);
        opacity: 1;
        filter: blur(1.5px) drop-shadow(0 18px 45px rgba(255, 105, 180, 1));
    }
}

/* 斜插状态 - 裁剪下半部分，只露出上半个爱心，无晕染 */
.trace-heart.splashed {
    clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 75%, 0 60%);
    /* 确保斜插后可见 */
    opacity: 1 !important;
    top: calc(50% - 35px) !important;
    transform: translateX(-50%) scale(1) rotate(35deg) translateY(15px) !important;
    filter: blur(1.5px) !important;
}

/* ========== 爱心闪烁效果 ========== */
/* 独立光圈层 - 不受clip-path影响 */
.trace-heart::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 105, 180, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
}

/* 闪烁状态 - 本体裁切保持，光圈独立扩散 */
.trace-heart.pulsing {
    animation: heart-body-pulse 1.5s ease-in-out infinite;
    cursor: pointer;
    pointer-events: auto;
    /* 强制保持可见 */
    opacity: 1 !important;
    top: calc(50% - 35px) !important;
}

.trace-heart.pulsing::before {
    animation: heart-ring-pulse 1.5s ease-out infinite;
}

/* 本体轻微缩放 */
@keyframes heart-body-pulse {
    0%, 100% {
        transform: translateX(-50%) scale(1) rotate(35deg) translateY(15px);
        filter: blur(1.5px) drop-shadow(0 18px 35px rgba(255, 105, 180, 0.9));
    }
    50% {
        transform: translateX(-50%) scale(1.15) rotate(35deg) translateY(15px);
        filter: blur(1.5px) drop-shadow(0 20px 45px rgba(255, 20, 147, 1));
    }
}

/* 光圈扩散（不被裁切） */
@keyframes heart-ring-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* ========== 心电图动画 ========== */
.trace-ecg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    max-width: 600px;
    height: 100px;
    transform: translate(-50%, -50%);
    z-index: 5;
    opacity: 0;
}

.trace-ecg.active {
    opacity: 1;
}

.ecg-path {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    stroke: #FF1493;
    stroke-width: 0.8;
    filter: drop-shadow(0 1px 2px rgba(255, 20, 147, 0.4));
}

/* 左右同步绘制 */
.trace-ecg.active .ecg-left {
    animation: ecg-draw-left 1.3s ease-out 0.4s forwards;
}

.trace-ecg.active .ecg-right {
    animation: ecg-draw-right 1.3s ease-out 0.4s forwards;
}

@keyframes ecg-draw-left {
    to { stroke-dashoffset: 0; }
}

@keyframes ecg-draw-right {
    to { stroke-dashoffset: 0; }
}

/* ========== 绑定弹窗动画 ========== */
.trace-bind-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 250, 252, 0.92);
}

.modal-content {
    position: relative;
    width: 85%;
    max-width: 360px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 4px;
    padding: 0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transform: scale(0.7);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(224, 224, 224, 0.6);
}

/* 显示状态 */
.trace-bind-modal.show .modal-content {
    transform: scale(1);
    opacity: 1;
}

/* 弹窗样式 */
.modal-header {
    text-align: center;
    padding: 30px 20px 20px;
}

.modal-icon {
    font-size: 48px;
    margin-bottom: 10px;
}

.modal-header h2 {
    margin: 0 0 8px;
    font-size: 20px;
    color: #333;
}

.modal-subtitle {
    margin: 0;
    font-size: 13px;
    color: #999;
}

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

/* 联系人列表项 */
.trace-contact-item {
    display: flex;
    align-items: center;
    padding: 12px;
    margin-bottom: 10px;
    background: #ffffff;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #e0e0e0;
}

.trace-contact-item:last-child {
    margin-bottom: 0;
}

.trace-contact-item:hover {
    background: #fafafa;
    transform: translateX(3px);
    border-color: #d0d0d0;
}

.trace-contact-item:active {
    transform: scale(0.98);
}

.trace-contact-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff69b4, #ff1493);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    font-weight: bold;
    margin-right: 15px;
    flex-shrink: 0;
}

.trace-contact-info {
    flex: 1;
}

.trace-contact-name {
    font-size: 15px;
    color: #333;
    font-weight: 500;
    margin-bottom: 4px;
}

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

.trace-contact-arrow {
    color: #ccc;
    font-size: 18px;
}

/* 踪迹主页返回按钮 */
.trace-back-btn {
    position: fixed;
    top: 20px;
    left: 15px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    font-size: 28px;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.2s;
}

.trace-back-btn:active {
    transform: scale(0.95);
    opacity: 0.6;
}

/* 半透明双线边框卡片 */
.trace-content-card {
    position: relative;
    margin: 80px 20px 0;
    padding: 20px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    min-height: 200px;
    overflow: hidden;
}

/* 卡片背景图片层 */
.trace-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    filter: blur(8px) brightness(1.2);
    transform: scale(1.1);
}

/* 卡片内容区 */
.trace-card-content {
    position: relative;
    z-index: 1;
}

.trace-content-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px dashed #d0d0d0;
    border-radius: 4px;
    pointer-events: none;
}

.trace-content-card::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    pointer-events: none;
}

/* 情侣头像区域 */
.trace-couple-avatars {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    position: absolute;
    left: 20px;
    top: 30px;
    z-index: 10;
}

.couple-avatar-left,
.couple-avatar-right {
    position: relative;
}

.couple-avatar-left {
    z-index: 2;
}

.couple-avatar-right {
    margin-left: -25px;
    z-index: 1;
}

.couple-avatar-left .avatar-img,
.couple-avatar-right .avatar-img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: normal;
    color: #ffffff;
    overflow: hidden;
}

@media (max-width: 375px) {
    .trace-heart { 
        width: 60px; 
        height: 60px; 
    }
    .modal-content { 
        width: 90%; 
    }
    .trace-contact-avatar { 
        width: 40px; 
        height: 40px; 
    }
}

@media (min-width: 768px) {
    .trace-ecg { 
        max-width: 800px; 
    }
    .modal-content { 
        max-width: 400px; 
    }
}

/* ===================================
   痕迹卡片 & 时间线样式
   ================================ */

/* 痕迹卡片内容区 */
.trace-footprint-card {
    padding-top: 70px;
    position: relative;
    z-index: 1;
}

.footprint-summary {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
}

.footprint-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footprint-stat-number {
    font-size: 28px;
    font-weight: 300;
    color: #333;
    line-height: 1.2;
}

.footprint-stat-label {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

.footprint-latest {
    padding: 12px 0;
    min-height: 40px;
    color: #666;
    font-size: 13px;
    line-height: 1.6;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.trace-empty-hint {
    color: #ccc;
    font-size: 13px;
    text-align: center;
    padding: 8px 0;
    font-style: italic;
}

.footprint-entry {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    color: #e0458b;
    font-size: 14px;
    cursor: pointer;
    border-top: 1px solid rgba(0,0,0,0.06);
    transition: opacity 0.2s;
}

.footprint-entry:active {
    opacity: 0.6;
}

/* 时间线页面 */
.trace-timeline-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 20px;
    background: #fafafa;
}

/* 热力图 */
.trace-heatmap {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

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

.heatmap-month-label {
    font-size: 15px;
    font-weight: 500;
    color: #333;
}

.heatmap-nav-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    padding: 4px 10px;
    cursor: pointer;
    line-height: 1;
}

.heatmap-nav-btn:active {
    color: #e0458b;
}

.heatmap-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 11px;
    color: #999;
    margin-bottom: 6px;
}

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

.heatmap-day {
    aspect-ratio: 1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #999;
    cursor: pointer;
    background: #f8f8f8;
    transition: all 0.15s;
    position: relative;
}

.heatmap-day.empty {
    background: transparent;
    cursor: default;
}

.heatmap-day.today {
    border: 1px solid #e0458b;
}

.heatmap-day.selected {
    background: #e0458b !important;
    color: #fff !important;
    font-weight: 500;
}

.heatmap-day.heat-1 { background: #ffe0ec; color: #666; }
.heatmap-day.heat-2 { background: #ffb3d1; color: #555; }
.heatmap-day.heat-3 { background: #f07aab; color: #fff; }
.heatmap-day.heat-4 { background: #e0458b; color: #fff; }

/* 选中日期标签 */
.trace-day-label {
    padding: 14px 0 6px;
    font-size: 13px;
    color: #999;
}

/* 垂直时间线 */
.trace-timeline-list {
    position: relative;
    padding-left: 24px;
    min-height: 60px;
}

.trace-timeline-list::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #e8e8e8;
}

.trace-timeline-node {
    position: relative;
    padding: 0 0 20px 16px;
    cursor: pointer;
}

.trace-timeline-node::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ddd;
    border: 2px solid #fafafa;
    transition: background 0.2s;
}

.trace-timeline-node.schedule::before {
    background: #e0458b;
}

.trace-timeline-node.message::before {
    background: #6fb3f2;
}

.timeline-node-time {
    font-size: 12px;
    color: #999;
    margin-bottom: 2px;
}

.timeline-node-content {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}

.timeline-node-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.timeline-node-detail.expanded {
    max-height: 200px;
}

.timeline-node-detail-inner {
    padding: 8px 0 0;
    font-size: 12px;
    color: #888;
    line-height: 1.6;
}

.timeline-node-detail-inner .detail-row {
    display: flex;
    gap: 8px;
    margin-bottom: 2px;
}

.timeline-node-detail-inner .detail-label {
    color: #bbb;
    flex-shrink: 0;
}

/* 时间线空状态 */
.trace-timeline-empty {
    text-align: center;
    padding: 40px 0;
    color: #ccc;
    font-size: 14px;
}

/* ===================================
   监控App样式
   ================================ */

.monitor-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f5f5f7;
}

.monitor-tabs {
    display: flex;
    gap: 0;
    padding: 12px 16px;
    background: white;
    border-bottom: 1px solid #e5e5e7;
}

.monitor-tab {
    flex: 1;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: #666;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 8px;
}

.monitor-tab.active {
    color: #007aff;
    background: rgba(0, 122, 255, 0.1);
}

.monitor-tab:active {
    transform: scale(0.96);
}

.monitor-list {
    flex: 1;
    overflow-y: auto;
}

.monitor-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: white;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s;
}

.monitor-item:hover {
    background: #fafafa;
}

.monitor-item:active {
    background: #f0f0f0;
}

.monitor-avatar {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    overflow: hidden;
    flex-shrink: 0;
}

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

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

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

.monitor-status {
    font-size: 13px;
    color: #999;
}

.monitor-action-btn {
    padding: 6px 16px;
    background: #f0f0f0;
    border: none;
    border-radius: 6px;
    color: #666;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.monitor-action-btn:hover {
    background: #e0e0e0;
}

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

.monitor-action-btn[data-action="stop"] {
    color: #ff3b30;
    background: rgba(255, 59, 48, 0.1);
}

.monitor-action-btn[data-action="stop"]:hover {
    background: rgba(255, 59, 48, 0.15);
}

.monitor-action-btn[data-action="block"] {
    color: #ff9500;
    background: rgba(255, 149, 0, 0.1);
}

.monitor-action-btn[data-action="block"]:hover {
    background: rgba(255, 149, 0, 0.15);
}

/* ===================================
   监视机器人系统样式
   ================================ */

/* --- 机器人面板 --- */
.spy-robot-panel {
    padding: 16px;
    background: #f5f7fb;
}

/* --- 状态总览卡片 --- */
.spy-overview {
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
    color: #333c50;
    margin-bottom: 16px;
    border: 1px solid #e3e7ef;
    box-shadow: 0 1px 2px rgba(7, 8, 12, 0.04);
}

.spy-overview-title {
    font-size: 14px;
    font-weight: 500;
    color: #546282;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef1f7;
}

.spy-overview-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.spy-stat {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.spy-stat-value {
    font-size: 20px;
    font-weight: 600;
    color: #1c2433;
}

.spy-stat-label {
    font-size: 11px;
    color: #8a96b0;
}

.spy-progress-bar {
    height: 2px;
    background: rgba(84, 98, 130, 0.10);
    border-radius: 1px;
    overflow: hidden;
    margin-bottom: 6px;
}

.spy-progress-fill {
    height: 100%;
    background: #546282;
    border-radius: 1px;
    transition: width 0.3s ease;
}

.spy-progress-label {
    font-size: 11px;
    color: #8a96b0;
    text-align: right;
}

/* --- 派出按钮 --- */
.spy-deploy-btn-wrapper {
    margin-bottom: 16px;
}

.spy-deploy-btn {
    width: 100%;
    padding: 14px;
    background: #333c50;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.spy-deploy-btn:active {
    transform: scale(0.97);
    opacity: 0.9;
}

/* --- 分区标题 --- */
.spy-section-title {
    font-size: 14px;
    color: #333c50;
    font-weight: 600;
    margin: 16px 0 10px;
    padding: 0 4px 8px;
    border-bottom: 1px solid #eef1f7;
}

/* --- 机器人卡片 --- */
.spy-robot-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(7, 8, 12, 0.04);
    border: 1px solid #e3e7ef;
}

.spy-robot-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(84, 98, 130, 0.08);
}

.spy-robot-disguise {
    font-size: 24px;
    flex-shrink: 0;
}

.spy-robot-arrow {
    color: #ccc;
    font-size: 14px;
    flex-shrink: 0;
}

.spy-robot-target-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    overflow: hidden;
    flex-shrink: 0;
}

.spy-robot-target-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.spy-robot-target-name {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: #333c50;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.spy-robot-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.spy-robot-card-body {
    padding: 12px 16px;
}

.spy-robot-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #546282;
    margin-bottom: 8px;
}

.spy-robot-info-row:last-child {
    margin-bottom: 0;
}

.spy-risk-bar {
    height: 3px;
    background: rgba(84, 98, 130, 0.12);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px;
}

.spy-risk-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.spy-robot-card-actions {
    display: flex;
    border-top: 1px solid rgba(84, 98, 130, 0.08);
}

.spy-card-btn {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: none;
    font-size: 13px;
    color: #333c50;
    cursor: pointer;
    transition: background 0.15s;
}

.spy-card-btn:active {
    background: rgba(84, 98, 130, 0.06);
}

.spy-card-btn + .spy-card-btn {
    border-left: 1px solid rgba(84, 98, 130, 0.08);
}

.spy-btn-recall {
    color: #b88a3a;
}

/* --- 历史记录入口 --- */
.spy-history-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #fff;
    border-radius: 8px;
    font-size: 14px;
    color: #333c50;
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 12px;
    border: 1px solid #e3e7ef;
}

.spy-history-entry:active {
    background: rgba(84, 98, 130, 0.05);
}

.spy-history-arrow {
    color: #9cb2e8;
    font-size: 18px;
}

/* --- 空状态 --- */
.spy-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.spy-empty-icon {
    font-size: 56px;
    margin-bottom: 16px;
    opacity: 0.4;
}

.spy-empty-text {
    font-size: 16px;
    color: #999;
    margin-bottom: 8px;
}

.spy-empty-hint {
    font-size: 13px;
    color: #bbb;
}

/* --- 部署面板弹窗 --- */
.spy-deploy-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 9999;
    transition: background 0.2s ease;
}

.spy-deploy-overlay.show {
    background: rgba(0, 0, 0, 0.5);
}

.spy-deploy-modal {
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    background: #f5f5f7;
    border-radius: 20px 20px 0 0;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.spy-deploy-overlay.show .spy-deploy-modal {
    transform: translateY(0);
}

.spy-deploy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    font-size: 17px;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid #e5e5e7;
    background: #fff;
}

.spy-deploy-close {
    background: #f0f0f0;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spy-deploy-section {
    padding: 16px 20px;
}

.spy-deploy-label {
    font-size: 13px;
    color: #999;
    font-weight: 500;
    margin-bottom: 10px;
}

/* --- 联系人选择列表 --- */
.spy-contact-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
}

.spy-contact-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    color: #333c50;
    transition: all 0.15s;
    border: 1px solid #e3e7ef;
}

.spy-contact-option.selected {
    border-color: #9cb2e8;
    background: rgba(156, 178, 232, 0.06);
}

.spy-contact-option:active {
    background: rgba(84, 98, 130, 0.05);
}

.spy-contact-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    overflow: hidden;
    flex-shrink: 0;
}

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

/* --- 伪装选择列表 --- */
.spy-disguise-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.spy-disguise-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid #e3e7ef;
    position: relative;
}

.spy-disguise-option.selected {
    border-color: #9cb2e8;
    background: rgba(156, 178, 232, 0.06);
}

.spy-disguise-option.locked {
    opacity: 0.45;
    cursor: not-allowed;
}

.spy-disguise-option:not(.locked):active {
    background: rgba(84, 98, 130, 0.05);
}

.spy-disguise-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.spy-disguise-name {
    font-size: 15px;
    font-weight: 500;
    color: #333c50;
    flex-shrink: 0;
}

.spy-disguise-desc {
    font-size: 12px;
    color: #8a96b0;
    flex: 1;
}

.spy-disguise-lock {
    font-size: 14px;
    flex-shrink: 0;
}

/* --- 确认派出按钮 --- */
.spy-deploy-confirm {
    width: calc(100% - 40px);
    margin: 0 20px 20px;
    padding: 14px;
    background: #333c50;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.spy-deploy-confirm:disabled {
    background: rgba(84, 98, 130, 0.3);
    color: rgba(255, 255, 255, 0.6);
    cursor: not-allowed;
}

.spy-deploy-confirm:not(:disabled):active {
    transform: scale(0.97);
    opacity: 0.9;
}

/* --- 确认弹窗 --- */
.spy-confirm-modal {
    width: calc(100% - 80px);
    max-width: 300px;
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    margin: auto;
    transform: scale(0.9);
    transition: transform 0.2s ease;
    border: 1px solid #e3e7ef;
    box-shadow: 0 4px 16px rgba(7, 8, 12, 0.08);
}

.spy-deploy-overlay.show .spy-confirm-modal {
    transform: scale(1);
}

.spy-confirm-text {
    font-size: 16px;
    font-weight: 600;
    color: #1c2433;
    margin-bottom: 8px;
}

.spy-confirm-hint {
    font-size: 13px;
    color: #8a96b0;
    margin-bottom: 20px;
}

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

.spy-confirm-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.spy-confirm-cancel {
    background: #ffffff;
    color: #333c50;
    border: 1px solid #e3e7ef;
}

.spy-confirm-ok {
    background: #333c50;
    color: #fff;
}

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

/* ========== 状态指示器 ========== */
.spy-robot-status-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    font-size: 12px;
}

.spy-status-icon {
    font-size: 10px;
}

.spy-status-text {
    font-size: 11px;
    font-weight: 500;
}

/* ========== 风险预估提示 ========== */
.spy-risk-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin: 0 16px 8px;
    background: #fafbfd;
    border-radius: 8px;
    border: 1px solid #e3e7ef;
}

.spy-risk-preview-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.spy-risk-preview-text {
    font-size: 12px;
    color: #546282;
    line-height: 1.4;
}

/* ========== 历史记录弹窗 ========== */
.spy-history-modal .spy-history-list,
.spy-reports-modal .spy-reports-list {
    max-height: 60vh;
    overflow-y: auto;
    padding: 12px 16px;
    -webkit-overflow-scrolling: touch;
}

.spy-history-item {
    background: #fff;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid #e3e7ef;
    box-shadow: 0 1px 2px rgba(7, 8, 12, 0.04);
}

.spy-history-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #333c50;
}

.spy-history-status {
    font-size: 12px;
    font-weight: 500;
}

.spy-history-item-detail {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #546282;
    margin-bottom: 4px;
}

.spy-history-reason {
    font-size: 12px;
    color: #c73e3a;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #eef1f7;
}

.spy-history-cooldown {
    font-size: 12px;
    color: #b88a3a;
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(184, 138, 58, 0.08);
    border-radius: 8px;
}

/* ========== 报告列表 ========== */
.spy-report-item {
    background: #fff;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid #e3e7ef;
    box-shadow: 0 1px 2px rgba(7, 8, 12, 0.04);
}

.spy-report-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #8a96b0;
}

.spy-report-time {
    font-weight: 600;
    color: #333c50;
}

.spy-report-reliability {
    margin-left: auto;
    font-size: 11px;
}

.spy-report-item-body {
    font-size: 14px;
    color: #333c50;
    line-height: 1.6;
    margin-bottom: 6px;
}

.spy-report-env {
    font-size: 12px;
    color: #8a96b0;
    margin-top: 4px;
}

.spy-report-suspicion {
    font-size: 12px;
    color: #b88a3a;
    margin-top: 4px;
    padding: 4px 8px;
    background: rgba(184, 138, 58, 0.08);
    border-radius: 6px;
}

/* ========== 聊天页浮窗 ========== */
.spy-floating-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 44px;
    padding: 6px 8px;
    cursor: pointer;
    transition: transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.spy-floating-widget:active {
    transform: scale(0.92);
}

.spy-float-icon {
    font-size: 18px;
    line-height: 1;
}

.spy-float-risk-bar {
    width: 30px;
    height: 3px;
    background: rgba(84, 98, 130, 0.15);
    border-radius: 2px;
    overflow: hidden;
}

.spy-float-risk-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease, background 0.3s ease;
}

.spy-float-signal {
    font-size: 8px;
    line-height: 1;
}

/* ========== 浮窗展开面板 ========== */
.spy-float-panel {
    background: rgba(7, 8, 12, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 8px;
    padding: 14px 16px;
    min-width: 160px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    animation: spy-panel-in 0.15s ease;
}

@keyframes spy-panel-in {
    from { opacity: 0; transform: translateY(-6px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.spy-float-panel-row {
    font-size: 13px;
    color: #cad9f5;
    padding: 5px 0;
    border-bottom: 1px solid rgba(156, 178, 232, 0.10);
}

.spy-float-panel-row:last-of-type {
    border-bottom: none;
}

.spy-float-panel-actions {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

.spy-float-recall-btn {
    background: rgba(199, 62, 58, 0.85);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.spy-float-recall-btn:active {
    transform: scale(0.95);
}

/* ===================================
   云栖App样式（家园系统）
   ================================ */

/* === 云栖首页 === */
#homegarden {
    background: #ffffff;
}

.homegarden-home {
    height: calc(100% - 44px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 上半区域：伴侣绑定卡片 */
.homegarden-companion-section {
    flex: 0 0 auto;
    padding: 20px 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 毛玻璃卡片 */
.companion-card {
    width: 100%;
    max-width: 340px;
    padding: 24px 20px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 头像容器 */
.companion-avatar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.companion-avatar-wrapper:active {
    transform: scale(0.95);
}

/* 头像 */
.companion-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

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

.avatar-placeholder {
    font-size: 20px;
    color: #999;
    font-weight: 500;
}

.companion-name {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    max-width: 80px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 中间连接符号 */
.companion-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.link-heart {
    font-size: 28px;
    color: #ff6b9d;
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* 角色形象选择区 */
.yunqi-character-cards {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 16px 20px;
    max-width: 340px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.character-card {
    flex: 1;
    min-width: 0;
    padding: 16px 12px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.character-card:active {
    transform: scale(0.96);
}

.character-preview {
    width: 64px;
    height: 96px;
    background: #f8f8f8;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    image-rendering: pixelated;
}

.character-preview canvas {
    image-rendering: pixelated;
}

.preview-placeholder {
    font-size: 18px;
    color: #bbb;
    font-weight: 500;
}

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

/* 角色编辑器弹窗 */
.character-editor-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    display: none;
}

.character-editor-modal.active {
    display: flex;
    flex-direction: column;
}

.editor-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.editor-modal-content {
    position: relative;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
    padding-top: 44px;
    box-sizing: border-box;
}

.editor-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
}

.editor-modal-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #333;
}

.editor-back-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 24px;
    color: #333;
    cursor: pointer;
}

.editor-save-btn {
    padding: 6px 14px;
    border: none;
    background: #9370db;
    color: #fff;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.editor-save-btn:active {
    opacity: 0.8;
}

/* 预览区 */
.editor-preview-area {
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}

#character-editor-canvas {
    image-rendering: pixelated;
    border-radius: 8px;
    background: #fafafa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 组件选择器 */
.component-selectors {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.component-section {
    margin-bottom: 20px;
}

.component-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    padding-left: 4px;
}

.component-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.component-option {
    width: 56px;
    height: 56px;
    background: #fff;
    border: 2px solid #e5e5e5;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, transform 0.2s;
}

.component-option:active {
    transform: scale(0.95);
}

.component-option.selected {
    border-color: #9370db;
    box-shadow: 0 0 0 2px rgba(147, 112, 219, 0.2);
}

.component-option img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    image-rendering: pixelated;
}

/* 下半区域：家园入口 */
.homegarden-entry-section {
    flex: 0 0 auto;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 家园入口按钮 - 粉紫色晕染效果 */
.garden-entry-btn {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

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

/* 晕染光晕效果 */
.garden-entry-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        rgba(147, 112, 219, 0.8) 0%,
        rgba(147, 112, 219, 0.5) 30%,
        rgba(147, 112, 219, 0.2) 50%,
        rgba(147, 112, 219, 0.05) 70%,
        transparent 100%
    );
    animation: glow-pulse 3s ease-in-out infinite;
}

@keyframes glow-pulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.05);
        opacity: 0.85;
    }
}

.garden-entry-text {
    position: relative;
    z-index: 1;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    letter-spacing: 2px;
}

/* === 选择联系人弹窗 === */
.garden-contact-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: none;
}

.garden-contact-modal.active {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.garden-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
}

.garden-modal-content {
    position: relative;
    width: 100%;
    max-height: 60%;
    background: #fff;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

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

.garden-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.garden-modal-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #333;
}

.garden-modal-close {
    width: 28px;
    height: 28px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.garden-contact-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.garden-contact-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    cursor: pointer;
    transition: background 0.2s;
}

.garden-contact-item:active {
    background: #f5f5f5;
}

.garden-contact-item .contact-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f5f5f5;
    margin-right: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.garden-contact-item .contact-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.garden-contact-item .contact-avatar .avatar-text {
    font-size: 16px;
    color: #999;
}

.garden-contact-item .contact-info {
    flex: 1;
}

.garden-contact-item .contact-name {
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.garden-contact-item .contact-selected {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #07c160;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
}

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

/* === 云栖游戏世界页 === */
#homegarden-world {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ededed;
}

/* 地图容器（固定高度 50vh） */
.garden-map-container {
    position: relative;
    width: 100%;
    height: 50vh;
    background: #1a1a1a;
    flex-shrink: 0;
    overflow: hidden;
}

#homegarden-canvas {
    width: 100%;
    height: 100%;
    display: block;
    /* 像素完美渲染 */
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* 地图控制按钮 */
.garden-controls {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    z-index: 10;
    pointer-events: none;
}

.garden-control-btn {
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.2s;
}

.garden-control-btn:active {
    background: rgba(0, 0, 0, 0.7);
}

.garden-zoom-controls {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0, 0, 0, 0.5);
    padding: 4px 8px;
    border-radius: 8px;
    pointer-events: auto;
}

.garden-zoom-controls .garden-control-btn {
    background: transparent;
    padding: 4px 10px;
    font-size: 16px;
    font-weight: bold;
}

.garden-zoom-controls .garden-control-btn:active {
    background: rgba(255, 255, 255, 0.2);
}

.garden-zoom-text {
    color: #fff;
    font-size: 13px;
    min-width: 45px;
    text-align: center;
}

/* 聊天区域包装器（填充剩余空间） */
.garden-chat-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #ededed;
}

/* 消息区域 */
.garden-chat-wrapper .chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
}

/* 输入栏 */
.garden-chat-wrapper .chat-input-container {
    flex-shrink: 0;
}

/* 家园聊天无头像样式 */
.garden-chat-wrapper .chat-message.garden-no-avatar {
    gap: 0;
}

.garden-chat-wrapper .chat-message.garden-no-avatar .chat-message-avatar {
    display: none !important;
}

/* 金钱显示 */
.garden-money {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

/* AI 对话气泡 */
.garden-dialogue {
    position: absolute;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 80%;
    padding: 12px 16px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    color: #333;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 90;
}

.garden-dialogue.show {
    opacity: 1;
}

.garden-dialogue::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid white;
}

/* ==================== 打工页面样式 - INS清新风 ==================== */

#work {
    background: #fafafa;
}

#work .work-content {
    padding: 20px 16px;
    overflow-y: auto;
    max-height: calc(100vh - 44px);
}

/* 余额卡片 - 毛玻璃效果 */
.work-balance-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    margin-bottom: 24px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.balance-label {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
}

.balance-amount {
    font-size: 36px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.balance-tip {
    font-size: 12px;
    color: #999;
    margin-bottom: 16px;
}

.balance-tip span {
    color: #666;
}

.withdraw-btn {
    background: #1a1a1a;
    border: none;
    color: white;
    padding: 12px 28px;
    border-radius: 24px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.withdraw-btn:hover {
    background: #333;
    transform: translateY(-2px);
}

.withdraw-btn:active {
    transform: translateY(0);
}

.withdraw-btn:disabled {
    background: #ccc;
    color: #999;
    cursor: not-allowed;
}

/* 游戏列表 */
.work-games-section {
    margin-bottom: 24px;
}

#work .section-title {
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    margin-bottom: 16px;
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.game-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    border: 1.5px solid #1a1a1a;
}

.game-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.game-card:active {
    transform: translateY(0);
}

.game-name {
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 6px;
}

.game-ticket {
    font-size: 13px;
    color: #666;
}

.game-card-disabled {
    border-color: #ccc;
    opacity: 0.6;
    cursor: not-allowed;
}

.game-card-disabled .game-name {
    color: #999;
}

.game-card-disabled .game-ticket {
    color: #bbb;
}

.game-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.game-reward {
    font-size: 14px;
    color: #667eea;
    margin-bottom: 6px;
}

.game-status {
    font-size: 12px;
    color: #999;
}

/* 打工记录 */
.work-history-section {
    margin-bottom: 24px;
}

.history-list {
    background: white;
    border-radius: 12px;
    overflow: hidden;
}

.history-item {
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.history-info {
    flex: 1;
}

.history-game {
    font-size: 15px;
    color: #333;
    margin-bottom: 4px;
}

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

.history-amount {
    font-size: 16px;
    font-weight: 600;
    color: #07c160;
}

.history-amount.negative {
    color: #999;
}

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

/* ==================== 无尽夏页面样式 ==================== */

/* 无尽夏主页 */
#endlesssummer {
    background: #fafafa;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

#endlesssummer .page-header {
    background: #ffffff;
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

#endlesssummer .header-title {
    color: #2c2c2c;
}

/* 头部操作按钮容器 */
.es-header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.es-refresh-btn {
    background: transparent;
    border: none;
    color: #2c2c2c;
    font-size: 16px;
    padding: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.es-refresh-btn:active {
    transform: rotate(180deg) scale(0.9);
    background: rgba(0, 0, 0, 0.05);
}

.es-refresh-btn svg {
    display: block;
}

.es-new-post-btn {
    background: transparent;
    border: none;
    color: #667eea;
    font-size: 16px;
    font-weight: 600;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.es-new-post-btn.disabled {
    color: #cccccc;
    cursor: not-allowed;
}

.es-new-post-btn:active:not(.disabled) {
    transform: scale(0.9);
}

/* 用户导航栏 */
.es-user-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: #f5f5f5;
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
    font-size: 14px;
    flex-shrink: 0;
}

.es-nav-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.es-nav-item {
    cursor: pointer;
    transition: color 0.3s;
    user-select: none;
}

.es-nav-item.active {
    color: #b4a5d8;
    font-weight: 500;
}

.es-nav-item.disabled {
    color: #cccccc;
    cursor: not-allowed;
}

.es-nav-item.active:hover:not(.disabled) {
    color: #9f8cc7;
}

.es-nav-item.logged-in {
    color: #b4a5d8;
    font-weight: 600;
}

.es-nav-divider {
    color: #d0d0d0;
    user-select: none;
}

.es-nav-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.es-points-label {
    color: #666666;
    font-weight: 500;
}

.es-points-value {
    color: #764ba2;
    font-weight: 600;
    min-width: 30px;
    text-align: right;
}

/* 弹窗样式 */
.es-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 50;
    justify-content: center;
    align-items: center;
}

.es-modal.active {
    display: flex;
}

.es-modal-content {
    background: #ffffff;
    border-radius: 16px;
    width: 90%;
    max-width: 360px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: modal-slide-in 0.3s ease-out;
}

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

.es-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
}

.es-modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #2c2c2c;
    margin: 0;
}

.es-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #999999;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.es-modal-close:hover {
    color: #666666;
}

.es-modal-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(80vh - 120px);
}

.es-modal-footer {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

/* 欢迎文本 */
.es-welcome-text {
    text-align: center;
    padding: 20px 0;
}

.es-welcome-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.es-welcome-text p {
    font-size: 16px;
    color: #2c2c2c;
    margin: 0;
}

/* 按钮样式 */
.es-primary-btn {
    padding: 10px 40px;
    background: rgba(180, 165, 216, 0.25);
    color: #764ba2;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

/* 创建新账号按钮居中 */
#es-create-account-btn {
    display: block;
    margin: 0 auto;
}

.es-primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.es-primary-btn:active {
    transform: translateY(0);
}

.es-secondary-btn {
    flex: 1;
    padding: 12px 20px;
    background: #f5f5f5;
    color: #666666;
    border: 1px solid rgba(102, 126, 234, 0.25);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.es-secondary-btn:hover {
    background: #eeeeee;
    border-color: rgba(102, 126, 234, 0.4);
}

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

/* 分隔线 */
.es-divider {
    text-align: center;
    margin: 20px 0;
    position: relative;
}

.es-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e0e0e0;
}

.es-divider span {
    position: relative;
    background: #ffffff;
    padding: 0 12px;
    color: #999999;
    font-size: 13px;
}

/* 表单组 */
.es-form-group {
    margin-bottom: 16px;
}

.es-form-group label {
    display: block;
    color: #666666;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.es-input {
    width: 100%;
    padding: 12px 16px;
    background: #f8f8f8;
    border: 1px solid rgba(102, 126, 234, 0.25);
    border-radius: 10px;
    font-size: 15px;
    color: #2c2c2c;
    outline: none;
    transition: all 0.3s;
}

.es-input:focus {
    border-color: rgba(102, 126, 234, 0.5);
    background: #ffffff;
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.15);
}

.es-input::placeholder {
    color: #999999;
}

/* 头像选择器 */
.es-avatar-selector {
    display: flex;
    align-items: center;
    gap: 12px;
}

.es-avatar-display {
    font-size: 48px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
    border: 2px solid rgba(102, 126, 234, 0.25);
    border-radius: 12px;
}

/* 账号列表 */
.es-account-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.es-account-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f8f8f8;
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.es-account-item:hover {
    border-color: rgba(102, 126, 234, 0.5);
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

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

.es-account-item-avatar {
    font-size: 32px;
}

.es-account-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.es-account-item-name {
    font-size: 15px;
    font-weight: 600;
    color: #2c2c2c;
    display: flex;
    align-items: center;
    gap: 8px;
}

.es-account-item-stats {
    font-size: 12px;
    color: #999999;
}

.es-account-item-right {
    color: #667eea;
    font-size: 20px;
}

/* 管理员账号样式 */
.es-admin-account {
    background: linear-gradient(135deg, #fff9e6 0%, #fff5f0 100%);
    border-color: #f0c060;
}

.es-admin-account:hover {
    background: linear-gradient(135deg, #fff5d6 0%, #ffeee0 100%);
    border-color: #e0b050;
}

.es-admin-badge {
    display: inline-block;
    background: linear-gradient(135deg, #f0c060 0%, #e0b050 100%);
    color: #ffffff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(240, 192, 96, 0.3);
}

/* 帖子容器 */
.endlesssummer-content {
    padding: 16px;
    overflow-y: auto;
    height: calc(100vh - 44px - 70px - 45px);
    max-height: calc(100vh - 44px - 70px - 45px);
    background: #fafafa;
    flex-shrink: 0;
}

#endlesssummer-detail .endlesssummer-content,
#endlesssummer-new-post .endlesssummer-content {
    height: calc(100vh - 44px - 70px);
    max-height: calc(100vh - 44px - 70px);
}

/* 古早论坛三大板块布局 */
.es-forum-sections {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
}

.es-section {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
}

.es-section-header {
    background: #f8f7fa;
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
    border: 2px solid #e8e6f0;
    border-style: double;
    position: relative;
}

.es-section-header::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 1px dashed #d8d5e8;
    pointer-events: none;
}

.es-section-header:hover {
    background: #f3f1f7;
    border-color: #ddd9ea;
}

.es-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.es-section-icon {
    font-size: 18px;
}

.es-section-name {
    font-size: 15px;
    font-weight: 600;
    color: #666;
}

.es-section-toggle {
    font-size: 12px;
    color: #666;
    transition: transform 0.3s;
    user-select: none;
}

.es-section-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #fafafa;
    border-bottom: 1px solid rgba(102, 126, 234, 0.15);
    font-size: 12px;
    color: #666;
}

.es-stat-item strong {
    color: #666;
    font-weight: 600;
}

.es-stat-divider {
    color: #ccc;
}

.es-section-content {
    padding: 16px;
    min-height: 60px;
    transition: all 0.3s;
    overflow: hidden;
}

.es-section-empty {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 20px 0;
}

/* 折叠状态 */
.es-section.collapsed .es-section-stats,
.es-section.collapsed .es-subsections,
.es-section.collapsed .es-section-content {
    display: none;
}

.es-section.collapsed .es-section-toggle {
    transform: rotate(-90deg);
}

/* 创作区子版块样式 */
.es-subsections {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

.es-section-content.es-subsections {
    background: #ffffff;
}

.es-subsection-item {
    background: #ffffff;
    border: 1px solid rgba(180, 165, 216, 0.25);
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.es-subsection-item:hover {
    border-color: rgba(180, 165, 216, 0.5);
    background: rgba(180, 165, 216, 0.05);
    transform: translateX(3px);
}

.es-subsection-item:active {
    transform: translateX(0);
}

.es-subsection-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.es-subsection-stats {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #999;
}

.es-subsection-stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

.es-subsection-stat strong {
    color: #b4a5d8;
    font-weight: 600;
}

/* 我的页面样式 */
.es-my-sections {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
}

.es-my-section {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.es-my-section-header {
    background: #f5f5f5;
    padding: 7px 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
    border: 1px solid #ddd;
}

.es-my-section-header:hover {
    background: #eeeeee;
}

.es-my-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.es-my-section-name {
    font-size: 14px;
    font-weight: 600;
    color: #666;
}

.es-my-section-toggle {
    font-size: 12px;
    color: #666;
    transition: transform 0.3s;
    user-select: none;
}

.es-my-section-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #fafafa;
    border-bottom: 1px solid #e5e5e5;
    font-size: 12px;
    color: #666;
}

.es-my-section-content {
    padding: 16px;
    min-height: 60px;
    transition: all 0.3s;
    overflow: hidden;
}

.es-my-posts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 我的页面折叠状态 */
.es-my-section.collapsed .es-my-section-stats,
.es-my-section.collapsed .es-my-section-content {
    display: none;
}

.es-my-section.collapsed .es-my-section-toggle {
    transform: rotate(-90deg);
}

.es-posts-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 帖子卡片 */
.es-post-card {
    background: #ffffff;
    border: 1px solid rgba(102, 126, 234, 0.25);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.es-post-card:hover {
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    transform: translateY(-2px);
}

.es-post-card:active {
    transform: translateY(0);
}

/* 帖子标题带标签样式 */
.es-post-title-with-tag {
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.5;
}

/* 内容简介样式 */
.es-post-preview-text {
    color: #666;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 页码显示样式（列表项） */
.es-post-pages {
    color: #999;
    font-size: 12px;
    margin-top: 6px;
    letter-spacing: 0.5px;
}

.es-page-num {
    display: inline-block;
    padding: 2px 6px;
    margin: 0 2px;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s;
    color: #666;
}

.es-page-num:hover {
    background: #f0f0f0;
    color: #667eea;
}

/* 页码导航样式（详情页） */
.es-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 0;
    margin-top: 20px;
    border-top: 1px solid #e5e5e5;
}

.es-page-btn {
    padding: 6px 12px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    color: #333;
}

.es-page-btn:hover {
    border-color: #667eea;
    color: #667eea;
}

.es-page-btn.active {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.es-page-ellipsis {
    color: #999;
    padding: 0 4px;
}

/* 楼层显示样式（保留兼容） */
.es-post-floors {
    color: #999;
    font-size: 12px;
    margin-top: 6px;
    letter-spacing: 0.5px;
}

/* 保留旧样式以兼容其他页面 */

.es-post-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.es-post-author {
    display: flex;
    align-items: center;
    gap: 8px;
}

.es-author-avatar {
    font-size: 18px;
}

.es-author-name {
    color: #764ba2;
    font-size: 14px;
    font-weight: 500;
}

.es-category-tag {
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
}

.es-pinned-tag {
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    color: #c8b5e8;
    background: rgba(200, 181, 232, 0.12);
    border: 1px solid rgba(200, 181, 232, 0.3);
    margin-right: 4px;
}

.es-tag-novel {
    color: #5568d3;
    background: rgba(102, 126, 234, 0.1);
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.es-tag-daily {
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.es-tag-creation {
    color: #764ba2;
    background: rgba(118, 75, 162, 0.1);
    border: 1px solid rgba(118, 75, 162, 0.3);
}

.es-tag-poetry {
    color: #a855f7;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.es-tag-other {
    color: #64748b;
    background: rgba(100, 116, 139, 0.1);
    border: 1px solid rgba(100, 116, 139, 0.3);
}

.es-post-title {
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
}

.es-post-preview {
    color: #4a4a4a;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.es-post-meta {
    display: flex;
    gap: 16px;
    color: #8e8e93;
    font-size: 13px;
}

.es-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 空状态 */
.es-empty-hint {
    text-align: center;
    padding: 80px 20px;
}

.es-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.es-empty-hint p {
    color: #4a4a4a;
    font-size: 16px;
    margin-bottom: 8px;
}

.es-empty-tip {
    color: #8e8e93;
    font-size: 14px;
}

/* 帖子详情页 */
.es-detail-container {
    padding-bottom: 80px;
}

/* ==================== 帖子详情页（古早论坛风格） ==================== */

.es-detail-post {
    background: #ffffff;
    border: 1px solid rgba(180, 165, 216, 0.3);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

/* 第一排：标题 */
.es-detail-title {
    color: #1a1a1a;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 8px;
}

/* 标题下方分隔线（3px 淡紫白粗横线） */
.es-title-divider {
    height: 3px;
    background: rgba(180, 165, 216, 0.25);
    margin-bottom: 8px;
}

/* 第二排：作者信息行 */
.es-detail-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-size: 12px;
    color: #666;
}

/* 作者信息下方分隔线（淡灰紫虚线） */
.es-meta-divider {
    height: 1px;
    border-top: 1px dashed rgba(180, 165, 216, 0.4);
    margin-bottom: 4px;
}

.es-detail-author-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.es-author-text {
    color: #9d8fb8;
    font-weight: 500;
}

.es-detail-time {
    color: #999;
}

.es-author-only {
    color: #b4a5d8;
    cursor: pointer;
    user-select: none;
}

.es-author-only:hover {
    color: #764ba2;
    text-decoration: underline;
}

.es-floor-label {
    color: #999;
    font-size: 12px;
    padding: 2px 8px;
    background: rgba(180, 165, 216, 0.1);
    border-radius: 4px;
}

/* 第三排：内容简介（小字） */
.es-detail-intro {
    color: #666;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 2px;
    font-style: italic;
}

/* 简介下方分隔线（淡灰紫细线） */
.es-intro-divider {
    height: 1px;
    background: rgba(180, 165, 216, 0.25);
    margin-bottom: 4px;
}

/* 第四排：连载状态 */
.es-detail-status {
    font-size: 12px;
    font-weight: 500;
    color: #c7b9d9;
    margin-bottom: 4px;
}

/* 连载进度分隔线 */
.es-status-divider {
    height: 1px;
    background: rgba(180, 165, 216, 0.25);
    margin-bottom: 8px;
}

/* 帖子正文 */
.es-detail-content {
    color: #333;
    font-size: 15px;
    line-height: 1.8;
    padding: 12px 0;
    margin: 8px 0;
}

/* 居中操作栏 */
.es-detail-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 16px 0;
}

.es-action-btn {
    padding: 8px 20px;
    background: #ffffff;
    border: 1px solid rgba(180, 165, 216, 0.3);
    border-radius: 6px;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.es-action-btn:hover {
    border-color: #b4a5d8;
    color: #764ba2;
    background: rgba(180, 165, 216, 0.05);
}

.es-action-btn.active {
    background: #b4a5d8;
    color: white;
    border-color: #b4a5d8;
}

/* 底部操作 */
.es-detail-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
}

.es-footer-btn {
    padding: 6px 16px;
    background: transparent;
    border: none;
    color: #ccc;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.3s;
}

.es-footer-btn:hover {
    color: #999;
}

.es-footer-btn.active {
    color: #333;
}

/* ==================== 回复列表 ==================== */

.es-replies-section {
    margin-bottom: 20px;
}

.es-replies-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.es-reply-item {
    background: #fafafa;
    border: 1px solid rgba(180, 165, 216, 0.2);
    border-radius: 8px;
    padding: 14px;
}

/* 回复的第一排：作者信息行 */
.es-reply-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 12px;
}

.es-reply-author-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #666;
}

/* 回复内容 */
.es-reply-content {
    color: #333;
    font-size: 14px;
    line-height: 1.7;
    padding: 10px 0;
    margin-bottom: 10px;
}

/* 回复底部操作 */
.es-reply-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.es-reply-actions-right {
    display: flex;
    gap: 12px;
}

/* 章节总结组件 */
.es-chapter-summary {
    margin: 12px 0;
    padding: 8px 12px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    color: #999;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.es-chapter-summary:hover {
    background: #fafafa;
}

.es-summary-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.es-summary-label {
    flex-shrink: 0;
}

.es-summary-text {
    display: none;
    color: #666;
    line-height: 1.6;
    flex: 1;
}

.es-chapter-summary.expanded {
    background: #f9f9f9;
    padding: 12px;
}

.es-chapter-summary.expanded .es-summary-text {
    display: block;
}

.es-chapter-summary.expanded .es-summary-label::after {
    content: '：';
}

/* 作者名可点击样式 */
.es-author-link {
    cursor: pointer;
    transition: color 0.2s;
}

.es-author-link:hover {
    color: #667eea;
}

/* ==================== 用户主页 ==================== */

.es-user-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.es-user-avatar {
    font-size: 48px;
    flex-shrink: 0;
}

.es-user-info {
    flex: 1;
}

.es-user-name {
    font-size: 20px;
    font-weight: 600;
    color: #262626;
    margin-bottom: 6px;
}

.es-user-id {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
}

.es-user-bio {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.es-user-stats {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-around;
}

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

.es-stat-value {
    font-size: 24px;
    font-weight: 600;
    color: #667eea;
    margin-bottom: 4px;
}

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

.es-user-register {
    font-size: 13px;
    color: #999;
    text-align: center;
    margin-bottom: 16px;
}

.es-user-section {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.es-section-title {
    font-size: 15px;
    font-weight: 600;
    color: #262626;
    margin-bottom: 12px;
}

.es-preference-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.es-preference-item {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.es-preference-more {
    font-size: 13px;
    color: #999;
    margin-top: 4px;
}

.es-quirks-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.es-quirk-tag {
    padding: 6px 12px;
    background: #f5f3ff;
    border-radius: 16px;
    font-size: 13px;
    color: #667eea;
}

.es-user-posts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.es-user-post-item {
    padding: 12px;
    background: #fafafa;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.es-user-post-item:hover {
    background: #f0f0f0;
}

.es-post-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.es-post-tag {
    font-size: 12px;
    color: #667eea;
    flex-shrink: 0;
}

.es-post-title {
    font-size: 14px;
    color: #262626;
    font-weight: 500;
}

.es-post-meta {
    font-size: 12px;
    color: #999;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ==================== 回复表单 ==================== */

/* ==================== 回复表单（固定底部） ==================== */

.es-reply-form {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 390px;
    max-width: 100%;
    background: #ffffff;
    border-top: 1px solid rgba(180, 165, 216, 0.3);
    padding: 12px 16px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.es-reply-textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    border: 1px solid rgba(180, 165, 216, 0.3);
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.6;
    resize: none;
    font-family: inherit;
    margin-bottom: 12px;
}

.es-reply-textarea:focus {
    outline: none;
    border-color: #b4a5d8;
    box-shadow: 0 0 0 2px rgba(180, 165, 216, 0.1);
}

.es-reply-form-actions {
    display: flex;
    justify-content: center;
}

/* 引用标记（输入框上方） */
.es-quote-tag {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f0f2f5;
    padding: 8px 12px;
    border-left: 3px solid #409eff;
    margin-bottom: 8px;
    font-size: 13px;
    color: #606266;
    border-radius: 4px;
}

.es-cancel-quote-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: #909399;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.es-cancel-quote-btn:hover {
    color: #f56c6c;
}

/* 回复中的引用卡片 */
.es-quote-card {
    background: #f9f9f9;
    border-left: 3px solid #909399;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.es-quote-header {
    font-size: 12px;
    color: #909399;
    margin-bottom: 6px;
}

.es-quote-content {
    font-size: 13px;
    color: #606266;
    line-height: 1.5;
    word-break: break-all;
}

/* 独立回复按钮 */
.es-direct-reply-container {
    text-align: center;
    margin: 20px 0;
}

.es-direct-reply-btn {
    padding: 10px 32px;
    background: rgba(180, 165, 216, 0.12);
    color: #9b8fad;
    border: 1px solid rgba(180, 165, 216, 0.25);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(180, 165, 216, 0.12);
    transition: all 0.3s ease;
}

.es-direct-reply-btn:hover {
    background: rgba(180, 165, 216, 0.22);
    border-color: rgba(180, 165, 216, 0.4);
    color: #8b7fa8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(180, 165, 216, 0.2);
}

.es-direct-reply-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(180, 165, 216, 0.15);
}

/* ==================== 无尽夏 - 提醒页面样式 ==================== */

/* 发帖页 */
#endlesssummer-new-post {
    z-index: 10;
}

#endlesssummer-new-post .page-header {
    background: #ffffff;
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.es-publish-btn {
    background: transparent;
    border: none;
    color: #667eea;
    font-size: 16px;
    font-weight: 600;
    padding: 8px 16px;
    cursor: pointer;
}

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

/* ==================== 子区页面样式 ==================== */

/* 子区视图容器 */
.es-subsection-view {
    padding: 0;
    animation: fadeIn 0.2s ease-in-out;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: -16px -16px 0 -16px;
    padding-top: 2px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 返回按钮区域 - 细窄条框 */
.es-subsection-back {
    display: flex;
    align-items: center;
    padding: 6px 16px;
    background: linear-gradient(135deg, rgba(180, 165, 216, 0.08) 0%, rgba(180, 165, 216, 0.04) 100%);
    border-bottom: 1px solid rgba(180, 165, 216, 0.25);
    gap: 10px;
    min-height: 36px;
    flex-shrink: 0;
    margin: 0;
}

.es-back-to-forum {
    background: transparent;
    border: none;
    color: #764ba2;
    font-size: 13px;
    cursor: pointer;
    padding: 2px 0;
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.es-back-to-forum:hover {
    color: #9d8fb8;
    transform: translateX(-2px);
}

.es-subsection-view-title {
    font-size: 15px;
    font-weight: 600;
    color: #764ba2;
    margin: 0;
    flex: 1;
}

/* 置顶版规区域 - 可折叠卡片 */
.es-subsection-notice {
    background: #ffffff;
    border: 1px solid rgba(180, 165, 216, 0.3);
    border-left: none;
    border-right: none;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}

.es-notice-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.es-notice-header:active {
    background: rgba(180, 165, 216, 0.05);
}

.es-notice-icon {
    font-size: 14px;
    color: #764ba2;
}

.es-notice-title {
    font-size: 13px;
    font-weight: 500;
    color: #666;
    flex: 1;
}

.es-notice-arrow {
    font-size: 12px;
    color: #999;
    transition: transform 0.3s ease;
}

.es-subsection-notice.collapsed .es-notice-arrow {
    transform: rotate(-90deg);
}

.es-notice-content {
    color: #666;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    padding: 0 16px 12px 16px;
    background: transparent;
    margin: 0;
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.es-subsection-notice.collapsed .es-notice-content {
    max-height: 0;
    padding: 0 16px;
}

/* 标签筛选区 */
.es-tag-filter {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: #ffffff;
    border-bottom: 1px solid rgba(180, 165, 216, 0.15);
    overflow-x: auto;
    scrollbar-width: none;
}

.es-tag-filter::-webkit-scrollbar {
    display: none;
}

.es-tag-btn {
    padding: 6px 16px;
    background: #ffffff;
    border: 1px solid rgba(180, 165, 216, 0.3);
    border-radius: 16px;
    color: #666;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s;
}

.es-tag-btn:hover {
    border-color: #b4a5d8;
    color: #764ba2;
}

.es-tag-btn.active {
    background: linear-gradient(135deg, #b4a5d8 0%, #9d8fb8 100%);
    border-color: #b4a5d8;
    color: #ffffff;
}

/* 子区帖子列表 */
.es-subsection-posts {
    padding: 8px 0;
    flex: 1;
    overflow-y: auto;
}

/* 账号管理页面 */
.es-account-form {
    padding: 16px;
}

.es-form-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.es-input-icon {
    position: absolute;
    right: 12px;
    color: #999;
    font-size: 16px;
    pointer-events: none;
}

/* 子区管理板块样式 */
.es-subsection-manager {
    margin-top: 30px;
    padding: 20px 16px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 12px;
}

.es-subsection-manager-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.es-subsection-manager-title::before {
    content: '⚙️';
    font-size: 18px;
}

.es-subsection-manager-actions {
    margin-bottom: 16px;
}

.es-create-subsection-btn {
    width: 100%;
    padding: 12px;
    background: #b8b0cc;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.es-create-subsection-btn:active {
    transform: scale(0.98);
    opacity: 0.9;
}

.es-subsection-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.es-subsection-manage-item {
    background: white;
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.es-subsection-manage-item:active {
    transform: scale(0.98);
}

.es-subsection-manage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

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

.es-subsection-manage-parent {
    font-size: 12px;
    color: #999;
    background: #f5f5f5;
    padding: 2px 8px;
    border-radius: 4px;
}

.es-subsection-manage-stats {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
}

.es-subsection-manage-actions {
    display: flex;
    gap: 8px;
}

.es-subsection-edit-btn,
.es-subsection-delete-btn {
    flex: 1;
    padding: 8px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.es-subsection-edit-btn {
    background: #b4a5d8;
    color: white;
}

.es-subsection-delete-btn {
    background: #ff6b6b;
    color: white;
}

.es-subsection-edit-btn:active,
.es-subsection-delete-btn:active {
    transform: scale(0.95);
    opacity: 0.9;
}

/* 全局提示词配置样式 */
.es-global-prompt-config {
    margin-top: 20px;
    padding: 20px 16px;
    background: linear-gradient(135deg, #f7f9fb 0%, #dce4ec 100%);
    border-radius: 12px;
}

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

.es-global-prompt-title {
    font-size: 16px;
    font-weight: 600;
    color: #2d3436;
    display: flex;
    align-items: center;
    gap: 8px;
}

.es-global-prompt-title::before {
    content: '🔧';
    font-size: 18px;
}

.es-global-prompt-status {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
}

.es-global-prompt-desc {
    font-size: 13px;
    color: #636e72;
    line-height: 1.6;
    margin-bottom: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    border-left: 3px solid #a8b8c8;
}

.es-global-prompt-textarea {
    width: 100%;
    min-height: 150px;
    padding: 12px;
    border: 2px solid rgba(168, 184, 200, 0.25);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    background: white;
    color: #2d3436;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: all 0.3s ease;
}

.es-global-prompt-textarea:focus {
    outline: none;
    border-color: #a8b8c8;
    box-shadow: 0 0 0 3px rgba(168, 184, 200, 0.08);
}

.es-global-prompt-textarea::placeholder {
    color: #b2bec3;
}

.es-global-prompt-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
}

.es-btn-primary,
.es-btn-secondary {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.es-btn-primary {
    background: #c5d9ed;
    color: #5a7a9b;
}

.es-btn-secondary {
    background: rgba(255, 255, 255, 0.8);
    color: #636e72;
}

.es-btn-primary:active,
.es-btn-secondary:active {
    transform: scale(0.98);
    opacity: 0.9;
}

/* 子区编辑弹窗样式 */
#es-subsection-edit-modal .modal-content {
    max-width: 400px;
    width: 90%;
}

#es-subsection-edit-modal .es-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    line-height: 1.6;
}

#es-subsection-edit-modal .es-textarea:focus {
    outline: none;
    border-color: #667eea;
}

#es-subsection-edit-modal .input-hint {
    font-size: 12px;
    color: #999;
    margin-top: 6px;
}

.es-select {
    width: 100%;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    background: #ffffff;
    color: #333;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

.es-select:focus {
    outline: none;
    border-color: #b4a5d8;
}

.es-form-hint {
    font-size: 12px;
    color: #999;
    margin-top: 6px;
    line-height: 1.4;
}

.es-new-post-form {
    padding: 16px;
}

.es-form-section {
    margin-bottom: 20px;
}

.es-form-label {
    color: #666666;
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 500;
    display: block;
}

.es-current-id-box {
    background: rgba(102, 126, 234, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.3);
    border-radius: 12px;
    padding: 12px 16px;
    color: #764ba2;
    font-size: 15px;
    font-weight: 500;
}

.es-category-select {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(102, 126, 234, 0.25);
    border-radius: 10px;
    padding: 12px 16px;
    color: #2c2c2c;
    font-size: 15px;
    outline: none;
    font-family: inherit;
}

.es-category-select:focus {
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.15);
}

.es-title-input {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(102, 126, 234, 0.25);
    border-radius: 10px;
    padding: 12px 16px;
    color: #2c2c2c;
    font-size: 15px;
    outline: none;
    font-family: inherit;
}

.es-title-input:focus {
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.15);
}

.es-summary-input {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(102, 126, 234, 0.25);
    border-radius: 10px;
    padding: 12px 16px;
    color: #2c2c2c;
    font-size: 14px;
    outline: none;
    font-family: inherit;
}

.es-summary-input:focus {
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.15);
}

.es-status-select {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(102, 126, 234, 0.25);
    border-radius: 10px;
    padding: 12px 16px;
    color: #2c2c2c;
    font-size: 14px;
    outline: none;
    font-family: inherit;
    cursor: pointer;
}

.es-status-select:focus {
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.15);
}

.es-theme-select {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(102, 126, 234, 0.25);
    border-radius: 10px;
    padding: 12px 16px;
    color: #2c2c2c;
    font-size: 14px;
    outline: none;
    font-family: inherit;
}

.es-theme-select:focus {
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.15);
}

.es-theme-select::placeholder {
    color: #999999;
}

.es-title-input::placeholder,
.es-summary-input::placeholder,
.es-content-textarea::placeholder,
.es-reply-textarea::placeholder {
    color: #999999;
}

.es-content-textarea {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(102, 126, 234, 0.25);
    border-radius: 10px;
    padding: 12px 16px;
    color: #2c2c2c;
    font-size: 15px;
    line-height: 1.6;
    resize: vertical;
    min-height: 200px;
    outline: none;
    font-family: inherit;
}

.es-content-textarea:focus {
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.15);
}

/* Toast动画 */
@keyframes es-toast-fade {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    10% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    90% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}


.trace-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.trace-empty .empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.trace-empty p {
    font-size: 16px;
}

/* ===================================
   记忆App样式
   ================================ */

/* ==================== 记忆App主页 ==================== */
#memory {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 顶部标题栏 */
.memory-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 45px 20px 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 10;
}

.memory-back-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #333;
    transition: all 0.2s;
    border-radius: 50%;
}

.memory-back-btn:active {
    background: rgba(0, 0, 0, 0.05);
    transform: scale(0.95);
}

.memory-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0;
    letter-spacing: 0.5px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.memory-header-spacer {
    width: 40px;
}

/* 搜索区域容器 */
.memory-search-container {
    padding: 16px 20px 12px;
    background: transparent;
}

/* 搜索框 */
.memory-search-bar {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 16px;
    padding: 14px 18px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    border: 1.5px solid transparent;
}

.memory-search-bar:focus-within {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-color: #ffb3d9;
    transform: translateY(-1px);
}

.memory-search-icon {
    width: 20px;
    height: 20px;
    color: #999;
    stroke-width: 2.5;
    flex-shrink: 0;
    transition: color 0.3s;
}

.memory-search-bar:focus-within .memory-search-icon {
    color: #ffb3d9;
}

.memory-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    color: #333;
    margin-left: 12px;
    background: transparent;
}

.memory-search-input::placeholder {
    color: #aaa;
    font-weight: 400;
}

/* 联系人网格容器 */
.memory-contacts-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 0 20px 20px;
    overflow-y: auto;
    align-content: start;
}

/* 联系人卡片 */
.memory-contact-card {
    position: relative;
    height: 140px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    border: 2.5px solid #ffe5f0;
    box-shadow: 0 4px 12px rgba(255, 229, 240, 0.3);
}

.memory-contact-card:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(255, 217, 235, 0.4);
    border-color: #ffd9eb;
}

/* 卡片内容 */
.card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 20px;
    text-align: center;
}

/* 联系人姓名 */
.card-content .contact-name {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

/* 联系人元信息 */
.card-content .contact-meta {
    font-size: 13px;
    color: #999;
    font-weight: 500;
}

/* ==================== 记忆详情页（功能导航页）==================== */
#memory-detail {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
}

.memory-detail-content {
    padding: 16px 20px;
}

/* 功能卡片区域 */
.memory-function-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 16px;
}

/* 功能卡片 */
.memory-function-card {
    background: white;
    border: 2.5px solid #ffe5f0;
    border-radius: 20px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(255, 229, 240, 0.3);
}

.memory-function-card:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(255, 217, 235, 0.4);
    border-color: #ffd9eb;
}

.memory-function-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.function-card-icon {
    font-size: 36px;
    margin-bottom: 12px;
}

.function-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.function-card-desc {
    font-size: 12px;
    color: #999;
    font-weight: 500;
}

/* ==================== 记忆海页面 ==================== */
#memory-sea {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
}

/* 记忆海页面顶栏 + 号按钮 */
.memory-sea-add-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #ff85a2;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 28px;
    font-weight: 300;
}

.memory-sea-add-btn:hover {
    background: #fff0f5;
}

.memory-sea-add-btn:active {
    transform: scale(0.88);
    background: #ffe5f0;
}

.memory-sea-add-btn svg {
    color: #ff85a2;
}

/* 日期选择器输入框特殊样式 */
input[type="date"].memory-form-input {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    color: #333;
}

input[type="date"].memory-form-input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    color: #ff85a2;
    filter: invert(63%) sepia(58%) saturate(1425%) hue-rotate(303deg) brightness(102%) contrast(101%);
}

.memory-sea-wrapper {
    padding: 16px 20px;
}

/* 日期列表容器 */
.memory-date-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 日期卡片 - 使用统一的卡片样式 */
.memory-date-card {
    background: white;
    border: 2.5px solid #ffe5f0;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(255, 229, 240, 0.3);
}

.memory-date-card:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(255, 217, 235, 0.4);
    border-color: #ffd9eb;
}

.date-card-left {
    flex: 1;
}

.date-card-date {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    letter-spacing: 0.5px;
}

.date-card-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.date-card-count {
    font-size: 14px;
    color: #999;
    font-weight: 500;
}

.date-card-arrow {
    color: #ffb3d9;
    flex-shrink: 0;
}

/* ==================== 某天的记忆详情页 ==================== */
#memory-day-detail {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
}

#memory-day-detail .page-header {
    position: relative;
}

.memory-day-wrapper {
    padding: 16px 20px;
}

.memory-day-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
}

/* 单条记忆卡片 - 使用统一的卡片样式 */
.memory-item {
    background: white;
    border: 2.5px solid #ffe5f0;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(255, 229, 240, 0.3);
    transition: all 0.3s ease;
}

.memory-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.memory-edit-btn {
    margin-left: auto;
    background: none;
    border: 1px solid #d8d8d8;
    color: #666;
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 12px;
    cursor: pointer;
}
.memory-edit-btn:active { background: #f0f0f0; }

.memory-time {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

.memory-precise-time {
    font-size: 11px;
    color: #aaa;
}

.memory-importance {
    font-size: 12px;
    color: #ff85a2;
    font-weight: 600;
    margin-left: auto;
}

.memory-summary {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 10px;
}

.memory-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.memory-topic {
    font-size: 12px;
    color: #576b95;
    font-weight: 500;
}

.memory-tone {
    font-size: 12px;
    color: #999;
}

.memory-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.memory-tag {
    font-size: 11px;
    color: #ff85a2;
    background: #fff0f5;
    padding: 3px 8px;
    border-radius: 10px;
}

.memory-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.memory-keyword {
    font-size: 11px;
    color: #666;
    background: #f5f5f5;
    padding: 3px 8px;
    border-radius: 10px;
    cursor: default;
}

.memory-empty-hint {
    text-align: center;
    padding: 60px 20px;
    color: #999;
    font-size: 14px;
    line-height: 2;
}

/* 操作按钮区域 */
.memory-action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.memory-action-btn {
    flex: 1;
    padding: 14px;
    border: 2.5px solid #ffe5f0;
    border-radius: 16px;
    background: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.memory-action-btn:active {
    transform: scale(0.97);
    opacity: 0.7;
}

.memory-action-btn.danger {
    color: #fa5151;
    border-color: #ffe5e5;
}

.memory-action-btn svg {
    flex-shrink: 0;
}

/* ==================== 记忆编辑功能样式 ==================== */

/* 编辑模式激活按钮 */
.memory-action-btn.edit-mode-active {
    background: #ff85a2;
    color: white;
    border-color: #ff85a2;
}

/* 删除模式激活按钮 */
.memory-action-btn.danger.delete-mode-active {
    background: #ff4444;
    color: white;
    border-color: #ff4444;
}

/* 记忆卡片删除模式样式 */
.memory-item.with-delete-btn {
    position: relative;
    padding-right: 56px;
}

/* 记忆删除图标按钮 */
.memory-delete-icon-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #ff4444;
    background: white;
    color: #ff4444;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.memory-delete-icon-btn:active {
    background: #ff4444;
    color: white;
    transform: translateY(-50%) scale(0.92);
}

.memory-delete-icon-btn svg {
    width: 18px;
    height: 18px;
}

/* 添加记忆日期提示 */
.memory-add-date-hint {
    text-align: center;
    font-size: 13px;
    color: #ff85a2;
    margin-bottom: 16px;
    padding: 8px 12px;
    background: #fff0f5;
    border-radius: 8px;
}

/* 记忆卡片编辑模式样式 */
.memory-item.with-edit-btn {
    position: relative;
    padding-right: 56px;
}

.memory-edit-icon-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #ff85a2;
    background: white;
    color: #ff85a2;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.memory-edit-icon-btn:active {
    background: #ff85a2;
    color: white;
    transform: translateY(-50%) scale(0.92);
}

.memory-edit-icon-btn svg {
    width: 18px;
    height: 18px;
}

/* 记忆编辑弹窗 */
.memory-edit-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

/* 日期选择弹窗无背景遮罩 */
.memory-edit-overlay.memory-date-picker-no-bg {
    background: transparent;
}

.memory-edit-overlay.visible {
    display: flex;
}

.memory-edit-dialog {
    background: white;
    border-radius: 20px;
    padding: 24px;
    max-width: 360px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
    animation: modalSlideUp 0.3s ease;
}

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

.memory-edit-header {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
}

.memory-edit-form-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.memory-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.memory-form-label {
    font-size: 13px;
    font-weight: 600;
    color: #666;
}

.memory-form-input,
.memory-form-textarea,
.memory-form-select {
    padding: 10px 14px;
    border: 2px solid #ffe5f0;
    border-radius: 12px;
    font-size: 14px;
    font-family: inherit;
    color: #333;
    transition: border-color 0.3s;
    background: white;
}

.memory-form-input:focus,
.memory-form-textarea:focus,
.memory-form-select:focus {
    outline: none;
    border-color: #ff85a2;
}

.memory-form-textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.5;
}

.memory-form-select {
    cursor: pointer;
}

.memory-edit-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.memory-btn-cancel,
.memory-btn-save {
    flex: 1;
    padding: 13px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.memory-btn-save {
    background: #ff85a2;
    color: white;
}

.memory-btn-save:active {
    background: #ff6b8f;
    transform: scale(0.96);
}

.memory-btn-cancel {
    background: #f5f5f5;
    color: #666;
}

.memory-btn-cancel:active {
    background: #e5e5e5;
    transform: scale(0.96);
}

/* 详情页联系人信息区域 */
.memory-contact-info {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    text-align: center;
    border: 2px solid #ffe5f0;
}

.memory-contact-info .contact-name {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.memory-contact-info .contact-meta {
    font-size: 14px;
    color: #999;
    font-weight: 500;
}

/* 记忆内容编辑区 */
.memory-content-textarea {
    width: 100%;
    min-height: 300px;
    padding: 16px;
    border: none;
    border-radius: 12px;
    background: white;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    resize: vertical;
    outline: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 16px;
}

.memory-content-textarea::placeholder {
    color: #999;
}

/* 操作按钮 */
.memory-action-buttons {
    display: flex;
    gap: 12px;
}

.memory-action-btn {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.memory-action-btn:active {
    opacity: 0.7;
}

.memory-btn-primary {
    background: #07c160;
    color: white;
}

.memory-btn-secondary {
    background: #576b95;
    color: white;
}

.memory-btn-danger {
    background: #fa5151;
    color: white;
}

/* ==================== 群聊记忆海 - 黑白灰风格覆盖 ==================== */
#group-memory-sea {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
}

#group-memory-sea .memory-date-card {
    border-color: #e8e8e8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

#group-memory-sea .memory-date-card:active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: #d0d0d0;
}

#group-memory-sea .date-card-arrow {
    color: #999;
}

#group-memory-day-detail {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
}

#group-memory-day-detail .memory-item {
    border-color: #e8e8e8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

#group-memory-day-detail .memory-importance {
    color: #333;
}

#group-memory-day-detail .memory-tag {
    color: #666;
    background: #f0f0f0;
}

#group-memory-day-detail .memory-action-btn {
    border-color: #e0e0e0;
}

#group-memory-day-detail .memory-action-btn.danger {
    border-color: #e0e0e0;
    color: #fa5151;
}

/* 提示文字 */
.setting-hint {
    font-size: 10px;
    color: #999;
    text-align: center;
    line-height: 1.5;
    max-width: 90%;
}

/* 保存按钮区 */
.memory-button-section {
    padding: 16px;
    display: flex;
    justify-content: center;
}

/* 保存按钮 */
.memory-save-button {
    padding: 10px 32px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}

.memory-save-button:hover {
    background: #f0f0f0;
}

.memory-save-button:active {
    background: #e8e8e8;
    transform: scale(0.98);
}

/* URL输入卡片容器 */
.url-input-card {
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
}

/* 输入区域 */
.url-input-section {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

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

.url-text-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    font-size: 13px;
    color: #333;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.url-text-input:focus {
    border-color: #333;
}

.url-text-input::placeholder {
    color: #bbb;
}

/* 分割线 */
.url-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 0;
}

/* 按钮区域（居中） */
.url-button-section {
    padding: 16px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.url-btn-cancel,
.url-btn-confirm {
    padding: 8px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #e0e0e0;
}

.url-btn-cancel {
    background: white;
    color: #666;
}

.url-btn-cancel:hover {
    background: #f0f0f0;
}

.url-btn-cancel:active {
    background: #e8e8e8;
    transform: scale(0.98);
}

.url-btn-confirm {
    background: white;
    color: #333;
}

.url-btn-confirm:hover {
    background: #f0f0f0;
}

.url-btn-confirm:active {
    background: #e8e8e8;
    transform: scale(0.98);
}

/* 心声卡片样式 */
.mind-card-dialog {
    position: relative;
    width: 85%;
    max-width: 320px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: rgba(255, 240, 245, 0.85); /* 粉色半透明背景 */
    backdrop-filter: blur(12px); /* 毛玻璃效果 */
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(255, 182, 193, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.6);
    overflow: hidden;
    z-index: 10001;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mind-card-header {
    flex-shrink: 0;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.mind-card-header h3 {
    margin: 0;
    font-size: 18px;
    color: #d63384; /* 深粉色标题 */
    font-weight: 600;
}

.mind-card-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mind-section {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.mind-section.dark-thought {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

.mind-label {
    font-size: 12px;
    color: #d63384;
    margin-bottom: 6px;
    font-weight: bold;
    opacity: 0.8;
}

.mind-section.dark-thought .mind-label {
    color: #4a4a4a;
}

.mind-content {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    text-align: justify;
}

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

.settings-item-column {
    display: flex;
    padding: 20px;
    background: white;
}

.settings-item-label {
    font-size: 15px;
    color: #333;
    font-weight: 500;
}

.settings-item-value {
    font-size: 14px;
    color: #999;
    margin-right: 8px;
}

/* 字体大小滑块 */
.font-size-slider-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
}

.font-size-label {
    font-size: 13px;
    color: #666;
    min-width: 20px;
}

.font-size-slider {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    outline: none;
    background: #e0e0e0;
    -webkit-appearance: none;
    appearance: none;
}

.font-size-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #666;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.font-size-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #666;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.font-size-value {
    font-size: 13px;
    color: #666;
    font-weight: 500;
    min-width: 40px;
    text-align: right;
}

.font-size-preview {
    margin-top: 20px;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 8px;
}

.preview-message {
    color: #333;
    line-height: 1.5;
}

/* 背景上传选项 - 横向卡片布局 */
.bg-upload-options {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
}

.bg-option-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
    min-height: 85px;
}

.bg-option-btn:hover {
    background: #f0f0f0;
}

.bg-option-btn:active {
    background: #e8e8e8;
    transform: scale(0.98);
}

.bg-option-btn svg {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
}

.bg-option-btn span {
    font-size: 13px;
    color: #333;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
}

/* 夜间模式 - 聊天设置 */
.phone-frame.night-mode #chat-settings {
    background: #1c1c1c;
}

.phone-frame.night-mode .settings-section {
    background: #2c2c2e;
}

.phone-frame.night-mode .settings-item,
.phone-frame.night-mode .settings-item-column {
    background: #2c2c2e;
    border-bottom-color: #3a3a3a;
}

.phone-frame.night-mode .settings-item:active {
    background: #3a3a3a;
}

.phone-frame.night-mode .settings-item-label {
    color: #e8e8e8;
}

.phone-frame.night-mode .font-size-preview {
    background: #1c1c1c;
}

.phone-frame.night-mode .preview-message {
    color: #e8e8e8;
}

/* ========== 字体与颜色设置组 ========== */
.font-group {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 12px;
    margin-bottom: 4px;
}

.font-group:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

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

.font-setting-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.font-setting-label {
    font-size: 12px;
    color: #888;
    min-width: 28px;
    flex-shrink: 0;
}

.font-setting-row .font-size-slider-container {
    flex: 1;
    margin-top: 0;
}

/* 颜色选择器 */
.color-picker-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.color-picker-input {
    width: 30px;
    height: 30px;
    border: 2px solid #d0d0d0;
    border-radius: 6px;
    cursor: pointer;
    padding: 2px;
    background: none;
    -webkit-appearance: none;
    appearance: none;
}

.color-picker-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-picker-input::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}

.color-hex-value {
    font-size: 12px;
    color: #888;
    font-family: monospace;
    min-width: 62px;
}

.color-reset-btn {
    font-size: 11px;
    color: #999;
    background: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.color-reset-btn:active {
    background: #f0f0f0;
}

/* 统一预览区 */
.font-preview-unified {
    margin-top: 12px;
    padding: 12px;
    background: #f5f5f5;
    border-radius: 8px;
}

.preview-item {
    margin-bottom: 8px;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.preview-item:last-child {
    margin-bottom: 0;
}

.preview-type-label {
    font-size: 10px;
    color: #bbb;
    min-width: 44px;
    flex-shrink: 0;
}

.preview-bubble-text {
    display: inline-block;
    background: rgba(255, 255, 255, 0.85);
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: #222;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.preview-narrator-text {
    font-style: italic;
    font-size: 12px;
    color: #999;
}

.preview-user-narrator-text {
    font-style: italic;
    font-size: 12px;
    color: #333;
}

.preview-proactive-text {
    font-size: 13px;
    color: #333;
}

/* 夜间模式 - 字体与颜色设置 */
.phone-frame.night-mode .font-group {
    border-bottom-color: #3a3a3a;
}

.phone-frame.night-mode .font-group-title {
    color: #e8e8e8;
}

.phone-frame.night-mode .font-setting-label {
    color: #aaa;
}

.phone-frame.night-mode .color-picker-input {
    border-color: #555;
}

.phone-frame.night-mode .color-hex-value {
    color: #aaa;
}

.phone-frame.night-mode .color-reset-btn {
    color: #aaa;
    border-color: #555;
}

.phone-frame.night-mode .color-reset-btn:active {
    background: #3a3a3a;
}

.phone-frame.night-mode .font-preview-unified {
    background: #1c1c1c;
}

.phone-frame.night-mode .preview-type-label {
    color: #666;
}

.phone-frame.night-mode .preview-bubble-text {
    background: rgba(42, 42, 42, 0.85);
    color: #e0e0e0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.phone-frame.night-mode .bg-option-btn {
    background: #3a3a3a;
    border-color: #4a4a4a;
}

.phone-frame.night-mode .bg-option-btn:hover {
    background: #4a4a4a;
}

.phone-frame.night-mode .bg-option-btn span {
    color: #e8e8e8;
}

.phone-frame.night-mode .chat-bg-tab {
    background: #3a3a3a;
    border-color: #4a4a4a;
}

.phone-frame.night-mode .chat-bg-tab:hover,
.phone-frame.night-mode .chat-bg-tab.active {
    background: #4a4a4a;
    border-color: #555;
}

.phone-frame.night-mode .chat-bg-reset-link {
    color: #777;
}

.phone-frame.night-mode .chat-bg-reset-link:active {
    color: #aaa;
}

/* ===== 查手机 App ===== */
.find-phone-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: calc(100% - 80px);
}

.find-phone-map {
    background: #f5f5f5;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.map-icon {
    font-size: 48px;
}

.location-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.location-address {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.location-coords {
    font-size: 13px;
    color: #666;
    font-family: monospace;
}

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

.find-phone-status {
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}

.status-locating {
    background: #fff3e0;
    color: #f57c00;
}

.status-success {
    background: #e8f5e9;
    color: #2e7d32;
}

.find-phone-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.find-phone-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

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

.find-phone-btn.danger {
    border-color: #ffcdd2;
}

.find-phone-btn.danger .btn-text {
    color: #d32f2f;
}

.btn-icon {
    font-size: 32px;
}

.btn-text {
    font-size: 14px;
    color: #333;
}

/* ===== 漂流瓶 App ===== */
.bottle-content {
    display: flex;
    flex-direction: column;
    height: calc(100% - 80px);
}

.bottle-ocean {
    background: linear-gradient(180deg, #4fc3f7 0%, #0288d1 100%);
    padding: 40px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.bottle-ocean::before {
    content: '🌊';
    position: absolute;
    font-size: 100px;
    opacity: 0.2;
    animation: wave 3s ease-in-out infinite;
}

@keyframes wave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.bottle-pick-btn {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50px;
    padding: 15px 30px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
}

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

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

.bottle-text {
    font-size: 16px;
    font-weight: 500;
    color: #0288d1;
}

.bottle-tabs {
    display: flex;
    background: white;
    border-bottom: 1px solid #e0e0e0;
}

.bottle-tab {
    flex: 1;
    padding: 12px;
    text-align: center;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    position: relative;
}

.bottle-tab.active {
    color: #07c160;
    font-weight: 500;
}

.bottle-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: #07c160;
}

.bottle-list {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    background: #f5f5f5;
}

.bottle-item {
    background: white;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.bottle-item:active {
    background: #f5f5f5;
}

.bottle-content-text {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 10px;
}

.bottle-info {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
}

.bottle-from {
    color: #666;
}

.bottle-distance {
    color: #999;
}

.empty-bottle {
    text-align: center;
    padding: 60px 20px;
    color: #999;
    font-size: 14px;
}

.bottle-textarea {
    width: 100%;
    min-height: 150px;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    font-family: inherit;
}

.bottle-counter {
    text-align: right;
    font-size: 12px;
    color: #999;
    margin-top: 8px;
}

/* ===== 查手机 App ===== */
.find-phone-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: calc(100% - 80px);
}

.find-phone-map {
    background: #f5f5f5;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.map-icon {
    font-size: 48px;
}

.location-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.location-address {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.location-coords {
    font-size: 13px;
    color: #666;
    font-family: monospace;
}

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

.find-phone-status {
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
}

.status-locating {
    background: #fff3e0;
    color: #f57c00;
}

.status-success {
    background: #e8f5e9;
    color: #2e7d32;
}

.find-phone-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.find-phone-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

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

.find-phone-btn.danger {
    border-color: #ffcdd2;
}

.find-phone-btn.danger .btn-text {
    color: #d32f2f;
}

.btn-icon {
    font-size: 32px;
}

.btn-text {
    font-size: 14px;
    color: #333;
}

/* ===== 漂流瓶 App ===== */
.bottle-content {
    display: flex;
    flex-direction: column;
    height: calc(100% - 80px);
}

.bottle-ocean {
    background: linear-gradient(180deg, #4fc3f7 0%, #0288d1 100%);
    padding: 40px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.bottle-ocean::before {
    content: '🌊';
    position: absolute;
    font-size: 100px;
    opacity: 0.2;
    animation: wave 3s ease-in-out infinite;
}

@keyframes wave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.bottle-pick-btn {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50px;
    padding: 15px 30px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
}

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

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

.bottle-text {
    font-size: 16px;
    font-weight: 500;
    color: #0288d1;
}

.bottle-tabs {
    display: flex;
    background: white;
    border-bottom: 1px solid #e0e0e0;
}

.bottle-tab {
    flex: 1;
    padding: 12px;
    text-align: center;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    position: relative;
}

.bottle-tab.active {
    color: #07c160;
    font-weight: 500;
}

.bottle-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    background: #07c160;
}

.bottle-list {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    background: #f5f5f5;
}

.bottle-item {
    background: white;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.bottle-item:active {
    background: #f5f5f5;
}

.bottle-content-text {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 10px;
}

.bottle-info {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
}

.bottle-from {
    color: #666;
}

.bottle-distance {
    color: #999;
}

.empty-bottle {
    text-align: center;
    padding: 60px 20px;
    color: #999;
    font-size: 14px;
}

.bottle-textarea {
    width: 100%;
    min-height: 150px;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    resize: vertical;
    font-family: inherit;
}

.bottle-counter {
    text-align: right;
    font-size: 12px;
    color: #999;
    margin-top: 8px;
}

/* AI人设预览卡片样式 - 简约清新风格 */
.ai-persona-preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.ai-persona-preview-card {
    background: white;
    border-radius: 16px;
    padding: 30px 24px;
    max-width: 320px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    animation: slideUpFade 0.3s ease-out;
}

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

.ai-preview-name {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    text-align: center;
}

.ai-preview-bio {
    font-size: 15px;
    line-height: 1.7;
    color: #666;
    text-align: center;
}

/* AI人设编辑按钮 */
.ai-edit-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: #888;
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.ai-edit-btn:active {
    background: #666;
    transform: translateY(-50%) scale(0.95);
}


/* 聊天底部功能键弹窗专用样式 */
.chat-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

.chat-modal-dialog {
    background: #FFFFFF;
    width: 340px;
    max-width: 90%;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalPopIn 0.2s ease-out;
}

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

.chat-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #F0F0F0;
    text-align: center;
}

.chat-modal-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #333;
}

.chat-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chat-modal-label {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.chat-modal-input {
    width: 100%;
    padding: 14px;
    background: #F7F7F7;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    color: #333;
    box-sizing: border-box;
    transition: all 0.2s;
}

.chat-modal-input:focus {
    outline: none;
    background: #FFFFFF;
    border-color: #FFB7C5;
    box-shadow: 0 0 0 2px rgba(255, 183, 197, 0.2);
}

.chat-modal-textarea {
    width: 100%;
    min-height: 100px;
    padding: 14px;
    background: #F7F7F7;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    color: #333;
    resize: none;
    box-sizing: border-box;
    font-family: inherit;
    transition: all 0.2s;
}

.chat-modal-textarea:focus {
    outline: none;
    background: #FFFFFF;
    border-color: #FFB7C5;
    box-shadow: 0 0 0 2px rgba(255, 183, 197, 0.2);
}

.chat-modal-footer {
    padding: 0 20px 20px 20px;
    display: flex;
    justify-content: center;
}

.chat-modal-btn-primary {
    width: 100%;
    height: 44px;
    background: #F0F0F0;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.chat-modal-btn-primary:active {
    background: #E0E0E0;
}

/* 位置选择弹窗特殊样式 */
.chat-location-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-location-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #F7F7F7;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}

.chat-location-btn:active {
    background: #EAEAEA;
}

.chat-location-icon {
    width: 40px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

.chat-location-info h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
    color: #333;
}

.chat-location-info p {
    margin: 0;
    font-size: 12px;
    color: #999;
}

/* 语音消息样式 */
/* 语音消息气泡宽度由JS动态设置 */
.voice-message-container {
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
    min-width: 60px;
    max-width: 220px;
}

.voice-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    min-height: 40px;
}

.voice-wave {
    display: flex;
    align-items: center;
    gap: 2px;
}

.wave-dot {
    width: 3px;
    height: 12px;
    background: currentColor;
    border-radius: 2px;
    animation: waveAnimation 1.2s ease-in-out infinite;
}

.wave-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.wave-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes waveAnimation {
    0%, 100% { height: 8px; opacity: 0.6; }
    50% { height: 16px; opacity: 1; }
}

.voice-duration {
    font-size: 13px;
    font-weight: 500;
}

/* 展开后内容固定大小（模拟真实微信） */
.voice-text {
    padding: 8px 12px 10px 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 14px;
    line-height: 1.4;
    animation: voiceTextFadeIn 0.2s ease;
    width: auto;
    min-width: 220px;
    max-width: 300px;
    box-sizing: border-box;
}

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

/* User voice message (right side) */
.chat-message.user .voice-message-container {
    background: transparent;
}

.chat-message.user .voice-bar {
    color: rgba(0, 0, 0, 0.7);
}

.chat-message.user .voice-text {
    color: rgba(0, 0, 0, 0.8);
    border-top-color: rgba(0, 0, 0, 0.06);
}

/* AI voice message (left side) */
.chat-message.ai .voice-message-container {
    background: transparent;
}

.chat-message.ai .voice-bar {
    color: rgba(0, 0, 0, 0.7);
}

.chat-message.ai .voice-text {
    color: rgba(0, 0, 0, 0.8);
    border-top-color: rgba(0, 0, 0, 0.06);
}

/* ===== 用户真实语音输入 ===== */
.voice-replay-btn {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.6);
    font-size: 10px;
    line-height: 22px;
    text-align: center;
    padding: 0;
    margin-left: 4px;
    cursor: pointer;
}
.voice-replay-btn:active { background: rgba(0, 0, 0, 0.16); }

/* 线下语音：文字常显 + 左侧复听标志 */
.voice-message-container.offline-voice {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: default;
    max-width: 300px;
    overflow: visible;
}
.voice-message-container.offline-voice .voice-replay-btn { margin-left: 0; }
.voice-message-container.offline-voice .voice-text {
    display: block;
    border-top: none;
    min-width: 0;
    padding: 2px 0;
    animation: none;
    font-size: inherit;   /* 继承气泡(contentDiv)字号：跟普通消息一致，且跟随聊天字体大小设置 */
}

/* 录音浮层 */
#chat-voice-recording {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}
.voice-rec-card {
    padding: 26px 34px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.voice-rec-wave {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 46px;
}
.voice-rec-wave span {
    width: 6px;
    height: 12px;
    border-radius: 3px;
    background: #ff7eb3;
    animation: voiceRecBar 0.7s ease-in-out infinite;
}
.voice-rec-wave span:nth-child(2) { animation-delay: 0.12s; }
.voice-rec-wave span:nth-child(3) { animation-delay: 0.24s; }
.voice-rec-wave span:nth-child(4) { animation-delay: 0.12s; }
.voice-rec-wave span:nth-child(5) { animation-delay: 0s; }
@keyframes voiceRecBar {
    0%, 100% { height: 10px; }
    50% { height: 42px; }
}
.voice-rec-tip { font-size: 13px; color: #999; }
#chat-voice-recording.cancel .voice-rec-wave span { background: #ff4d4f; }
#chat-voice-recording.cancel .voice-rec-tip { color: #ff4d4f; }

/* 语音预览面板 */
.voice-preview-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.voice-preview-play {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #FFB7C5;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
.voice-preview-play:active { background: #ff9db0; }
.voice-preview-dur { font-size: 14px; color: #666; }

/* 语音情绪分析：总开关关闭时子项置灰禁用 */
#voice-analysis-sub.va-disabled { opacity: 0.45; pointer-events: none; }

.chat-message-nickname {
    font-size: 12px;
    color: #999;
    margin-bottom: 2px;
    margin-left: 2px;
}

/* 梦境功能样式 */
.dream-dialog {
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: rgba(242, 240, 245, 0.85); /* 接近白的浅紫灰色 */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.15);
}

.dream-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px; /* 模仿日记本边距 */
    background: rgba(248, 247, 250, 0.6); /* 极浅的紫灰白色 */
}

.dream-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 0;
    color: #7B6B8D; /* 深紫灰 */
    gap: 15px;
    font-family: "KaiTi", "STKaiti", "楷体", serif;
}

.dream-spinner {
    width: 42px;
    height: 42px;
    border: 3px solid #D4C4E4; /* 淡紫粉色 */
    border-top-color: #9D8DAD; /* 浅紫灰高亮边 */
    border-radius: 50%;
    animation: dreamSpin 1s linear infinite;
}

.dream-card {
    background: rgba(252, 251, 254, 0.7); /* 接近白色的浅紫灰 */
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: inset 0 1px 2px rgba(123, 107, 141, 0.1);
    border: 1px solid rgba(212, 196, 228, 0.4); /* 淡紫粉边框 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dream-time-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(157, 141, 173, 0.15); /* 浅紫灰半透明 */
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(157, 141, 173, 0.2);
    font-size: 12px;
    color: #9D8DAD; /* 浅紫灰 */
    margin-bottom: 14px;
    font-weight: 500;
    font-family: "KaiTi", "STKaiti", "楷体", cursive;
    letter-spacing: 0.3px;
}

.dream-time-badge svg {
    margin-right: 5px;
    width: 14px;
    height: 14px;
    stroke: #B8A8C8; /* SVG图标颜色 */
}

.dream-text {
    /* 日记横线纹理 - 核心样式 */
    background-image: repeating-linear-gradient(
        transparent,
        transparent 26px,         /* 文字区域高度 */
        #D4C4E4 26px,            /* 线的起始位置 */
        #D4C4E4 27px             /* 线的结束位置(1px细线) */
    );
    background-position: 0 3px;  /* 向下偏移3px让文字居中 */
    
    /* 字体样式 */
    font-size: 15px;
    line-height: 27px;           /* 必须与横线间距一致 */
    color: #6B5B7B;              /* 深灰粉色 */
    padding: 3px 4px 0 4px;      /* 顶部3px偏移 */
    
    /* 模仿手写体 */
    font-family: "KaiTi", "STKaiti", "楷体", serif;
    letter-spacing: 0.5px;
    
    /* 文本渲染优化 */
    white-space: pre-wrap;
    text-align: justify;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.dream-empty {
    text-align: center;
    padding: 50px 20px;
    color: #9D8DAD; /* 浅紫灰 */
    font-size: 14px;
    font-family: "KaiTi", "STKaiti", "楷体", serif;
    letter-spacing: 1px;
}

/* 梦境弹窗标题特殊样式 */
#dream-modal .modal-header {
    background: rgba(250, 249, 252, 0.5); /* 浅紫灰白色 */
    border-bottom: 1.5px solid rgba(212, 196, 228, 0.5); /* 淡紫粉分隔线 */
    padding: 18px 20px;
}

#dream-modal .modal-header h3 {
    color: #7B6B8D; /* 深紫灰 */
    font-weight: 600;
    font-family: "KaiTi", "STKaiti", "楷体", serif;
    letter-spacing: 1px;
}

#dream-modal .modal-close {
    color: #9D8DAD; /* 浅紫灰 */
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    transition: all 0.3s ease;
}

#dream-modal .modal-close:hover {
    color: #7B6B8D; /* 深紫灰 */
    background: rgba(255, 255, 255, 0.7);
}

/* 无梦卡片特殊样式 */
.dream-card.dream-no-dream {
    background: rgba(245, 243, 248, 0.8);
    border: 1px solid rgba(200, 190, 210, 0.3);
}

.dream-no-dream-text {
    font-style: italic;
    color: #7B6B8D;
    line-height: 27px;
    /* 虚线背景，与有梦的实线区分 */
    background-image: repeating-linear-gradient(
        transparent,
        transparent 26px,
        #D4C4E4 26px,
        #D4C4E4 26.5px,
        transparent 26.5px,
        transparent 27px
    ) !important;
    background-position: 0 3px;
    padding: 3px 4px 0 4px;
}

.no-dream-icon {
    display: inline-block;
    font-size: 24px;
    margin-right: 8px;
    flex-shrink: 0;
    margin-top: 2px;
}

.no-dream-reason {
    flex: 1;
    font-family: "KaiTi", "STKaiti", "楷体", serif;
}

/* 夜间模式无梦卡片 */
.phone-frame.night-mode .dream-card.dream-no-dream {
    background: rgba(65, 55, 80, 0.6);
    border-color: rgba(123, 107, 141, 0.2);
}

.phone-frame.night-mode .dream-no-dream-text {
    color: #B8A8C8;
}

/* 梦境消息条样式 */
.chat-message.dream-report .message-bubble {
    background: #fff !important;
    border: 1px solid #e0e0e0;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    min-width: 200px;
}

.dream-report-card {
    display: flex;
    flex-direction: column;
}

.dream-report-header {
    padding: 10px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #666;
}

.dream-report-content {
    padding: 12px;
    font-size: 14px;
    color: #333;
}

.dream-report-footer {
    padding: 8px 12px;
    border-top: 1px solid #eee;
    font-size: 12px;
    color: #999;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 入群邀请卡片样式（白底黑字简约风,user 视角右侧,左侧群头像） */
.chat-message.group-invite-card .chat-message-content {
    display: block !important;
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    color: #333 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
.chat-message.group-invite-card .chat-message-content::before,
.chat-message.group-invite-card .chat-message-content::after {
    display: none !important;
}
.chat-message.group-invite-card .group-invite-card-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.chat-message.group-invite-card .group-invite-card-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.chat-message.group-invite-card .group-invite-card-avatar > * {
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
}
.chat-message.group-invite-card .group-invite-card-body {
    flex: 1;
    min-width: 0;
}
.chat-message.group-invite-card .group-invite-card-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
}
.chat-message.group-invite-card .group-invite-card-row {
    display: block;
    font-size: 12px;
    color: #444;
    line-height: 1.5;
    word-break: break-all;
}
.chat-message.group-invite-card .group-invite-card-row .group-invite-card-label {
    color: #888;
    margin-right: 4px;
}

/* 朋友圈转发卡片样式 */
/* 朋友圈转发卡片样式（使用朋友圈原样式） */
.moment-share-card {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(248, 248, 248, 0.10);
    backdrop-filter: blur(8px);
    border: 1px dashed #d0d0d0;
    border-radius: 8px;
    max-width: 100%;
}

/* 转发卡片中的头像（复用朋友圈头像样式） */
.moment-share-card .moment-avatar {
    width: 42px;
    height: 42px;
    border-radius: 4px;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.moment-share-card .moment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.moment-share-card .default-moment-avatar {
    font-size: 18px;
    font-weight: 500;
    color: #999;
}

/* 转发卡片内容区（复用朋友圈内容样式） */
.moment-share-card .moment-content {
    flex: 1;
    min-width: 0;
}

.moment-share-card .moment-username {
    font-size: 15px;
    color: #a8909e;
    font-weight: 500;
    margin-bottom: 4px;
}

.moment-share-card .moment-text {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    margin-bottom: 8px;
    word-wrap: break-word;
}

/* 转发卡片中的图片网格（复用朋友圈图片样式） */
.moment-share-card .moment-images {
    display: grid;
    gap: 6px;
    margin-bottom: 8px;
}

.moment-share-card .moment-images.single {
    grid-template-columns: 1fr;
    max-width: 200px;
}

.moment-share-card .moment-images.double {
    grid-template-columns: repeat(2, 1fr);
    max-width: 240px;
}

.moment-share-card .moment-images.multi {
    grid-template-columns: repeat(3, 1fr);
    max-width: 270px;
}

/* 转发卡片底部时间 */
.moment-share-card .moment-footer {
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.moment-share-card .moment-time {
    font-size: 12px;
    color: #999;
}

/* 夜间模式适配 */
.phone-frame.night-mode .moment-share-card {
    background: rgba(42, 42, 42, 0.10);
    border-color: #555;
}

.phone-frame.night-mode .moment-share-card .moment-avatar {
    background: #1f1f1f;
    border-color: #3a3a3a;
}

.phone-frame.night-mode .moment-share-card .moment-username {
    color: #a8909e;
}

.phone-frame.night-mode .moment-share-card .moment-text {
    color: #d0d0d0;
}

.phone-frame.night-mode .moment-share-card .moment-time {
    color: #888;
}

/* ========== 红包/转账交易弹窗样式 ========== */
.transaction-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.transaction-modal {
    background: white;
    border-radius: 16px;
    padding: 32px 24px 24px;
    width: 85%;
    max-width: 320px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    border: 2px solid #FFD4E5;
    animation: slideUp 0.3s ease;
}

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

.transaction-card {
    text-align: center;
    padding: 20px 0;
}

.transaction-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #FFB7C5 0%, #FF9FB8 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(255, 183, 197, 0.4);
}

.transaction-icon svg {
    width: 36px;
    height: 36px;
}

.transaction-amount {
    font-size: 32px;
    font-weight: 600;
    color: #FFB7C5;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.transaction-message {
    font-size: 15px;
    color: #FF9FB8;
    margin-bottom: 6px;
    font-weight: 500;
}

.transaction-sender {
    font-size: 13px;
    color: #FFB7C5;
    opacity: 0.8;
}

.transaction-buttons {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.transaction-btn {
    flex: 1;
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.transaction-reject-btn {
    background: white;
    color: #FFB7C5;
    border: 2px solid #FFD4E5;
}

.transaction-reject-btn:hover {
    background: #FFF5F9;
    border-color: #FFB7C5;
}

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

.transaction-accept-btn {
    background: linear-gradient(135deg, #FFB7C5 0%, #FF9FB8 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(255, 183, 197, 0.3);
}

.transaction-accept-btn:hover {
    box-shadow: 0 6px 16px rgba(255, 183, 197, 0.4);
}

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

/* 夜间模式适配 */
.phone-frame.night-mode .transaction-modal {
    background: #2a2a2a;
    border-color: #4a4a4a;
}

.phone-frame.night-mode .transaction-amount,
.phone-frame.night-mode .transaction-message,
.phone-frame.night-mode .transaction-sender {
    filter: brightness(0.9);
}

.phone-frame.night-mode .transaction-reject-btn {
    background: #1a1a1a;
    border-color: #4a4a4a;
}

.phone-frame.night-mode .transaction-reject-btn:hover {
    background: #333;
}

/* 梦境加载动画 */
@keyframes dreamSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== 地址地图样式 ===== */
.map-modal-content {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}

.address-form {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.address-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.address-form label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.address-form input {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}

.address-form input:focus {
    outline: none;
    border-color: #07c160;
}

.address-form .btn-primary {
    margin-top: auto;
    padding: 14px;
    background: #07c160;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.address-form .btn-primary:active {
    background: #06ad56;
}

.map-canvas-container {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 1;
}

#map-canvas {
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: grab;
}

#map-canvas:active {
    cursor: grabbing;
}

.btn-edit-address {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    z-index: 10;
}

.btn-edit-address:active {
    background: rgba(255, 255, 255, 1);
}

.map-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 20;
}

.map-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #07c160;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

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

.map-loading p {
    color: #666;
    font-size: 14px;
    margin: 0;
}

/* Canvas RoundRect polyfill support */
canvas {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}
/* ==================== 无尽夏 - 提醒页面样式 ==================== */

/* 消息通知列表 */
.es-notifications-list,
.es-privatemsg-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 消息通知项 */
.es-notification-item {
    background: #ffffff;
    border: 1px solid rgba(180, 165, 216, 0.3);
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
}

.es-notification-item:hover {
    border-color: rgba(180, 165, 216, 0.6);
    background: rgba(180, 165, 216, 0.05);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(180, 165, 216, 0.15);
}

.es-notification-item.unread {
    background: rgba(180, 165, 216, 0.08);
    border-color: rgba(180, 165, 216, 0.5);
}

.es-notification-icon {
    font-size: 24px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(180, 165, 216, 0.1);
    border-radius: 8px;
}

.es-notification-content {
    flex: 1;
    min-width: 0;
}

.es-notification-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    line-height: 1.4;
}

.es-notification-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 6px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

.es-notification-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 10px;
    height: 10px;
    color: #b4a5d8;
    font-size: 18px;
    line-height: 1;
}

/* 私信项 */
.es-privatemsg-item {
    background: #ffffff;
    border: 1px solid rgba(180, 165, 216, 0.3);
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
}

.es-privatemsg-item:hover {
    border-color: rgba(180, 165, 216, 0.6);
    background: rgba(180, 165, 216, 0.05);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(180, 165, 216, 0.15);
}

.es-privatemsg-item.unread {
    background: rgba(180, 165, 216, 0.08);
    border-color: rgba(180, 165, 216, 0.5);
}

.es-privatemsg-avatar {
    font-size: 32px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(180, 165, 216, 0.1);
    border-radius: 50%;
}

.es-privatemsg-content {
    flex: 1;
    min-width: 0;
}

.es-privatemsg-name {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    line-height: 1.4;
}

.es-privatemsg-preview {
    font-size: 14px;
    color: #666;
    margin-bottom: 6px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.es-privatemsg-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    min-width: 20px;
    height: 20px;
    background: #b4a5d8;
    color: white;
    font-size: 12px;
    font-weight: 600;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

/* ========== 线下见面卡片样式 ========== */

/* 卡片容器 */
.offline-meeting-card {
    position: fixed;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    max-width: 340px;
    
    display: flex;
    flex-direction: column;
    
    background: rgba(255, 228, 230, 0.5);
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    border: 1px solid rgba(255, 192, 203, 0.3);
    border-radius: 18px;
    
    padding: 14px;
    box-shadow: 0 4px 16px rgba(255, 182, 193, 0.25);
    z-index: 2000;
    
    animation: slideDownBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideDownBounce {
    0% {
        transform: translateX(-50%) translateY(-100%) scale(0.9);
        opacity: 0;
    }
    60% {
        transform: translateX(-50%) translateY(5px) scale(1.02);
    }
    100% {
        transform: translateX(-50%) translateY(0) scale(1);
        opacity: 1;
    }
}

/* 上半部分：头像连接 */
.offline-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 192, 203, 0.2);
}

.offline-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.offline-avatar {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    border: 2px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

.offline-avatar-name {
    font-size: 11px;
    color: #666;
    font-weight: 600;
}

/* 中间虚线连接 */
.offline-connection-line {
    flex: 1;
    position: relative;
    height: 24px;
    display: flex;
    align-items: center;
}

.offline-dashed-line {
    width: 100%;
    border-top: 2px dashed #999;
    opacity: 0.6;
}

.offline-distance-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    color: #666;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 下半部分内容 */
.offline-card-body {
    margin-top: 10px;
}

.offline-location-info {
    font-size: 13px;
    color: #333;
    margin-bottom: 6px;
    font-weight: 500;
    text-align: center;
}

.offline-time-info {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
    text-align: center;
}

.offline-status {
    font-size: 12px;
    color: #666;
}

/* 线下卡片操作区 */
.offline-card-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 192, 203, 0.2);
}

.offline-action-btn {
    flex: 1;
    padding: 10px 0;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.offline-action-btn.start {
    background: linear-gradient(135deg, #90EE90 0%, #98FB98 100%);
    color: #2E7D32;
}

.offline-action-btn.start:active {
    transform: scale(0.98);
    background: linear-gradient(135deg, #7ED87E 0%, #8AEA8A 100%);
}

.offline-action-btn.end {
    background: rgba(255, 240, 245, 0.8);
    color: #ffffff;
    font-weight: 600;
}

.offline-action-btn.end:active {
    transform: scale(0.98);
    background: rgba(255, 230, 240, 0.9);
}

.offline-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 折叠状态 */
.offline-meeting-card.collapsed {
    top: 84px;
    width: auto;
    max-width: none;
    left: 0;
    right: 0;
    transform: none;
    padding: 8px 16px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid rgba(255, 192, 203, 0.3);
    margin-top: 0;
    cursor: pointer;
    
    background: rgba(255, 228, 230, 0.5);
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    animation: none;
}

.offline-meeting-card.collapsed .offline-card-header,
.offline-meeting-card.collapsed .offline-card-body,
.offline-meeting-card.collapsed .offline-card-actions {
    display: none;
}

/* 折叠状态的简化显示 */
.offline-meeting-card.collapsed::after {
    content: attr(data-location);
    font-size: 13px;
    color: #333;
    font-weight: 600;
}

/* 群聊线下卡片样式 */
.offline-meeting-card.group-offline .offline-card-header {
    display: none;
}

.offline-meeting-card.group-offline .group-offline-card-content {
    display: block !important;
    padding: 10px 12px 4px;
    border-bottom: 1px solid rgba(255, 192, 203, 0.2);
}

.group-offline-avatars {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.group-offline-avatar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 40px;
}

.group-offline-avatar-item img {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    background: #ccc;
}

.group-offline-avatar-item .group-offline-avatar-name {
    font-size: 9px;
    color: #666;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40px;
}

/* 缺席成员灰度样式 */
.group-offline-avatar-item.absent {
    opacity: 0.4;
}

/* 群聊折叠时隐藏成员区 */
.offline-meeting-card.collapsed .group-offline-card-content {
    display: none !important;
}

/* 地点输入区 */
.offline-location-input-area {
    margin-top: 8px;
}

.offline-location-input {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid rgba(144, 238, 144, 0.5);
    border-radius: 8px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.8);
    outline: none;
    box-sizing: border-box;
}

.offline-location-input:focus {
    border-color: #90EE90;
    background: #fff;
}

.offline-location-input::placeholder {
    color: #999;
}

/* 客串NPC消息样式（线下第三人，居中正体，区别于旁白灰斜体） */
.chat-message.npc-message {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 !important;
    padding: 0 !important;
}
.chat-message.npc-message .npc-content {
    background: none !important;
    box-shadow: none !important;
    color: var(--npc-narr-color, #1a1a1a) !important;
    font-style: normal !important;
    font-size: 13px;
    line-height: 1.5 !important;
    text-align: center !important;
    max-width: 95% !important;
    padding: 2px 12px !important;
}
.chat-message.npc-message .npc-content::before { content: '【'; opacity: 0.55; }
.chat-message.npc-message .npc-content::after  { content: '】'; opacity: 0.55; }
.chat-message.npc-message .npc-name { font-weight: 600; }
.chat-message.npc-message .npc-name::after { content: '：'; font-weight: 400; opacity: 0.7; }
.phone-frame.night-mode .chat-message.npc-message .npc-content { color: var(--npc-narr-color, #d4b483) !important; }

/* 旁白消息样式 */
.chat-message.narrator-message {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 !important;
    padding: 0 !important;
}

.chat-message.narrator-message .chat-message-avatar {
    display: none !important;
}

.chat-message.narrator-message .narrator-content {
    background: none !important;
    box-shadow: none !important;
    color: #999;
    font-style: italic !important;
    font-size: 12px;
    line-height: 1.5 !important;
    text-align: center !important;
    max-width: 95% !important;
    padding: 2px 12px !important;
}

/* 连续AI旁白间距收紧 - 消除割裂感 */
.chat-message.narrator-message:not(.user-narrator) + .chat-message.narrator-message:not(.user-narrator) {
    margin-top: 0px !important;
}

/* 群聊静默状态栏（持久化） */
.chat-message.group-silent-message {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 4px 0 !important;
    padding: 0 !important;
}

.chat-message.group-silent-message .group-silent-content {
    background: none !important;
    box-shadow: none !important;
    color: #b3b3b3;
    font-size: 12px;
    line-height: 1.6;
    text-align: center !important;
    max-width: 95% !important;
    padding: 4px 12px !important;
}

/* ========== 主动消息样式（AI生活轨迹） ========== */
.chat-message.proactive-message {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 !important;
    padding: 0 !important;
}

.chat-message.proactive-message .proactive-content {
    background: none !important;
    box-shadow: none !important;
    color: #333;
    font-style: normal !important;
    font-size: 13px;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 88% !important;
    padding: 6px 16px !important;
}

/* 活动状态消息（聊天流中的系统通知） */
.chat-message.activity-status-message {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 6px 0 !important;
    padding: 0 !important;
}
.activity-status-content {
    font-size: 11px;
    color: #aaa;
    text-align: center;
    padding: 2px 12px;
    line-height: 1.4;
}
.phone-frame.night-mode .activity-status-content {
    color: #666;
}

/* char 看屏陪伴卡片 + 弹窗（黑白灰、白底黑细线、无 emoji） */
.chat-message.char-agent-card { display: flex !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; margin: 8px 0 !important; }
.char-agent-card-inner { background: #fff; border: 0.5px solid #000; border-radius: 8px; padding: 8px 16px; font-size: 12px; color: #333; text-align: center; cursor: pointer; max-width: 80%; }
.char-agent-card-inner:active { opacity: .85; }
.char-agent-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 100000; }
.char-agent-modal { background: #fff; border: 0.5px solid #000; border-radius: 10px; width: 84%; max-width: 360px; max-height: 70vh; display: flex; flex-direction: column; }
.char-agent-modal-title { font-size: 14px; color: #000; text-align: center; padding: 12px; border-bottom: 0.5px solid #000; }
.char-agent-modal-body { overflow-y: auto; padding: 12px; }
.char-agent-modal-row { font-size: 13px; line-height: 1.5; margin-bottom: 10px; }
.char-agent-modal-who { color: #888; }
.char-agent-modal-text { color: #222; }

.chat-message.media-control-notice {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;   /* 覆盖基类 .chat-message 的 max-width:80%，否则被限宽靠左、内容只在左侧80%内居中=偏左 */
    margin: 6px 0 !important;
}
.media-control-notice-content {
    font-size: 11px;
    color: #aaa;
    text-align: center;
    padding: 2px 12px;
}
.phone-frame.night-mode .media-control-notice-content { color: #666; }

/* ========== 梦境内联消息样式（聊天流内浅紫卡片，复用梦境弹窗色调） ========== */
.chat-message.dream-message {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 !important;
    padding: 0 16px !important;
}

.dream-inline-card {
    background: rgba(252, 251, 254, 0.7);
    border: 1px solid rgba(212, 196, 228, 0.4);
    border-radius: 16px;
    padding: 12px 18px;
    max-width: 85%;
    text-align: center;
    box-shadow: inset 0 1px 2px rgba(123, 107, 141, 0.1);
}

.dream-inline-time {
    font-size: 11px;
    color: #9D8DAD;
    margin-bottom: 8px;
    font-family: "KaiTi", "STKaiti", "楷体", serif;
    letter-spacing: 0.3px;
}

.dream-inline-text {
    color: #6B5B7B;
    font-size: 15px;
    line-height: 27px;
    font-family: "KaiTi", "STKaiti", "楷体", serif;
    letter-spacing: 0.5px;
    white-space: pre-wrap;
    text-align: justify;
    /* 日记横线纹理（复用 .dream-text 的下划线效果） */
    background-image: repeating-linear-gradient(
        transparent,
        transparent 26px,
        #D4C4E4 26px,
        #D4C4E4 27px
    );
    background-position: 0 3px;
    padding: 3px 4px 0 4px;
}

/* 夜间模式 */
.phone-frame.night-mode .dream-inline-card {
    background: rgba(70, 60, 90, 0.6);
    border-color: rgba(123, 107, 141, 0.3);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.phone-frame.night-mode .dream-inline-time {
    color: #B8A8C8;
}

.phone-frame.night-mode .dream-inline-text {
    color: #C4B4D4;
    background-image: repeating-linear-gradient(
        transparent,
        transparent 26px,
        #6B5B7B 26px,
        #6B5B7B 27px
    );
}

/* ========== 手机聊天会话卡片样式 ========== */
.chat-message.phone-session-message {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 !important;
    padding: 0 16px !important;
}

.phone-session-card {
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    width: 100%;
    max-width: 280px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.phone-session-card.active {
    border-color: #999;
    background: linear-gradient(135deg, #f5f5f5 0%, #f8f8f8 100%);
}

.phone-session-header {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
}

.phone-session-header:active {
    background: rgba(0,0,0,0.03);
}

.phone-session-icon {
    font-size: 16px;
    margin-right: 6px;
}

.phone-session-title {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

.phone-session-toggle {
    font-size: 11px;
    color: #666;
    background: rgba(0, 0, 0, 0.08);
    padding: 2px 8px;
    border-radius: 10px;
}

.phone-session-card:not(.active) .phone-session-toggle {
    color: #999;
    background: rgba(0,0,0,0.05);
}

.phone-session-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-top: 1px solid transparent;
}

.phone-session-card.active .phone-session-content,
.phone-session-card.expanded .phone-session-content {
    max-height: 300px;
    overflow-y: auto;
    border-top-color: #e8e8e8;
    padding: 8px 12px;
}

.phone-session-msg {
    font-size: 12px;
    line-height: 1.6;
    padding: 4px 0;
    color: #333;
}

.phone-session-msg.user .phone-msg-who {
    color: #f5a0b8;
}

.phone-session-msg.ai .phone-msg-who {
    color: #576b95;
}

.phone-msg-who {
    font-weight: 500;
    margin-right: 4px;
}

.phone-msg-text {
    color: #555;
}

.phone-session-empty {
    font-size: 12px;
    color: #999;
    text-align: center;
    padding: 12px 0;
}

/* ========== 主动消息设置样式 ========== */
.proactive-interval-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.proactive-interval-picker span {
    color: #666;
    font-size: 13px;
}

.proactive-add-period-btn {
    padding: 4px 12px;
    font-size: 12px;
    color: #07c160;
    background: none;
    border: 1px solid #07c160;
    border-radius: 4px;
    cursor: pointer;
}

.proactive-add-period-btn:active {
    background: rgba(7, 193, 96, 0.1);
}

.proactive-periods-list {
    margin-top: 8px;
}

.proactive-no-periods {
    color: #999;
    font-size: 12px;
    text-align: center;
    padding: 8px;
}

.proactive-period-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

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

.proactive-period-item input[type="time"] {
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    width: 100px;
}

.proactive-period-item span {
    color: #666;
    font-size: 13px;
}

.proactive-period-delete {
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: auto;
    font-size: 16px;
    color: #ee0a24;
    background: none;
    border: none;
    cursor: pointer;
}

.proactive-period-delete:active {
    opacity: 0.7;
}

/* 线下模式聊天背景 */
.chat-messages.offline-mode {
    background: #fff9fa;
}

/* 线下模式时的按钮样式 */
.chat-func-btn.in-offline {
    color: #e74c3c !important;
}

/* ========== 线下三悬浮键统一透明度变量（全局常态化）========== */
:root {
    --float-btn-opacity: 1;
}

/* ========== 用户心声悬浮按钮样式 ========== */
.heart-voice-float-btn {
    position: fixed;
    left: 20px;
    bottom: 140px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 245, 247, 0.9);
    border: 1px solid #fcd5dd;
    box-shadow: 0 1px 8px rgba(255, 107, 138, 0.12);
    color: #f5a0b5;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1500;
    transition: all 0.3s ease;
    opacity: var(--float-btn-opacity, 1);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.heart-voice-float-btn:active {
    transform: scale(0.9);
    background: rgba(255, 230, 235, 0.95);
}

.heart-voice-float-btn.has-voice {
    background: rgba(255, 230, 238, 0.95);
    border-color: #f5a0b5;
    box-shadow: 0 1px 10px rgba(255, 107, 138, 0.2);
}

.heart-voice-float-btn.has-voice svg {
    fill: #f06b8a;
    stroke: #f06b8a;
}

/* ========== @成员选择条样式 ========== */
.mention-bar { background: #fff; border-bottom: 1px solid #e5e5e5; padding: 4px 0; max-height: 180px; overflow-y: auto; -webkit-overflow-scrolling: touch; animation: heartVoiceSlideIn 0.25s ease-out; }
.mention-bar-list { display: flex; flex-direction: column; }
.mention-bar-item { padding: 9px 16px; font-size: 14px; color: #1a1a1a; background: #fff; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #f0f0f0; transition: background .12s; }
.mention-bar-item:last-child { border-bottom: none; }
.mention-bar-item:active { background: #f2f2f2; }

/* ========== 用户心声输入条样式 ========== */
.heart-voice-bar {
    background: rgba(255, 245, 248, 0.85);
    border-bottom: 1px solid #fce4ec;
    padding: 7px 12px;
    animation: heartVoiceSlideIn 0.25s ease-out;
}

.heart-voice-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.heart-voice-input {
    flex: 1;
    border: 1px solid #f5d5dd;
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.85);
    color: #c06080;
    outline: none;
    transition: border-color 0.2s;
}

.heart-voice-input::placeholder {
    color: #e0b0bf;
}

.heart-voice-input:focus {
    border-color: #f5a0b5;
}

.heart-voice-confirm-btn {
    flex-shrink: 0;
    background: linear-gradient(135deg, #f5a0b5, #f08aa0);
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.heart-voice-confirm-btn:active {
    opacity: 0.8;
}

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

/* 用户心声小爱心指示器 */
.heart-voice-indicator {
    position: absolute;
    top: -6px;
    left: -6px;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    color: #f5a0b5;
    z-index: 1;
}

/* 用户心声弹窗 */
.heart-voice-dialog {
    max-width: 300px;
}

.heart-voice-text {
    color: #c06080;
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* ========== 用户旁白悬浮按钮样式 ========== */
.narrator-float-btn {
    position: fixed;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 1.5px solid #ddd;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1500;
    transition: all 0.2s ease;
    opacity: var(--float-btn-opacity, 1);
    touch-action: none;
    user-select: none;
}

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

/* 悬浮按钮激活状态（旁白模式） */
.narrator-float-btn.active {
    border: 2px solid #FFB6C1;
    box-shadow: 0 0 0 3px rgba(255, 182, 193, 0.35),
                0 2px 12px rgba(0, 0, 0, 0.12);
    color: #FF69B4;
    background: rgba(255, 248, 250, 0.98);
}

/* 悬浮按钮拖拽中 */
.narrator-float-btn.dragging {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
}

/* ========== 客串悬浮按钮样式 ========== */
.npc-float-btn {
    position: fixed;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 1.5px solid #ddd;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    color: #8a6d3b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1500;
    transition: all 0.2s ease;
    opacity: var(--float-btn-opacity, 1);
    touch-action: none;
    user-select: none;
}
.npc-float-btn:active { transform: scale(0.95); }
.npc-float-btn.active {
    border: 2px solid color-mix(in srgb, var(--npc-narr-color, #1a1a1a) 65%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--npc-narr-color, #1a1a1a) 35%, transparent), 0 2px 12px rgba(0, 0, 0, 0.12);
    color: color-mix(in srgb, var(--npc-narr-color, #1a1a1a) 65%, transparent);
    background: rgba(252, 248, 240, 0.98);
}
.npc-float-btn.dragging { transform: scale(1.1); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); opacity: 0.9; }

/* 客串选人小面板 */
.npc-speaker-popover {
    position: fixed;
    z-index: 1600;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
    padding: 6px;
    min-width: 140px;
    max-width: 220px;
}
.npc-speaker-item {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}
.npc-speaker-item:active { background: #f5f5f5; }
.npc-speaker-item.is-active { color: color-mix(in srgb, var(--npc-narr-color, #1a1a1a) 65%, transparent); font-weight: 600; }
.npc-speaker-item.is-self { color: #888; border-top: 1px solid #f0f0f0; margin-top: 4px; }

/* 客串在场列表（入场面板内） */
.npc-onstage-list { display: flex; flex-direction: column; gap: 6px; }
.npc-onstage-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; background: #f7f7f7; border-radius: 8px; font-size: 13px; color: #555;
}
.npc-onstage-item .npc-onstage-remove { color: #e57373; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; }

/* ========== 悬浮手机按钮样式 ========== */
.floating-phone-btn {
    position: fixed;
    right: 20px;
    bottom: 200px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 1.5px solid #ddd;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1500;
    transition: all 0.2s ease;
    opacity: var(--float-btn-opacity, 1);
    touch-action: none;
    user-select: none;
}

.floating-phone-btn svg {
    width: 20px;
    height: 20px;
    stroke: #FF69B4;
}

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

/* 对方手机模式（蓝色） */
.floating-phone-btn.partner-mode svg {
    stroke: #667eea;
}

/* 拖拽中 */
.floating-phone-btn.dragging {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    opacity: 0.9;
}

/* 红点提醒 */
.floating-phone-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    background: #ff3b30;
    border-radius: 50%;
    display: none;
}

.floating-phone-btn.has-message .floating-phone-dot {
    display: block;
    animation: pulse 1.5s infinite;
}

/* ========== 悬浮手机面板 ========== */
.floating-phone-panel {
    position: fixed;
    bottom: 60px;
    right: 15px;
    width: 260px;
    height: 450px;
    display: none;
    z-index: 1501;
}

.floating-phone-panel.show {
    display: block;
    animation: slideUp 0.3s ease;
}

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

/* 迷你手机外框 - 与大手机样式一致 */
.mini-phone-frame {
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: 36px;
    box-shadow: 
        0 0 0 1px #2d2d2d,
        0 5px 15px rgba(0, 0, 0, 0.2),
        0 10px 25px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* 黑边框遮罩层 - 确保在内容之上 */
.mini-phone-frame::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 36px;
    border: 4px solid #000;
    pointer-events: none;
    z-index: 999;
}

.mini-phone-notch {
    display: none;
}

.mini-phone-content {
    flex: 1;
    background: #f5f5f5;
    border-radius: 32px;
    margin: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.mini-phone-home-bar {
    width: 80px;
    height: 4px;
    background: #333;
    border-radius: 2px;
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}

/* 迷你微信头部 */
.mini-wechat-header {
    height: 40px;
    background: #ededed;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid #d9d9d9;
    flex-shrink: 0;
    border-radius: 0;
}

.mini-back-btn {
    position: absolute;
    left: 12px;
    font-size: 20px;
    color: #333;
    cursor: pointer;
    line-height: 1;
}

.mini-back-btn:active {
    opacity: 0.6;
}

.mini-title {
    font-size: 15px;
    font-weight: 500;
    color: #333;
}

/* 迷你聊天列表 */
.mini-chat-list {
    flex: 1;
    overflow-y: auto;
    background: #fff;
}

.mini-chat-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 0.5px solid #f0f0f0;
    cursor: pointer;
}

.mini-chat-item:active {
    background: #f5f5f5;
}

.mini-chat-avatar {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    margin-right: 10px;
    object-fit: cover;
    background: #ddd;
    flex-shrink: 0;
}

.mini-chat-info {
    flex: 1;
    overflow: hidden;
}

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

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

/* 空状态 */
.mini-chat-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    font-size: 13px;
}

/* 加载中状态 */
.mini-phone-loading {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    color: #999;
}

.mini-phone-loading.show {
    display: flex;
}

.mini-phone-loading .loading-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid #e5e5e5;
    border-top-color: #07c160;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.mini-phone-loading p {
    margin-top: 10px;
    font-size: 13px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========== 迷你手机聊天详情页 ========== */
.mini-chat-detail {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(135deg, rgba(250, 252, 255, 0.98) 0%, rgba(240, 245, 250, 0.95) 50%, rgba(250, 252, 255, 0.98) 100%);
    flex-direction: column;
    border-radius: 0;
    overflow: hidden;
    z-index: 5;
}

.mini-chat-detail.show {
    display: flex;
}

/* 详情页头部 */
.mini-detail-header {
    height: 40px;
    background: linear-gradient(135deg, 
        rgba(240, 245, 250, 0.9) 0%,
        rgba(230, 240, 245, 0.85) 50%,
        rgba(235, 242, 248, 0.88) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-bottom: 1px solid rgba(200, 210, 220, 0.3);
    flex-shrink: 0;
}

.mini-detail-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #333;
    cursor: pointer;
}

.mini-detail-back:active {
    opacity: 0.6;
}

.mini-detail-name {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-right: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 消息列表 */
.mini-detail-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px 8px;
    padding-bottom: 10px;
}

/* 迷你消息气泡 */
.mini-chat-message {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 10px;
}

.mini-chat-message.user {
    flex-direction: row-reverse;
}

.mini-msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    flex-shrink: 0;
    background: #ddd;
    object-fit: cover;
}

/* 气泡样式 - 简化阴影 */
.mini-msg-content {
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.4;
    max-width: 70%;
    word-wrap: break-word;
}

.mini-chat-message.user .mini-msg-content {
    background: linear-gradient(135deg, 
        rgba(240, 230, 235, 0.9) 0%, 
        rgba(235, 225, 230, 0.85) 100%);
    color: #222;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.mini-chat-message.ai .mini-msg-content {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(252, 252, 252, 0.85) 100%);
    color: #222;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.mini-msg-content img {
    max-width: 100%;
    border-radius: 4px;
}

/* 群聊发送者昵称样式 */
.mini-msg-bubble {
    display: flex;
    flex-direction: column;
}

.mini-msg-sender {
    font-size: 11px;
    color: #888;
    margin-bottom: 2px;
    padding-left: 4px;
}

/* 小手机加载动画样式 */
.mini-loading-content {
    min-height: 16px;
    display: flex;
    align-items: center;
}

.mini-loading-content .chat-message-loading {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.mini-loading-content .chat-loading-dot {
    width: 5px;
    height: 5px;
    background: #999;
    border-radius: 50%;
    animation: loadingDot 1.4s infinite;
}

/* ========== AI手机模式样式 ========== */

/* 模式切换按钮 */
.mini-mode-switch {
    position: absolute;
    right: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.mini-mode-switch:hover {
    background: rgba(0, 0, 0, 0.05);
}

.mini-mode-switch:active {
    transform: scale(0.95);
}

.mini-mode-switch svg {
    color: #666;
}

/* 对方手机模式 - 白底蓝图标 */
.floating-phone-btn.partner-mode {
    background: rgba(255, 255, 255, 0.95);
}

/* 对方手机模式下按钮SVG图标变蓝色 */
.floating-phone-btn.partner-mode svg {
    stroke: #667eea;
}

.floating-phone-panel.partner-mode .mini-wechat-header {
    background: linear-gradient(135deg, #E8F4FD 0%, #D6EBFA 100%);
    border-bottom: 1px solid #C5DEF0;
}

.floating-phone-panel.partner-mode .mini-title {
    color: #2B6CB0;
}

.floating-phone-panel.partner-mode .mini-back-btn {
    color: #2B6CB0;
}

.floating-phone-panel.partner-mode .mini-mode-switch svg {
    color: #2B6CB0;
}

.floating-phone-panel.partner-mode .mini-detail-header {
    background: linear-gradient(135deg, #E8F4FD 0%, #D6EBFA 100%);
    border-bottom: 1px solid #C5DEF0;
}

.floating-phone-panel.partner-mode .mini-detail-header .mini-detail-back svg,
.floating-phone-panel.partner-mode .mini-detail-header .mini-detail-name {
    color: #2B6CB0;
}

/* AI手机详情页顶栏 */
.mini-ai-phone-detail .mini-detail-header.ai-phone-header {
    background: linear-gradient(135deg, #E8F4FD 0%, #D6EBFA 100%);
    border-bottom: 1px solid #C5DEF0;
}

.mini-ai-phone-detail .mini-detail-back svg {
    color: #2B6CB0;
}

.mini-ai-phone-detail .mini-detail-name {
    color: #2B6CB0;
}

/* AI手机头像样式 - 白底灰字 */
.ai-phone-avatar {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: #f5f5f5;
    color: #999;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mini-chat-item.ai-phone-item .mini-chat-avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: #f0f0f0;
    color: #888;
    font-size: 16px;
}

/* AI手机消息中的头像 */
.mini-chat-message .mini-msg-avatar.ai-phone-avatar {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: #f0f0f0;
    color: #888;
    font-size: 12px;
}

/* AI手机详情页 */
.mini-ai-phone-detail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 10;
}

.mini-ai-phone-detail.show {
    transform: translateX(0);
}

.mini-ai-phone-detail .mini-detail-header {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    position: relative;
    flex-shrink: 0;
}

.mini-ai-phone-detail .mini-detail-back {
    cursor: pointer;
    margin-right: 8px;
}

/* AI手机消息列表 */
.mini-ai-phone-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 8px;
    padding-bottom: 30px;
}

/* AI手机消息日期分隔 */
.mini-chat-date {
    text-align: center;
    font-size: 10px;
    color: #999;
    padding: 8px 0;
}

/* 空状态 */
.mini-chat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #999;
    font-size: 12px;
}

.mini-retry-btn {
    margin-top: 12px;
    padding: 6px 16px;
    background: #07c160;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.mini-retry-btn:active {
    opacity: 0.8;
}

/* 输入区域 */
.mini-detail-input {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    padding-bottom: 22px;
    background: 
        linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(200, 210, 220, 0.3);
    flex-shrink: 0;
}

.mini-detail-input input {
    flex: 1;
    min-width: 0;
    height: 28px;
    border: 1px solid rgba(200, 210, 220, 0.3);
    border-radius: 6px;
    padding: 0 8px;
    font-size: 11px;
    background: linear-gradient(135deg, #ffffff 0%, #fafcff 100%);
    outline: none;
    box-shadow: 
        inset 0 1px 2px rgba(0, 0, 0, 0.05),
        0 1px 3px rgba(0, 0, 0, 0.04);
}

.mini-detail-input input:focus {
    border-color: rgba(0, 122, 255, 0.4);
    box-shadow: 
        inset 0 1px 2px rgba(0, 0, 0, 0.05),
        0 0 0 2px rgba(0, 122, 255, 0.1);
}

/* AI回复按钮和发送按钮 */
.mini-ai-reply-btn,
.mini-send-btn {
    width: 26px;
    height: 26px;
    min-width: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
    color: #666;
}

.mini-ai-reply-btn:active,
.mini-send-btn:active {
    background: #f0f0f0;
}

/* ========== 输入框旁白模式样式 ========== */
.chat-input.narrator-mode:focus {
    box-shadow: 0 0 0 2px rgba(255, 182, 193, 0.5) !important;
    border-color: #ddd !important;
}

.chat-input.narrator-mode::placeholder {
    color: #FFB6C1;
}

/* ========== 输入框客串模式样式 ========== */
.chat-input.npc-mode:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--npc-narr-color, #1a1a1a) 50%, transparent) !important;
    border-color: #ddd !important;
}
.chat-input.npc-mode::placeholder { color: color-mix(in srgb, var(--npc-narr-color, #1a1a1a) 50%, transparent); }

/* ========== 用户旁白消息样式 ========== */
.chat-message.narrator-message.user-narrator {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 !important;
    padding: 0 !important;
}

.chat-message.narrator-message.user-narrator .chat-message-avatar {
    display: none !important;
}

.chat-message.narrator-message.user-narrator .user-narrator-content {
    background: none !important;
    box-shadow: none !important;
    color: #333;
    font-style: italic !important;
    font-size: 12px;
    line-height: 1.5 !important;
    text-align: center !important;
    max-width: 95% !important;
    padding: 2px 12px !important;
}

/* ========== 线下模式人称设置单选组 ========== */
.settings-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.settings-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

.settings-radio input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #333;
    cursor: pointer;
    flex-shrink: 0;
}

.settings-radio span {
    flex: 1;
}

/* 线下模式风格输入框 */
.offline-style-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    min-height: 60px;
    max-height: 150px;
    margin-top: 8px;
    font-family: inherit;
    color: #333;
    background: #fafafa;
    box-sizing: border-box;
}

.offline-style-textarea:focus {
    outline: none;
    border-color: #999;
    background: #fff;
}

.offline-style-textarea::placeholder {
    color: #999;
}

.offline-style-reset-btn {
    padding: 4px 12px;
    font-size: 12px;
    color: #666;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}

.offline-style-reset-btn:active {
    background: #eee;
}

/* ========== 消息通知横幅样式 ========== */
.message-notification {
    position: absolute;
    top: 40px;
    left: 8px;
    right: 8px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.45) 0%, 
        rgba(252, 252, 252, 0.38) 100%);
    backdrop-filter: blur(25px) saturate(150%);
    -webkit-backdrop-filter: blur(25px) saturate(150%);
    border-radius: 20px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 0.8),
        inset 1px 0 2px rgba(255, 255, 255, 0.4),
        inset -0.5px -0.5px 1px rgba(0, 0, 0, 0.06);
    z-index: 9999;
    cursor: pointer;
    
    transform: translateY(-150%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.message-notification.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.notification-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #07c160;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-icon svg {
    width: 22px;
    height: 22px;
}

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

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

.notification-app-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

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

.notification-body {
    font-size: 14px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-sender {
    color: #333;
}

.notification-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #f0f0f0;
}

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

/* ========== 提示音设置样式 ========== */
.notification-sound-status {
    font-size: 14px;
    color: #07c160;
    font-weight: 500;
}

.notification-sound-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.sound-action-btn {
    flex: 1;
    padding: 10px 0;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: background 0.2s;
}

.sound-action-btn:active {
    background: #f5f5f5;
}

.sound-reset-btn {
    color: #999;
}

/* ========== Android APK 输入框优化 ========== */
/* 修复 Android WebView 中输入框光标定位和触摸选择问题 */

/* 所有输入框统一优化 */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
textarea {
    /* 允许文本选择和光标定位 */
    -webkit-user-select: text !important;
    user-select: text !important;
    
    /* 允许触摸操作 */
    touch-action: manipulation !important;
    
    /* 防止触摸事件被拦截 */
    pointer-events: auto !important;
    
    /* 确保光标可见 */
    caret-color: #007AFF;
    
    /* 允许文本编辑 */
    -webkit-user-modify: read-write !important;
    
    /* 禁止自动缩放 (Android) */
    font-size: 16px;
}

/* 聊天输入框特别优化 */
.chat-input {
    -webkit-user-select: text !important;
    user-select: text !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
    /* 确保可以在任意位置点击定位光标 */
    cursor: text !important;
}

/* 编辑区域（如世界书编辑器）优化 */
.entry-content textarea,
.modal-input,
.modal-textarea {
    -webkit-user-select: text !important;
    user-select: text !important;
    touch-action: manipulation !important;
    pointer-events: auto !important;
    resize: vertical;
}

/* 确保输入框容器不阻挡触摸事件 */
.chat-input-container,
.chat-main-input {
    pointer-events: auto !important;
}

/* ========== 钱包支付功能样式 ========== */

/* ========== 语音圆点按钮样式 ========== */
.voice-dot {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    border-radius: 50%;
    border: 1.5px solid rgba(180, 180, 180, 0.6);
    background: transparent;
    margin-left: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
    outline: none;
    display: inline-block;
    vertical-align: middle;
}

.voice-dot:active {
    transform: scale(0.9);
}

/* 已生成 - 实心白色 */
.voice-dot.generated {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.9);
}

/* 生成中 - 旋转动画 */
.voice-dot.loading {
    border: 1.5px solid rgba(180, 180, 180, 0.3);
    border-top-color: rgba(255, 255, 255, 0.9);
    animation: voice-dot-spin 0.8s linear infinite;
}

/* 播放中 - 脉冲动画 */
.voice-dot.playing {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.9);
    animation: voice-dot-pulse 1s ease-in-out infinite;
}

/* 全部生成按钮 - 粉色 */
.voice-dot-all {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    border-radius: 50%;
    background: #ff69b4;
    border: none;
    margin-left: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    outline: none;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.voice-dot-all:active {
    transform: scale(0.9);
}

.voice-dot-all.loading {
    animation: voice-dot-spin 0.8s linear infinite;
}

.voice-dot-all.done {
    background: #90EE90;
}

@keyframes voice-dot-spin {
    to { transform: rotate(360deg); }
}

@keyframes voice-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.7; }
}

/* 线下对话消息行容器 */
.offline-dialogue-row {
    display: flex;
    align-items: center;
}
/* user 线下语音：行右对齐，复听标志在气泡左外侧（镜像 AI 右侧圆点）*/
.chat-message.user .offline-dialogue-row { justify-content: flex-end; }
.offline-dialogue-row .user-voice-dot { margin-left: 0; margin-right: 8px; }

/* ==================== 眠梦 App 样式 (黑灰色系) ==================== */

/* CSS变量 - 眠梦专用 */
#dreamland {
    --dream-bg: #0a0a0f;
    --dream-card: rgba(255, 255, 255, 0.06);
    --dream-card-active: rgba(255, 255, 255, 0.12);
    --dream-border: rgba(255, 255, 255, 0.08);
    --dream-text: #e5e5e5;
    --dream-text-secondary: #888;
    --dream-accent: #a78bfa;
    --dream-accent-dim: rgba(167, 139, 250, 0.2);
    --dream-gold: #fbbf24;
}

/* 页面背景 */
#dreamland {
    background: var(--dream-bg);
}

/* 页面头部 - 黑色系 */
#dreamland .page-header {
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--dream-border);
}

#dreamland .page-header .back-btn {
    color: var(--dream-text);
}

#dreamland .page-header .header-title {
    color: var(--dream-text);
}

/* 金币显示 */
.dreamland-coins {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--dream-gold);
    font-size: 14px;
}

.dreamland-coin-icon {
    font-size: 16px;
}

/* 主内容区 */
.dreamland-content {
    padding: 15px;
    padding-bottom: 30px;
    overflow-y: auto;
    height: calc(100% - 70px);
}

/* ===== 顶部操作卡片 ===== */
.dreamland-top-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 25px;
}

.dreamland-action-card {
    background: var(--dream-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--dream-border);
    border-radius: 16px;
    padding: 24px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dreamland-action-card:active {
    background: var(--dream-card-active);
    transform: scale(0.98);
}

.dreamland-action-icon {
    width: 50px;
    height: 50px;
    background: var(--dream-accent-dim);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--dream-accent);
}

/* 商城图标用金色 */
.dreamland-shop-icon {
    background: rgba(251, 191, 36, 0.15);
    color: var(--dream-gold);
}

.dreamland-action-label {
    color: var(--dream-text);
    font-size: 14px;
    font-weight: 500;
}

/* ===== 历史记录区 ===== */
.dreamland-history-section {
    flex: 1;
}

.dreamland-section-header {
    color: var(--dream-text-secondary);
    font-size: 13px;
    margin-bottom: 12px;
    padding-left: 4px;
}

.dreamland-history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 空状态 */
.dreamland-empty-state {
    text-align: center;
    padding: 50px 20px;
    color: var(--dream-text-secondary);
}

.dreamland-empty-icon {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.dreamland-empty-state p {
    margin: 5px 0;
}

.dreamland-empty-hint {
    font-size: 12px;
    opacity: 0.6;
}

/* 历史项卡片 */
.dreamland-history-item {
    background: var(--dream-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--dream-border);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dreamland-history-item:active {
    background: var(--dream-card-active);
}

.dreamland-history-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--dream-border);
}

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

.dreamland-history-title {
    color: var(--dream-text);
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dreamland-history-tag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--dream-accent-dim);
    color: var(--dream-accent);
}

.dreamland-history-tag.purchased {
    background: rgba(251, 191, 36, 0.15);
    color: var(--dream-gold);
}

.dreamland-history-meta {
    color: var(--dream-text-secondary);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dreamland-history-play {
    width: 36px;
    height: 36px;
    background: var(--dream-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
}

/* ===== 工具入口（窄条卡片） ===== */
.dreamland-tool-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.dreamland-tool-card {
    background: var(--dream-card);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--dream-border);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dreamland-tool-card:active {
    background: var(--dream-card-active);
    transform: scale(0.98);
}

.dreamland-tool-icon {
    font-size: 16px;
}

.dreamland-tool-label {
    color: var(--dream-text-secondary);
    font-size: 13px;
}

/* ===== 分页弹窗 ===== */
.dreamland-modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    display: none;
}

.dreamland-modal.active {
    display: flex;
    align-items: flex-end;
}

.dreamland-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.dreamland-modal-container {
    position: relative;
    width: 100%;
    max-height: 85%;
    background: #1a1a24;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    animation: dreamlandSlideUp 0.3s ease;
}

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

.dreamland-step {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 85vh;
}

/* 弹窗头部 */
.dreamland-modal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--dream-border);
    position: relative;
}

.dreamland-step-title {
    color: var(--dream-text);
    font-size: 17px;
    font-weight: 600;
}

.dreamland-step-indicator {
    position: absolute;
    right: 50px;
    color: var(--dream-text-secondary);
    font-size: 13px;
}

.dreamland-modal-close {
    position: absolute;
    right: 16px;
    background: none;
    border: none;
    color: var(--dream-text-secondary);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
}

.dreamland-step-back {
    position: absolute;
    left: 16px;
    background: none;
    border: none;
    color: var(--dream-text);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
}

/* 弹窗主体 */
.dreamland-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

/* 搜索框 */
.dreamland-search-box {
    margin-bottom: 16px;
}

.dreamland-search-box input {
    width: 100%;
    background: var(--dream-card);
    border: 1px solid var(--dream-border);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--dream-text);
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}

.dreamland-search-box input::placeholder {
    color: var(--dream-text-secondary);
}

/* 联系人网格 */
.dreamland-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.dreamland-contact-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    background: var(--dream-card);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dreamland-contact-item:active {
    transform: scale(0.96);
}

.dreamland-contact-item.selected {
    border-color: var(--dream-accent);
    background: var(--dream-accent-dim);
}

.dreamland-contact-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--dream-border);
}

.dreamland-contact-item.selected .dreamland-contact-avatar {
    border-color: var(--dream-accent);
}

.dreamland-contact-name {
    color: var(--dream-text);
    font-size: 12px;
    text-align: center;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 场景模板网格 */
.dreamland-template-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.dreamland-template-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    background: var(--dream-card);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dreamland-template-item:active {
    transform: scale(0.96);
}

.dreamland-template-item.active {
    border-color: var(--dream-accent);
    background: var(--dream-accent-dim);
}

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

.template-name {
    color: var(--dream-text-secondary);
    font-size: 12px;
}

.dreamland-template-item.active .template-name {
    color: var(--dream-accent);
}

/* 表单标签 */
.dreamland-form-label {
    color: var(--dream-text);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dreamland-form-label .required {
    color: #f87171;
    font-size: 12px;
    font-weight: 400;
}

.dreamland-form-label .optional {
    color: var(--dream-text-secondary);
    font-size: 12px;
    font-weight: 400;
}

/* 场景输入框 */
.dreamland-scene-input {
    width: 100%;
    background: var(--dream-card);
    border: 1px solid var(--dream-border);
    border-radius: 12px;
    padding: 14px;
    color: var(--dream-text);
    font-size: 14px;
    line-height: 1.6;
    resize: none;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
}

.dreamland-scene-input::placeholder {
    color: var(--dream-text-secondary);
    opacity: 0.7;
}

.dreamland-scene-input:focus {
    border-color: var(--dream-accent);
}

.dreamland-scene-hint {
    color: var(--dream-text-secondary);
    font-size: 12px;
    margin-top: 8px;
    padding-left: 4px;
}

/* 预览卡片 */
.dreamland-preview-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--dream-card);
    border: 1px solid var(--dream-border);
    border-radius: 12px;
    margin-bottom: 20px;
}

.dreamland-preview-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--dream-accent);
}

.dreamland-preview-info {
    flex: 1;
}

.dreamland-preview-name {
    color: var(--dream-text);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.dreamland-preview-scene {
    color: var(--dream-text-secondary);
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 时长选择 */
.dreamland-duration-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.dreamland-duration-item {
    padding: 12px 8px;
    background: var(--dream-card);
    border: 1px solid var(--dream-border);
    border-radius: 10px;
    text-align: center;
    color: var(--dream-text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dreamland-duration-item.active {
    border-color: var(--dream-accent);
    background: var(--dream-accent-dim);
    color: var(--dream-accent);
}

/* 环境音效网格 */
.dreamland-ambient-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.dreamland-ambient-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    background: var(--dream-card);
    border: 1px solid var(--dream-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dreamland-ambient-item.selected {
    border-color: var(--dream-accent);
    background: var(--dream-accent-dim);
}

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

.ambient-name {
    color: var(--dream-text-secondary);
    font-size: 11px;
}

.dreamland-ambient-item.selected .ambient-name {
    color: var(--dream-accent);
}

/* 背景选择器 */
.dreamland-bg-selector {
    margin-bottom: 20px;
}

.dreamland-bg-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px;
    background: var(--dream-card);
    border: 1px dashed var(--dream-border);
    border-radius: 12px;
    color: var(--dream-text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dreamland-bg-placeholder:active {
    background: var(--dream-card-active);
}

.dreamland-bg-placeholder span:first-child {
    font-size: 24px;
}

.dreamland-bg-preview {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.dreamland-bg-preview img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

.dreamland-bg-preview .remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: rgba(0,0,0,0.6);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 14px;
    cursor: pointer;
}

/* 高级选项 */
.dreamland-advanced-section {
    padding-top: 10px;
    border-top: 1px solid var(--dream-border);
}

.dreamland-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
}

.dreamland-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dreamland-toggle-label {
    color: var(--dream-text);
    font-size: 14px;
}

.dreamland-toggle-hint {
    color: var(--dream-text-secondary);
    font-size: 11px;
}

/* 开关样式 */
.dreamland-switch {
    position: relative;
    width: 44px;
    height: 24px;
}

.dreamland-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.dreamland-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--dream-card);
    border: 1px solid var(--dream-border);
    border-radius: 24px;
    transition: all 0.3s ease;
}

.dreamland-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background: var(--dream-text-secondary);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.dreamland-switch input:checked + .dreamland-slider {
    background: var(--dream-accent-dim);
    border-color: var(--dream-accent);
}

.dreamland-switch input:checked + .dreamland-slider:before {
    transform: translateX(20px);
    background: var(--dream-accent);
}

/* 弹窗底部 */
.dreamland-modal-footer {
    padding: 16px 20px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--dream-border);
}

.dreamland-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.dreamland-btn-next {
    background: var(--dream-card);
    border: 1px solid var(--dream-border);
    color: var(--dream-text-secondary);
}

.dreamland-btn-next:not(:disabled) {
    background: var(--dream-accent-dim);
    border-color: var(--dream-accent);
    color: var(--dream-accent);
}

.dreamland-btn-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dreamland-btn-start {
    background: var(--dream-accent);
    color: white;
}

/* 双按钮底部 */
.dreamland-footer-dual {
    display: flex;
    gap: 12px;
}

.dreamland-footer-dual .dreamland-btn {
    flex: 1;
}

.dreamland-btn-ai {
    background: var(--dream-accent);
    color: white;
}

.dreamland-btn-ai:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dreamland-btn-manual {
    background: var(--dream-card);
    border: 1px solid var(--dream-border);
    color: var(--dream-text);
}

.dreamland-btn-manual:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dreamland-btn-secondary {
    background: var(--dream-card);
    border: 1px solid var(--dream-border);
    color: var(--dream-text);
}

/* AI Loading */
.dreamland-ai-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 15, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.dreamland-ai-loading-content {
    text-align: center;
}

.dreamland-ai-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--dream-border);
    border-top-color: var(--dream-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

.dreamland-ai-loading-text {
    color: var(--dream-text);
    font-size: 16px;
    margin-bottom: 8px;
}

.dreamland-ai-loading-hint {
    color: var(--dream-text-secondary);
    font-size: 13px;
}

/* AI Error */
.dreamland-ai-error {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 15, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.dreamland-ai-error-content {
    text-align: center;
    padding: 20px;
}

.dreamland-ai-error-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.dreamland-ai-error-title {
    color: var(--dream-text);
    font-size: 18px;
    margin-bottom: 8px;
}

.dreamland-ai-error-msg {
    color: var(--dream-text-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.dreamland-ai-error-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.dreamland-ai-error-btns .dreamland-btn {
    width: auto;
    padding: 12px 24px;
}

/* 第3步 - 语言设置 */
.dreamland-language-section {
    background: var(--dream-card);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.dreamland-language-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dreamland-language-select {
    flex: 1;
    padding: 10px 14px;
    background: var(--dream-input-bg);
    border: 1px solid var(--dream-border);
    border-radius: 8px;
    color: var(--dream-text);
    font-size: 15px;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238e8e93' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.dreamland-language-select:focus {
    border-color: var(--dream-accent);
}

.dreamland-translation-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--dream-border);
}

.dreamland-translation-check input[type="checkbox"] {
    display: none;
}

.dreamland-translation-check .checkmark {
    width: 22px;
    height: 22px;
    border: 2px solid var(--dream-border);
    border-radius: 6px;
    background: var(--dream-input-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.dreamland-translation-check input:checked + .checkmark {
    background: var(--dream-accent);
    border-color: var(--dream-accent);
}

.dreamland-translation-check input:checked + .checkmark::after {
    content: '✓';
    color: white;
    font-size: 14px;
}

.dreamland-translation-check .label-text {
    color: var(--dream-text-secondary);
    font-size: 14px;
}

/* 第3步 - 时长设置 */
.dreamland-duration-section {
    background: var(--dream-card);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.dreamland-duration-slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.dreamland-duration-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--dream-border);
    border-radius: 3px;
    outline: none;
}

.dreamland-duration-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--dream-accent);
    border-radius: 50%;
    cursor: pointer;
}

.dreamland-duration-value {
    color: var(--dream-accent);
    font-size: 15px;
    font-weight: 600;
    min-width: 70px;
    text-align: right;
}

.dreamland-continuous-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: var(--dream-text-secondary);
    font-size: 13px;
}

.dreamland-continuous-check input {
    display: none;
}

.dreamland-continuous-check .checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--dream-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dreamland-continuous-check input:checked ~ .checkmark {
    background: var(--dream-accent);
    border-color: var(--dream-accent);
}

.dreamland-continuous-check input:checked ~ .checkmark::after {
    content: "✓";
    color: white;
    font-size: 12px;
}

/* 选择按钮 */
.dreamland-select-btn {
    background: var(--dream-accent-dim);
    border: 1px solid var(--dream-accent);
    color: var(--dream-accent);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    float: right;
}

/* AI标签 */
.dreamland-ai-tag {
    background: linear-gradient(135deg, #a78bfa, #f472b6);
    color: white;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
}

/* 音效池预览 */
.dreamland-pool-preview {
    background: var(--dream-card);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
    min-height: 40px;
}

.dreamland-pool-empty {
    color: var(--dream-text-secondary);
    font-size: 13px;
    text-align: center;
}

.dreamland-pool-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dreamland-pool-tag {
    background: var(--dream-accent-dim);
    border: 1px solid var(--dream-accent);
    color: var(--dream-accent);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dreamland-pool-tag .remove {
    cursor: pointer;
    opacity: 0.7;
}

.dreamland-pool-tag .remove:hover {
    opacity: 1;
}

.dreamland-pool-hint {
    color: var(--dream-text-secondary);
    font-size: 12px;
    margin-bottom: 16px;
}

/* 背景预览 */
.dreamland-bg-preview-section {
    margin-bottom: 16px;
}

.dreamland-bg-preview-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--dream-card);
    border-radius: 10px;
    padding: 12px;
    min-height: 60px;
}

.dreamland-bg-preview-item {
    position: relative;
    width: 50px;
    height: 80px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
}

.dreamland-bg-preview-item .remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: rgba(255, 100, 100, 0.9);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dreamland-bg-interval-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--dream-border);
}

.interval-label {
    color: var(--dream-text-secondary);
    font-size: 13px;
}

.dreamland-interval-select {
    background: var(--dream-card);
    border: 1px solid var(--dream-border);
    color: var(--dream-text);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
}

/* 音乐区块 */
.dreamland-music-section {
    background: var(--dream-card);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 16px;
}

.dreamland-music-prompt-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--dream-border);
}

.dreamland-music-prompt-label {
    color: var(--dream-text-secondary);
    font-size: 12px;
    margin-bottom: 8px;
}

.dreamland-music-prompt-row {
    display: flex;
    gap: 8px;
}

.dreamland-music-prompt-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--dream-border);
    border-radius: 8px;
    padding: 10px;
    color: var(--dream-text);
    font-size: 13px;
}

.dreamland-music-edit-btn {
    background: var(--dream-accent-dim);
    border: 1px solid var(--dream-accent);
    color: var(--dream-accent);
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
}

/* AI推荐理由 */
.dreamland-ai-reason {
    background: rgba(167, 139, 250, 0.1);
    border: 1px solid rgba(167, 139, 250, 0.3);
    border-radius: 10px;
    padding: 12px;
    margin-top: 16px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.reason-icon {
    font-size: 16px;
}

.reason-text {
    color: var(--dream-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

/* ===== 选择弹窗 ===== */
.dreamland-select-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

.dreamland-select-modal.show {
    display: flex;
}

.dreamland-select-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}

.dreamland-select-modal-container {
    position: relative;
    background: var(--dream-bg);
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 500px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.dreamland-select-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--dream-border);
}

.dreamland-select-modal-title {
    color: var(--dream-text);
    font-size: 16px;
    font-weight: 600;
}

.dreamland-select-modal-done {
    background: var(--dream-accent);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.dreamland-select-modal-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--dream-card);
    font-size: 13px;
    color: var(--dream-text-secondary);
}

.dreamland-select-modal-selected .selected-list {
    flex: 1;
    color: var(--dream-accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dreamland-select-modal-selected .clear-btn {
    background: transparent;
    border: 1px solid var(--dream-border);
    color: var(--dream-text-secondary);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.dreamland-select-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.dreamland-select-modal-hint {
    padding: 12px 20px;
    border-top: 1px solid var(--dream-border);
    color: var(--dream-text-secondary);
    font-size: 12px;
    text-align: center;
}

.dreamland-select-section {
    margin-bottom: 20px;
}

.dreamland-select-section-title {
    color: var(--dream-text);
    font-size: 14px;
    margin-bottom: 12px;
}

/* 音效搜索 */
.dreamland-ambient-search-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.dreamland-ambient-search-input {
    flex: 1;
    background: var(--dream-card);
    border: 1px solid var(--dream-border);
    border-radius: 10px;
    padding: 12px;
    color: var(--dream-text);
    font-size: 14px;
}

.dreamland-ambient-search-btn {
    background: var(--dream-accent);
    border: none;
    color: white;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
}

.dreamland-ambient-search-results {
    min-height: 60px;
}

/* 音效选项网格 */
.dreamland-ambient-builtin-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.dreamland-ambient-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    background: var(--dream-card);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
}

.dreamland-ambient-option.selected {
    border-color: var(--dream-accent);
    background: var(--dream-accent-dim);
}

.dreamland-ambient-option .ambient-emoji {
    font-size: 24px;
    margin-bottom: 6px;
}

.dreamland-ambient-option .ambient-name {
    color: var(--dream-text);
    font-size: 12px;
}

.dreamland-ambient-option .ambient-check {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--dream-accent);
    display: none;
    align-items: center;
    justify-content: center;
}

.dreamland-ambient-option .ambient-check::after {
    content: "✓";
    color: white;
    font-size: 10px;
}

.dreamland-ambient-option.selected .ambient-check {
    display: flex;
}

/* 试听按钮 */
.dreamland-ambient-option .ambient-preview-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--dream-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    margin-bottom: 4px;
    transition: transform 0.15s, background 0.15s;
}

.dreamland-ambient-option .ambient-preview-btn:active {
    transform: scale(0.9);
}

.dreamland-ambient-option .ambient-preview-btn i.fa-spinner {
    font-size: 10px;
}

/* 收藏音效列表 */
.dreamland-ambient-favorites-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dreamland-ambient-fav-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: var(--dream-card);
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    gap: 12px;
}

.dreamland-ambient-fav-item.selected {
    border-color: var(--dream-accent);
}

.dreamland-ambient-fav-item .fav-play {
    width: 36px;
    height: 36px;
    background: var(--dream-accent);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
}

.dreamland-ambient-fav-item .fav-info {
    flex: 1;
}

.dreamland-ambient-fav-item .fav-name {
    color: var(--dream-text);
    font-size: 14px;
}

.dreamland-ambient-fav-item .fav-check {
    width: 22px;
    height: 22px;
    border: 2px solid var(--dream-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dreamland-ambient-fav-item.selected .fav-check {
    background: var(--dream-accent);
    border-color: var(--dream-accent);
}

.dreamland-ambient-fav-item.selected .fav-check::after {
    content: "✓";
    color: white;
    font-size: 12px;
}

/* 背景图选项网格 */
.dreamland-bg-builtin-grid,
.dreamland-bg-user-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.dreamland-bg-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.dreamland-bg-option .bg-thumb {
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 8px;
    margin-bottom: 6px;
    border: 2px solid transparent;
}

.dreamland-bg-option.selected .bg-thumb {
    border-color: var(--dream-accent);
}

.dreamland-bg-option .bg-name {
    color: var(--dream-text);
    font-size: 11px;
}

.dreamland-bg-option .bg-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--dream-accent);
    display: none;
    align-items: center;
    justify-content: center;
}

.dreamland-bg-option .bg-check::after {
    content: "✓";
    color: white;
    font-size: 11px;
}

.dreamland-bg-option.selected .bg-check {
    display: flex;
}

/* 内置背景缩略图样式 */
.dreamland-bg-option .bg-thumb.starry {
    background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 50%, #415a77 100%);
}
.dreamland-bg-option .bg-thumb.night {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}
.dreamland-bg-option .bg-thumb.forest {
    background: linear-gradient(135deg, #1e3a27 0%, #2d5a3d 50%, #1a4731 100%);
}
.dreamland-bg-option .bg-thumb.beach {
    background: linear-gradient(180deg, #87ceeb 0%, #f4a460 50%, #deb887 100%);
}
.dreamland-bg-option .bg-thumb.aurora {
    background: linear-gradient(135deg, #0b3d3d 0%, #1a5c5c 30%, #7b68ee 70%, #00fa9a 100%);
}
.dreamland-bg-option .bg-thumb.mountain {
    background: linear-gradient(180deg, #2c3e50 0%, #4a6572 40%, #8b9dc3 100%);
}
.dreamland-bg-option .bg-thumb.moon {
    background: linear-gradient(180deg, #0c1445 0%, #1a237e 60%, #c5cae9 100%);
}
.dreamland-bg-option .bg-thumb.candle {
    background: linear-gradient(180deg, #1a0a00 0%, #3d1c0a 50%, #8b4513 80%, #ffa500 100%);
}
.dreamland-bg-option .bg-thumb.user {
    background-size: cover;
    background-position: center;
}

/* 轮播间隔选项 */
.dreamland-interval-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.dreamland-interval-option {
    padding: 8px 16px;
    background: var(--dream-card);
    border: 1px solid var(--dream-border);
    border-radius: 20px;
    color: var(--dream-text-secondary);
    font-size: 13px;
    cursor: pointer;
}

.dreamland-interval-option.active {
    background: var(--dream-accent);
    border-color: var(--dream-accent);
    color: white;
}

.dreamland-empty-hint {
    color: var(--dream-text-secondary);
    font-size: 13px;
    text-align: center;
    padding: 20px;
}

/* 空状态 */
.dreamland-contact-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: var(--dream-text-secondary);
}

.dreamland-contact-empty p {
    margin: 5px 0;
}

/* Toast提示 */
.dreamland-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s;
    pointer-events: none;
}

.dreamland-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ===== 眠梦子页面通用样式 ===== */
.dreamland-subpage {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--dream-bg);
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.dreamland-subpage-header {
    display: flex;
    align-items: center;
    padding: 45px 16px 12px;
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--dream-border);
    min-height: 70px;
}

.dreamland-subpage-back {
    background: none;
    border: none;
    color: var(--dream-accent);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    margin-right: 12px;
}

.dreamland-subpage-title {
    color: var(--dream-text);
    font-size: 17px;
    font-weight: 600;
}

.dreamland-subpage-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
}

/* ===== 素材管理页样式 ===== */
.dreamland-assets-section {
    background: var(--dream-card);
    border-radius: 16px;
    margin-bottom: 16px;
    overflow: hidden;
}

.dreamland-assets-header {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dreamland-assets-icon {
    font-size: 18px;
    margin-right: 10px;
}

.dreamland-assets-title {
    color: var(--dream-text);
    font-size: 15px;
    font-weight: 600;
}

.dreamland-assets-content {
    padding: 16px;
}

.dreamland-assets-label {
    color: var(--dream-text-secondary);
    font-size: 13px;
    margin-bottom: 10px;
}

.dreamland-assets-label .hint {
    opacity: 0.6;
    font-size: 12px;
}

.dreamland-assets-label .count {
    color: var(--dream-accent);
}

/* 音效网格 */
.dreamland-sound-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.dreamland-sound-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.dreamland-sound-item:active {
    transform: scale(0.95);
    background: rgba(167, 139, 250, 0.15);
}

.dreamland-sound-item.playing {
    background: rgba(167, 139, 250, 0.2);
    border: 1px solid var(--dream-accent);
}

.sound-emoji {
    font-size: 24px;
    margin-bottom: 6px;
}

.sound-name {
    color: var(--dream-text);
    font-size: 12px;
}

/* 我的音效列表 */
.dreamland-my-sounds {
    margin-bottom: 12px;
}

.dreamland-my-sound-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    margin-bottom: 8px;
}

.my-sound-name {
    flex: 1;
    color: var(--dream-text);
    font-size: 14px;
}

.my-sound-play {
    background: none;
    border: none;
    color: var(--dream-accent);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
}

.my-sound-delete {
    background: none;
    border: none;
    color: #ff6b6b;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
}

/* 上传框 */
.dreamland-upload-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.dreamland-upload-box:active {
    border-color: var(--dream-accent);
    background: rgba(167, 139, 250, 0.05);
}

.upload-icon {
    font-size: 28px;
    color: var(--dream-accent);
    margin-bottom: 8px;
}

.upload-text {
    color: var(--dream-text);
    font-size: 14px;
    margin-bottom: 4px;
}

.upload-hint {
    color: var(--dream-text-secondary);
    font-size: 12px;
    opacity: 0.7;
}

/* 搜索行 */
.dreamland-search-row {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.dreamland-search-input {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--dream-text);
    font-size: 14px;
    outline: none;
}

.dreamland-search-input::placeholder {
    color: var(--dream-text-secondary);
    opacity: 0.6;
}

.dreamland-search-btn {
    padding: 10px 18px;
    background: var(--dream-accent);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.dreamland-search-btn:active {
    opacity: 0.85;
}

/* 搜索结果 */
.dreamland-search-results {
    margin-bottom: 16px;
    max-height: 200px;
    overflow-y: auto;
}

.dreamland-search-result-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    margin-bottom: 8px;
}

.search-result-name {
    flex: 1;
    color: var(--dream-text);
    font-size: 14px;
}

.search-result-source {
    color: var(--dream-text-secondary);
    font-size: 12px;
    margin-right: 10px;
}

.search-result-download {
    background: rgba(167, 139, 250, 0.2);
    border: none;
    color: var(--dream-accent);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}

/* 音效来源列表 */
.dreamland-source-list {
    margin-top: 8px;
}

.dreamland-source-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

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

.dreamland-source-item.expandable {
    flex-direction: column;
    align-items: stretch;
}

.source-main {
    display: flex;
    align-items: center;
    width: 100%;
}

.dreamland-source-check {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 12px;
}

.dreamland-source-check input {
    opacity: 0;
    width: 0;
    height: 0;
}

.dreamland-source-check .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dreamland-source-check input:checked ~ .checkmark {
    background: var(--dream-accent);
    border-color: var(--dream-accent);
}

.dreamland-source-check .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.dreamland-source-check input:checked ~ .checkmark:after {
    display: block;
}

.source-name {
    flex: 1;
    color: var(--dream-text);
    font-size: 14px;
}

.source-tag {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
}

.source-tag.free {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

.source-tag.apikey {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.source-expand {
    padding: 12px 0 4px 32px;
}

.dreamland-api-input {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--dream-text);
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}

.api-hint {
    color: var(--dream-text-secondary);
    font-size: 12px;
    margin-top: 6px;
    opacity: 0.7;
}

/* Freesound API 配置区 */
.dreamland-api-config {
    margin-bottom: 16px;
}

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

.dreamland-api-row .dreamland-api-input {
    flex: 1;
}

.dreamland-api-row .dreamland-api-save {
    padding: 10px 16px;
    background: var(--dream-accent);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

.dreamland-api-row .dreamland-api-save:active {
    opacity: 0.8;
}

/* 排序选项 */
.dreamland-sort-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0;
}

.dreamland-sort-btn {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    color: var(--dream-text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.dreamland-sort-btn.active {
    background: var(--dream-accent);
    border-color: var(--dream-accent);
    color: white;
}

/* 收藏列表 */
.dreamland-favorites-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dreamland-favorite-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    gap: 12px;
}

.favorite-play-btn {
    width: 36px;
    height: 36px;
    background: var(--dream-accent);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

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

.favorite-name {
    color: var(--dream-text);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.favorite-meta {
    color: var(--dream-text-secondary);
    font-size: 12px;
    margin-top: 2px;
}

.favorite-delete-btn {
    width: 32px;
    height: 32px;
    background: rgba(255, 100, 100, 0.1);
    border: none;
    border-radius: 50%;
    color: #ff6b6b;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
}

/* 空状态提示 */
.favorites-empty-hint,
.search-empty-hint {
    text-align: center;
    padding: 30px 20px;
    color: var(--dream-text-secondary);
    font-size: 13px;
}

.favorites-empty-hint i,
.search-empty-hint i {
    display: block;
    font-size: 32px;
    margin-bottom: 10px;
    opacity: 0.5;
}

/* 搜索结果列表 */
.dreamland-search-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.dreamland-search-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    gap: 10px;
}

.search-item-play {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: var(--dream-text);
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
}

.search-item-play:active {
    background: var(--dream-accent);
}

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

.search-item-name {
    color: var(--dream-text);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-item-meta {
    color: var(--dream-text-secondary);
    font-size: 11px;
    margin-top: 2px;
    display: flex;
    gap: 10px;
}

.search-item-fav {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--dream-text-secondary);
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
}

.search-item-fav.favorited {
    color: #f472b6;
}

/* 搜索加载状态 */
.dreamland-search-loading {
    text-align: center;
    padding: 20px;
    color: var(--dream-text-secondary);
}

.dreamland-search-loading i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 背景图网格 */
.dreamland-bg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.dreamland-bg-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.bg-preview {
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 8px;
    margin-bottom: 6px;
    background-size: cover;
    background-position: center;
}

/* 内置背景预览颜色 */
.bg-preview.starry { background: linear-gradient(135deg, #0c0c20, #1a1a40); }
.bg-preview.night { background: linear-gradient(180deg, #1a1a2e, #16213e); }
.bg-preview.forest { background: linear-gradient(180deg, #1a3a2a, #0f2f20); }
.bg-preview.beach { background: linear-gradient(180deg, #1a3545, #0f2030); }
.bg-preview.aurora { background: linear-gradient(135deg, #1a2a3a, #2a1a3a); }
.bg-preview.mountain { background: linear-gradient(180deg, #2a2a3a, #1a1a2a); }
.bg-preview.moon { background: linear-gradient(180deg, #1a1a30, #0a0a20); }
.bg-preview.candle { background: linear-gradient(180deg, #2a1a0a, #1a1008); }

.bg-name {
    color: var(--dream-text);
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* 可编辑的背景名 */
.bg-name.editable {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 0.2s;
}

.bg-name.editable:hover {
    background: rgba(255, 255, 255, 0.1);
}

.bg-name-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--dream-accent);
    border-radius: 4px;
    color: var(--dream-text);
    font-size: 11px;
    text-align: center;
    padding: 2px 4px;
    outline: none;
    box-sizing: border-box;
}

/* 上传按钮样式 */
.dreamland-bg-upload .bg-preview {
    background: rgba(255, 255, 255, 0.04);
    border: 2px dashed rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.dreamland-bg-upload .bg-preview:hover {
    border-color: var(--dream-accent);
    background: rgba(167, 139, 250, 0.1);
}

.dreamland-bg-upload .upload-plus {
    font-size: 28px;
    color: var(--dream-text-secondary);
}

.dreamland-bg-upload .bg-preview:hover .upload-plus {
    color: var(--dream-accent);
}

/* 用户背景项（带删除按钮） */
.dreamland-bg-item.user-bg {
    position: relative;
}

.dreamland-bg-item.user-bg .my-bg-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    color: #ff6b6b;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.dreamland-bg-item.user-bg:hover .my-bg-delete,
.dreamland-bg-item.user-bg:active .my-bg-delete {
    opacity: 1;
}

/* 命名弹窗 */
.dreamland-name-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.dreamland-name-modal.show {
    display: flex;
}

.dreamland-name-modal-content {
    background: var(--dream-card-solid, #1a1a24);
    border-radius: 16px;
    padding: 24px;
    width: 280px;
    text-align: center;
}

.dreamland-name-modal-title {
    color: var(--dream-text);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
}

.dreamland-name-input {
    width: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: var(--dream-text);
    font-size: 15px;
    text-align: center;
    outline: none;
    box-sizing: border-box;
}

.dreamland-name-input:focus {
    border-color: var(--dream-accent);
}

.dreamland-name-modal-btns {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.dreamland-name-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
}

.dreamland-name-btn.cancel {
    background: rgba(255, 255, 255, 0.1);
    color: var(--dream-text-secondary);
}

.dreamland-name-btn.confirm {
    background: var(--dream-accent);
    color: white;
}

/* AI音乐设置 */
.dreamland-music-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.music-toggle-label {
    color: var(--dream-text);
    font-size: 15px;
}

.dreamland-music-warning {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 16px;
}

.warning-title {
    color: #fbbf24;
    font-size: 13px;
    margin-bottom: 8px;
}

.warning-list {
    margin: 0;
    padding-left: 18px;
    color: var(--dream-text-secondary);
    font-size: 12px;
    line-height: 1.8;
}

.dreamland-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 16px 0;
}

/* 音乐提示信息 */
.dreamland-music-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(138, 43, 226, 0.1);
    border: 1px solid rgba(138, 43, 226, 0.2);
    border-radius: 10px;
    padding: 12px;
}

.dreamland-music-hint .hint-icon {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.dreamland-music-hint .hint-text {
    color: var(--dream-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

/* 存储信息 */
.dreamland-storage-info {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 16px;
}

.storage-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.storage-label {
    color: var(--dream-text);
    font-size: 14px;
}

.storage-value {
    color: var(--dream-accent);
    font-size: 14px;
    font-weight: 600;
}

.storage-details {
    padding-left: 8px;
}

.storage-detail-row {
    display: flex;
    justify-content: space-between;
    color: var(--dream-text-secondary);
    font-size: 12px;
    line-height: 1.8;
}

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

.dreamland-storage-btn {
    flex: 1;
    padding: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--dream-text);
    font-size: 13px;
    cursor: pointer;
}

.dreamland-storage-btn.danger {
    background: rgba(255, 107, 107, 0.1);
    border-color: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

/* ===== 沉浸式播放界面 ===== */
.dreamland-immersive {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1a1a1a;
    z-index: 9999;
    overflow: hidden;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.dreamland-immersive.active {
    display: block;
    opacity: 1;
}

/* 背景图层 */
.dreamland-immersive-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    animation: dreamland-breathe 8s ease-in-out infinite;
    transition: opacity 2s ease;
}

.dreamland-immersive-bg.dreamland-bg-next {
    opacity: 0;
}

@keyframes dreamland-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* 歌词气泡区域 - 居中可滚动 */
.dreamland-lyrics-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px);
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.dreamland-lyrics-area::-webkit-scrollbar {
    display: none;
}

/* AI气泡 - 居中显示 */
.dreamland-bubble-ai {
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    padding: 8px 18px;
    border-radius: 20px;
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.6;
    max-width: 90%;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: dreamland-fade-in 0.5s ease-out;
}

/* 用户气泡 - 居中显示 */
.dreamland-bubble-user {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    padding: 8px 18px;
    border-radius: 20px;
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.6;
    max-width: 90%;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: dreamland-fade-in 0.5s ease-out;
}

/* 双语气泡样式 */
.dreamland-bubble-main {
    margin-bottom: 4px;
}

.dreamland-bubble-translation {
    font-size: 13px;
    opacity: 0.7;
    font-style: italic;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 4px;
    margin-top: 4px;
}

/* 思考中动画 */
.dreamland-thinking {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 12px 24px;
    min-width: 60px;
}

.dreamland-thinking span {
    font-size: 20px;
    animation: dreamland-thinking-dot 1.4s infinite ease-in-out both;
}

.dreamland-thinking span:nth-child(1) { animation-delay: 0s; }
.dreamland-thinking span:nth-child(2) { animation-delay: 0.2s; }
.dreamland-thinking span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dreamland-thinking-dot {
    0%, 80%, 100% { 
        opacity: 0.3; 
        transform: scale(0.8);
    }
    40% { 
        opacity: 1; 
        transform: scale(1);
    }
}

@keyframes dreamland-fade-in {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 加载提示 */
.dreamland-immersive-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    display: none;
    flex-direction: column;
    align-items: center;
}

.dreamland-immersive-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

.dreamland-immersive-loading .loading-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-bottom: 20px;
}

.dreamland-retry-btn,
.dreamland-back-btn {
    padding: 10px 30px;
    border-radius: 20px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    margin: 5px;
    display: none;
}

.dreamland-retry-btn {
    background: rgba(138, 43, 226, 0.6);
    color: #fff;
}

.dreamland-back-btn {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* 错误对话框 */
.dreamland-error-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.dreamland-error-content {
    background: rgba(30, 30, 40, 0.95);
    border-radius: 16px;
    padding: 24px;
    max-width: 280px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dreamland-error-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
}

.dreamland-error-msg {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
    line-height: 1.5;
}

.dreamland-error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.dreamland-error-retry,
.dreamland-error-end {
    padding: 10px 24px;
    border-radius: 20px;
    border: none;
    font-size: 14px;
    cursor: pointer;
}

.dreamland-error-retry {
    background: rgba(138, 43, 226, 0.7);
    color: #fff;
}

.dreamland-error-end {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* 回放进度条 */
.dreamland-replay-bar {
    position: absolute;
    bottom: 110px;
    left: 20px;
    right: 20px;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 25px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 5;
}

.dreamland-replay-bar .replay-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    outline: none;
}

.dreamland-replay-bar .replay-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.dreamland-replay-bar .replay-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.dreamland-replay-bar .replay-time-current,
.dreamland-replay-bar .replay-time-total {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    min-width: 36px;
    text-align: center;
}

/* 循环播放按钮 */
.dreamland-replay-bar .replay-loop-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-left: 4px;
}

.dreamland-replay-bar .replay-loop-btn.active {
    background: rgba(138, 180, 248, 0.8);
    color: #fff;
}

.dreamland-replay-bar .replay-loop-btn:active {
    transform: scale(0.9);
}

/* 底部控制区 */
.dreamland-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    padding-bottom: max(30px, env(safe-area-inset-bottom));
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 左下角加号 - 纯文字 */
.dreamland-plus-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 28px;
    font-weight: 300;
    cursor: pointer;
    padding: 5px 10px;
    transition: color 0.2s;
}

.dreamland-plus-text:active {
    color: rgba(255, 255, 255, 1);
}

/* 中间三按钮容器 */
.dreamland-btn-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* 右下角时间 */
.dreamland-timer {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-family: monospace;
    min-width: 50px;
    text-align: right;
}

/* 统一圆形按钮 */
.dreamland-ctrl-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.dreamland-ctrl-btn:active {
    background: rgba(255, 255, 255, 0.25);
}

.dreamland-ctrl-btn.dreamland-end-btn {
    background: rgba(255, 100, 100, 0.2);
    border-color: rgba(255, 100, 100, 0.3);
}

.dreamland-ctrl-btn.paused {
    background: rgba(138, 43, 226, 0.3);
    border-color: rgba(138, 43, 226, 0.5);
}

.dreamland-ctrl-btn.recording {
    background: rgba(255, 100, 100, 0.4);
    border-color: rgba(255, 100, 100, 0.5);
    animation: dreamland-pulse 1s ease-in-out infinite;
}

@keyframes dreamland-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* 语音选项弹窗 */
.dreamland-voice-options {
    position: absolute;
    bottom: 140px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(40, 40, 40, 0.95);
    border-radius: 16px;
    padding: 16px;
    min-width: 280px;
    z-index: 20;
}

.voice-options-text {
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
    max-height: 100px;
    overflow-y: auto;
    padding: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.voice-options-btns {
    display: flex;
    gap: 10px;
}

.voice-opt-btn {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    cursor: pointer;
    background: rgba(138, 43, 226, 0.6);
    color: #fff;
}

.voice-opt-btn.voice-cancel {
    background: rgba(255, 255, 255, 0.15);
}

/* 转文字编辑弹窗 */
.dreamland-edit-modal {
    position: absolute;
    bottom: 100px;
    left: 20px;
    right: 20px;
    background: rgba(40, 40, 40, 0.95);
    border-radius: 16px;
    padding: 16px;
    z-index: 20;
}

.dreamland-edit-textarea {
    width: 100%;
    height: 80px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    padding: 10px;
    resize: none;
    margin-bottom: 12px;
}

.dreamland-edit-btns {
    display: flex;
    gap: 10px;
}

.edit-btn-cancel,
.edit-btn-send {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    cursor: pointer;
}

.edit-btn-cancel {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.edit-btn-send {
    background: rgba(138, 43, 226, 0.6);
    color: #fff;
}

/* 音量调节弹窗 - 在沉浸界面内 */
.dreamland-volume-modal {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2a2a2a;
    border-radius: 20px 20px 0 0;
    padding: 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.3s ease;
    z-index: 100;
}

.dreamland-volume-modal.show {
    transform: translateY(0);
}

.dreamland-volume-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dreamland-volume-header span {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

.dreamland-volume-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.dreamland-volume-content {
    max-height: 300px;
    overflow-y: auto;
}

.dreamland-volume-item {
    margin-bottom: 20px;
}

.dreamland-volume-label {
    display: flex;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-bottom: 8px;
}

.dreamland-volume-value {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.dreamland-volume-slider {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    outline: none;
}

.dreamland-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
}

/* ===== 使用说明页样式 ===== */
.dreamland-help-logo {
    text-align: center;
    padding: 30px 0 20px;
}

.help-logo-icon {
    font-size: 48px;
    margin-bottom: 10px;
}

.help-logo-title {
    color: var(--dream-text);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 8px;
    margin-bottom: 6px;
}

.help-logo-subtitle {
    color: var(--dream-text-secondary);
    font-size: 14px;
}

.dreamland-help-section {
    background: var(--dream-card);
    border-radius: 16px;
    margin-bottom: 16px;
    overflow: hidden;
}

.dreamland-help-header {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.help-icon {
    font-size: 18px;
    margin-right: 10px;
}

.help-title {
    color: var(--dream-text);
    font-size: 15px;
    font-weight: 600;
}

.dreamland-help-content {
    padding: 16px;
}

.help-intro {
    color: var(--dream-text);
    font-size: 14px;
    margin-bottom: 14px;
}

.help-text {
    color: var(--dream-text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 12px;
}

/* 功能列表 */
.help-feature-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.help-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.feature-text {
    color: var(--dream-text);
    font-size: 14px;
}

/* 步骤 */
.help-step {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.help-step:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.step-number {
    width: 28px;
    height: 28px;
    background: var(--dream-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.step-content {
    flex: 1;
}

.step-title {
    color: var(--dream-text);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.step-desc {
    color: var(--dream-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.step-templates {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.template-tag {
    padding: 4px 10px;
    background: rgba(167, 139, 250, 0.15);
    border-radius: 12px;
    color: var(--dream-accent);
    font-size: 12px;
}

/* 提示框 */
.help-tips {
    background: rgba(167, 139, 250, 0.1);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 14px;
}

.tips-title {
    color: var(--dream-accent);
    font-size: 13px;
    margin-bottom: 8px;
}

.tips-list {
    margin: 0;
    padding-left: 18px;
    color: var(--dream-text);
    font-size: 13px;
    line-height: 1.8;
}

/* 警告框 */
.help-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(251, 191, 36, 0.1);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
}

.warning-icon {
    font-size: 16px;
}

.help-warning span:last-child {
    color: var(--dream-text-secondary);
    font-size: 13px;
}

/* 操作按钮 */
.help-action-btn {
    width: 100%;
    padding: 12px;
    background: var(--dream-accent);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

/* 金币部分 */
.help-coin-section {
    margin-bottom: 14px;
}

.coin-section-title {
    color: var(--dream-text);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 8px;
}

.coin-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.coin-icon {
    font-size: 18px;
}

.coin-item span:last-child {
    color: var(--dream-text-secondary);
    font-size: 13px;
}

/* 商城预告 */
.shop-preview-badge {
    text-align: center;
    padding: 8px;
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(236, 72, 153, 0.2));
    border-radius: 8px;
    color: var(--dream-accent);
    font-size: 14px;
    margin-bottom: 14px;
}

.shop-preview-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

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

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

.preview-content {
    flex: 1;
}

.preview-title {
    color: var(--dream-text);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.preview-desc {
    color: var(--dream-text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

/* FAQ */
.faq-item {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

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

.faq-question {
    color: var(--dream-text);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.faq-answer {
    color: var(--dream-text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.faq-answer ol {
    margin: 6px 0 0;
    padding-left: 20px;
}

.faq-answer ol li {
    margin-bottom: 4px;
}

/* 版本号 */
.dreamland-help-version {
    text-align: center;
    color: var(--dream-text-secondary);
    font-size: 12px;
    padding: 20px 0;
    opacity: 0.5;
}

/* ===== 共伴悬浮小窗 ===== */
.shared-screen-window {
    position: absolute;
    z-index: 1000;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 200px;
    min-height: 150px;
}

.shared-screen-titlebar {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 100%);
    border-bottom: 1px solid #e0e0e0;
    cursor: move;
    gap: 6px;
    flex-shrink: 0;
}

.shared-screen-nav {
    display: flex;
    gap: 2px;
}

.shared-nav-btn {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: all 0.15s;
}

.shared-nav-btn:hover {
    background: rgba(0,0,0,0.08);
}

.shared-nav-btn:active {
    background: rgba(0,0,0,0.12);
}

.shared-nav-btn.disabled {
    opacity: 0.3;
    pointer-events: none;
}

.shared-screen-urlbar {
    flex: 1;
    min-width: 0;
}

.shared-screen-urlbar input {
    width: 100%;
    height: 28px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 14px;
    font-size: 12px;
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}

.shared-screen-urlbar input:focus {
    border-color: #07c160;
}

.shared-screen-urlbar input::placeholder {
    color: #aaa;
}

.shared-screen-actions {
    display: flex;
    gap: 2px;
}

.shared-action-btn {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    transition: all 0.15s;
}

.shared-action-btn:hover {
    background: rgba(0,0,0,0.08);
    color: #666;
}

#shared-vision-btn.active {
    background: rgba(74, 144, 226, 0.15);
    color: #4a90e2;
    animation: vision-pulse 1.5s infinite;
}

@keyframes vision-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.shared-screen-body {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #fafafa;
}

.shared-screen-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.shared-screen-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 20px;
    text-align: center;
}

.shared-screen-welcome .welcome-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.shared-screen-welcome .welcome-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.shared-screen-welcome .welcome-subtitle {
    font-size: 12px;
    color: #888;
    margin-bottom: 16px;
}

.shared-screen-welcome .welcome-tips {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.shared-screen-welcome .tip-item {
    font-size: 11px;
    color: #666;
    padding: 4px 12px;
    background: #f0f0f0;
    border-radius: 12px;
}

.shared-screen-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fafafa;
}

.shared-screen-loading .loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e0e0e0;
    border-top-color: #07c160;
    border-radius: 50%;
    animation: shared-spin 0.8s linear infinite;
}

@keyframes shared-spin {
    to { transform: rotate(360deg); }
}

.shared-screen-loading .loading-text {
    margin-top: 12px;
    font-size: 13px;
    color: #888;
}

.shared-screen-error {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    padding: 20px;
}

.shared-screen-error .error-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.shared-screen-error .error-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.shared-screen-error .error-desc {
    font-size: 12px;
    color: #888;
    margin-bottom: 16px;
    text-align: center;
}

.shared-screen-error .error-btn {
    padding: 8px 20px;
    background: #07c160;
    color: #fff;
    border: none;
    border-radius: 18px;
    font-size: 13px;
    cursor: pointer;
    transition: opacity 0.15s;
}

.shared-screen-error .error-btn:hover {
    opacity: 0.9;
}

.shared-resize-handle {
    position: absolute;
    z-index: 10;
}

.shared-resize-n { top: 0; left: 10px; right: 10px; height: 6px; cursor: n-resize; }
.shared-resize-s { bottom: 0; left: 10px; right: 10px; height: 6px; cursor: s-resize; }
.shared-resize-e { right: 0; top: 10px; bottom: 10px; width: 6px; cursor: e-resize; }
.shared-resize-w { left: 0; top: 10px; bottom: 10px; width: 6px; cursor: w-resize; }
.shared-resize-ne { top: 0; right: 0; width: 12px; height: 12px; cursor: ne-resize; }
.shared-resize-nw { top: 0; left: 0; width: 12px; height: 12px; cursor: nw-resize; }
.shared-resize-se { bottom: 0; right: 0; width: 12px; height: 12px; cursor: se-resize; }
.shared-resize-sw { bottom: 0; left: 0; width: 12px; height: 12px; cursor: sw-resize; }

/* YouTube 搜索结果列表 */
.shared-screen-results {
    position: absolute;
    inset: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.shared-screen-results .results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
}

.shared-screen-results .results-title {
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

.shared-screen-results .results-close {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    font-size: 18px;
    color: #666;
    cursor: pointer;
    border-radius: 4px;
}

.shared-screen-results .results-close:hover {
    background: #eee;
}

.shared-screen-results .results-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.shared-screen-results .result-item {
    display: flex;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.shared-screen-results .result-item:hover {
    background: #f5f5f5;
}

.shared-screen-results .result-thumbnail {
    width: 80px;
    height: 45px;
    border-radius: 4px;
    object-fit: cover;
    background: #eee;
    flex-shrink: 0;
}

.shared-screen-results .result-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shared-screen-results .result-title {
    font-size: 12px;
    font-weight: 500;
    color: #333;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shared-screen-results .result-channel {
    font-size: 11px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* SearXNG 搜索结果样式 */
.shared-screen-results .result-item.search-result {
    padding: 10px 8px;
    border-bottom: 1px solid #f0f0f0;
}

.shared-screen-results .result-favicon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shared-screen-results .result-favicon img {
    width: 16px;
    height: 16px;
    border-radius: 2px;
}

.shared-screen-results .result-url {
    font-size: 10px;
    color: #1a73e8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.shared-screen-results .result-content {
    font-size: 11px;
    color: #666;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shared-screen-results .results-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
    font-size: 13px;
}

.shared-screen-results .results-empty-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

/* 夜间模式适配 */
.night-mode .shared-screen-window {
    background: #1c1c1e;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.night-mode .shared-screen-titlebar {
    background: linear-gradient(180deg, #2c2c2e 0%, #252527 100%);
    border-bottom-color: #3a3a3c;
}

.night-mode .shared-nav-btn,
.night-mode .shared-action-btn {
    color: #aaa;
}

.night-mode .shared-nav-btn:hover,
.night-mode .shared-action-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #ddd;
}

.night-mode .shared-screen-urlbar input {
    background: #3a3a3c;
    border-color: #4a4a4c;
    color: #eee;
}

.night-mode .shared-screen-urlbar input::placeholder {
    color: #777;
}

.night-mode .shared-screen-body,
.night-mode .shared-screen-welcome,
.night-mode .shared-screen-loading,
.night-mode .shared-screen-error {
    background: #1c1c1e;
}

.night-mode .shared-screen-welcome .welcome-title,
.night-mode .shared-screen-error .error-title {
    color: #eee;
}

.night-mode .shared-screen-welcome .welcome-subtitle,
.night-mode .shared-screen-loading .loading-text,
.night-mode .shared-screen-error .error-desc {
    color: #888;
}

.night-mode .shared-screen-welcome .tip-item {
    background: #2c2c2e;
    color: #aaa;
}
/* 夜间模式搜索结果样式 */
.night-mode .shared-screen-results {
    background: #1c1c1e;
}

.night-mode .shared-screen-results .results-header {
    background: #2c2c2e;
    border-bottom-color: #3a3a3c;
}

.night-mode .shared-screen-results .results-title {
    color: #eee;
}

.night-mode .shared-screen-results .results-close {
    color: #aaa;
}

.night-mode .shared-screen-results .results-close:hover {
    background: #3a3a3c;
}

.night-mode .shared-screen-results .result-item:hover {
    background: #2c2c2e;
}

.night-mode .shared-screen-results .result-title {
    color: #eee;
}

.night-mode .shared-screen-results .result-channel {
    color: #888;
}

.night-mode .shared-screen-results .result-thumbnail {
    background: #3a3a3c;
}

/* SearXNG 搜索结果夜间模式 */
.night-mode .shared-screen-results .result-item.search-result {
    border-bottom-color: #3a3a3c;
}

.night-mode .shared-screen-results .result-url {
    color: #8ab4f8;
}

.night-mode .shared-screen-results .result-content {
    color: #aaa;
}

/* ===== 共伴模式选择弹窗 ===== */
.shared-mode-picker {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    animation: fadeIn 0.2s ease;
}

.mode-picker-content {
    background: #fafafa;
    border-radius: 20px;
    padding: 28px 24px;
    width: 220px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    animation: scaleIn 0.2s ease;
    position: relative;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.mode-picker-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.mode-picker-subtitle {
    font-size: 12px;
    color: #999;
    margin-bottom: 24px;
}

.mode-picker-options {
    display: flex;
    gap: 14px;
}

.mode-option {
    flex: 1;
    padding: 18px 10px 14px;
    border-radius: 14px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.mode-option:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.1);
}

.mode-option:active {
    transform: scale(0.96);
}

.mode-option-icon {
    width: 32px;
    height: 32px;
    margin: 0 auto 10px;
    color: #555;
}

.mode-option-icon svg {
    width: 100%;
    height: 100%;
}

.mode-option:hover .mode-option-icon {
    color: #333;
}

.mode-option-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.mode-option-desc {
    font-size: 10px;
    color: #999;
}

.mode-picker-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 22px;
    height: 22px;
    font-size: 18px;
    color: #bbb;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.mode-picker-close:hover {
    background: #f0f0f0;
    color: #666;
}

/* ===== 本地模式主界面 - 电视机风格 ===== */
.shared-local-home {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* 电视机外框 */
.tv-frame {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #e8e8e8, #f5f5f5);
    border-radius: 16px;
    padding: 12px;
    box-shadow: 
        inset 2px 2px 6px rgba(255, 255, 255, 0.8),
        inset -2px -2px 6px rgba(0, 0, 0, 0.08);
    position: relative;
}

/* 电视机关闭按钮（小开关） */
.tv-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(145deg, #d0d0d0, #e8e8e8);
    border: none;
    cursor: pointer;
    box-shadow: 
        inset 1px 1px 2px rgba(255, 255, 255, 0.6),
        inset -1px -1px 2px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.tv-close-btn::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #999;
    transition: background 0.2s ease;
}

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

.tv-close-btn:hover::after {
    background: #e74c3c;
}

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

/* 电视机屏幕 */
.tv-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.05),
        inset 0 0 0 1px rgba(0, 0, 0, 0.03);
}

.local-home-title {
    display: none;
}

.local-home-apps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 16px;
}

.local-app-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 16px 14px;
    background: #ffffff;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.local-app-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.1);
}

.local-app-item:active {
    transform: scale(0.96);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.local-app-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 10px;
    color: #555;
    transition: color 0.2s ease;
}

.local-app-icon svg {
    width: 100%;
    height: 100%;
}

.local-app-item:hover .local-app-icon {
    color: #333;
}

.local-app-name {
    font-size: 12px;
    font-weight: 500;
    color: #666;
    letter-spacing: 0.3px;
}

.local-app-item:hover .local-app-name {
    color: #333;
}

.local-home-tip {
    display: none;
}

/* 本地模式窗口样式 - 电视机造型 */
.shared-screen-window.local-mode {
    background: linear-gradient(145deg, #e8e8e8, #f5f5f5);
    border-radius: 20px;
    box-shadow: 
        inset 3px 3px 8px rgba(255, 255, 255, 0.9),
        inset -3px -3px 8px rgba(0, 0, 0, 0.1),
        0 8px 32px rgba(0, 0, 0, 0.15);
    padding: 14px;
    border: none;
}

.shared-screen-window.local-mode .shared-screen-titlebar {
    display: none !important;
}

.shared-screen-window.local-mode .shared-screen-body {
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.06),
        inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.shared-screen-window.local-mode .shared-local-home {
    background: transparent;
    padding: 0;
}

.shared-screen-window.local-mode .tv-frame {
    background: transparent;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
    position: static;
}

/* 本地模式关闭按钮移到窗口边框 */
.shared-screen-window.local-mode .tv-close-btn {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 100;
}

.shared-screen-window.local-mode .tv-screen {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.06),
        inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* 本地模式标题栏（极简版） */
.shared-screen-titlebar.local-mode {
    justify-content: flex-end;
    padding: 0 6px;
    background: linear-gradient(180deg, #f8f8f8 0%, #f0f0f0 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.shared-screen-titlebar.local-mode .shared-screen-nav,
.shared-screen-titlebar.local-mode .shared-screen-urlbar,
.shared-screen-titlebar.local-mode .shared-local-title,
.shared-screen-titlebar.local-mode #shared-platform-btn,
.shared-screen-titlebar.local-mode #shared-vision-btn,
.shared-screen-titlebar.local-mode .local-back-btn {
    display: none !important;
}

.shared-screen-titlebar.local-mode .shared-screen-actions {
    gap: 4px;
}

/* 夜间模式适配 - 模式选择弹窗 */
.night-mode .mode-picker-content {
    background: #1c1c1e;
}

.night-mode .mode-picker-title {
    color: #eee;
}

.night-mode .mode-picker-subtitle {
    color: #777;
}

.night-mode .mode-option {
    background: #2c2c2e;
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.night-mode .mode-option:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

.night-mode .mode-option-icon {
    color: #aaa;
}

.night-mode .mode-option:hover .mode-option-icon {
    color: #ddd;
}

.night-mode .mode-option-label {
    color: #eee;
}

.night-mode .mode-option-desc {
    color: #777;
}

.night-mode .mode-picker-close {
    color: #666;
}

.night-mode .mode-picker-close:hover {
    background: #3a3a3c;
    color: #aaa;
}

/* 本地模式夜间适配 - 电视机风格 */
.night-mode .shared-local-home {
    background: #1a1a1a;
}

.night-mode .tv-frame {
    background: linear-gradient(145deg, #2a2a2a, #222);
    box-shadow: 
        inset 2px 2px 6px rgba(255, 255, 255, 0.05),
        inset -2px -2px 6px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.05);
}

.night-mode .tv-screen {
    background: linear-gradient(180deg, #1c1c1e 0%, #151517 100%);
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.night-mode .local-app-item {
    background: #2c2c2e;
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.night-mode .local-app-item:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

.night-mode .local-app-icon {
    color: #aaa;
}

.night-mode .local-app-item:hover .local-app-icon {
    color: #ddd;
}

.night-mode .local-app-name {
    color: #999;
}

.night-mode .local-app-item:hover .local-app-name {
    color: #ddd;
}

.night-mode .shared-screen-titlebar.local-mode {
    background: linear-gradient(180deg, #2c2c2e 0%, #252527 100%);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* 夜间模式 - 电视机窗口造型 */
.night-mode .shared-screen-window.local-mode {
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    box-shadow: 
        inset 3px 3px 8px rgba(255, 255, 255, 0.05),
        inset -3px -3px 8px rgba(0, 0, 0, 0.4),
        0 8px 32px rgba(0, 0, 0, 0.4);
}

.night-mode .shared-screen-window.local-mode .shared-screen-body {
    background: linear-gradient(180deg, #1c1c1e 0%, #151517 100%);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.night-mode .shared-screen-window.local-mode .tv-screen {
    background: transparent;
}

.night-mode .tv-close-btn {
    background: linear-gradient(145deg, #3a3a3a, #2a2a2a);
    box-shadow: 
        inset 1px 1px 2px rgba(255, 255, 255, 0.1),
        inset -1px -1px 2px rgba(0, 0, 0, 0.3),
        0 1px 3px rgba(0, 0, 0, 0.3);
}

.night-mode .tv-close-btn::after {
    background: #666;
}

.night-mode .tv-close-btn:hover::after {
    background: #e74c3c;
}

/* ========================================
   小说阅读器样式
   ======================================== */

/* ===== 书架页面 ===== */
.novel-shelf {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.novel-shelf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.novel-back-btn,
.novel-add-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: all 0.2s ease;
}

.novel-back-btn:hover,
.novel-add-btn:hover {
    background: #f0f0f0;
    color: #333;
}

.novel-back-btn svg,
.novel-add-btn svg {
    width: 18px;
    height: 18px;
}

.novel-shelf-title {
    font-size: 15px;
    font-weight: 500;
    color: #333;
}

.novel-shelf-grid {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 14px;
    align-content: start;
}

.novel-shelf-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
}

.novel-shelf-empty .empty-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    color: #ccc;
}

.novel-shelf-empty .empty-icon svg {
    width: 100%;
    height: 100%;
}

.novel-shelf-empty .empty-text {
    font-size: 14px;
    margin-bottom: 4px;
}

.novel-shelf-empty .empty-hint {
    font-size: 12px;
    color: #bbb;
}

/* 书籍卡片 */
.novel-book-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.novel-book-card:active {
    transform: scale(0.95);
}

.novel-book-cover {
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 6px;
    overflow: hidden;
    background: #f5f0e6;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 6px;
    position: relative;
}

.novel-book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.novel-book-cover .cover-text {
    font-size: 20px;
    font-weight: 600;
    color: #666;
    text-align: center;
    padding: 4px;
    word-break: break-all;
    line-height: 1.2;
}

.novel-book-name {
    font-size: 11px;
    color: #333;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== 阅读页面 ===== */
.novel-reader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.novel-reader-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    font-size: 18px;
    line-height: 1.8;
    color: #333;
    word-break: break-word;
    white-space: pre-wrap;
    /* 移动端长按选择文本支持 */
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

/* 章节分隔符（滚动模式自动加载下一章时显示） */
.novel-chapter-divider {
    text-align: center;
    padding: 30px 0;
    color: #999;
    font-size: 14px;
    user-select: none;
}

.novel-chapter-divider span {
    display: inline-block;
    padding: 8px 20px;
    background: linear-gradient(135deg, #f5f5f5, #eee);
    border-radius: 20px;
    letter-spacing: 2px;
}

.novel-chapter-content {
    white-space: pre-wrap;
    word-break: break-word;
}

/* 左右翻页模式 */
.novel-reader-content.horizontal-mode {
    overflow: hidden;
    column-width: 100%;
    column-gap: 0;
    height: 100%;
}

/* 翻页按钮 */
.novel-page-buttons {
    display: flex;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.novel-page-buttons .page-btn {
    flex: 1;
    height: 36px;
    border: none;
    background: #fafafa;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.novel-page-buttons .page-btn:first-child {
    border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.novel-page-buttons .page-btn:hover {
    background: #f0f0f0;
    color: #333;
}

.novel-page-buttons .page-btn:active {
    background: #e8e8e8;
}

/* 顶部菜单 */
.novel-menu-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    z-index: 100;
}

.novel-menu-back,
.novel-menu-toc {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

.novel-menu-back:hover,
.novel-menu-toc:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #333;
}

.novel-menu-back svg,
.novel-menu-toc svg {
    width: 18px;
    height: 18px;
}

.novel-menu-title {
    font-size: 13px;
    color: #333;
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 底部菜单 */
.novel-menu-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    z-index: 100;
}

.novel-progress-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.novel-progress-bar input[type="range"] {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: #e0e0e0;
    border-radius: 2px;
    outline: none;
}

.novel-progress-bar input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #666;
    cursor: pointer;
}

.novel-progress-text {
    font-size: 12px;
    color: #666;
    min-width: 36px;
    text-align: right;
}

.novel-settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px;
    border: none;
    background: #f5f5f5;
    border-radius: 8px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.novel-settings-btn:hover {
    background: #eee;
    color: #333;
}

.novel-settings-btn svg {
    width: 16px;
    height: 16px;
}

/* ===== 添加小说弹窗 ===== */
.novel-add-modal,
.novel-toc-modal,
.novel-settings-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.novel-modal-content,
.novel-toc-content,
.novel-settings-content {
    background: #fff;
    border-radius: 16px;
    width: min(90%, 280px);
    max-height: 85%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.novel-modal-header,
.novel-toc-header,
.novel-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.novel-modal-header span,
.novel-toc-header span,
.novel-settings-header span {
    font-size: 15px;
    font-weight: 500;
    color: #333;
}

.novel-modal-close,
.novel-toc-close,
.novel-settings-close {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.novel-modal-close:hover,
.novel-toc-close:hover,
.novel-settings-close:hover {
    background: #f0f0f0;
    color: #666;
}

.novel-modal-body {
    padding: 16px;
    overflow-y: auto;
}

.novel-cover-upload {
    margin-bottom: 16px;
}

.novel-cover-upload .cover-placeholder {
    width: 80px;
    height: 107px;
    margin: 0 auto;
    border: 2px dashed #ddd;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
}

.novel-cover-upload .cover-placeholder:hover {
    border-color: #999;
}

.novel-cover-upload .cover-placeholder svg {
    width: 24px;
    height: 24px;
    color: #ccc;
    margin-bottom: 4px;
}

.novel-cover-upload .cover-placeholder span {
    font-size: 10px;
    color: #999;
}

.novel-cover-upload .cover-placeholder .optional {
    font-size: 9px;
    color: #bbb;
}

.novel-cover-upload .cover-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.novel-form-row {
    margin-bottom: 14px;
}

.novel-form-row label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 6px;
}

.novel-form-row input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
}

.novel-form-row input[type="text"]:focus {
    border-color: #999;
}

.novel-file-upload {
    padding: 12px;
    border: 2px dashed #ddd;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.novel-file-upload:hover {
    border-color: #999;
}

.novel-file-upload span {
    font-size: 13px;
    color: #999;
}

.novel-file-upload.has-file span {
    color: #333;
}

.novel-modal-footer {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.novel-btn-cancel,
.novel-btn-confirm {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.novel-btn-cancel {
    background: #f5f5f5;
    color: #666;
}

.novel-btn-cancel:hover {
    background: #eee;
}

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

.novel-btn-confirm:hover {
    background: #444;
}

/* ===== 目录弹窗 ===== */
.novel-toc-content {
    max-height: 70%;
}

.novel-toc-list {
    overflow-y: auto;
    padding: 8px 0;
}

.novel-toc-item {
    padding: 10px 16px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.novel-toc-item:hover {
    background: #f5f5f5;
}

.novel-toc-item.current {
    color: #333;
    font-weight: 500;
    background: #f0f0f0;
}

.novel-toc-item.current::before {
    content: '●';
    margin-right: 8px;
    color: #666;
}

/* ===== 设置面板 ===== */
.novel-settings-content {
    max-height: 80%;
}

.novel-settings-body {
    padding: 12px 16px;
    overflow-y: auto;
}

.setting-group {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.setting-group:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.setting-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.setting-label span:first-child {
    font-size: 13px;
    color: #333;
}

.setting-value {
    font-size: 12px;
    color: #666;
    background: #f5f5f5;
    padding: 2px 8px;
    border-radius: 4px;
}

.setting-slider {
    display: flex;
    align-items: center;
    gap: 10px;
}

.setting-slider .slider-label {
    font-size: 12px;
    color: #999;
    width: 16px;
    text-align: center;
}

.setting-slider input[type="range"] {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: #e0e0e0;
    border-radius: 2px;
    outline: none;
}

.setting-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #666;
    cursor: pointer;
}

/* Tab切换 */
.setting-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.setting-tab {
    flex: 1;
    padding: 6px;
    border: 1px solid #e0e0e0;
    background: #fff;
    border-radius: 6px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.setting-tab.active {
    background: #333;
    border-color: #333;
    color: #fff;
}

/* 颜色选择器 */
.color-picker-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-preview {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.color-picker-row input[type="text"] {
    flex: 1;
    padding: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 12px;
    font-family: monospace;
}

.color-picker-row input[type="color"] {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.color-presets {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.color-preset {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.color-preset:hover {
    transform: scale(1.1);
}

.color-preset[data-color="#ffffff"] {
    background: #ffffff;
}

.color-preset[data-color="#f5f0e6"] {
    background: #f5f0e6;
}

.color-preset[data-color="#1a1a1a"] {
    background: #1a1a1a;
}

/* 背景图上传 */
.bg-image-upload {
    padding: 20px;
    border: 2px dashed #ddd;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bg-image-upload:hover {
    border-color: #999;
}

.bg-image-upload span {
    font-size: 12px;
    color: #999;
}

.bg-image-clear {
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    border: none;
    background: #f5f5f5;
    border-radius: 6px;
    font-size: 12px;
    color: #e74c3c;
    cursor: pointer;
}

/* ===== 桌宠气泡 ===== */
#pet-speech-bubble {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 8px 12px;
    width: max-content;
    max-width: 200px;
    min-width: 60px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    font-size: 13px;
    line-height: 1.5;
    color: #333;
    word-break: break-word;
    z-index: 501;
    pointer-events: none;
}

#pet-speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(255,255,255,0.95);
}

.pet-bubble-content {
    white-space: pre-wrap;
}

.pet-bubble-loading {
    display: flex;
    gap: 4px;
    justify-content: center;
    padding: 4px 0;
}

.pet-bubble-loading span {
    width: 6px; height: 6px;
    background: #999;
    border-radius: 50%;
    animation: petBubbleDot 1.2s infinite ease-in-out;
}

.pet-bubble-loading span:nth-child(2) { animation-delay: 0.2s; }
.pet-bubble-loading span:nth-child(3) { animation-delay: 0.4s; }

@keyframes petBubbleDot {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

/* ===== 桌宠输入栏样式 ===== */
#pet-chat-input {
    flex: 1;
    min-width: 0;
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 12px;
    outline: none;
    background: #fff;
    color: #333;
    transition: border-color 0.2s;
}

#pet-chat-input::placeholder {
    color: #aaa;
    font-size: 11px;
}

#pet-chat-input:focus {
    border-color: #999;
}

#pet-send-btn {
    background: #e0e0e0;
    color: #555;
    border: none;
    border-radius: 10px;
    padding: 6px 10px;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s;
}

#pet-send-btn:active {
    background: #ccc;
}

/* ===== 桌宠设置面板 ===== */
#pet-settings-panel {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9950;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.pet-settings-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
}

.pet-settings-content {
    position: relative;
    width: 100%;
    max-width: 375px;
    max-height: 75%;
    background: #fff;
    border-radius: 16px 16px 0 0;
    overflow-y: auto;
    animation: petSettingsSlideUp 0.3s ease;
}

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

.pet-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

.pet-settings-header span {
    font-size: 16px;
    font-weight: 600;
}

#pet-settings-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 4px;
}

/* ===== 桌宠对话历史面板 ===== */
#pet-chat-history {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9950;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.pet-history-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
}

.pet-history-content {
    position: relative;
    width: 100%;
    max-width: 375px;
    max-height: 80%;
    background: #fff;
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    animation: petSettingsSlideUp 0.3s ease;
}

.pet-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.pet-history-header span {
    font-size: 16px;
    font-weight: 600;
}

#pet-history-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    padding: 4px;
}

.pet-history-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pet-history-msg {
    display: flex;
    flex-direction: column;
    max-width: 80%;
}

.pet-history-msg.user {
    align-self: flex-end;
    align-items: flex-end;
}

.pet-history-msg.assistant {
    align-self: flex-start;
    align-items: flex-start;
}

.pet-history-msg .msg-bubble {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

.pet-history-msg.user .msg-bubble {
    background: #f0f0f0;
    color: #333;
}

.pet-history-msg.assistant .msg-bubble {
    background: #fff;
    border: 1px solid #e5e5e5;
    color: #333;
}

.pet-history-msg .msg-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 0 4px;
}
.pet-history-msg.user .msg-meta { flex-direction: row-reverse; }
.pet-history-msg .msg-time {
    font-size: 11px;
    color: #bbb;
}
.pet-history-msg .msg-delete {
    border: none;
    background: transparent;
    color: #ccc;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}
.pet-history-msg .msg-delete:active { color: #ff6b6b; }

.pet-history-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ccc;
    padding: 40px 0;
}

.pet-history-empty-icon {
    font-size: 36px;
}

.pet-history-empty-text {
    font-size: 15px;
    color: #999;
}

.pet-history-empty-hint {
    font-size: 12px;
    color: #ccc;
}

.pet-history-footer {
    padding: 12px 20px;
    border-top: 1px solid #eee;
    text-align: center;
    flex-shrink: 0;
}

#pet-history-clear {
    background: none;
    border: 1px solid #e74c3c;
    color: #e74c3c;
    border-radius: 8px;
    padding: 8px 24px;
    font-size: 13px;
    cursor: pointer;
}

#pet-history-clear:active {
    background: #e74c3c;
    color: #fff;
}

.pet-settings-body {
    padding: 16px 20px;
}

.pet-setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f2f2f2;
}

.pet-setting-item label {
    font-size: 14px;
    color: #333;
    flex-shrink: 0;
}

.pet-setting-item select {
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    background: #f8f8f8;
    outline: none;
}

.pet-setting-item textarea {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
    line-height: 1.5;
}

.pet-setting-item textarea:focus,
.pet-setting-item select:focus {
    border-color: #07c160;
}

.pet-setting-item:has(textarea) {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.pet-setting-item input[type="number"] {
    width: 60px;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
    outline: none;
}

.pet-setting-item input[type="number"]:focus {
    border-color: #07c160;
}

.pet-setting-group {
    margin-top: 12px;
}

.pet-setting-title {
    font-size: 13px;
    color: #888;
    font-weight: 600;
    margin-bottom: 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

/* 开关样式 */
.pet-toggle-wrap {
    position: relative;
}

.pet-toggle-wrap input[type="checkbox"] {
    display: none;
}

.pet-toggle {
    display: block;
    width: 44px;
    height: 24px;
    background: #ddd;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s;
}

.pet-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 1px 3px rgba(0,0,0,0.2);
}

.pet-toggle-wrap input:checked + .pet-toggle {
    background: #07c160;
}

.pet-toggle-wrap input:checked + .pet-toggle::after {
    transform: translateX(20px);
}

/* ===== 预设消息 ===== */
.pet-preset-list {
    max-height: 240px;
    overflow-y: auto;
    margin: 8px 0;
}

.pet-preset-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
}

.pet-preset-item select {
    width: 62px;
    padding: 4px 2px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 12px;
    background: #f8f8f8;
    outline: none;
    flex-shrink: 0;
}

.pet-preset-item input[type="time"] {
    width: 80px;
    padding: 4px 6px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 12px;
    outline: none;
    flex-shrink: 0;
}

.pet-preset-item input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 12px;
    outline: none;
}

.pet-preset-item input:focus,
.pet-preset-item select:focus {
    border-color: #07c160;
}

.pet-preset-item .pet-preset-delete {
    width: 22px;
    height: 22px;
    border: none;
    background: #f5f5f5;
    color: #999;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pet-preset-item .pet-preset-delete:active {
    background: #e74c3c;
    color: #fff;
}

.pet-preset-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.pet-preset-btn {
    flex: 1;
    padding: 8px 0;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.pet-preset-btn:active {
    opacity: 0.7;
}

.pet-preset-btn-add {
    background: #f0f0f0;
    color: #333;
}

.pet-preset-btn-gen {
    background: #07c160;
    color: #fff;
}

.pet-preset-btn-gen:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.pet-preset-status {
    margin-top: 8px;
    padding: 6px 10px;
    background: #f0f9eb;
    border-radius: 6px;
    font-size: 12px;
    color: #67c23a;
    text-align: center;
}

.pet-preset-status.error {
    background: #fef0f0;
    color: #f56c6c;
}

/* ===== 形象库 Tab ===== */
.gallery-tabs {
    display: flex;
    padding: 0 16px;
    border-bottom: 1px solid #eee;
    background: #fff;
}

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

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

.gallery-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 24px; height: 3px;
    background: #07c160;
    border-radius: 2px;
}

/* ===== 豆丁记忆海 ===== */
.gallery-memory-sea {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.memory-sea-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.memory-sea-card {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border: 1px solid #f0f0f0;
}

.memory-sea-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.memory-sea-card-date {
    font-size: 11px;
    color: #999;
}

.memory-sea-card-importance {
    font-size: 11px;
    color: #ff9500;
    font-weight: 600;
}

.memory-sea-card-summary {
    font-size: 13px;
    color: #333;
    line-height: 1.6;
}

.memory-sea-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.memory-sea-card-tags span {
    font-size: 11px;
    color: #07c160;
    background: rgba(7,193,96,0.08);
    padding: 2px 8px;
    border-radius: 10px;
}

.memory-sea-card-delete {
    background: none;
    border: none;
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 4px;
}

.memory-sea-card-delete:hover {
    color: #e74c3c;
}

.memory-sea-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #999;
}

.memory-sea-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.memory-sea-text {
    font-size: 15px;
    margin-bottom: 6px;
}

.memory-sea-hint {
    font-size: 12px;
    color: #bbb;
}

.bg-image-clear:hover {
    background: #fee;
}

/* 翻页模式选项 */
.page-mode-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-mode-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-mode-option:hover {
    background: #f5f5f5;
}

.page-mode-option input[type="radio"] {
    accent-color: #333;
}

.page-mode-option span {
    font-size: 13px;
    color: #333;
}

/* ===== 长按菜单 ===== */
.novel-context-menu {
    position: absolute;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 300;
    min-width: 120px;
}

.context-menu-item {
    padding: 12px 16px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    transition: background 0.2s ease;
}

.context-menu-item:hover {
    background: #f5f5f5;
}

.context-menu-item[data-action="delete"] {
    color: #e74c3c;
}

/* ===== 删书确认弹窗 ===== */
.novel-delete-confirm {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 400;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.delete-confirm-content {
    background: #fff;
    border-radius: 16px;
    padding: 24px 20px;
    width: 85%;
    max-width: min(260px, 85%);
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: scaleIn 0.25s ease;
}

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

.delete-confirm-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.delete-confirm-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}

.delete-confirm-book {
    font-size: 14px;
    color: #666;
    margin-bottom: 6px;
}

.delete-confirm-reason {
    font-size: 12px;
    color: #999;
    margin-bottom: 20px;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: 8px;
}

.delete-confirm-buttons {
    display: flex;
    gap: 12px;
}

.delete-reject-btn,
.delete-accept-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.delete-reject-btn {
    background: #f0f0f0;
    color: #666;
}

.delete-reject-btn:hover {
    background: #e8e8e8;
}

.delete-accept-btn {
    background: #e74c3c;
    color: #fff;
}

.delete-accept-btn:hover {
    background: #c0392b;
}

#delete-countdown {
    display: inline-block;
    min-width: 12px;
}

/* ===== 夜间模式适配 ===== */
.night-mode .novel-shelf {
    background: #1a1a1a;
}

.night-mode .novel-shelf-header {
    background: #222;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.night-mode .novel-shelf-title {
    color: #eee;
}

.night-mode .novel-back-btn,
.night-mode .novel-add-btn {
    color: #aaa;
}

.night-mode .novel-back-btn:hover,
.night-mode .novel-add-btn:hover {
    background: #333;
    color: #eee;
}

.night-mode .novel-shelf-empty {
    color: #666;
}

.night-mode .novel-shelf-empty .empty-icon {
    color: #444;
}

.night-mode .novel-book-cover {
    background: #2a2a2a;
}

.night-mode .novel-book-cover .cover-text {
    color: #999;
}

.night-mode .novel-book-name {
    color: #ccc;
}

.night-mode .novel-reader {
    background: #1a1a1a;
}

.night-mode .novel-reader-content {
    color: #ccc;
}

/* 夜间模式章节分隔符 */
.night-mode .novel-chapter-divider {
    color: #666;
}

.night-mode .novel-chapter-divider span {
    background: linear-gradient(135deg, #2a2a2a, #222);
}

.night-mode .novel-page-buttons {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.night-mode .novel-page-buttons .page-btn {
    background: #222;
    color: #999;
    border-right-color: rgba(255, 255, 255, 0.06);
}

.night-mode .novel-page-buttons .page-btn:hover {
    background: #2a2a2a;
    color: #ccc;
}

.night-mode .novel-menu-top,
.night-mode .novel-menu-bottom {
    background: rgba(26, 26, 26, 0.95);
    border-color: rgba(255, 255, 255, 0.06);
}

.night-mode .novel-menu-title {
    color: #eee;
}

.night-mode .novel-menu-back,
.night-mode .novel-menu-toc {
    color: #999;
}

.night-mode .novel-menu-back:hover,
.night-mode .novel-menu-toc:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #eee;
}

.night-mode .novel-progress-bar input[type="range"] {
    background: #333;
}

.night-mode .novel-progress-bar input[type="range"]::-webkit-slider-thumb {
    background: #999;
}

.night-mode .novel-progress-text {
    color: #999;
}

.night-mode .novel-settings-btn {
    background: #2a2a2a;
    color: #999;
}

.night-mode .novel-settings-btn:hover {
    background: #333;
    color: #ccc;
}

.night-mode .novel-modal-content,
.night-mode .novel-toc-content,
.night-mode .novel-settings-content {
    background: #222;
}

.night-mode .novel-modal-header,
.night-mode .novel-toc-header,
.night-mode .novel-settings-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.night-mode .novel-modal-header span,
.night-mode .novel-toc-header span,
.night-mode .novel-settings-header span {
    color: #eee;
}

.night-mode .novel-modal-close,
.night-mode .novel-toc-close,
.night-mode .novel-settings-close {
    color: #666;
}

.night-mode .novel-modal-close:hover,
.night-mode .novel-toc-close:hover,
.night-mode .novel-settings-close:hover {
    background: #333;
    color: #aaa;
}

.night-mode .novel-cover-upload .cover-placeholder {
    border-color: #444;
}

.night-mode .novel-cover-upload .cover-placeholder svg {
    color: #555;
}

.night-mode .novel-form-row label {
    color: #999;
}

.night-mode .novel-form-row input[type="text"] {
    background: #2a2a2a;
    border-color: #444;
    color: #eee;
}

.night-mode .novel-file-upload {
    border-color: #444;
}

.night-mode .novel-file-upload span {
    color: #777;
}

.night-mode .novel-modal-footer {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.night-mode .novel-btn-cancel {
    background: #333;
    color: #aaa;
}

.night-mode .novel-btn-confirm {
    background: #eee;
    color: #222;
}

.night-mode .novel-toc-item {
    color: #999;
}

.night-mode .novel-toc-item:hover {
    background: #2a2a2a;
}

.night-mode .novel-toc-item.current {
    color: #eee;
    background: #333;
}

.night-mode .setting-group {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.night-mode .setting-label span:first-child {
    color: #eee;
}

.night-mode .setting-value {
    background: #333;
    color: #aaa;
}

.night-mode .setting-slider .slider-label {
    color: #666;
}

.night-mode .setting-slider input[type="range"] {
    background: #333;
}

.night-mode .setting-slider input[type="range"]::-webkit-slider-thumb {
    background: #999;
}

.night-mode .setting-tab {
    background: #2a2a2a;
    border-color: #444;
    color: #999;
}

.night-mode .setting-tab.active {
    background: #eee;
    border-color: #eee;
    color: #222;
}

.night-mode .color-preview {
    border-color: rgba(255, 255, 255, 0.1);
}

.night-mode .color-picker-row input[type="text"] {
    background: #2a2a2a;
    border-color: #444;
    color: #eee;
}

.night-mode .color-preset {
    border-color: #444;
}

.night-mode .bg-image-upload {
    border-color: #444;
}

.night-mode .bg-image-upload span {
    color: #666;
}

.night-mode .bg-image-clear {
    background: #2a2a2a;
}

.night-mode .page-mode-option {
    border-color: #444;
}

.night-mode .page-mode-option:hover {
    background: #2a2a2a;
}

.night-mode .page-mode-option span {
    color: #ccc;
}

.night-mode .novel-context-menu {
    background: #2a2a2a;
}

.night-mode .context-menu-item {
    color: #ccc;
}

.night-mode .context-menu-item:hover {
    background: #333;
}

/* 夜间模式 - 删书确认弹窗 */
.night-mode .delete-confirm-content {
    background: #222;
}

.night-mode .delete-confirm-title {
    color: #eee;
}

.night-mode .delete-confirm-book {
    color: #aaa;
}

.night-mode .delete-confirm-reason {
    background: #333;
    color: #888;
}

.night-mode .delete-reject-btn {
    background: #333;
    color: #aaa;
}

.night-mode .delete-reject-btn:hover {
    background: #444;
}

.night-mode .delete-accept-btn {
    background: #c0392b;
}

/* ==================== 评分系统样式 ==================== */

/* 评分按钮 */
.novel-menu-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.novel-rate-btn {
    background: #333;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.novel-rate-btn:hover {
    background: #444;
}

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

/* 评分加载中 */
.novel-rating-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.rating-loading-content {
    text-align: center;
    color: #fff;
}

.rating-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    margin: 0 auto 15px;
    animation: spin 1s linear infinite;
}

.rating-loading-text {
    font-size: 14px;
    color: #ccc;
}

/* 章节评分卡 */
.novel-chapter-rating {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.chapter-rating-content {
    background: #fff;
    border-radius: 16px;
    width: 85%;
    max-width: min(320px, 85%);
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.chapter-rating-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
}

.chapter-rating-header span {
    font-weight: 600;
    color: #333;
}

.chapter-rating-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}

.chapter-rating-rater {
    text-align: center;
    padding: 12px 16px;
    color: #666;
    font-size: 13px;
}

.chapter-rating-score {
    text-align: center;
    padding: 10px 16px 20px;
}

.score-stars {
    font-size: 28px;
    letter-spacing: 4px;
    color: #333;
}

.score-number {
    display: block;
    margin-top: 8px;
    font-size: 16px;
    color: #666;
}

.chapter-rating-dimensions {
    padding: 0 16px 16px;
}

.dimension-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.dimension-label {
    width: 70px;
    font-size: 13px;
    color: #666;
}

.dimension-bar {
    flex: 1;
    height: 8px;
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
    margin: 0 10px;
}

.dimension-fill {
    height: 100%;
    background: #666;
    border-radius: 4px;
    transition: width 0.5s ease-out;
}

.dimension-value {
    width: 24px;
    text-align: right;
    font-size: 13px;
    color: #333;
    font-weight: 500;
}

.chapter-rating-comment {
    margin: 0 16px 16px;
    padding: 12px;
    background: #f8f8f8;
    border-radius: 10px;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}

.chapter-rating-buttons {
    display: flex;
    border-top: 1px solid #eee;
}

.chapter-rating-buttons button {
    flex: 1;
    padding: 14px;
    border: none;
    background: none;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
}

.rating-close-btn {
    color: #666;
    border-right: 1px solid #eee !important;
}

.rating-close-btn:hover {
    background: #f5f5f5;
}

.rating-next-btn {
    color: #333;
    font-weight: 500;
}

.rating-next-btn:hover {
    background: #f5f5f5;
}

/* 全书评分卡 */
.novel-book-rating {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.book-rating-content {
    background: #fff;
    border-radius: 16px;
    width: 85%;
    max-width: min(340px, 85%);
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.book-rating-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    background: #fff;
}

.book-rating-header span {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.book-rating-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}

.book-rating-main {
    display: flex;
    align-items: center;
    padding: 20px 16px;
    gap: 16px;
}

.book-score-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.score-big {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    line-height: 1;
}

.score-total {
    font-size: 14px;
    color: #999;
}

.book-rating-info {
    flex: 1;
}

.book-rater-name {
    font-size: 14px;
    color: #666;
    margin-bottom: 6px;
}

.book-stars {
    font-size: 22px;
    letter-spacing: 2px;
    color: #333;
    margin-bottom: 6px;
}

.book-progress {
    font-size: 12px;
    color: #999;
}

.book-rating-dimensions {
    padding: 0 16px 16px;
}

.book-dim-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 14px;
    gap: 10px;
}

.book-dim-name {
    width: 36px;
    font-size: 13px;
    color: #666;
    flex-shrink: 0;
}

.book-dim-score {
    width: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    flex-shrink: 0;
}

.book-dim-comment {
    flex: 1;
    font-size: 12px;
    color: #888;
    line-height: 1.4;
}

.book-rating-summary {
    margin: 0 16px 16px;
    padding: 14px;
    background: #f8f8f8;
    border-radius: 10px;
    font-size: 13px;
    color: #555;
    line-height: 1.6;
}

.book-rating-footer {
    padding: 0 16px 16px;
}

.book-rating-close-btn {
    width: 100%;
    padding: 14px;
    border: none;
    background: #333;
    color: #fff;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
}

.book-rating-close-btn:hover {
    background: #444;
}

/* 夜间模式 - 评分系统 */
.night-mode .novel-rate-btn {
    background: #444;
}

.night-mode .novel-rate-btn:hover {
    background: #555;
}

.night-mode .chapter-rating-content,
.night-mode .book-rating-content {
    background: #222;
}

.night-mode .chapter-rating-header,
.night-mode .book-rating-header {
    border-bottom-color: #333;
    background: #222;
}

.night-mode .chapter-rating-header span,
.night-mode .book-rating-header span {
    color: #eee;
}

.night-mode .chapter-rating-close,
.night-mode .book-rating-close {
    color: #666;
}

.night-mode .chapter-rating-rater,
.night-mode .book-rater-name {
    color: #888;
}

.night-mode .score-stars,
.night-mode .book-stars {
    color: #ccc;
}

.night-mode .score-number {
    color: #888;
}

.night-mode .dimension-label,
.night-mode .book-dim-name {
    color: #888;
}

.night-mode .dimension-bar {
    background: #333;
}

.night-mode .dimension-fill {
    background: #888;
}

.night-mode .dimension-value,
.night-mode .book-dim-score {
    color: #ccc;
}

.night-mode .chapter-rating-comment,
.night-mode .book-rating-summary {
    background: #2a2a2a;
    color: #aaa;
}

.night-mode .chapter-rating-buttons {
    border-top-color: #333;
}

.night-mode .rating-close-btn {
    color: #888;
    border-right-color: #333 !important;
}

.night-mode .rating-close-btn:hover,
.night-mode .rating-next-btn:hover {
    background: #2a2a2a;
}

.night-mode .rating-next-btn {
    color: #ccc;
}

.night-mode .book-score-circle {
    border-color: #888;
}

.night-mode .score-big {
    color: #ccc;
}

.night-mode .book-progress {
    color: #666;
}

.night-mode .book-dim-comment {
    color: #666;
}

.night-mode .book-rating-close-btn {
    background: #444;
}

.night-mode .book-rating-close-btn:hover {
    background: #555;
}

/* ==================== 划线批注系统 ==================== */

/* 吐槽按钮 */
.novel-comment-btn {
    background: #555;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.novel-comment-btn:hover {
    background: #666;
}

/* 划线按钮 */
.novel-select-btn {
    background: #555;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.novel-select-btn:hover {
    background: #666;
}

/* 选择模式提示条 */
.novel-select-mode-tip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #333, #444);
    color: #fff;
    padding: 12px 16px;
    font-size: 14px;
    text-align: center;
    z-index: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 选择模式底部栏 */
.novel-select-mode-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    display: flex;
    padding: 12px;
    gap: 12px;
    border-top: 1px solid #eee;
    z-index: 600;
}

.novel-select-mode-bar button {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.select-mode-cancel {
    background: #f5f5f5;
    color: #666;
}

.select-mode-confirm {
    background: #333;
    color: #fff;
}

.select-mode-confirm:disabled {
    background: #ccc;
    color: #999;
    cursor: not-allowed;
}

.select-mode-confirm:active:not(:disabled) {
    background: #222;
}

/* 操作选项弹窗 */

/* ========== 群聊设置 - 成员头像网格 ========== */
.group-member-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    padding: 12px 4px;
}

.group-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.group-grid-avatar {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.group-grid-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

.group-grid-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e8e8;
    color: #999;
    font-size: 18px;
    font-weight: 500;
}

.group-grid-name {
    font-size: 11px;
    color: #666;
    max-width: 56px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-grid-add .group-grid-avatar {
    border: 1.5px dashed #ccc;
    background: #fafafa;
    cursor: pointer;
}

/* ==================== BGM 音乐卡片 ==================== */
.bgm-card-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px 0 !important;
    clear: both;
    float: none !important;
}

.bgm-card-wrapper .chat-message-content {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: none !important;
}

.bgm-card-wrapper .chat-message-content::before,
.bgm-card-wrapper .chat-message-content::after {
    display: none !important;
}

.bgm-card-wrapper .chat-message-avatar {
    display: none !important;
}

.bgm-card {
    text-align: center;
    padding: 6px 0;
    max-width: 95%;
    margin: 0 auto;
    cursor: pointer;
    transition: opacity 0.3s;
    animation: bgm-fade-in 0.6s ease;
}

.bgm-card:active {
    opacity: 0.7;
}

.bgm-card .bgm-title {
    font-style: italic;
    font-size: 13px;
    white-space: nowrap;
}

.bgm-card .bgm-feeling {
    font-weight: bold;
    font-size: 12px;
    margin-top: 1em;
}

@keyframes bgm-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==================== 状态栏歌词独立浮层 ====================
 * 与 .status-bar 解耦：浮层不在 .status-bar 内，不会被
 * .status-bar.hidden 的 opacity:0 / translateY(-100%) 影响。
 * 即使用户在主题里关闭状态栏，歌词依然可见。
 *
 * 视觉位置完全复刻 .status-center：顶部 30px、水平居中、
 * 两侧各预留 80px 让位 .status-left(time) 和 .status-right(battery)。 */
.bgm-lyrics-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 80px;
    box-sizing: border-box;
    z-index: 1001;
    pointer-events: none;
    overflow: hidden;
}

.bgm-lyrics-display {
    display: none;
    font-size: 13px;
    font-weight: 400;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity 0.5s ease;
    /* 颜色由 chat-bgm.js 根据 song.color 动态设置（保持原本由 char 控制的逻辑），CSS 不写 color。 */
}

.bgm-lyrics-display.active {
    display: inline;
    opacity: 1;
}

.group-grid-add .group-grid-avatar span {
    font-size: 24px;
    color: #ccc;
    line-height: 1;
}

.group-grid-add:active .group-grid-avatar {
    background: #f0f0f0;
}
.novel-action-sheet {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 700;
}

.action-sheet-content {
    background: #fff;
    width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    animation: slideUp 0.25s ease;
}

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

.action-sheet-title {
    padding: 8px 0 16px;
    font-size: 13px;
    color: #999;
    text-align: center;
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action-sheet-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.action-sheet-options button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 8px;
    border: none;
    background: #f8f8f8;
    border-radius: 12px;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}

.action-sheet-options button:active {
    background: #eee;
    transform: scale(0.95);
}

.action-sheet-cancel {
    width: 100%;
    padding: 14px;
    border: none;
    background: #f5f5f5;
    border-radius: 12px;
    font-size: 15px;
    color: #666;
    cursor: pointer;
}

/* 选中文字操作栏 */
.novel-selection-toolbar {
    position: absolute;
    background: #333;
    border-radius: 8px;
    padding: 4px;
    display: flex;
    gap: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 500;
    transform: translateX(-50%);
}

.novel-selection-toolbar button {
    background: none;
    border: none;
    padding: 8px 10px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s;
}

.novel-selection-toolbar button:hover {
    background: rgba(255, 255, 255, 0.15);
}

.novel-selection-toolbar button:active {
    transform: scale(0.95);
}

/* 批注弹窗 */
.novel-annotate-modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 600;
}

.annotate-modal-content {
    background: #fff;
    border-radius: 16px;
    width: 85%;
    max-width: min(300px, 85%);
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.annotate-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    font-weight: 600;
    color: #333;
}

.annotate-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #999;
    cursor: pointer;
}

.annotate-quote {
    padding: 12px 16px;
    background: #f8f8f8;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    max-height: 80px;
    overflow-y: auto;
    border-left: 3px solid #ddd;
    margin: 12px 16px;
    border-radius: 4px;
}

.novel-annotate-modal textarea {
    width: calc(100% - 32px);
    margin: 0 16px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    resize: none;
    height: 80px;
    box-sizing: border-box;
}

.novel-annotate-modal textarea:focus {
    outline: none;
    border-color: #666;
}

.annotate-colors {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    justify-content: center;
}

.annotate-colors .color-option {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s;
}

.annotate-colors .color-option:hover {
    transform: scale(1.1);
}

.annotate-colors .color-option.active {
    border-color: #333;
}

.annotate-buttons {
    display: flex;
    border-top: 1px solid #eee;
}

.annotate-buttons button {
    flex: 1;
    padding: 14px;
    border: none;
    background: none;
    font-size: 15px;
    cursor: pointer;
}

.annotate-cancel {
    color: #666;
    border-right: 1px solid #eee !important;
}

.annotate-save {
    color: #333;
    font-weight: 500;
}

.annotate-buttons button:hover {
    background: #f5f5f5;
}

/* 批注查看弹窗 */
.novel-annotation-view {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 600;
}

.annotation-view-content {
    background: #fff;
    border-radius: 16px;
    width: 85%;
    max-width: min(280px, 85%);
    padding: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.annotation-view-quote {
    padding: 10px 12px;
    background: #f8f8f8;
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    border-left: 3px solid #ffeb3b;
    border-radius: 4px;
    margin-bottom: 12px;
}

.annotation-view-note {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
    padding: 8px 0;
    margin-bottom: 12px;
}

.annotation-view-buttons {
    display: flex;
    gap: 10px;
}

.annotation-view-buttons button {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.annotation-delete {
    background: #ffebee;
    color: #c62828;
}

.annotation-close {
    background: #333;
    color: #fff;
}

/* 高亮文字样式 */
.novel-highlight {
    background: rgba(255, 235, 59, 0.4);
    cursor: pointer;
    border-radius: 2px;
    padding: 0 1px;
}

.novel-highlight[data-color="#4caf50"] {
    background: rgba(76, 175, 80, 0.4);
}

.novel-highlight[data-color="#2196f3"] {
    background: rgba(33, 150, 243, 0.4);
}

.novel-highlight[data-color="#f44336"] {
    background: rgba(244, 67, 54, 0.4);
}

/* ==================== AI弹幕吐槽系统 ==================== */

/* AI下划线标记 */
.novel-ai-underline {
    border-bottom: 2px dashed #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.novel-ai-underline:hover {
    background: rgba(100, 100, 100, 0.1);
    border-bottom-color: #ff9800;
}

/* AI吐槽查看弹窗 */
.novel-ai-comment-view {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.ai-comment-view-content {
    background: #fff;
    border-radius: 12px;
    width: 85%;
    max-width: min(280px, 85%);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.ai-comment-view-quote {
    padding: 12px 16px;
    font-size: 13px;
    color: #666;
    background: #f8f8f8;
    border-left: 3px solid #666;
    font-style: italic;
    line-height: 1.4;
}

.ai-comment-view-text {
    padding: 16px;
    font-size: 15px;
    color: #333;
    line-height: 1.5;
}

.ai-comment-view-buttons {
    display: flex;
    border-top: 1px solid #eee;
}

.ai-comment-view-buttons button {
    flex: 1;
    padding: 14px;
    border: none;
    background: none;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.ai-comment-delete {
    background: #fff5f5 !important;
    color: #f44336;
    border-right: 1px solid #eee !important;
}

.ai-comment-close {
    color: #666;
}

.ai-comment-view-buttons button:hover {
    background: #f5f5f5 !important;
}

/* 设置提示文字 */
.setting-hint {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
    line-height: 1.3;
}

/* AI气泡容器 */
.novel-ai-bubbles {
    position: absolute;
    top: 0;
    right: 8px;
    bottom: 0;
    width: 0;
    pointer-events: none;
    z-index: 100;
}

/* 单个气泡 */
.ai-bubble {
    position: absolute;
    right: 0;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 6px 10px;
    border-radius: 12px 12px 2px 12px;
    font-size: 12px;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: bubbleIn 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
}

@keyframes bubbleIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.ai-bubble:hover {
    max-width: none;
    white-space: normal;
    z-index: 101;
}

/* AI弹幕容器 */
.novel-ai-danmaku {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 200;
}

/* 单条弹幕 */
.ai-danmaku-item {
    position: absolute;
    right: 0;
    white-space: nowrap;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9), 0 0 5px rgba(0, 0, 0, 0.5);
    animation: danmakuMove 6s linear forwards;
    pointer-events: none;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
}

@keyframes danmakuMove {
    0% { transform: translateX(100%); }
    100% { transform: translateX(calc(-100vw - 100%)); }
}

/* 夜间模式 - 选择模式和操作弹窗 */
.night-mode .novel-select-mode-tip {
    background: linear-gradient(135deg, #222, #333);
}

.night-mode .novel-select-mode-bar {
    background: #222;
    border-top-color: #333;
}

.night-mode .select-mode-cancel {
    background: #333;
    color: #aaa;
}

.night-mode .select-mode-confirm {
    background: #555;
}

.night-mode .select-mode-confirm:disabled {
    background: #333;
    color: #666;
}

.night-mode .action-sheet-content {
    background: #222;
}

.night-mode .action-sheet-title {
    color: #888;
    border-bottom-color: #333;
}

.night-mode .action-sheet-options button {
    background: #333;
    color: #ddd;
}

.night-mode .action-sheet-options button:active {
    background: #444;
}

.night-mode .action-sheet-cancel {
    background: #333;
    color: #aaa;
}

/* 夜间模式 - 划线批注 */
.night-mode .novel-selection-toolbar {
    background: #444;
}

.night-mode .annotate-modal-content,
.night-mode .annotation-view-content {
    background: #222;
}

.night-mode .annotate-header {
    border-bottom-color: #333;
    color: #eee;
}

.night-mode .annotate-quote,
.night-mode .annotation-view-quote {
    background: #2a2a2a;
    color: #aaa;
}

.night-mode .novel-annotate-modal textarea {
    background: #2a2a2a;
    border-color: #444;
    color: #eee;
}

.night-mode .annotate-buttons {
    border-top-color: #333;
}

.night-mode .annotate-cancel {
    color: #888;
    border-right-color: #333 !important;
}

.night-mode .annotate-save {
    color: #ccc;
}

.night-mode .annotate-buttons button:hover {
    background: #2a2a2a;
}

.night-mode .annotate-colors .color-option.active {
    border-color: #888;
}

.night-mode .annotation-view-note {
    color: #ccc;
}

.night-mode .annotation-delete {
    background: #3a2a2a;
    color: #f44336;
}

.night-mode .annotation-close {
    background: #444;
}

.night-mode .ai-bubble {
    background: rgba(255, 255, 255, 0.15);
}

.night-mode .novel-comment-btn {
    background: #444;
}

.night-mode .novel-comment-btn:hover {
    background: #555;
}

/* 夜间模式 - AI下划线和吐槽弹窗 */
.night-mode .novel-ai-underline {
    border-bottom-color: #888;
}

.night-mode .novel-ai-underline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-bottom-color: #ff9800;
}

.night-mode .ai-comment-view-content {
    background: #222;
}

.night-mode .ai-comment-view-quote {
    background: #2a2a2a;
    color: #aaa;
    border-left-color: #888;
}

.night-mode .ai-comment-view-text {
    color: #ccc;
}

.night-mode .ai-comment-view-buttons {
    border-top-color: #333;
}

.night-mode .ai-comment-delete {
    background: #3a2a2a !important;
    color: #f44336;
    border-right-color: #333 !important;
}

.night-mode .ai-comment-close {
    color: #888;
}

.night-mode .ai-comment-view-buttons button:hover {
    background: #2a2a2a !important;
}

.night-mode .setting-hint {
    color: #666;
}

/* ========================================
   视频播放器样式
   ======================================== */

/* ===== 视频架页面 ===== */
.video-shelf {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.video-shelf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.video-back-btn,
.video-add-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: all 0.2s ease;
}

.video-back-btn:hover,
.video-add-btn:hover {
    background: #f0f0f0;
    color: #333;
}

.video-back-btn svg,
.video-add-btn svg {
    width: 18px;
    height: 18px;
}

.video-shelf-title {
    font-size: 15px;
    font-weight: 500;
    color: #333;
}

.video-shelf-grid {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    align-content: start;
}

.video-shelf-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
}

.video-shelf-empty .empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.video-shelf-empty .empty-text {
    font-size: 14px;
    margin-bottom: 4px;
}

.video-shelf-empty .empty-hint {
    font-size: 12px;
    color: #bbb;
}

/* 视频卡片 */
.video-card {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.video-card:active {
    transform: scale(0.96);
}

.video-card-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #e0e0e0;
    margin-bottom: 6px;
}

.video-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-card-cover .cover-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #999;
}

.video-card-duration {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 3px;
}

.video-card-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: #666;
    border-radius: 0 0 0 8px;
}

.video-card-name {
    font-size: 12px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-card-size {
    font-size: 10px;
    color: #999;
    margin-top: 2px;
}

/* 大视频标记 */
.video-card-large-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 9px;
    padding: 2px 4px;
    border-radius: 3px;
}

/* ===== 视频播放页面 ===== */
.video-player {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#video-element {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* AI弹幕容器 */
.video-ai-danmaku {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 60px;
    pointer-events: none;
    overflow: hidden;
}

.video-danmaku-item {
    position: absolute;
    right: -100%;
    white-space: nowrap;
    color: #fff;
    font-size: 14px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0 0 4px rgba(0, 0, 0, 0.5);
    animation: videoDanmakuScroll 8s linear forwards;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

@keyframes videoDanmakuScroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100% - 100vw)); }
}

/* 字幕显示 */
.video-subtitle {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 90%;
    text-align: center;
    color: #fff;
    font-size: 14px;
    text-shadow: 1px 1px 2px #000, -1px -1px 2px #000;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}

.video-subtitle.show {
    opacity: 1;
}

/* 控制层 */
.video-controls {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.video-player.show-controls .video-controls {
    opacity: 1;
    pointer-events: auto;
}

/* 顶部栏 */
.video-top-bar {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
}

.video-ctrl-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
}

.video-ctrl-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.video-ctrl-btn svg {
    width: 20px;
    height: 20px;
}

.video-title {
    flex: 1;
    text-align: center;
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10px;
}

/* 中央播放按钮 */
.video-center-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0;
}

.video-player.paused .video-center-play {
    opacity: 1;
}

.video-center-play:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: translate(-50%, -50%) scale(1.1);
}

.video-center-play svg {
    width: 28px;
    height: 28px;
    margin-left: 4px;
}

/* 底部栏 */
.video-bottom-bar {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    gap: 10px;
}

.video-time {
    color: #fff;
    font-size: 12px;
    min-width: 40px;
    text-align: center;
}

.video-progress-wrap {
    flex: 1;
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
}

.video-progress {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    cursor: pointer;
}

.video-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.video-progress-buffered {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
    pointer-events: none;
}

/* ===== 添加视频弹窗 ===== */
.video-add-modal {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.video-modal-content {
    width: 90%;
    max-width: 320px;
    max-height: 85%;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.video-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.video-modal-header span {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.video-modal-close {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    font-size: 20px;
    color: #999;
    cursor: pointer;
}

.video-modal-body {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* 来源选择标签 */
.video-source-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.video-source-tab {
    flex: 1;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.video-source-tab.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* 文件上传区域 */
.video-file-upload {
    border: 2px dashed rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.video-file-upload:hover {
    border-color: rgba(0, 0, 0, 0.3);
    background: #fafafa;
}

.video-file-upload .upload-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.video-file-upload .upload-text {
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
}

.video-file-upload .upload-hint {
    font-size: 11px;
    color: #999;
}

.video-file-upload.has-file {
    border-style: solid;
    border-color: #666;
    background: #f5f5f5;
}

/* URL输入 */
.video-url-input {
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.video-url-input:focus {
    border-color: #666;
}

/* 视频信息区域 */
.video-info-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.video-form-row {
    margin-bottom: 14px;
}

.video-form-row label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 6px;
}

.video-form-row input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-size: 14px;
    outline: none;
}

.video-form-row input[type="text"]:focus {
    border-color: #666;
}

/* 封面上传 */
.video-cover-upload {
    width: 100%;
}

.video-cover-upload .cover-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #999;
    font-size: 12px;
    background: #fafafa;
    overflow: hidden;
}

.video-cover-upload .cover-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-cover-upload .cover-hint {
    font-size: 10px;
    color: #bbb;
    margin-top: 4px;
}

/* 字幕上传 */
.video-subtitle-upload {
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    cursor: pointer;
    color: #666;
    font-size: 13px;
    transition: all 0.2s;
}

.video-subtitle-upload:hover {
    border-color: #888;
    background: #fafafa;
}

.video-subtitle-upload.has-file {
    border-color: #666;
    background: #f5f5f5;
    color: #333;
}

/* 文件信息 */
.video-file-info {
    margin-top: 8px;
    padding: 8px 10px;
    background: #f5f5f5;
    border-radius: 6px;
    font-size: 11px;
    color: #666;
}

/* 弹窗底部 */
.video-modal-footer {
    display: flex;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.video-btn {
    flex: 1;
    padding: 14px;
    border: none;
    background: transparent;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
}

.video-btn-cancel {
    color: #666;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.video-btn-confirm {
    color: #333;
    font-weight: 500;
}

.video-btn-confirm:disabled {
    color: #ccc;
    cursor: not-allowed;
}

.video-btn:hover:not(:disabled) {
    background: #f5f5f5;
}

/* ===== 大视频重选弹窗 ===== */
.video-reselect-modal {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.reselect-content {
    width: 80%;
    max-width: 280px;
    background: #fff;
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
}

.reselect-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.reselect-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 12px;
}

.reselect-info {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    padding: 10px;
    background: #f5f5f5;
    border-radius: 6px;
    margin-bottom: 16px;
}

.reselect-btn {
    width: 100%;
    padding: 12px;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
    margin-bottom: 10px;
}

.reselect-btn:hover {
    background: #444;
}

.reselect-cancel {
    width: 100%;
    padding: 10px;
    background: transparent;
    color: #666;
    border: none;
    font-size: 14px;
    cursor: pointer;
}

/* ===== 视频设置面板 ===== */
.video-settings-panel {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    z-index: 100;
}

.video-settings-content {
    width: 100%;
    background: #fff;
    border-radius: 16px 16px 0 0;
    max-height: 70%;
    overflow: hidden;
}

.video-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.video-settings-header span {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.video-settings-close {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    font-size: 20px;
    color: #999;
    cursor: pointer;
}

.video-settings-body {
    padding: 16px;
    overflow-y: auto;
}

.video-setting-group {
    margin-bottom: 20px;
}

.video-setting-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
    color: #333;
}

.video-setting-value {
    color: #666;
    font-size: 13px;
}

.video-setting-slider {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: #e0e0e0;
    border-radius: 2px;
    cursor: pointer;
}

.video-setting-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #333;
    cursor: pointer;
}

/* 倍速选择 */
.video-speed-options {
    display: flex;
    gap: 8px;
}

.video-speed-btn {
    flex: 1;
    padding: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.video-speed-btn.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* 字幕选择 */
.video-subtitle-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-size: 14px;
    color: #333;
    background: #fff;
    cursor: pointer;
}

/* ===== 视频长按菜单 ===== */
.video-context-menu {
    position: absolute;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    z-index: 200;
    min-width: 140px;
}

.video-context-item {
    padding: 12px 16px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background 0.2s;
}

.video-context-item:hover {
    background: #f5f5f5;
}

.video-context-item:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.video-context-danger {
    color: #e74c3c;
}

/* ===== 夜间模式 - 视频播放器 ===== */
.night-mode .video-shelf {
    background: #1a1a1a;
}

.night-mode .video-shelf-header {
    background: #222;
    border-bottom-color: #333;
}

.night-mode .video-shelf-title {
    color: #eee;
}

.night-mode .video-back-btn,
.night-mode .video-add-btn {
    color: #999;
}

.night-mode .video-back-btn:hover,
.night-mode .video-add-btn:hover {
    background: #333;
    color: #eee;
}

.night-mode .video-shelf-empty {
    color: #666;
}

.night-mode .video-shelf-empty .empty-hint {
    color: #555;
}

.night-mode .video-card-cover {
    background: #333;
}

.night-mode .video-card-name {
    color: #ccc;
}

.night-mode .video-card-size {
    color: #666;
}

/* 夜间模式 - 弹窗 */
.night-mode .video-modal-content,
.night-mode .reselect-content,
.night-mode .video-settings-content {
    background: #222;
}

.night-mode .video-modal-header,
.night-mode .video-settings-header {
    border-bottom-color: #333;
}

.night-mode .video-modal-header span,
.night-mode .video-settings-header span,
.night-mode .reselect-title {
    color: #eee;
}

.night-mode .video-modal-close,
.night-mode .video-settings-close {
    color: #666;
}

.night-mode .video-source-tab {
    background: #333;
    border-color: #444;
    color: #999;
}

.night-mode .video-source-tab.active {
    background: #555;
    border-color: #555;
    color: #fff;
}

.night-mode .video-file-upload {
    border-color: #444;
}

.night-mode .video-file-upload:hover {
    border-color: #666;
    background: #2a2a2a;
}

.night-mode .video-file-upload .upload-text {
    color: #ccc;
}

.night-mode .video-url-input,
.night-mode .video-form-row input[type="text"] {
    background: #333;
    border-color: #444;
    color: #eee;
}

.night-mode .video-url-input:focus,
.night-mode .video-form-row input[type="text"]:focus {
    border-color: #666;
}

.night-mode .video-form-row label {
    color: #888;
}

.night-mode .video-cover-upload .cover-placeholder {
    background: #333;
    border-color: #444;
    color: #888;
}

.night-mode .video-subtitle-upload {
    border-color: #444;
    color: #888;
}

.night-mode .video-subtitle-upload:hover {
    border-color: #666;
    background: #2a2a2a;
}

.night-mode .video-info-section {
    border-top-color: #333;
}

.night-mode .video-file-info,
.night-mode .reselect-info {
    background: #333;
    color: #888;
}

.night-mode .video-modal-footer {
    border-top-color: #333;
}

.night-mode .video-btn-cancel {
    color: #888;
    border-right-color: #333;
}

.night-mode .video-btn-confirm {
    color: #eee;
}

.night-mode .video-btn-confirm:disabled {
    color: #555;
}

.night-mode .video-btn:hover:not(:disabled) {
    background: #333;
}

.night-mode .reselect-btn {
    background: #555;
}

.night-mode .reselect-btn:hover {
    background: #666;
}

.night-mode .reselect-cancel {
    color: #888;
}

.night-mode .video-setting-label {
    color: #ccc;
}

.night-mode .video-setting-value {
    color: #888;
}

.night-mode .video-setting-slider {
    background: #444;
}

.night-mode .video-setting-slider::-webkit-slider-thumb {
    background: #888;
}

.night-mode .video-speed-btn {
    background: #333;
    border-color: #444;
    color: #888;
}

.night-mode .video-speed-btn.active {
    background: #555;
    border-color: #555;
    color: #fff;
}

.night-mode .video-subtitle-select {
    background: #333;
    border-color: #444;
    color: #ccc;
}

.night-mode .video-context-menu {
    background: #2a2a2a;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.night-mode .video-context-item {
    color: #ccc;
}

.night-mode .video-context-item:hover {
    background: #333;
}

.night-mode .video-context-item:not(:last-child) {
    border-bottom-color: #333;
}

/* ========================================
   漫画阅读器样式
   ======================================== */

/* 漫画架 */
.manga-shelf {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    z-index: 10;
}

.manga-shelf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    flex-shrink: 0;
}

.manga-shelf-title {
    font-size: 17px;
    font-weight: 600;
    color: #333;
}

.manga-back-btn,
.manga-add-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    transition: all 0.2s;
}

.manga-back-btn:hover,
.manga-add-btn:hover {
    background: #f0f0f0;
    color: #333;
}

.manga-back-btn svg,
.manga-add-btn svg {
    width: 20px;
    height: 20px;
}

.manga-shelf-grid {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-content: start;
}

.manga-shelf-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
}

.manga-empty-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    color: #999;
}

.manga-empty-icon svg {
    width: 100%;
    height: 100%;
}

.manga-empty-text {
    font-size: 16px;
    margin-bottom: 4px;
}

.manga-empty-hint {
    font-size: 13px;
    color: #bbb;
}

/* 漫画卡片 */
.manga-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.manga-card:active {
    transform: scale(0.97);
}

.manga-card-cover {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    background: #eee;
    display: block;
}

.manga-card-info {
    padding: 8px;
}

.manga-card-name {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.manga-card-meta {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}

/* 漫画阅读器 */
.manga-reader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    display: flex;
    flex-direction: column;
    z-index: 15;
}

.manga-reader-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.manga-reader-header.show {
    opacity: 1;
    pointer-events: auto;
}

.manga-reader-back,
.manga-reader-settings-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
}

.manga-reader-back svg,
.manga-reader-settings-btn svg {
    width: 22px;
    height: 22px;
}

.manga-reader-title {
    flex: 1;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 8px;
}

/* 页面容器 */
.manga-page-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.manga-page-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.manga-scroll-container {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.manga-scroll-container img {
    width: 100%;
    display: block;
}

/* AI弹幕 */
.manga-ai-danmaku {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 80px;
    pointer-events: none;
    overflow: hidden;
    z-index: 10;
}

.manga-danmaku-item {
    position: absolute;
    white-space: nowrap;
    font-size: 16px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    animation: mangaDanmakuMove 8s linear forwards;
    right: -100%;
}

@keyframes mangaDanmakuMove {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100vw - 100%)); }
}

/* 控制栏 */
.manga-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 16px 12px 12px;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.manga-controls.show {
    opacity: 1;
    pointer-events: auto;
}

.manga-progress-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.manga-chapter-name {
    font-size: 13px;
    color: #ccc;
}

.manga-page-info {
    font-size: 13px;
    color: #999;
}

.manga-progress-bar {
    margin-bottom: 12px;
}

.manga-progress-bar input[type="range"] {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: #444;
    border-radius: 2px;
    outline: none;
}

.manga-progress-bar input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
}

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

.manga-ctrl-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: background 0.2s;
}

.manga-ctrl-btn:active {
    background: rgba(255, 255, 255, 0.2);
}

.manga-ctrl-btn svg {
    width: 20px;
    height: 20px;
}

.manga-chapters-btn {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
}

.manga-chapters-btn svg {
    width: 24px;
    height: 24px;
}

/* 弹窗通用样式 */
.manga-add-modal,
.manga-reselect-modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.manga-modal-content {
    width: 85%;
    max-width: 320px;
    max-height: 85%;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.manga-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.manga-modal-header span {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.manga-modal-close {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.manga-modal-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}

.manga-modal-footer {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid #eee;
    flex-shrink: 0;
}

.manga-cancel-btn,
.manga-confirm-btn {
    flex: 1;
    height: 40px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.manga-cancel-btn {
    background: #f0f0f0;
    color: #666;
}

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

/* 导入选项 */
.manga-import-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.manga-import-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 12px;
    border: 1px dashed #ddd;
    border-radius: 8px;
    background: #fafafa;
    cursor: pointer;
    transition: all 0.2s;
}

.manga-import-btn:hover {
    border-color: #999;
    background: #f5f5f5;
}

.manga-import-btn svg {
    width: 28px;
    height: 28px;
    color: #666;
}

.manga-import-btn span {
    font-size: 12px;
    color: #666;
    text-align: center;
}

/* 导入信息 */
.manga-import-info {
    margin-top: 16px;
}

.manga-info-row {
    margin-bottom: 12px;
}

.manga-info-row label {
    display: block;
    font-size: 13px;
    color: #666;
    margin-bottom: 4px;
}

.manga-info-row input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}

.manga-info-row input:focus {
    border-color: #999;
}

.manga-info-preview {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eee;
}

.manga-info-preview img {
    width: 80px;
    height: 107px;
    object-fit: cover;
    border-radius: 4px;
    background: #eee;
}

.manga-info-stats {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    color: #666;
}

/* 导入进度 */
.manga-import-progress {
    text-align: center;
    padding: 20px 0;
}

.manga-progress-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
}

.manga-progress-bar-container {
    height: 4px;
    background: #eee;
    border-radius: 2px;
    overflow: hidden;
}

.manga-progress-bar-fill {
    height: 100%;
    background: #333;
    width: 0;
    transition: width 0.3s;
}

/* 重选弹窗 */
.manga-reselect-info {
    text-align: center;
    padding: 20px 0;
}

.manga-reselect-info p {
    font-size: 14px;
    color: #666;
    margin: 0 0 8px;
}

.manga-reselect-name {
    font-weight: 600;
    color: #333 !important;
    margin-top: 12px !important;
}

.manga-reselect-btn {
    width: 100%;
    height: 44px;
    border: none;
    background: #333;
    color: #fff;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    margin-top: 16px;
}

/* 章节面板 */
.manga-chapter-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 60%;
    background: #fff;
    border-radius: 12px 12px 0 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
}

.manga-chapter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.manga-chapter-header span {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.manga-chapter-close {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    font-size: 22px;
    color: #999;
    cursor: pointer;
}

.manga-chapter-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.manga-chapter-item {
    padding: 12px 16px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background 0.2s;
}

.manga-chapter-item:hover {
    background: #f5f5f5;
}

.manga-chapter-item.active {
    color: #000;
    font-weight: 600;
    background: #f0f0f0;
}

/* 设置面板 */
.manga-settings-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 12px 12px 0 0;
    z-index: 30;
}

.manga-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
}

.manga-settings-header span {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.manga-settings-close {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    font-size: 22px;
    color: #999;
    cursor: pointer;
}

.manga-settings-body {
    padding: 16px;
}

.manga-setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.manga-setting-item:last-child {
    margin-bottom: 0;
}

.manga-setting-label {
    font-size: 14px;
    color: #333;
}

.manga-setting-options {
    display: flex;
    gap: 8px;
}

.manga-mode-btn {
    padding: 6px 16px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 6px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.manga-mode-btn.active {
    border-color: #333;
    background: #333;
    color: #fff;
}

/* 右键菜单 */
.manga-context-menu {
    position: absolute;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 200;
    min-width: 140px;
    overflow: hidden;
}

.manga-context-item {
    padding: 12px 16px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: background 0.2s;
}

.manga-context-item:hover {
    background: #f5f5f5;
}

.manga-context-item:not(:last-child) {
    border-bottom: 1px solid #eee;
}

.manga-context-danger {
    color: #e74c3c;
}

/* ========================================
   漫画阅读器 - 夜间模式
   ======================================== */

.night-mode .manga-shelf {
    background: #1a1a1a;
}

.night-mode .manga-shelf-header {
    background: #222;
    border-bottom-color: #333;
}

.night-mode .manga-shelf-title {
    color: #eee;
}

.night-mode .manga-back-btn,
.night-mode .manga-add-btn {
    color: #999;
}

.night-mode .manga-back-btn:hover,
.night-mode .manga-add-btn:hover {
    background: #333;
    color: #eee;
}

.night-mode .manga-shelf-empty {
    color: #666;
}

.night-mode .manga-empty-icon {
    color: #555;
}

.night-mode .manga-empty-hint {
    color: #555;
}

.night-mode .manga-card {
    background: #2a2a2a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.night-mode .manga-card-cover {
    background: #333;
}

.night-mode .manga-card-name {
    color: #ccc;
}

.night-mode .manga-card-meta {
    color: #666;
}

.night-mode .manga-modal-content,
.night-mode .manga-chapter-panel,
.night-mode .manga-settings-panel {
    background: #222;
}

.night-mode .manga-modal-header,
.night-mode .manga-chapter-header,
.night-mode .manga-settings-header {
    border-bottom-color: #333;
}

.night-mode .manga-modal-header span,
.night-mode .manga-chapter-header span,
.night-mode .manga-settings-header span {
    color: #eee;
}

.night-mode .manga-modal-close,
.night-mode .manga-chapter-close,
.night-mode .manga-settings-close {
    color: #666;
}

.night-mode .manga-modal-footer {
    border-top-color: #333;
}

.night-mode .manga-cancel-btn {
    background: #333;
    color: #999;
}

.night-mode .manga-confirm-btn {
    background: #444;
}

.night-mode .manga-import-btn {
    border-color: #444;
    background: #2a2a2a;
}

.night-mode .manga-import-btn:hover {
    border-color: #555;
    background: #333;
}

.night-mode .manga-import-btn svg,
.night-mode .manga-import-btn span {
    color: #888;
}

.night-mode .manga-info-row label {
    color: #888;
}

.night-mode .manga-info-row input {
    background: #333;
    border-color: #444;
    color: #ccc;
}

.night-mode .manga-info-row input:focus {
    border-color: #555;
}

.night-mode .manga-info-preview {
    border-top-color: #333;
}

.night-mode .manga-info-preview img {
    background: #333;
}

.night-mode .manga-info-stats {
    color: #888;
}

.night-mode .manga-progress-bar-container {
    background: #333;
}

.night-mode .manga-progress-bar-fill {
    background: #666;
}

.night-mode .manga-reselect-info p {
    color: #888;
}

.night-mode .manga-reselect-name {
    color: #ccc !important;
}

.night-mode .manga-reselect-btn {
    background: #444;
}

.night-mode .manga-chapter-list {
    background: #222;
}

.night-mode .manga-chapter-item {
    color: #ccc;
}

.night-mode .manga-chapter-item:hover {
    background: #2a2a2a;
}

.night-mode .manga-chapter-item.active {
    color: #fff;
    background: #333;
}

.night-mode .manga-setting-label {
    color: #ccc;
}

.night-mode .manga-mode-btn {
    background: #333;
    border-color: #444;
    color: #888;
}

.night-mode .manga-mode-btn.active {
    background: #555;
    border-color: #555;
    color: #fff;
}

.night-mode .manga-context-menu {
    background: #2a2a2a;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.night-mode .manga-context-item {
    color: #ccc;
}

.night-mode .manga-context-item:hover {
    background: #333;
}

.night-mode .manga-context-item:not(:last-child) {
    border-bottom-color: #333;
}

/* ===== IF线样式 ===== */

/* IF线标签（灰色文字，在标题旁显示） */
.ifline-badge {
    font-size: 12px;
    font-weight: 400;
    color: #999;
    margin-left: 2px;
    cursor: pointer;
    user-select: none;
}

.phone-frame.night-mode .ifline-badge {
    color: #777;
}

/* IF线 锁按钮 */
.ifline-lock-btn {
    display: none;             /* 仅在 IF线 active/restore 后由 JS 切到 inline-flex */
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 4px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #999;               /* 默认灰色（解锁外观） */
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.ifline-lock-btn:active {
    background: rgba(0, 0, 0, 0.06);
}
.ifline-lock-btn.locked {
    color: #555;               /* 锁定态：颜色加深 */
    background: rgba(0, 0, 0, 0.04);
}
.phone-frame.night-mode .ifline-lock-btn {
    color: #777;
}
.phone-frame.night-mode .ifline-lock-btn.locked {
    color: #bbb;
    background: rgba(255, 255, 255, 0.06);
}

/* IF线氛围条 */
.ifline-atmosphere-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    user-select: none;
    min-height: 24px;
}

.ifline-atmosphere-text {
    font-size: 11px;
    color: #999;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.phone-frame.night-mode .ifline-atmosphere-bar {
    background: rgba(255, 255, 255, 0.03);
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.phone-frame.night-mode .ifline-atmosphere-text {
    color: #777;
}

/* IF线折叠消息提示 */
.ifline-collapsed-hint {
    text-align: center;
    padding: 12px;
    color: #999;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}

.ifline-collapsed-hint:active {
    color: #666;
}

/* IF线弹窗 */
.ifline-modal-overlay {
    z-index: 10001;
}

.ifline-dialog {
    width: 90%;
    max-width: 340px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.ifline-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* IF线会话列表 */
.ifline-section {
    margin-bottom: 16px;
}

.ifline-section-title {
    font-size: 13px;
    font-weight: 500;
    color: #666;
    margin-bottom: 10px;
}

.ifline-session-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ifline-empty-list {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 13px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 8px;
}

.ifline-session-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: white;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    gap: 10px;
}

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

.ifline-session-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ifline-session-preview {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ifline-session-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 11px;
    color: #999;
    gap: 2px;
}

.ifline-session-continue {
    padding: 6px 12px;
    background: #f0f0f0;
    color: #333;
    border: none;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.ifline-session-continue:active {
    transform: scale(0.95);
}

.ifline-session-delete {
    padding: 6px;
    background: transparent;
    color: #ccc;
    border: none;
    cursor: pointer;
    border-radius: 50%;
}

.ifline-session-delete:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #999;
}

/* IF线分隔线 */
.ifline-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    color: #999;
    font-size: 12px;
}

.ifline-divider::before,
.ifline-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
}

.ifline-divider span {
    padding: 0 12px;
}

/* IF线表单 */
.ifline-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ifline-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ifline-label {
    font-size: 13px;
    font-weight: 500;
    color: #555;
}

.ifline-label-hint {
    font-weight: 400;
    color: #999;
    font-size: 11px;
}

.ifline-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 14px;
    background: white;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.ifline-input:focus {
    outline: none;
    border-color: #999;
}

.ifline-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 14px;
    background: white;
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
    box-sizing: border-box;
}

.ifline-textarea:focus {
    outline: none;
    border-color: #999;
}

/* IF线选项 */
.ifline-options {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ifline-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
}

.ifline-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #888;
}

/* IF线创建按钮 */
.ifline-create-btn {
    width: 100%;
    padding: 12px;
    background: #333;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
    transition: all 0.2s ease;
}

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

/* IF线表单 details 折叠区 */
.ifline-details {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow: hidden;
}

.ifline-details[open] {
    border-color: rgba(0, 0, 0, 0.12);
}

.ifline-details-summary {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    user-select: none;
    list-style: none;
    background: rgba(0, 0, 0, 0.02);
}

.ifline-details-summary::-webkit-details-marker {
    display: none;
}

.ifline-details-summary::after {
    content: '▶';
    margin-left: auto;
    font-size: 10px;
    color: #999;
    transition: transform 0.2s;
}

.ifline-details[open] > .ifline-details-summary::after {
    transform: rotate(90deg);
}

.ifline-details-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* IF线图标选择器组 */
.ifline-icon-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ifline-icon-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: rgba(0, 0, 0, 0.04);
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
}

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

.ifline-icon-btn.selected {
    border-color: #666;
    background: rgba(0, 0, 0, 0.08);
}

/* IF线 textarea 小号 */
.ifline-textarea-sm {
    min-height: 50px;
}

/* IF线 radio 和 select */
.ifline-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ifline-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
}

.ifline-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #888;
}

.ifline-time-options {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ifline-input select,
select.ifline-input {
    appearance: auto;
}

/* IF线控制面板 */
.ifline-control-panel-overlay {
    z-index: 10002;
}

.ifline-cp-dialog {
    width: 85%;
    max-width: 320px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.ifline-cp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ifline-cp-label {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.ifline-cp-body {
    padding: 16px;
}

.ifline-cp-info {
    margin-bottom: 12px;
}

.ifline-cp-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.ifline-cp-world {
    font-size: 12px;
    color: #888;
    line-height: 1.5;
    max-height: 60px;
    overflow-y: auto;
}

.ifline-cp-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 12px;
    color: #999;
}

.ifline-cp-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ifline-cp-action-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.ifline-cp-action-btn:active {
    transform: scale(0.98);
}

.ifline-cp-end {
    background: #333;
    color: white;
}

.ifline-cp-review-close {
    background: #f0f0f0;
    color: #333;
}

/* IF线控制面板设置区 */
.ifline-cp-settings {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

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

.ifline-cp-setting-label {
    font-size: 13px;
    color: #666;
}

.ifline-cp-setting-input {
    width: 64px;
    height: 30px;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    color: #333;
    background: #f8f8f8;
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.ifline-cp-setting-input::-webkit-inner-spin-button,
.ifline-cp-setting-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ifline-cp-setting-input:focus {
    border-color: #07c160;
}

/* IF线缓存记忆按钮 */
.ifline-cp-cache {
    background: #f0f7ff;
    color: #1e88e5;
    border: 1px solid rgba(30, 136, 229, 0.15);
}

.ifline-cp-cache:active {
    background: #d6ebff;
}

.ifline-cp-cache:disabled {
    background: #f5f5f5;
    color: #bbb;
    border-color: #eee;
}

/* IF线结束进度UI */
.ifline-finish-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.ifline-finish-dialog {
    background: white;
    border-radius: 14px;
    padding: 24px;
    width: 260px;
    text-align: center;
}

.ifline-finish-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}

.ifline-finish-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
}

.ifline-finish-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #999;
}

.ifline-finish-step.active {
    color: #333;
}

.ifline-finish-step.done {
    color: #07c160;
}

.ifline-finish-step.failed {
    color: #e53935;
}

.ifline-fp-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.ifline-fp-icon.loading {
    animation: ifline-spin 1s linear infinite;
}

@keyframes ifline-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* IF线控制面板夜间模式 */
.phone-frame.night-mode .ifline-cp-dialog {
    background: rgba(30, 30, 30, 0.97);
}

.phone-frame.night-mode .ifline-cp-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .ifline-cp-label,
.phone-frame.night-mode .ifline-cp-title {
    color: #eee;
}

.phone-frame.night-mode .ifline-cp-world {
    color: #888;
}

/* IF线表单夜间模式补充 */
.phone-frame.night-mode .ifline-details {
    border-color: rgba(255, 255, 255, 0.1);
}

.phone-frame.night-mode .ifline-details-summary {
    color: #bbb;
    background: rgba(255, 255, 255, 0.03);
}

.phone-frame.night-mode .ifline-icon-btn {
    background: rgba(255, 255, 255, 0.06);
}

.phone-frame.night-mode .ifline-icon-btn.selected {
    background: rgba(255, 255, 255, 0.12);
    border-color: #888;
}

.phone-frame.night-mode .ifline-radio {
    color: #bbb;
}

/* IF线开始提示 */
.ifline-start-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #999;
    text-align: center;
}

.ifline-start-hint .hint-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.ifline-start-hint .hint-text {
    font-size: 15px;
    font-weight: 500;
    color: #666;
    margin-bottom: 4px;
}

.ifline-start-hint .hint-subtext {
    font-size: 13px;
    color: #999;
}

/* IF线夜间模式 */
.phone-frame.night-mode .ifline-dialog {
    background: rgba(30, 30, 30, 0.97);
    border-color: rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .ifline-section-title {
    color: #aaa;
}

.phone-frame.night-mode .ifline-empty-list {
    background: rgba(255, 255, 255, 0.05);
    color: #777;
}

.phone-frame.night-mode .ifline-session-item {
    background: #2a2a2a;
    border-color: #333;
}

.phone-frame.night-mode .ifline-session-title {
    color: #eee;
}

.phone-frame.night-mode .ifline-session-preview {
    color: #888;
}

.phone-frame.night-mode .ifline-session-continue {
    background: #3a3a3a;
    color: #ddd;
}

.phone-frame.night-mode .ifline-create-btn {
    background: #e0e0e0;
    color: #222;
}

.phone-frame.night-mode .ifline-cp-end {
    background: #e0e0e0;
    color: #222;
}

.phone-frame.night-mode .ifline-cp-review-close {
    background: #3a3a3a;
    color: #ddd;
}

.phone-frame.night-mode .ifline-cp-settings {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .ifline-cp-setting-label {
    color: #aaa;
}

.phone-frame.night-mode .ifline-cp-setting-input {
    background: #2a2a2a;
    border-color: #444;
    color: #eee;
}

.phone-frame.night-mode .ifline-cp-cache {
    background: rgba(30, 136, 229, 0.12);
    color: #64b5f6;
    border-color: rgba(100, 181, 246, 0.2);
}

.phone-frame.night-mode .ifline-finish-dialog {
    background: #2a2a2a;
}

.phone-frame.night-mode .ifline-finish-title {
    color: #eee;
}

.phone-frame.night-mode .ifline-finish-step {
    color: #888;
}

.phone-frame.night-mode .ifline-finish-step.active {
    color: #eee;
}

.phone-frame.night-mode .ifline-finish-step.done {
    color: #4caf50;
}

.phone-frame.night-mode .ifline-finish-step.failed {
    color: #ef5350;
}

.phone-frame.night-mode .ifline-divider {
    color: #666;
}

.phone-frame.night-mode .ifline-label {
    color: #bbb;
}

.phone-frame.night-mode .ifline-input,
.phone-frame.night-mode .ifline-textarea {
    background: #2a2a2a;
    border-color: #444;
    color: #eee;
}

.phone-frame.night-mode .ifline-checkbox {
    color: #bbb;
}

.phone-frame.night-mode .ifline-start-hint .hint-text {
    color: #aaa;
}

.phone-frame.night-mode .ifline-start-hint .hint-subtext {
    color: #777;
}

/* IF线已完成会话样式 */
.ifline-completed-details {
    margin-top: 16px;
}

.ifline-session-completed {
    opacity: 0.75;
}

.ifline-session-completed .ifline-session-continue {
    background: transparent;
    color: #888;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.phone-frame.night-mode .ifline-session-completed .ifline-session-continue {
    color: #999;
    border-color: rgba(255, 255, 255, 0.12);
}

/* IF线卡片样式 */
.ifline-card-message .message-content {
    padding: 0 !important;
    background: transparent !important;
}

.ifline-card {
    width: 240px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.ifline-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ifline-card-icon {
    font-size: 14px;
}

.ifline-card-label {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

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

.ifline-card-summary {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 10px;
    font-style: italic;
}

.ifline-card-meta {
    font-size: 12px;
    color: #888;
    margin-bottom: 4px;
}

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

.ifline-card-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

.ifline-card-footer svg {
    stroke: #666;
}

/* IF线卡片夜间模式 */
.phone-frame.night-mode .ifline-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.phone-frame.night-mode .ifline-card-label {
    color: #aaa;
}

.phone-frame.night-mode .ifline-card-title {
    color: #eee;
}

.phone-frame.night-mode .ifline-card-summary {
    color: #aaa;
}

.phone-frame.night-mode .ifline-card-footer {
    border-top-color: rgba(255, 255, 255, 0.08);
    color: #aaa;
}

.phone-frame.night-mode .ifline-card-footer svg {
    stroke: #aaa;
}

/* ===== 暂时隐藏未完成的日程设置 ===== */
#schedule-section-wrapper { display: none !important; }

/* ===== 日历国家选择器弹窗 ===== */
.calendar-country-modal {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9999;
    display: none;
    align-items: flex-end;
    justify-content: center;
}
.calendar-country-modal.active {
    display: flex;
}
.calendar-country-list {
    background: #fff;
    border-radius: 12px 12px 0 0;
    width: 100%;
    max-width: 430px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 16px 0 24px;
}
.calendar-country-list-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    text-align: center;
    padding: 0 16px 12px;
    border-bottom: 1px solid #eee;
}
.calendar-country-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
}
.calendar-country-item:active {
    background: #f0f0f0;
}
.calendar-country-item.selected {
    color: #007aff;
    font-weight: 600;
}
.calendar-country-item .country-check {
    margin-left: auto;
    color: #007aff;
    font-size: 16px;
}

/* 夜间模式适配 */
.phone-frame.night-mode .calendar-country-list {
    background: #1c1c1e;
}
.phone-frame.night-mode .calendar-country-list-title {
    color: #eee;
    border-bottom-color: #333;
}
.phone-frame.night-mode .calendar-country-item {
    color: #ddd;
    border-bottom-color: #2c2c2e;
}
.phone-frame.night-mode .calendar-country-item:active {
    background: #2c2c2e;
}
.phone-frame.night-mode #calendar-country-label {
    color: #ddd !important;
}
.phone-frame.night-mode .calendar-virtual-banner {
    background: rgba(44, 44, 46, 0.6) !important;
    color: #ccc !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}
.phone-frame.night-mode .calendar-country-selector {
    background: rgba(44, 44, 46, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
}
.phone-frame.night-mode .calendar-country-selector:active {
    background: rgba(55, 55, 57, 0.6);
}

/* ==================== 形象库页面 ==================== */

#character-gallery {
    background: #fafafa;
}

.gallery-wrapper {
    padding: 16px 20px;
}

/* 添加按钮 */
.gallery-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background: white;
    border: 2.5px dashed #ffe5f0;
    border-radius: 16px;
    color: #ff85a2;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 16px;
}

.gallery-add-btn:active {
    transform: scale(0.97);
    background: #fff0f5;
}

.gallery-add-btn svg {
    color: #ff85a2;
}

/* 形象网格 — 2列 */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

/* 单个形象卡片 */
.gallery-item {
    background: white;
    border: 2.5px solid #ffe5f0;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(255, 229, 240, 0.3);
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.gallery-item img {
    -webkit-touch-callout: none;
    pointer-events: none;
}

.gallery-item:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(255, 217, 235, 0.4);
}

.gallery-item.is-global::after {
    content: '⭐';
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 16px;
    z-index: 1;
}

.gallery-item.is-default::before {
    content: '默认';
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 10px;
    background: #ff85a2;
    color: white;
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 600;
    z-index: 1;
}

/* 预览图区域 */
.gallery-item-preview {
    width: 100%;
    aspect-ratio: 1;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gallery-item-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 信息区域 */
.gallery-item-info {
    padding: 10px 12px;
}

.gallery-item-name {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-item-meta {
    font-size: 11px;
    color: #999;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 空状态 */
.gallery-empty {
    text-align: center;
    padding: 60px 20px;
}

.gallery-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.4;
}

.gallery-empty-text {
    font-size: 16px;
    color: #999;
    font-weight: 600;
    margin-bottom: 8px;
}

.gallery-empty-hint {
    font-size: 13px;
    color: #bbb;
}

/* ==================== 底部弹出面板 (形象库通用) ==================== */

.gallery-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.gallery-overlay-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.gallery-add-panel,
.gallery-menu-panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: white;
    border-radius: 20px 20px 0 0;
    padding: 20px;
    animation: gallerySlideUp 0.25s ease;
}

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

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

.gallery-add-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gallery-add-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #fafafa;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gallery-add-option:active {
    background: #fff0f5;
    transform: scale(0.98);
}

.option-icon {
    font-size: 28px;
    flex-shrink: 0;
}

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

.option-desc {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

.gallery-add-cancel {
    margin-top: 12px;
    padding: 14px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    border-radius: 14px;
    transition: background 0.2s;
}

.gallery-add-cancel:active {
    background: #f5f5f5;
}

/* ==================== 长按操作菜单 ==================== */

.gallery-menu-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    border-radius: 12px;
    transition: background 0.2s;
}

.gallery-menu-option:active {
    background: #f5f5f5;
}

.gallery-menu-option.danger {
    color: #fa5151;
}

.gallery-menu-option span {
    font-size: 18px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

/* 动作动画面板（多帧） */
.gallery-frames-title { font-size: 16px; font-weight: 700; color: #333; margin-bottom: 14px; }
.gallery-frames-slot { padding: 12px 0; border-top: 1px solid #f0f0f0; }
.gallery-frames-slot-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #333; margin-bottom: 10px; }
.gallery-frames-count { font-size: 12px; font-weight: 500; color: #07c160; background: #e8f9ef; padding: 2px 8px; border-radius: 10px; }
.gallery-frames-actions { display: flex; gap: 8px; }
.gallery-frames-btn { flex: 1; padding: 10px; font-size: 13px; font-weight: 500; color: #333; background: #f5f5f5; border: none; border-radius: 10px; cursor: pointer; }
.gallery-frames-btn:active { background: #eaeaea; }
.gallery-frames-btn.danger { color: #fa5151; }
.gallery-frames-hint { font-size: 12px; color: #999; line-height: 1.5; margin: 12px 0 4px; }
.gallery-frames-fps { margin-left: auto; font-size: 13px; padding: 4px 8px; border-radius: 8px; border: 1px solid #e0e0e0; background: #fff; color: #333; }

/* ==================== 预览弹窗 ==================== */

.gallery-preview-panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: white;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    animation: gallerySlideUp 0.25s ease;
}

.gallery-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.gallery-preview-header span {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.gallery-preview-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 14px;
    color: #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.gallery-preview-close:active {
    background: #e5e5e5;
}

.gallery-preview-body {
    width: 100%;
    height: 320px;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-preview-body img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.gallery-preview-body model-viewer {
    width: 100%;
    height: 100%;
}

.gallery-preview-info {
    padding: 12px 20px 20px;
    font-size: 12px;
    color: #999;
    display: flex;
    gap: 16px;
}

/* === AI 3D 生成面板 === */
.gen3d-api-config { margin-bottom: 14px; }
.gen3d-api-toggle { padding: 8px 12px; background: #f8f8f8; border-radius: 10px; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.gen3d-api-toggle:active { background: #f0f0f0; }
.gen3d-api-fields { padding: 10px 0 0; }
.gen3d-mode-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.gen3d-tab { flex: 1; padding: 10px; text-align: center; border-radius: 10px; background: #f5f5f5; font-size: 13px; cursor: pointer; transition: all 0.2s; }
.gen3d-tab.active { background: #ff6b9d; color: white; }
.gen3d-upload-area { border: 2px dashed #ddd; border-radius: 14px; padding: 24px; text-align: center; cursor: pointer; transition: border-color 0.2s; min-height: 120px; display: flex; align-items: center; justify-content: center; }
.gen3d-upload-area.has-image { border-style: solid; border-color: #ff6b9d; }
.gen3d-spinner { width: 16px; height: 16px; border: 2px solid #ddd; border-top-color: #ff6b9d; border-radius: 50%; animation: gen3d-spin 0.8s linear infinite; }
@keyframes gen3d-spin { to { transform: rotate(360deg); } }
.gen3d-progress-bar { height: 4px; background: #eee; border-radius: 2px; margin-top: 8px; overflow: hidden; }
.gen3d-progress-fill { height: 100%; background: linear-gradient(90deg, #ff6b9d, #ff8fab); border-radius: 2px; width: 0%; transition: width 0.5s ease; }
.gen3d-btn { flex: 1; padding: 12px; border: none; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.gen3d-btn.primary { background: #ff6b9d; color: white; }
.gen3d-btn.primary:active { background: #e5558a; }
.gen3d-btn.primary:disabled { background: #ccc; cursor: not-allowed; }
.gen3d-btn.secondary { background: #f5f5f5; color: #666; }
.gen3d-btn.secondary:active { background: #e8e8e8; }

/* ===== 桌宠浮动系统 ===== */

#desktop-pet-float {
    position: absolute;
    z-index: 500;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
    transition: width 0.15s ease, height 0.15s ease;
    /* 性能：提升为独立合成层，使内部桌宠动画/3D 渲染不再逐帧弄脏主图层、触发下层 backdrop-filter 重算 */
    will-change: transform;
    /* pinch 缩放用 transform: scale 时从左上角生长，与 width/height 一致，松手提交无跳变 */
    transform-origin: 0 0;
}

#desktop-pet-float:active {
    cursor: grabbing;
}

#pet-touch-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: none;
}

#pet-render-area {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    /* 性能：重绘/布局隔离 + 独立 GPU 层（仅含 img/model-viewer，已 overflow:hidden，不裁可见物） */
    contain: layout paint;
    transform: translateZ(0);
}

#pet-render-area img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    /* 性能：动画元素钉在 GPU，稳定合成层 */
    will-change: transform;
    backface-visibility: hidden;
    transition: transform 0.15s ease;
}

#pet-render-area model-viewer {
    width: 100%;
    height: 100%;
}

/* 2D 动画预设 */
@keyframes pet-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
@keyframes pet-sway {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}
@keyframes pet-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes pet-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

#pet-render-area.anim-breathe img {
    animation: pet-breathe 3s ease-in-out infinite;
}
#pet-render-area.anim-sway img {
    animation: pet-sway 3s ease-in-out infinite;
}
#pet-render-area.anim-bounce img {
    animation: pet-bounce 1.5s ease-in-out infinite;
}
#pet-render-area.anim-float img {
    animation: pet-float 4s ease-in-out infinite;
}
#pet-render-area.is-gif img {
    animation: none !important;
}

/* 活泼模式：朝向翻转（img）+ 落地压扁（父容器，独立元素互不冲突） */
#pet-render-area img.pet-face-left { transform: scaleX(-1); }
/* 活泼模式 P3：身体动作层（作用于容器，纯 rotate/scale 不裁切；规则放在 .pet-squash 之前 → 落地时两类共存 squash 源序靠后胜出，280ms 后自然露出 breathe） */
@keyframes pet-bm-breathe { 0%,100% { transform: scale(1); }        50% { transform: scale(1.03); } }
@keyframes pet-bm-walk    { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes pet-bm-climb   { 0%,100% { transform: rotate(-3deg); }   50% { transform: rotate(3deg); } }
@keyframes pet-bm-crouch  { 0% { transform: scaleY(1); } 55% { transform: scaleY(0.82) scaleX(1.08); } 100% { transform: scaleY(1); } }
#pet-render-area.pet-bm-breathe { transform-origin: bottom center; animation: pet-bm-breathe 2.8s ease-in-out infinite; }
#pet-render-area.pet-bm-walk    { transform-origin: bottom center; animation: pet-bm-walk 0.5s ease-in-out infinite; }
#pet-render-area.pet-bm-climb   { transform-origin: center;        animation: pet-bm-climb 0.6s ease-in-out infinite; }
#pet-render-area.pet-bm-crouch  { transform-origin: bottom center; animation: pet-bm-crouch 0.18s ease-out 1; }
@keyframes pet-land-squash {
    0%   { transform: scaleY(1) scaleX(1); }
    35%  { transform: scaleY(0.82) scaleX(1.12); }
    100% { transform: scaleY(1) scaleX(1); }
}
#pet-render-area.pet-squash { transform-origin: bottom center; animation: pet-land-squash 0.28s ease-out; }

/* === 情绪动画系统 === */
#pet-render-area.emotion-active img {
    animation: none !important;
}
#pet-render-area.pet-emotion-happy img { animation: emotion-happy 0.4s ease 3; }
#pet-render-area.pet-emotion-shy img { animation: emotion-shy 0.6s ease 2; }
#pet-render-area.pet-emotion-angry img { animation: emotion-angry 0.3s ease 4; }
#pet-render-area.pet-emotion-sad img { animation: emotion-sad 1.2s ease 2; }
#pet-render-area.pet-emotion-surprised img { animation: emotion-surprised 0.35s ease 2; }
#pet-render-area.pet-emotion-thinking img { animation: emotion-thinking 1s ease-in-out 2; }
#pet-render-area.pet-emotion-cute img { animation: emotion-cute 0.5s ease 3; }
#pet-render-area.pet-emotion-calm img { animation: emotion-calm 2s ease-in-out 1; }

/* 3D model-viewer 情绪动画 */
#pet-render-area.pet-emotion-happy model-viewer { animation: emotion-happy 0.4s ease 3; }
#pet-render-area.pet-emotion-shy model-viewer { animation: emotion-shy 0.6s ease 2; }
#pet-render-area.pet-emotion-angry model-viewer { animation: emotion-angry 0.3s ease 4; }
#pet-render-area.pet-emotion-sad model-viewer { animation: emotion-sad 1.2s ease 2; }
#pet-render-area.pet-emotion-surprised model-viewer { animation: emotion-surprised 0.35s ease 2; }
#pet-render-area.pet-emotion-thinking model-viewer { animation: emotion-thinking 1s ease-in-out 2; }
#pet-render-area.pet-emotion-cute model-viewer { animation: emotion-cute 0.5s ease 3; }
#pet-render-area.pet-emotion-calm model-viewer { animation: emotion-calm 2s ease-in-out 1; }

@keyframes emotion-happy {
    0%, 100% { transform: translateY(0) rotate(0); }
    25% { transform: translateY(-8px) rotate(-3deg); }
    75% { transform: translateY(-8px) rotate(3deg); }
}
@keyframes emotion-shy {
    0%, 100% { transform: translateX(0) scale(1); opacity: 1; }
    50% { transform: translateX(-4px) scale(0.95); opacity: 0.85; }
}
@keyframes emotion-angry {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
@keyframes emotion-sad {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(4px); opacity: 0.8; }
}
@keyframes emotion-surprised {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
@keyframes emotion-thinking {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}
@keyframes emotion-cute {
    0%, 100% { transform: scale(1) rotate(0); }
    50% { transform: scale(1.08) rotate(3deg); }
}
@keyframes emotion-calm {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-2px); opacity: 0.95; }
}

/* 对话气泡定位由上方主样式统一控制 */

/* 桌宠输入框 - 跟随桌宠脚底 */
#pet-input-area {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    min-width: 120px;
    max-width: none;
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(240, 240, 240, 0.92);
    border-radius: 12px;
    margin-top: 4px;
    z-index: 502;
    box-sizing: border-box;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* ===== 桌宠长按菜单 ===== */

#pet-context-menu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9900;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.pet-menu-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 39px;
}

.pet-menu-panel {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 16px 16px 0 0;
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom, 20px);
    animation: pet-menu-slide-up 0.25s ease-out;
}

@keyframes pet-menu-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.pet-menu-item {
    padding: 16px 24px;
    font-size: 16px;
    color: #333;
    text-align: center;
    border-bottom: 0.5px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.15s;
}

.pet-menu-item:active {
    background: #f5f5f5;
}

.pet-menu-item.cancel {
    color: #ff3b30;
    margin-top: 8px;
    border-top: 8px solid #f5f5f5;
    border-bottom: none;
}

.pet-menu-item.pet-size-item {
    padding: 12px 24px 16px;
    cursor: default;
}

.pet-menu-item.pet-size-item:active {
    background: transparent;
}

.pet-menu-item.active-anim {
    color: #ff85a2;
    font-weight: 600;
}

/* ===== 形象切换轮盘 ===== */

#pet-shape-wheel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9900;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.pet-wheel-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 39px;
}

.pet-wheel-container {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-height: 320px;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    gap: 12px;
    padding: 20px 16px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    animation: pet-menu-slide-up 0.25s ease-out;
    -webkit-overflow-scrolling: touch;
}

.pet-wheel-item {
    flex: 0 0 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    position: relative;
    padding: 8px 4px;
    border-radius: 12px;
    transition: background 0.15s;
}

.pet-wheel-item:active {
    background: #f5f5f5;
}

.pet-wheel-item.current {
    background: #fff0f5;
    border: 2px solid #ff85a2;
}

.pet-wheel-item img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    background: #f8f8f8;
}

.pet-wheel-item span {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: #f8f8f8;
    border-radius: 8px;
}

.pet-wheel-name {
    font-size: 11px;
    color: #666;
    text-align: center;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pet-wheel-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 10px;
}

/* 夜间模式适配 */
.phone-frame.night-mode #pet-context-menu .pet-menu-panel {
    background: #2c2c2e;
}
.phone-frame.night-mode #pet-context-menu .pet-menu-item {
    color: #e0e0e0;
    border-bottom-color: #3a3a3c;
}
.phone-frame.night-mode #pet-context-menu .pet-menu-item.cancel {
    color: #ff6b6b;
    border-top-color: #1c1c1e;
}
.phone-frame.night-mode #pet-context-menu .pet-menu-item:active {
    background: #3a3a3c;
}
.phone-frame.night-mode #pet-shape-wheel .pet-wheel-container {
    background: #2c2c2e;
}
.phone-frame.night-mode .pet-wheel-item:active {
    background: #3a3a3c;
}
.phone-frame.night-mode .pet-wheel-item.current {
    background: #3a2030;
    border-color: #ff85a2;
}
.phone-frame.night-mode .pet-wheel-name {
    color: #aaa;
}
.phone-frame.night-mode .pet-wheel-item img,
.phone-frame.night-mode .pet-wheel-item span {
    background: #3a3a3c;
}

/* 查手机 — 批次重试确认弹窗 */
.fp-retry-dialog-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.4);
    justify-content: center; align-items: center;
}
.fp-retry-dialog-box {
    background: #fff; border-radius: 14px; width: 270px;
    text-align: center; overflow: hidden;
}
.fp-retry-dialog-title {
    padding: 20px 16px 8px; font-size: 17px; font-weight: 600;
}
.fp-retry-dialog-msg {
    padding: 0 16px 20px; font-size: 13px; color: #666; line-height: 1.4;
}
.fp-retry-dialog-btns {
    display: flex; border-top: 0.5px solid #e0e0e0;
}
.fp-retry-dialog-btns button {
    flex: 1; padding: 12px; font-size: 17px; border: none; background: none; cursor: pointer;
}
.fp-retry-btn-skip { color: #666; }
.fp-retry-btn-retry { color: #007aff; font-weight: 600; border-left: 0.5px solid #e0e0e0 !important; }

/* 查手机：长按删除菜单 */
.fp-record-menu-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0,0,0,0.4);
    justify-content: center; align-items: flex-end;
}
.fp-record-menu-sheet {
    width: 100%; max-width: 440px;
    background: #f2f2f2;
    border-radius: 14px 14px 0 0;
    overflow: hidden;
}
.fp-record-menu-item {
    padding: 16px; text-align: center; font-size: 16px;
    background: #fff; color: #e8483f; cursor: pointer;
    border-top: 0.5px solid #e8e8e8;
}
.fp-record-menu-item:first-child { border-top: none; }
.fp-record-menu-item:active { background: #ededed; }
.fp-record-menu-cancel {
    color: #333; font-weight: 600; margin-top: 6px; border-top: none;
}

/* ===== 衣帽间系统 ===== */

/* 覆盖层 */
.wardrobe-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: #faf8f5;
    border-radius: 0 0 16px 16px;
    display: flex;
    flex-direction: column;
    z-index: 350;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    transition: height 0.3s ease;
}
.wardrobe-overlay.wardrobe-fullscreen {
    height: 100%;
    border-radius: 0;
}

/* 入/出场动画 */
.wardrobe-slide-in {
    animation: wardrobeSlideIn 0.3s ease forwards;
}
.wardrobe-slide-out {
    animation: wardrobeSlideOut 0.3s ease forwards;
}
@keyframes wardrobeSlideIn {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}
@keyframes wardrobeSlideOut {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
}

/* 头部 */
.wardrobe-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #ece8e3;
    flex-shrink: 0;
    background: #faf8f5;
}
.wardrobe-fullscreen .wardrobe-header {
    border-radius: 0;
}
.wardrobe-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wardrobe-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}
.wardrobe-title {
    font-size: 16px;
    font-weight: 600;
    color: #3c3226;
}
.wardrobe-back-btn,
.wardrobe-fullscreen-btn,
.wardrobe-settings-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #8a7e6d;
    border-radius: 8px;
}
.wardrobe-back-btn:active,
.wardrobe-fullscreen-btn:active,
.wardrobe-settings-btn:active {
    background: rgba(0,0,0,0.05);
}

/* 主体 */
.wardrobe-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== 衣帽间功能暂时隐藏（开发中） ===== */
#wardrobe-btn,
button[data-func="wardrobe"] {
    display: none !important;
}

/* ===== 2.5D 等距房间 ===== */
.wardrobe-isometric-room {
    position: relative;
    width: 100%;
    min-height: 260px;
    overflow: hidden;
}

/* 后墙 */
.wardrobe-wall-back {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 55%;
    background: linear-gradient(180deg, #f5f0ea 0%, #ede7de 80%, #e8e0d5 100%);
    border-bottom: 2px solid #d8d0c4;
}
.wardrobe-wall-back::after {
    content: '';
    position: absolute;
    bottom: 0; left: 10%; right: 10%;
    height: 1px;
    background: rgba(180,160,130,0.2);
}

/* 地板 */
.wardrobe-floor {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 45%;
    background: 
        linear-gradient(90deg, rgba(200,180,155,0.15) 1px, transparent 1px),
        linear-gradient(0deg, rgba(200,180,155,0.08) 1px, transparent 1px),
        linear-gradient(135deg, #e2d5c5 0%, #d9ccbb 50%, #e0d3c3 100%);
    background-size: 30px 30px, 30px 30px, 100% 100%;
}

/* 地毯 */
.wardrobe-rug {
    position: absolute;
    bottom: 14%;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 18%;
    background: radial-gradient(ellipse, rgba(180,130,90,0.18) 0%, rgba(180,130,90,0.05) 70%, transparent 100%);
    border-radius: 50%;
}

/* === 家具布局行 === */
.wardrobe-wall-row {
    position: absolute;
    top: 4%;
    left: 0; right: 0;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 0 6px;
    z-index: 3;
}
.wardrobe-floor-row {
    position: absolute;
    bottom: 8%;
    left: 0; right: 0;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    padding: 0 12px;
    z-index: 4;
}
.wardrobe-door-row {
    position: absolute;
    bottom: 5%;
    right: 6px;
    z-index: 4;
}

/* === 热点通用 === */
.wardrobe-hotspot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 5px;
    cursor: pointer;
    border-radius: 10px;
    transition: transform 0.2s, box-shadow 0.3s;
    z-index: 2;
}
.wardrobe-hotspot:active {
    transform: scale(0.93);
}
.wardrobe-hotspot::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.3s;
    background: radial-gradient(ellipse, rgba(196,166,130,0.25) 0%, transparent 70%);
    pointer-events: none;
}
.wardrobe-hotspot:hover::before,
.wardrobe-hotspot.active::before {
    opacity: 1;
}
.wardrobe-hotspot-label {
    font-size: 10px;
    color: #8a7e6d;
    white-space: nowrap;
    text-shadow: 0 0.5px 1px rgba(255,255,255,0.6);
}

/* === 通用家具基础 === */
.wardrobe-furniture {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    line-height: 1;
}

/* --- 大衣柜 --- */
.wardrobe-furniture-cabinet {
    width: 56px;
    height: 80px;
}
.wf-cabinet-body {
    width: 100%; height: 62px;
    background: linear-gradient(180deg, #c9a87c 0%, #b8976b 100%);
    border-radius: 3px 3px 0 0;
    display: flex;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 6px rgba(0,0,0,0.12);
}
.wf-cabinet-door {
    flex: 1;
    border: 1px solid rgba(150,120,80,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s;
    transform-origin: left center;
    background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, transparent 40%);
}
.wf-cabinet-door-r { transform-origin: right center; }
.wardrobe-hotspot.active .wf-cabinet-door-l { transform: perspective(200px) rotateY(-35deg); }
.wardrobe-hotspot.active .wf-cabinet-door-r { transform: perspective(200px) rotateY(35deg); }
.wf-handle {
    display: block;
    width: 3px; height: 14px;
    background: #8a7050;
    border-radius: 2px;
}
.wf-cabinet-drawer {
    width: 100%; height: 16px;
    background: linear-gradient(180deg, #b8976b 0%, #a8875b 100%);
    border-radius: 0 0 3px 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(150,120,80,0.4);
    transition: transform 0.3s;
}
.wardrobe-hotspot.active .wf-cabinet-drawer { transform: translateY(4px); }
.wf-handle-sm {
    display: block;
    width: 12px; height: 2px;
    background: #8a7050;
    border-radius: 1px;
}

/* --- 内衣抽屉 --- */
.wardrobe-furniture-drawer {
    width: 38px; height: 34px;
}
.wf-sm-drawer {
    width: 100%; height: 100%;
    background: linear-gradient(180deg, #d4c0a8 0%, #c4b098 100%);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}
.wardrobe-hotspot.active .wf-sm-drawer { transform: translateY(6px); }

/* --- 试衣镜 --- */
.wardrobe-furniture-mirror {
    width: 30px; height: 76px;
}
.wf-mirror-frame {
    width: 100%; height: 100%;
    background: linear-gradient(180deg, #c9a87c, #b8976b);
    border-radius: 14px 14px 3px 3px;
    padding: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.wf-mirror-glass {
    width: 100%; height: 100%;
    background: linear-gradient(160deg, #e8eef5 0%, #d0dde8 40%, #c8d5e2 100%);
    border-radius: 12px 12px 2px 2px;
    position: relative;
    overflow: hidden;
}
.wf-mirror-glass::after {
    content: '';
    position: absolute;
    top: 8%; left: 15%;
    width: 30%; height: 50%;
    background: linear-gradient(170deg, rgba(255,255,255,0.5) 0%, transparent 100%);
    border-radius: 50%;
    transform: rotate(-10deg);
}

/* --- 梳妆台 --- */
.wardrobe-furniture-vanity {
    width: 46px; height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wf-vanity-mirror {
    width: 28px; height: 28px;
    background: linear-gradient(160deg, #dce6ef, #c8d5e2);
    border: 2px solid #c9a87c;
    border-radius: 50%;
    margin-bottom: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.wf-vanity-table {
    width: 100%; height: 26px;
    background: linear-gradient(180deg, #d4c0a8, #c4b098);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* --- 私密柜 --- */
.wardrobe-furniture-special {
    width: 36px; height: 44px;
}
.wf-special-body {
    width: 100%; height: 100%;
    background: linear-gradient(180deg, #b8a898 0%, #a89888 100%);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.wf-lock { font-size: 16px; }

/* --- 鞋架 --- */
.wardrobe-furniture-shoes {
    width: 40px; height: 40px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wf-shoe-shelf {
    width: 100%; height: 10px;
    background: linear-gradient(180deg, #c4b098, #b8a488);
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* --- 包包架 --- */
.wardrobe-furniture-bags {
    width: 32px; height: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 4px;
}
.wf-bag-hook {
    width: 8px; height: 8px;
    border: 2px solid #b8976b;
    border-radius: 50%;
}

/* --- 垃圾桶 --- */
.wardrobe-furniture-trash {
    width: 26px; height: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wf-trash-lid {
    width: 28px; height: 6px;
    background: #a89888;
    border-radius: 2px 2px 0 0;
    transition: transform 0.3s;
    transform-origin: bottom center;
}
.wardrobe-hotspot.active .wf-trash-lid { transform: rotateX(-40deg) translateY(-4px); }
.wf-trash-body {
    width: 24px; height: 24px;
    background: linear-gradient(180deg, #b8a898, #a89080);
    border-radius: 0 0 3px 3px;
}

/* --- 快递箱 --- */
.wardrobe-furniture-delivery {
    width: 30px; height: 26px;
}
.wf-box-body {
    width: 100%; height: 100%;
    background: linear-gradient(180deg, #d4b88c, #c4a87c);
    border-radius: 3px;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.wf-box-lid {
    position: absolute;
    top: 0; left: -1px; right: -1px;
    height: 8px;
    background: #dcc89c;
    border-radius: 3px 3px 0 0;
    border-bottom: 1px dashed rgba(0,0,0,0.1);
    transition: transform 0.3s;
    transform-origin: bottom left;
}
.wardrobe-hotspot.active .wf-box-lid { transform: rotateX(-50deg); }

/* --- 隐藏点 --- */
.wardrobe-furniture-secret {
    width: 28px; height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    opacity: 0.5;
}

/* --- 门 --- */
.wardrobe-furniture-door {
    width: 36px; height: 64px;
}
.wf-door-frame {
    width: 100%; height: 100%;
    border: 2px solid #c4b098;
    border-radius: 3px 3px 0 0;
    background: #f0ebe4;
    padding: 2px;
}
.wf-door-panel {
    width: 100%; height: 100%;
    background: linear-gradient(180deg, #ddd2c4 0%, #d0c4b4 100%);
    border-radius: 2px 2px 0 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 4px;
}
.wf-door-panel .wf-handle {
    width: 3px; height: 10px;
    background: #a08868;
}

/* === 热点动画关键帧 === */
@keyframes wardrobeHotspotGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(196,166,130,0); }
    50% { box-shadow: 0 0 12px 2px rgba(196,166,130,0.3); }
}
.wardrobe-hotspot.has-items::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%; transform: translateX(-50%);
    width: 4px; height: 4px;
    background: #b4825a;
    border-radius: 50%;
}
.wardrobe-hotspot.has-delivery {
    animation: wardrobeHotspotGlow 2s infinite;
}

/* 房间操作栏 */
.wardrobe-room-actions {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    justify-content: center;
}
.wardrobe-action-btn {
    padding: 8px 16px;
    border: 1px solid #d4c9bb;
    background: #fff;
    border-radius: 20px;
    font-size: 13px;
    color: #5c5040;
    cursor: pointer;
}
.wardrobe-action-btn:active {
    background: #f0ebe4;
}

/* 物品面板 */
.wardrobe-items-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.wardrobe-items-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #ece8e3;
}
.wardrobe-items-back {
    background: none;
    border: none;
    font-size: 13px;
    color: #8a7e6d;
    cursor: pointer;
    padding: 4px;
}
.wardrobe-items-title {
    font-size: 15px;
    font-weight: 600;
    color: #3c3226;
    flex: 1;
}
.wardrobe-sort-select {
    padding: 4px 8px;
    border: 1px solid #d4c9bb;
    border-radius: 8px;
    font-size: 12px;
    color: #5c5040;
    background: #fff;
    cursor: pointer;
    outline: none;
}
.wardrobe-sort-select:focus {
    border-color: #b4825a;
}

/* 归属筛选标签 */
.wardrobe-owner-tabs {
    display: flex;
    gap: 0;
    padding: 0 14px 8px;
    border-bottom: 1px solid #ece8e3;
}
.wardrobe-owner-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 0;
    border: none;
    background: none;
    font-size: 12px;
    color: #8a7e6d;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
}
.wardrobe-owner-tab.active {
    color: #3c3226;
    font-weight: 600;
}
.wardrobe-owner-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 20%; right: 20%;
    height: 2px;
    background: #b4825a;
    border-radius: 1px;
}
.wardrobe-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
}
.wardrobe-dot-char { background: #e8a0b4; }
.wardrobe-dot-user { background: #7eb6d6; }
.wardrobe-dot-shared { background: #c9a87c; }

/* 物品卡片上的归属色点 */
.wardrobe-item-owner-dot {
    position: absolute;
    top: 6px; left: 6px;
    width: 6px; height: 6px;
    border-radius: 50%;
}
.wardrobe-item-owner-dot.owner-char { background: #e8a0b4; }
.wardrobe-item-owner-dot.owner-user { background: #7eb6d6; }
.wardrobe-item-owner-dot.owner-shared { background: #c9a87c; }
.wardrobe-items-grid {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    align-content: start;
}

/* 物品卡片 */
.wardrobe-item-card {
    background: #fff;
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    cursor: pointer;
    position: relative;
    transition: transform 0.15s;
}
.wardrobe-item-card:active {
    transform: scale(0.95);
}
.wardrobe-item-wearing {
    box-shadow: 0 0 0 2px rgba(180,130,90,0.4), 0 1px 4px rgba(0,0,0,0.06);
}
.wardrobe-item-shipping {
    border: 1.5px dashed #c9a87c;
    animation: wardrobeShippingPulse 2s infinite;
}
@keyframes wardrobeShippingPulse {
    0%, 100% { border-color: #c9a87c; }
    50% { border-color: #e0d0b8; }
}
.wardrobe-item-emoji {
    font-size: 28px;
    margin-bottom: 6px;
}
.wardrobe-item-name {
    font-size: 12px;
    font-weight: 500;
    color: #3c3226;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wardrobe-item-info {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin-top: 4px;
    flex-wrap: wrap;
}
.wardrobe-item-brand,
.wardrobe-item-color {
    font-size: 10px;
    color: #a09484;
    background: #f5f0ea;
    padding: 1px 6px;
    border-radius: 8px;
}
.wardrobe-item-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 8px;
    background: #b4825a;
    color: #fff;
}
.wardrobe-badge-shipping {
    background: #c9a87c;
}

/* ===== 物品详情弹窗 ===== */
.wardrobe-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.wardrobe-detail-mask {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.25s;
}
.wardrobe-detail-open .wardrobe-detail-mask {
    background: rgba(0,0,0,0.35);
}
.wardrobe-detail-sheet {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 8px 20px 24px;
    max-height: 65vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
}
.wardrobe-detail-open .wardrobe-detail-sheet {
    transform: translateY(0);
}
.wardrobe-detail-closing .wardrobe-detail-sheet {
    transform: translateY(100%);
}
.wardrobe-detail-closing .wardrobe-detail-mask {
    background: rgba(0,0,0,0);
}
.wardrobe-detail-handle {
    width: 36px; height: 4px;
    background: #ddd;
    border-radius: 2px;
    margin: 0 auto 12px;
}
.wardrobe-detail-top {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 12px;
}
.wardrobe-detail-emoji {
    font-size: 40px;
    line-height: 1;
}
.wardrobe-detail-meta { flex: 1; }
.wardrobe-detail-name {
    font-size: 17px;
    font-weight: 600;
    color: #3c3226;
    margin-bottom: 6px;
}
.wardrobe-detail-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.wardrobe-detail-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 8px;
    background: #f5f0ea;
    color: #8a7e6d;
}
.wardrobe-detail-tag.owner-char { background: #fce8ef; color: #b05070; }
.wardrobe-detail-tag.owner-user { background: #e4f0fa; color: #4080a8; }
.wardrobe-detail-tag.owner-shared { background: #f5efe4; color: #8a7050; }
.wardrobe-detail-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 12px;
}
.wardrobe-detail-stats {
    display: flex;
    gap: 0;
    margin-bottom: 12px;
    background: #f9f6f2;
    border-radius: 12px;
    overflow: hidden;
}
.wardrobe-detail-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
}
.wardrobe-detail-stat + .wardrobe-detail-stat {
    border-left: 1px solid #ece8e3;
}
.wardrobe-stat-label { font-size: 11px; color: #a09484; }
.wardrobe-stat-value { font-size: 15px; font-weight: 600; color: #3c3226; margin-top: 2px; }
.wardrobe-detail-source {
    font-size: 12px;
    color: #a09484;
    margin-bottom: 14px;
}
.wardrobe-detail-actions {
    display: flex;
    gap: 8px;
}
.wardrobe-detail-btn {
    flex: 1;
    padding: 10px 0;
    border: 1px solid #d4c9bb;
    background: #fff;
    border-radius: 12px;
    font-size: 13px;
    color: #5c5040;
    cursor: pointer;
    transition: background 0.15s;
}
.wardrobe-detail-btn:active { background: #f5f0ea; }
.wardrobe-detail-btn-primary {
    background: #b4825a;
    color: #fff;
    border-color: #b4825a;
}
.wardrobe-detail-btn-primary:active { background: #9a6e4a; }
.wardrobe-detail-btn-danger {
    color: #c55;
    border-color: #e0b8b8;
}
.wardrobe-detail-btn-danger:active { background: #fdf0f0; }

/* ===== 物品表单 ===== */
.wardrobe-form-sheet { max-height: 75vh; }
.wardrobe-form-title {
    font-size: 17px;
    font-weight: 600;
    color: #3c3226;
    margin: 0 0 14px;
    text-align: center;
}
.wardrobe-form-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}
.wardrobe-form-row label {
    display: block;
    font-size: 12px;
    color: #8a7e6d;
    margin-bottom: 4px;
}
.wardrobe-form-required { color: #c55; }
.wardrobe-form-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d4c9bb;
    border-radius: 8px;
    font-size: 14px;
    color: #3c3226;
    background: #fff;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.wardrobe-form-input:focus { border-color: #b4825a; }
.wardrobe-form-textarea {
    min-height: 60px;
    resize: vertical;
    font-family: inherit;
}
.wardrobe-form-row-half {
    display: flex;
    gap: 10px;
}
.wardrobe-form-row-half > div { flex: 1; }

/* ===== 试衣镜视图 ===== */
.wardrobe-mirror-sheet { max-height: 70vh; }
.wardrobe-mirror-header {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    margin-bottom: 12px;
}
.wardrobe-mirror-icon { font-size: 24px; }
.wardrobe-mirror-header h3 {
    margin: 0;
    font-size: 17px;
    color: #3c3226;
}
.wardrobe-mirror-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 14px;
    background: #f5f0ea;
    border-radius: 10px;
    padding: 3px;
}
.wardrobe-mirror-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 0;
    border: none;
    background: none;
    border-radius: 8px;
    font-size: 13px;
    color: #8a7e6d;
    cursor: pointer;
    transition: all 0.2s;
}
.wardrobe-mirror-tab.active {
    background: #fff;
    color: #3c3226;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.wardrobe-mirror-body {
    min-height: 100px;
    margin-bottom: 14px;
}
.wardrobe-mirror-slot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #f0ebe4;
    flex-wrap: wrap;
}
.wardrobe-mirror-slot-label {
    font-size: 12px;
    color: #a09484;
    min-width: 40px;
}
.wardrobe-mirror-item {
    font-size: 13px;
    color: #3c3226;
    background: #f9f6f2;
    padding: 3px 10px;
    border-radius: 8px;
}
.wardrobe-mirror-empty {
    text-align: center;
    color: #a09484;
    font-size: 13px;
    padding: 30px 0;
}

/* 空状态 */
.wardrobe-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #a09484;
    grid-column: 1 / -1;
}
.wardrobe-empty span {
    font-size: 14px;
    margin-bottom: 12px;
}
.wardrobe-empty-add {
    padding: 8px 20px;
    border: 1px solid #d4c9bb;
    background: #fff;
    border-radius: 20px;
    font-size: 13px;
    color: #5c5040;
    cursor: pointer;
}

/* 首次进入 */
.wardrobe-first-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    text-align: center;
}
.wardrobe-first-icon {
    font-size: 48px;
    margin-bottom: 12px;
}
.wardrobe-first-time h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: #3c3226;
}
.wardrobe-first-time p {
    font-size: 13px;
    color: #8a7e6d;
    line-height: 1.5;
    margin: 0 0 20px;
}
.wardrobe-first-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 240px;
}
.wardrobe-first-btn {
    padding: 12px 16px;
    border-radius: 12px;
    border: none;
    font-size: 14px;
    cursor: pointer;
}
.wardrobe-first-ai {
    background: #b4825a;
    color: #fff;
}
.wardrobe-first-manual {
    background: #fff;
    border: 1px solid #d4c9bb;
    color: #5c5040;
}
.wardrobe-first-skip {
    background: transparent;
    color: #a09484;
    font-size: 13px;
}

/* 确认弹窗 */
.wardrobe-confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.wardrobe-confirm-dialog {
    background: #fff;
    border-radius: 16px;
    padding: 24px 20px;
    width: 280px;
    text-align: center;
}
.wardrobe-confirm-icon {
    font-size: 40px;
    margin-bottom: 8px;
}
.wardrobe-confirm-dialog h3 {
    margin: 0 0 8px;
    font-size: 17px;
    color: #333;
}
.wardrobe-confirm-dialog p {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin: 0 0 20px;
}
.wardrobe-confirm-actions {
    display: flex;
    gap: 10px;
}
.wardrobe-confirm-cancel {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
    color: #666;
}
.wardrobe-confirm-ok {
    flex: 1;
    padding: 10px;
    border: none;
    background: #b4825a;
    color: #fff;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
}

/* ===== 小说转发 & 注入状态条 ===== */

/* --- 聊天顶部注入状态条 --- */
.novel-inject-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
    font-size: 12px;
    color: #333;
    user-select: none;
    min-height: 20px;
}

.novel-inject-icon {
    font-size: 13px;
    flex-shrink: 0;
}

.novel-inject-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: #666;
}

.novel-inject-close {
    border: none;
    background: none;
    font-size: 14px;
    color: #999;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
}

.novel-inject-close:active {
    color: #333;
}

.phone-frame.night-mode .novel-inject-bar {
    background: rgba(44, 44, 46, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.phone-frame.night-mode .novel-inject-text {
    color: #aaa;
}

.phone-frame.night-mode .novel-inject-close {
    color: #777;
}

/* 4j：注入状态条可见时，线下卡片折叠条下移避让，避免遮挡 */
.chat-window.has-inject-bar .offline-meeting-card.collapsed {
    top: 114px;
}

/* --- 文件卡片（聊天消息内） --- */
.file-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 0.5px solid #e0e0e0;
    border-radius: 10px;
    cursor: pointer;
    min-width: 200px;
    max-width: 260px;
    transition: background 0.15s;
}

.file-card:active {
    background: #f5f5f5;
}

.file-card-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.file-card-info {
    flex: 1;
    overflow: hidden;
}

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

.file-card-meta {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}

/* 文件卡片不显示气泡背景 */
.chat-message .chat-message-content:has(.file-card) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    backdrop-filter: none !important;
}

.phone-frame.night-mode .file-card {
    background: #2a2a2a;
    border-color: #3a3a3a;
}

.phone-frame.night-mode .file-card-name {
    color: #e0e0e0;
}

.phone-frame.night-mode .file-card-meta {
    color: #777;
}

/* --- 转发弹窗（覆盖在共伴小说页面上） --- */
.novel-forward-modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 400;
    animation: fadeIn 0.2s ease;
}

.novel-forward-content {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    width: 85%;
    max-width: 280px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: scaleIn 0.25s ease;
}

.novel-forward-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 16px;
}

.novel-forward-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.novel-forward-radio {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    padding: 6px 0;
}

.novel-forward-radio input[type="radio"] {
    accent-color: #333;
}

.novel-forward-chapters {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 12px;
    background: #fafafa;
}

.novel-forward-chapter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    border-bottom: 0.5px solid #f0f0f0;
}

.novel-forward-chapter-item:last-child {
    border-bottom: none;
}

.novel-forward-select-all-item {
    font-weight: 500;
    color: #333;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 8px;
    margin-bottom: 4px;
}

.novel-forward-chapter-item input[type="checkbox"] {
    accent-color: #333;
}

.novel-forward-buttons {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.novel-forward-cancel {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    background: #f8f8f8;
    border-radius: 10px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
}

.novel-forward-cancel:active {
    background: #eee;
}

.novel-forward-confirm {
    flex: 1;
    padding: 10px;
    border: none;
    background: #333;
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
}

.novel-forward-confirm:active {
    background: #111;
}

/* 夜间模式 - 转发弹窗 */
.phone-frame.night-mode .novel-forward-content {
    background: #2c2c2e;
}

.phone-frame.night-mode .novel-forward-title {
    color: #e0e0e0;
}

.phone-frame.night-mode .novel-forward-radio {
    color: #e0e0e0;
}

.phone-frame.night-mode .novel-forward-chapters {
    background: #1c1c1e;
    border-color: #3a3a3c;
}

.phone-frame.night-mode .novel-forward-chapter-item {
    color: #e0e0e0;
    border-bottom-color: #3a3a3c;
}

.phone-frame.night-mode .novel-forward-cancel {
    background: #3a3a3c;
    border-color: #4a4a4c;
    color: #aaa;
}

/* 设置列表 */
.wardrobe-settings-list {
    margin-bottom: 16px;
}
.wardrobe-setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 14px;
    color: #333;
}

/* 开关 */
.wardrobe-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.wardrobe-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.wardrobe-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
    border-radius: 24px;
    transition: 0.3s;
}
.wardrobe-switch-slider::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
}
.wardrobe-switch input:checked + .wardrobe-switch-slider {
    background: #b4825a;
}
.wardrobe-switch input:checked + .wardrobe-switch-slider::before {
    transform: translateX(20px);
}

/* 房间占位符 */
.wardrobe-room-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #a09484;
    font-size: 15px;
}

/* ===== 群聊线下见面弹窗 ===== */
.group-offline-close-btn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}

.group-offline-location-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.group-offline-location-row .chat-modal-input {
    flex: 1;
}

.group-offline-random-btn {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f8f8f8;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.group-offline-random-btn:active {
    background: #eee;
    transform: scale(0.96);
}

.group-offline-members-section {
    margin-top: 16px;
}

.group-offline-members-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.group-offline-select-all {
    font-size: 13px;
    color: #576b95;
    cursor: pointer;
}

.group-offline-members-list {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fafafa;
}

.group-offline-member-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    gap: 10px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.15s;
}

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

.group-offline-member-item:active {
    background: #f0f0f0;
}

.group-offline-member-check {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
}

.group-offline-member-check:checked {
    background: #f5a0b8;
    border-color: #f5a0b8;
}

.group-offline-member-check:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.group-offline-member-avatar {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    background: #e0e0e0;
    flex-shrink: 0;
}

.group-offline-member-name {
    font-size: 15px;
    color: #333;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==================== 公告弹窗系统 ==================== */

/* 蒙层 */
.announcement-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(180, 180, 180, 0.25);
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.announcement-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* 弹窗主体 */
.announcement-dialog {
    background: rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 20px;
    width: 340px;
    max-width: 88%;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.3);
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}

.announcement-overlay.active .announcement-dialog {
    transform: scale(1);
    opacity: 1;
}

/* 头部 */
.announcement-header {
    padding: 20px 20px 12px;
    text-align: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.announcement-title {
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: 0.5px;
}

/* 内容区（可滚动） */
.announcement-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 16px;
    -webkit-overflow-scrolling: touch;
}

/* 区块 */
.announcement-section {
    margin: 6px 0;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: background 0.2s ease;
}

.announcement-section:active {
    background: rgba(255, 255, 255, 0.5);
}

/* 区块标题行 */
.announcement-section-header {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    gap: 8px;
}

/* 折叠箭头 */
.announcement-section-arrow {
    font-size: 16px;
    font-weight: 600;
    color: #999;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
    transform: rotate(0deg);
}

.announcement-section.open .announcement-section-arrow {
    transform: rotate(90deg);
}

.announcement-section-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.announcement-section-heading {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    flex: 1;
}

/* 区块内容（折叠动画） */
.announcement-section-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease;
    opacity: 0;
}

.announcement-section.open .announcement-section-body {
    max-height: 500px;
    opacity: 1;
}

.announcement-section-content {
    padding: 0 14px 14px;
    padding-left: 26px;
    font-size: 13px;
    line-height: 1.7;
    color: #555;
    white-space: pre-line;
    border-left: 2px solid rgba(153, 153, 153, 0.25);
    margin-left: 22px;
}

/* 长内容区块（如更新日志）：折叠壳放大，内部独立滑动查看，不裁切 */
.announcement-section--scroll.open .announcement-section-body {
    max-height: 56vh;
}

.announcement-section--scroll .announcement-section-content {
    max-height: 52vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.announcement-section--scroll .announcement-section-content::-webkit-scrollbar {
    width: 4px;
}

.announcement-section--scroll .announcement-section-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
}

/* 底部 */
.announcement-footer {
    padding: 12px 20px 18px;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.announcement-dismiss-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    background: rgba(50, 50, 50, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.announcement-dismiss-btn:active {
    background: rgba(50, 50, 50, 0.9);
    transform: scale(0.97);
}

/* ========== 公告弹窗 - 夜间模式 ========== */

.night-mode .announcement-overlay {
    background: rgba(0, 0, 0, 0.4);
}

.night-mode .announcement-dialog {
    background: rgba(28, 28, 30, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.06);
}

.night-mode .announcement-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.night-mode .announcement-title {
    color: #f0f0f0;
}

.night-mode .announcement-section {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.04);
}

.night-mode .announcement-section:active {
    background: rgba(255, 255, 255, 0.1);
}

.night-mode .announcement-section-arrow {
    color: #8e8e93;
}

.night-mode .announcement-section-heading {
    color: #e8e8e8;
}

.night-mode .announcement-section-content {
    color: #c7c7cc;
    border-left-color: rgba(200, 200, 200, 0.15);
}

.night-mode .announcement-section--scroll .announcement-section-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
}

.night-mode .announcement-footer {
    border-top-color: rgba(255, 255, 255, 0.06);
}

.night-mode .announcement-dismiss-btn {
    background: rgba(255, 255, 255, 0.12);
    color: #f0f0f0;
}

.night-mode .announcement-dismiss-btn:active {
    background: rgba(255, 255, 255, 0.2);
}

/* ========== 公告弹窗 - 滚动条 ========== */

.announcement-body::-webkit-scrollbar {
    width: 3px;
}

.announcement-body::-webkit-scrollbar-track {
    background: transparent;
}

.announcement-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 3px;
}

.night-mode .announcement-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
}

/* ===== 全局翻译功能样式（v3.3） ===== */

/* 头像白点指示器（pointer-events: none 让 click 透传到 avatar 元素） */
.avatar-translation-indicator {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: #fff;
    border: 1px solid #c8c8c8;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    z-index: 5;
    pointer-events: none;
}

/* 头像挂白点时关闭 overflow:hidden 以避免裁切 */
.chat-message-avatar.has-translation-dot {
    overflow: visible;
    position: relative;
}
.chat-message-avatar.has-translation-dot > img {
    border-radius: 6px;
}
.moment-avatar.has-translation-dot {
    overflow: visible;
    position: relative;
}
.moment-avatar.has-translation-dot > img {
    border-radius: 50%;
}

/* 聊天译文：嵌入气泡内（content 切 column flex），微信风格上下结构 */
.chat-message-content.has-expanded-translation {
    flex-direction: column;
    align-items: flex-start;
}

.chat-message-translation {
    align-self: stretch;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    font-size: 13px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.55);
    font-style: normal;
    word-break: break-word;
    display: none;
}
.chat-message-translation.expanded {
    display: block;
}

/* 本轮「译」按钮：仿心声红点，负偏移悬挂在气泡左上角外侧（不压首行文字；右上=心声、右下=spy 故放左上），白色半透明；展开后隐藏 */
.round-translate-btn {
    position: absolute;
    left: -4px;
    top: -11px;
    z-index: 3;
    padding: 1px 7px;
    font-size: 11px;
    line-height: 1.5;
    color: #555;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 9px;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.phone-frame.night-mode .round-translate-btn {
    color: #e0e0e0;
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.28);
}

/* 朋友圈译文：独立块样式 */
.moment-translation {
    margin-top: 6px;
    padding: 6px 10px;
    font-size: 13px;
    color: #666;
    font-style: italic;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    border-left: 2px solid #d0d0d0;
    line-height: 1.5;
    word-break: break-word;
    display: none;
}
.moment-translation.expanded {
    display: block;
}

/* ==================== T7.1 记忆海主页（花园色系） ==================== */

.t71-wrapper {
    padding: 16px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 5 层入口卡片（iOS Settings 风：单大卡 + 行内分隔线） */
.t71-layer-card {
    background: #ffffff;
    border: 1.5px solid #e0e8db;
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(175, 195, 177, 0.12);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.t71-layer-card:active {
    background: #fafbf8;
    border-color: #afc3b1;
}

.t71-layer-icon-svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #afc3b1;
}

.t71-layer-card[data-layer="core"] .t71-layer-icon-svg { color: #d9a3a0; }
.t71-layer-card[data-layer="episodic"] .t71-layer-icon-svg { color: #6f7f6a; }
.t71-layer-card[data-layer="semantic"] .t71-layer-icon-svg { color: #afc3b1; }
.t71-layer-card[data-layer="emotional"] .t71-layer-icon-svg { color: #e7c6c1; }
.t71-layer-card[data-layer="self"] .t71-layer-icon-svg { color: #b8b3a3; }

.t71-layer-title {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    letter-spacing: 0.3px;
}

.t71-layer-count {
    font-size: 22px;
    font-weight: 700;
    color: #d9a3a0;
    min-width: 32px;
    text-align: right;
}

.t71-layer-arrow {
    color: #afc3b1;
    flex-shrink: 0;
}

/* 情绪底色卡片 */
.t71-baseline-card {
    background: #ffffff;
    border: 1.5px solid #e0e8db;
    border-radius: 14px;
    padding: 18px 20px 22px;
    box-shadow: 0 2px 10px rgba(175, 195, 177, 0.12);
}

.t71-baseline-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.t71-baseline-icon-svg {
    width: 20px;
    height: 20px;
    color: #afc3b1;
    flex-shrink: 0;
}

.t71-baseline-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

.t71-baseline-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* SVG 雷达图 */
.t71-radar-svg {
    display: block;
    width: 240px;
    height: 240px;
    max-width: 100%;
}

.t71-radar-grid {
    fill: none;
    stroke: #e0e8db;
    stroke-width: 1;
}

.t71-radar-axis {
    stroke: #e0e8db;
    stroke-width: 1;
}

.t71-radar-polygon {
    fill: rgba(175, 195, 177, 0.3);
    stroke: #6f7f6a;
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.t71-radar-vertex {
    fill: #d9a3a0;
}

.t71-radar-label {
    fill: #6f7f6a;
    font-size: 12px;
    font-weight: 500;
    user-select: none;
}

/* 6 维数值文字 */
.t71-baseline-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 12px;
    width: 100%;
    margin-top: 6px;
}

.t71-value-cell {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
}

.t71-value-label {
    color: #888;
}

.t71-value-num {
    color: #6f7f6a;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* 底色为空时的占位 */
.t71-baseline-empty {
    padding: 20px 0;
    text-align: center;
    font-size: 13px;
    color: #afc3b1;
}

/* 工具入口 */
.t71-tools-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.t71-tool-card {
    background: #ffffff;
    border: 1.5px solid #e0e8db;
    border-radius: 14px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 2px 10px rgba(175, 195, 177, 0.12);
    position: relative;
}

.t71-tool-card:active {
    background: #fafbf8;
    border-color: #afc3b1;
}

.t71-tool-icon-svg {
    width: 26px;
    height: 26px;
    color: #afc3b1;
}

.t71-tool-title {
    font-size: 13px;
    font-weight: 500;
    color: #333;
}

.t71-tool-arrow {
    position: absolute;
    right: 12px;
    bottom: 12px;
    color: #afc3b1;
}

/* ==================== T7.2 核心记忆列表（花园色系） ==================== */

.t72-wrapper {
    padding: 16px 20px 24px;
}

.t72-core-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.t72-core-card {
    background: #ffffff;
    border: 1.5px solid #e0e8db;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(175, 195, 177, 0.12);
}

.t72-core-content {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    line-height: 1.6;
    word-break: break-word;
}

.t72-core-reason {
    margin-top: 10px;
    font-size: 13px;
    font-style: italic;
    color: #6f7f6a;
    line-height: 1.5;
    word-break: break-word;
}

.t72-core-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.t72-meta-chip {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 10px;
    line-height: 1.4;
}

.t72-meta-source {
    background: #fef0ee;
    color: #d9a3a0;
}

.t72-meta-emotion {
    background: #f0f3ed;
    color: #6f7f6a;
}

.t72-meta-date {
    background: #f7f5f3;
    color: #888;
}

.t72-core-actions {
    margin-top: 14px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.t72-core-action-btn {
    padding: 6px 14px;
    border: 1.5px solid #e0e8db;
    background: #ffffff;
    color: #6f7f6a;
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.t72-core-action-btn:active {
    background: #fafbf8;
    border-color: #afc3b1;
}

.t72-core-action-btn.danger {
    color: #d9a3a0;
}

.t72-core-action-btn.danger:active {
    border-color: #d9a3a0;
    background: #fef5f3;
}

.t72-add-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: #d9a3a0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.t72-add-btn:active {
    color: #afc3b1;
}

.t72-empty {
    padding: 60px 20px;
    text-align: center;
    color: #afc3b1;
    font-size: 14px;
    line-height: 1.8;
}

.t72-empty-hint {
    margin-top: 8px;
    color: #b8b3a3;
    font-size: 12px;
}

.t72-edit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}

.t72-edit-overlay.active {
    display: flex;
}

.t72-edit-dialog {
    background: #ffffff;
    border-radius: 14px;
    padding: 22px;
    width: 86%;
    max-width: 380px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}

.t72-edit-header {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 14px;
}

.t72-edit-textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px 12px;
    border: 1.5px solid #e0e8db;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
}

.t72-edit-textarea:focus {
    outline: none;
    border-color: #afc3b1;
}

.t72-form-field {
    margin-bottom: 14px;
}

.t72-form-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #6f7f6a;
    margin-bottom: 6px;
}

.t72-required {
    color: #d9a3a0;
    margin-left: 2px;
}

.t72-form-field textarea,
.t72-form-field input[type="text"],
.t72-form-field input[type="date"] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e0e8db;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    box-sizing: border-box;
    font-family: inherit;
    background: #ffffff;
}

.t72-form-field textarea {
    min-height: 70px;
    resize: vertical;
}

.t72-form-field textarea:focus,
.t72-form-field input:focus {
    outline: none;
    border-color: #afc3b1;
}

.t72-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.t72-edit-btn {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    border: 1.5px solid;
    background: #ffffff;
    transition: background 0.2s ease;
}

.t72-edit-btn-cancel {
    border-color: #e0e8db;
    color: #888;
}

.t72-edit-btn-save {
    border-color: #afc3b1;
    color: #6f7f6a;
}

.t72-edit-btn:active {
    background: #fafbf8;
}

/* ==================== T7.3 情节记忆列表（花园色系） ==================== */

.t73-wrapper {
    padding: 16px 20px 24px;
}

.t73-dates-list,
.t73-day-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.t73-date-card {
    background: #ffffff;
    border: 1.5px solid #e0e8db;
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 2px 10px rgba(175, 195, 177, 0.12);
}

.t73-date-card:active {
    background: #fafbf8;
    border-color: #afc3b1;
}

.t73-date-card-date {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
}

.t73-date-card-count {
    font-size: 13px;
    color: #888;
}

.t73-date-card-arrow {
    color: #afc3b1;
    flex-shrink: 0;
}

.t73-add-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: #d9a3a0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.t73-add-btn:active {
    color: #afc3b1;
}

.t73-episodic-card {
    background: #ffffff;
    border: 1.5px solid #e0e8db;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(175, 195, 177, 0.12);
}

.t73-card-summary {
    font-size: 15px;
    color: #333;
    line-height: 1.6;
    word-break: break-word;
}

.t73-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.t73-meta-chip {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 10px;
    line-height: 1.4;
}

.t73-meta-topic {
    background: #f0f3ed;
    color: #6f7f6a;
}

.t73-meta-tone {
    background: #fef0ee;
    color: #d9a3a0;
}

.t73-meta-importance {
    background: #f7f5f3;
    color: #888;
}

.t73-card-status {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.t73-retention-group {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #888;
}

.t73-retention-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.t73-retention-dot[data-tier="clear"] { background: #7fa978; }
.t73-retention-dot[data-tier="fading"] { background: #d4b88f; }
.t73-retention-dot[data-tier="forgetting"] { background: #b8b3a3; }

.t73-recall-count,
.t73-card-date {
    font-size: 12px;
    color: #888;
}

.t73-card-status-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.t73-status-chip {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 10px;
    line-height: 1.4;
    background: #f0f3ed;
    color: #6f7f6a;
}

.t73-status-chip.clickable {
    cursor: pointer;
    transition: background 0.2s ease;
}

.t73-status-chip.clickable:active {
    background: #e0e8db;
}

.t73-status-chip.core {
    background: #fef0ee;
    color: #d9a3a0;
}

.t73-card-actions {
    margin-top: 14px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.t73-action-btn {
    padding: 6px 14px;
    border: 1.5px solid #e0e8db;
    background: #ffffff;
    color: #6f7f6a;
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.t73-action-btn:active {
    background: #fafbf8;
    border-color: #afc3b1;
}

.t73-action-btn.danger {
    color: #d9a3a0;
}

.t73-action-btn.danger:active {
    border-color: #d9a3a0;
    background: #fef5f3;
}

.t73-empty {
    padding: 60px 20px;
    text-align: center;
    color: #afc3b1;
    font-size: 14px;
    line-height: 1.8;
}

.t73-empty-hint {
    margin-top: 8px;
    color: #b8b3a3;
    font-size: 12px;
}

.t73-edit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}

.t73-edit-overlay.active {
    display: flex;
}

.t73-edit-dialog {
    background: #ffffff;
    border-radius: 14px;
    padding: 22px;
    width: 86%;
    max-width: 380px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}

.t73-edit-header {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 14px;
}

.t73-promote-summary {
    background: #fafbf8;
    border-radius: 8px;
    padding: 12px;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 14px;
    max-height: 100px;
    overflow-y: auto;
}

.t73-form-field {
    margin-bottom: 14px;
}

.t73-form-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #6f7f6a;
    margin-bottom: 6px;
}

.t73-required {
    color: #d9a3a0;
    margin-left: 2px;
}

.t73-form-field textarea,
.t73-form-field input[type="text"],
.t73-form-field input[type="date"],
.t73-form-field input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e0e8db;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    box-sizing: border-box;
    font-family: inherit;
    background: #ffffff;
}

.t73-form-field textarea {
    min-height: 80px;
    resize: vertical;
}

.t73-form-field textarea:focus,
.t73-form-field input:focus {
    outline: none;
    border-color: #afc3b1;
}

.t73-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.t73-edit-btn {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    border: 1.5px solid;
    background: #ffffff;
    transition: background 0.2s ease;
    font-family: inherit;
}

.t73-edit-btn-cancel {
    border-color: #e0e8db;
    color: #888;
}

.t73-edit-btn-save {
    border-color: #afc3b1;
    color: #6f7f6a;
}

.t73-edit-btn:active {
    background: #fafbf8;
}

.t73-history-list {
    max-height: 400px;
    overflow-y: auto;
}

.t73-history-item {
    padding: 12px;
    border: 1px solid #e0e8db;
    border-radius: 10px;
    margin-bottom: 10px;
}

.t73-history-item:last-child {
    margin-bottom: 0;
}

.t73-history-date {
    font-size: 12px;
    color: #888;
    font-variant-numeric: tabular-nums;
    margin-bottom: 6px;
}

.t73-history-arrow {
    font-size: 14px;
    color: #6f7f6a;
    font-weight: 500;
}

.t73-history-context {
    margin-top: 6px;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
}

/* ==================== T7.4 语义记忆"了解你"（花园色系） ==================== */

.t74-wrapper {
    padding: 16px 20px 24px;
}

.t74-categories-list,
.t74-detail-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.t74-cat-card {
    background: #ffffff;
    border: 1.5px solid #e0e8db;
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 2px 10px rgba(175, 195, 177, 0.12);
}

.t74-cat-card:active {
    background: #fafbf8;
    border-color: #afc3b1;
}

.t74-cat-name {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    letter-spacing: 0.3px;
}

.t74-cat-count {
    font-size: 13px;
    color: #888;
}

.t74-cat-arrow {
    color: #afc3b1;
    flex-shrink: 0;
}

.t74-add-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: #d9a3a0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.t74-add-btn:active {
    color: #afc3b1;
}

.t74-semantic-card {
    background: #ffffff;
    border: 1.5px solid #e0e8db;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(175, 195, 177, 0.12);
}

.t74-card-key {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    line-height: 1.5;
    word-break: break-word;
}

.t74-card-value {
    margin-top: 8px;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    word-break: break-word;
}

.t74-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.t74-meta-chip {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 10px;
    line-height: 1.4;
}

.t74-meta-source {
    background: #fef0ee;
    color: #d9a3a0;
}

.t74-meta-confidence {
    background: #f0f3ed;
    color: #6f7f6a;
}

.t74-meta-mention {
    background: #f7f5f3;
    color: #888;
}

.t74-meta-subject {
    background: #e2ebe1;
    color: #5d6e58;
}

.t74-card-previous {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fafbf8;
    border-left: 3px solid #afc3b1;
    border-radius: 6px;
    font-size: 12px;
    color: #888;
    line-height: 1.5;
    word-break: break-word;
}

.t74-card-times {
    margin-top: 10px;
    font-size: 12px;
    color: #888;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   梦瑟 mengse（媚char / 梦女 独立 App）—— 月白 + 黛紫
   追加于文件末尾，全部选择器 mengse 前缀，避免被基类源码顺序覆盖
   ============================================================ */

/* ---- 主屏图标（第三页，景匣右侧）---- */
.app-mengse { grid-column: 2; grid-row: 1; }
.icon-mengse { color: #8a7aa8; }
.icon-mengse svg {
    position: absolute;
    width: 26px; height: 26px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: block;
}
.phone-frame.night-mode .icon-mengse { color: #b9a8d6; }

/* ---- 书架页 ---- */
.mengse-shelf-content {
    padding: 16px;
    min-height: 100%;
    box-sizing: border-box;
    background: linear-gradient(180deg, #f6f4fa 0%, #fbfaff 60%, #ffffff 100%);
}
.mengse-shelf {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.mengse-card {
    background: #ffffff;
    border: 1px solid #ece7f3;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 4px 14px rgba(120, 100, 160, 0.08);
    cursor: pointer;
    transition: transform 0.15s ease;
    -webkit-user-select: none; user-select: none;
}
.mengse-card:active { transform: scale(0.97); }
.mengse-card-cover {
    height: 88px;
    border-radius: 12px;
    background: linear-gradient(135deg, #efe9f7, #e7eef7);
    display: flex; align-items: center; justify-content: center;
    font-size: 34px;
    overflow: hidden;
    margin-bottom: 10px;
}
.mengse-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.mengse-card-name {
    font-size: 15px; font-weight: 600; color: #3a3346;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mengse-card-meta {
    margin-top: 4px; font-size: 11px; color: #9b93a8;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mengse-card-mode {
    display: inline-block;
    padding: 1px 7px; border-radius: 8px; font-size: 10px;
    background: #efeaf7; color: #7d6fa0;
}
.mengse-card-mode.mode-B { background: #efe6ee; color: #a06f95; }
.mengse-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 70px 24px; color: #b4abc2; text-align: center;
}
.mengse-empty p { margin: 0; font-size: 14px; }
.mengse-empty-sub { font-size: 12px !important; color: #c7bfd6 !important; }

/* ---- 实例主界面（仰视 ta 的生活动态流）---- */
#mengse-world {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mengse-world-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 45px 16px 12px;   /* 45px 顶距避开状态栏，与 .page-header 对齐 */
    background: linear-gradient(135deg, #efe9f7, #e9eef8);
    border-bottom: 1px solid #ece7f3;
}
.mengse-world-header .back-btn { flex: 0 0 auto; }
.mengse-world-idol { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.mengse-world-avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: #d9cfe9; overflow: hidden; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.mengse-world-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mengse-world-meta { min-width: 0; }
.mengse-world-name {
    font-size: 16px; font-weight: 700; color: #36304a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mengse-world-sub { font-size: 11px; color: #8a82a0; margin-top: 2px; }
.mengse-refresh-btn {
    flex: 0 0 auto;
    width: 36px; height: 36px; border-radius: 50%;
    border: none; background: rgba(255, 255, 255, 0.6); color: #7d6fa0;
    font-size: 18px; cursor: pointer;
}
.mengse-refresh-btn:active { transform: scale(0.9); }
.mengse-feed {
    padding: 16px;
    min-height: 100%;
    box-sizing: border-box;
    background: linear-gradient(180deg, #faf9fd, #ffffff);
}
.mengse-feed-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 80px 24px; color: #b4abc2; text-align: center;
}
.mengse-feed-empty p { margin: 0; font-size: 14px; }
.mengse-feed-empty-sub { font-size: 12px !important; color: #c7bfd6 !important; }
.mengse-tab-body { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.mengse-surface { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mengse-surface-stub {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; gap: 6px; padding: 24px; color: #b4abc2; text-align: center;
}
.mengse-surface-stub p { margin: 0; font-size: 14px; }
.mengse-stub-sub { font-size: 12px !important; color: #c7bfd6 !important; }
.mengse-tabbar {
    display: flex;
    border-top: 1px solid #ece7f3;
    background: #ffffff;
    /* 底部吃安全区 + 安卓三键导航栏内距，避免被遮 */
    padding-bottom: max(0px, env(safe-area-inset-bottom, 0px), var(--android-nav-bottom, 0px));
}
.mengse-tab {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 8px 0 7px;
    border: none; background: none; color: #b4abc2;
    font-size: 11px; cursor: pointer;
}
.mengse-tab-ico { font-size: 18px; line-height: 1; }
.mengse-tab.active { color: #7d6fa0; }

/* ---- 新建实例弹窗 ---- */
.mengse-modal {
    display: none;            /* JS 打开时置 flex */
    position: fixed; inset: 0;
    z-index: 1000;
    align-items: center; justify-content: center;
    background: rgba(40, 32, 54, 0.42);
    padding: 24px;
}
.mengse-modal-card {
    width: 100%; max-width: 340px;
    max-height: 76vh;
    display: flex; flex-direction: column;
    background: #ffffff; border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(60, 44, 90, 0.28);
}
.mengse-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid #f0ecf6;
    font-size: 16px; font-weight: 700; color: #3a3346;
}
.mengse-modal-close {
    border: none; background: none; color: #b4abc2;
    font-size: 22px; line-height: 1; cursor: pointer;
}
.mengse-step { padding: 16px 18px; overflow-y: auto; }
.mengse-char-list { display: flex; flex-direction: column; gap: 4px; }
.mengse-char-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 8px; border-radius: 12px; cursor: pointer;
}
.mengse-char-item:active { background: #f4f1fa; }
.mengse-char-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    overflow: hidden; background: #e3dcef; flex: 0 0 auto;
}
.mengse-char-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mengse-char-name { font-size: 15px; color: #3a3346; }
.mengse-char-empty { padding: 40px 0; text-align: center; color: #b4abc2; font-size: 13px; }
.mengse-mode-card {
    border: 1px solid #ece7f3; border-radius: 14px;
    padding: 14px; margin-bottom: 12px; cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.mengse-mode-card:active { background: #f4f1fa; border-color: #c9bce4; }
.mengse-mode-name { font-size: 15px; font-weight: 700; color: #4a3f63; margin-bottom: 4px; }
.mengse-mode-desc { font-size: 12px; color: #8a82a0; line-height: 1.5; }
.mengse-input, .mengse-textarea {
    width: 100%; box-sizing: border-box;
    border: 1px solid #e6e0f0; border-radius: 12px;
    padding: 10px 12px; font-size: 14px; color: #3a3346;
    background: #faf9fd; margin-bottom: 10px;
    font-family: inherit;
}
.mengse-textarea { min-height: 56px; resize: vertical; line-height: 1.5; }
.mengse-setup-b-hint {
    font-size: 13px; color: #8a82a0; line-height: 1.6;
    background: #f6f3fb; border-radius: 12px; padding: 12px; margin-bottom: 10px;
}
.mengse-create-btn {
    width: 100%; padding: 12px 0; border: none; border-radius: 14px;
    background: linear-gradient(135deg, #9b86c4, #b89bcb); color: #fff;
    font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 4px;
}
.mengse-create-btn:active { transform: scale(0.98); }

/* ---- 顶部安全区适配（自定义头部不会自动获得，照 .dreamland-subpage-header 范式补）---- */
body.top-safe-fix.fullscreen-mode .mengse-world-header {
    padding-top: max(45px, calc(12px + env(safe-area-inset-top, 0px)));
}
body.native-statusbar:not(.keep-frame) .mengse-world-header {
    padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
}

/* ---- 夜间模式 ---- */
.phone-frame.night-mode .mengse-shelf-content {
    background: linear-gradient(180deg, #15131a 0%, #0e0d12 100%);
}
.phone-frame.night-mode .mengse-card {
    background: #1b1922; border-color: #2a2733;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.phone-frame.night-mode .mengse-card-cover { background: linear-gradient(135deg, #26222f, #20242e); }
.phone-frame.night-mode .mengse-card-name { color: #e8e3f0; }
.phone-frame.night-mode .mengse-card-meta { color: #8b8398; }
.phone-frame.night-mode .mengse-card-mode { background: #2c2738; color: #b9a8d6; }
.phone-frame.night-mode .mengse-card-mode.mode-B { background: #322733; color: #cf9fc0; }
.phone-frame.night-mode .mengse-empty,
.phone-frame.night-mode .mengse-feed-empty { color: #6f6880; }
.phone-frame.night-mode #mengse-world { background: #0a0a0a; }
.phone-frame.night-mode .mengse-world-header {
    background: linear-gradient(135deg, #1c1826, #161a26);
    border-bottom-color: #2a2733;
}
.phone-frame.night-mode .mengse-world-name { color: #f0ecf7; }
.phone-frame.night-mode .mengse-world-sub { color: #9b93a8; }
.phone-frame.night-mode .mengse-refresh-btn { background: rgba(255, 255, 255, 0.08); color: #b9a8d6; }
.phone-frame.night-mode .mengse-feed { background: linear-gradient(180deg, #100f15, #0a0a0a); }
.phone-frame.night-mode .mengse-tabbar { background: #141219; border-top-color: #2a2733; }
.phone-frame.night-mode .mengse-tab { color: #6f6880; }
.phone-frame.night-mode .mengse-tab.active { color: #c6b9df; }
.phone-frame.night-mode .mengse-surface-stub { color: #6f6880; }
.phone-frame.night-mode .mengse-modal-card { background: #1b1922; }
.phone-frame.night-mode .mengse-modal-head { color: #e8e3f0; border-bottom-color: #2a2733; }
.phone-frame.night-mode .mengse-char-item:active { background: #242030; }
.phone-frame.night-mode .mengse-char-name { color: #e8e3f0; }
.phone-frame.night-mode .mengse-mode-card { border-color: #2a2733; }
.phone-frame.night-mode .mengse-mode-card:active { background: #242030; border-color: #4a3f63; }
.phone-frame.night-mode .mengse-mode-name { color: #ddd3ef; }
.phone-frame.night-mode .mengse-mode-desc { color: #9b93a8; }
.phone-frame.night-mode .mengse-input,
.phone-frame.night-mode .mengse-textarea {
    background: #15131a; border-color: #2f2a3a; color: #e8e3f0;
}
.phone-frame.night-mode .mengse-setup-b-hint { background: #1c1825; color: #9b93a8; }

/* ============================================================
   梦瑟 · 全局「我的页面」（梦区/我 两 tab）+ 设置子页
   ============================================================ */
#mengse { display: flex; flex-direction: column; overflow: hidden; }
.mengse-home-body { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.mengse-home-surface { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* 主页底部 2-tab */
.mengse-home-tabbar {
    display: flex;
    border-top: 1px solid #ece7f3;
    background: #ffffff;
    padding-bottom: max(0px, env(safe-area-inset-bottom, 0px), var(--android-nav-bottom, 0px));
}
.mengse-home-tab {
    flex: 1; padding: 11px 0 10px;
    border: none; background: none; color: #b4abc2;
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.mengse-home-tab.active { color: #7d6fa0; }

/* 我 */
.mengse-me-content { padding: 20px 16px; }
.mengse-me-profile { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 0 22px; }
.mengse-me-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, #c9bce4, #d9cfe9); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 26px; overflow: hidden;
}
.mengse-me-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mengse-me-name { font-size: 16px; font-weight: 700; color: #3a3346; }
.mengse-me-card {
    background: #ffffff; border: 1px solid #ece7f3; border-radius: 16px;
    padding: 14px 16px; margin-bottom: 12px; box-shadow: 0 4px 14px rgba(120, 100, 160, 0.06);
}
.mengse-me-card-title { font-size: 13px; font-weight: 700; color: #7d6fa0; margin-bottom: 10px; }
.mengse-me-card-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #4a4456; padding: 4px 0; }
.mengse-me-dim { color: #b4abc2; font-size: 13px; }
.mengse-me-item {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    background: #ffffff; border: 1px solid #ece7f3; border-radius: 16px;
    padding: 15px 16px; font-size: 15px; color: #3a3346; cursor: pointer;
}
.mengse-me-item:active { background: #f4f1fa; }
.mengse-me-arrow { color: #c7bfd6; font-size: 20px; }

/* 设置子页 */
.mengse-settings-content { padding: 16px; }
.mengse-setting-block { margin-bottom: 22px; }
.mengse-setting-label { display: block; font-size: 14px; font-weight: 700; color: #3a3346; margin-bottom: 4px; }
.mengse-setting-hint { margin: 0 0 8px; font-size: 12px; color: #9b93a8; line-height: 1.5; }
.mengse-setting-textarea {
    width: 100%; box-sizing: border-box; min-height: 120px; resize: vertical;
    border: 1px solid #e6e0f0; border-radius: 12px; padding: 10px 12px;
    font-size: 14px; line-height: 1.5; color: #3a3346; background: #faf9fd; font-family: inherit;
}
.mengse-setting-input {
    width: 100%; box-sizing: border-box;
    border: 1px solid #e6e0f0; border-radius: 12px; padding: 10px 12px;
    font-size: 14px; color: #3a3346; background: #faf9fd; font-family: inherit;
}

/* 我的页面 + 设置 夜间 */
.phone-frame.night-mode .mengse-home-tabbar { background: #141219; border-top-color: #2a2733; }
.phone-frame.night-mode .mengse-home-tab { color: #6f6880; }
.phone-frame.night-mode .mengse-home-tab.active { color: #c6b9df; }
.phone-frame.night-mode .mengse-me-avatar { background: linear-gradient(135deg, #3a3350, #2c2738); }
.phone-frame.night-mode .mengse-me-name { color: #e8e3f0; }
.phone-frame.night-mode .mengse-me-card,
.phone-frame.night-mode .mengse-me-item { background: #1b1922; border-color: #2a2733; }
.phone-frame.night-mode .mengse-me-card-row { color: #c8c2d4; }
.phone-frame.night-mode .mengse-me-item { color: #e8e3f0; }
.phone-frame.night-mode .mengse-me-item:active { background: #242030; }
.phone-frame.night-mode .mengse-setting-label { color: #e8e3f0; }
.phone-frame.night-mode .mengse-setting-textarea,
.phone-frame.night-mode .mengse-setting-input { background: #15131a; border-color: #2f2a3a; color: #e8e3f0; }

/* ---- 动态内子 tab（社交/作品/超话/热搜）·子 tab 条固定顶 + 子内容独立滚 ---- */
#mengse-surface-feed { display: flex; flex-direction: column; overflow: hidden; }
.mengse-subtab-bar {
    flex: 0 0 auto;
    display: flex; gap: 4px;
    padding: 8px 12px;
    border-bottom: 1px solid #ece7f3;
    background: #faf9fd;
}
.mengse-subtab {
    padding: 5px 12px; border: none; border-radius: 14px;
    background: transparent; color: #9b93a8;
    font-size: 13px; cursor: pointer;
}
.mengse-subtab.active { background: #efeaf7; color: #6f6390; font-weight: 600; }
.mengse-subbody { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.mengse-subsurface { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.phone-frame.night-mode .mengse-subtab-bar { background: #15131a; border-bottom-color: #2a2733; }
.phone-frame.night-mode .mengse-subtab { color: #8b8398; }
.phone-frame.night-mode .mengse-subtab.active { background: #262130; color: #c6b9df; }

/* ---- 动态帖子卡（公共正常 / 私密打码锁 / 媒体占位）---- */
.mengse-post {
    position: relative;
    background: #fff; border: 1px solid #ece7f3; border-radius: 14px;
    padding: 14px; margin-bottom: 12px;
    box-shadow: 0 3px 12px rgba(120, 100, 160, 0.05);
}
.mengse-post-kind { font-size: 11px; color: #b4abc2; margin-bottom: 6px; }
.mengse-post-text { font-size: 15px; color: #3a3346; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.mengse-post-media { margin-top: 10px; padding: 9px 12px; background: #f4f1fa; border-radius: 10px; font-size: 13px; color: #7d6fa0; cursor: pointer; }
.mengse-post-private .mengse-post-blur { filter: blur(6px); user-select: none; pointer-events: none; }
.mengse-post-lock {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(245, 243, 250, 0.5); border-radius: 14px;
    color: #9b8fb5; font-size: 13px; font-weight: 600;
}
.phone-frame.night-mode .mengse-post { background: #1b1922; border-color: #2a2733; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35); }
.phone-frame.night-mode .mengse-post-kind { color: #6f6880; }
.phone-frame.night-mode .mengse-post-text { color: #e8e3f0; }
.phone-frame.night-mode .mengse-post-media { background: #262130; color: #c6b9df; }
.phone-frame.night-mode .mengse-post-lock { background: rgba(20, 18, 25, 0.6); color: #9b8fb5; }

/* ---- 帖子头部（头像/昵称/时间/徽章）+ 媒体标 + 私密只糊正文 ---- */
.mengse-post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mengse-post-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
    background: #e3dcef; color: #7d6fa0;
    display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600;
}
.mengse-post-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mengse-post-meta { flex: 1; min-width: 0; }
.mengse-post-name { font-size: 14px; font-weight: 600; color: #3a3346; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mengse-post-time { font-size: 11px; color: #b4abc2; }
.mengse-post-badge { flex: 0 0 auto; font-size: 10px; padding: 1px 8px; border-radius: 8px; background: #efe6ee; color: #a06f95; }
.mengse-post-badge.pub { background: #efeaf7; color: #7d6fa0; }
.mengse-post-media-type { display: inline-block; font-size: 11px; padding: 1px 6px; margin-right: 6px; background: #e3dcef; color: #6f6390; border-radius: 6px; }
.mengse-post-content-wrap { position: relative; }   /* 私密锁罩只罩这层，头部露出 */

/* 受欢迎度滑块（复用 .setting-slider 的 thumb/轨道，加满宽 + 黛紫 thumb） */
.mengse-range-label { display: block; font-size: 13px; color: #6f6390; margin: 6px 0 2px; }
.mengse-range-label small { color: #b4abc2; font-size: 11px; }
.mengse-range { width: 100%; margin: 4px 0 10px; }
.mengse-range::-webkit-slider-thumb { background: #9b86c4; }

.phone-frame.night-mode .mengse-post-avatar { background: #2c2738; color: #b9a8d6; }
.phone-frame.night-mode .mengse-post-name { color: #e8e3f0; }
.phone-frame.night-mode .mengse-post-time { color: #6f6880; }
.phone-frame.night-mode .mengse-post-badge { background: #322733; color: #cf9fc0; }
.phone-frame.night-mode .mengse-post-badge.pub { background: #2c2738; color: #b9a8d6; }
.phone-frame.night-mode .mengse-post-media-type { background: #2c2738; color: #b9a8d6; }
.phone-frame.night-mode .mengse-range-label { color: #b9a8d6; }

/* ---- 帖子媒体宫格（单图/2列/九宫格）+ 点击灯箱 ---- */
.mengse-media { margin-top: 10px; display: grid; gap: 6px; }
.mengse-media.single { grid-template-columns: 1fr; }
.mengse-media.g2 { grid-template-columns: 1fr 1fr; }
.mengse-media.g3 { grid-template-columns: 1fr 1fr 1fr; }
.mengse-media-cell {
    aspect-ratio: 1 / 1;
    background: #f4f1fa; border-radius: 10px;
    padding: 8px; overflow: hidden; cursor: pointer;
    display: flex; flex-direction: column; gap: 4px;
}
.mengse-media.single .mengse-media-cell { aspect-ratio: 16 / 9; }
.mengse-media-tag { align-self: flex-start; font-size: 10px; padding: 1px 6px; background: #e3dcef; color: #6f6390; border-radius: 6px; }
.mengse-media-desc { font-size: 12px; color: #7d6fa0; line-height: 1.4; overflow: hidden; }
.mengse-lightbox-desc { padding: 16px 18px; font-size: 15px; color: #3a3346; line-height: 1.7; white-space: pre-wrap; word-break: break-word; overflow-y: auto; }

.phone-frame.night-mode .mengse-media-cell { background: #262130; }
.phone-frame.night-mode .mengse-media-tag { background: #2c2738; color: #b9a8d6; }
.phone-frame.night-mode .mengse-media-desc { color: #c6b9df; }
.phone-frame.night-mode .mengse-lightbox-desc { color: #e8e3f0; }

/* ============================================================
   梦瑟 · 帖子互动行 + 帖子详情页 + 评论（Step A · 人海氛围）
   ============================================================ */
.mengse-post-engage {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid #f1ecf8;
    display: flex; gap: 16px;
    font-size: 12px; color: #b4abc2;
}

/* 详情页：page 自滚 + page-header sticky，内容区纯 padding 包裹 */
#mengse-post-detail { background: #faf9fd; }
#mengse-post-detail { overflow: hidden; }   /* page 不自滚 → 内部 scroll 区滚，输入条固定底 */
.mengse-detail-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; }
.mengse-detail-chead { margin: 6px 2px 12px; font-size: 13px; font-weight: 700; color: #7d6fa0; }

/* 评论项（顶楼 / 楼中楼缩进）*/
.mengse-comment { display: flex; gap: 10px; padding: 10px 2px; }
.mengse-comment.is-reply { margin-left: 38px; }
.mengse-comment-av {
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
    background: #e3dcef; color: #7d6fa0;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600;
}
.mengse-comment-body { flex: 1; min-width: 0; }
.mengse-comment-name { font-size: 12px; font-weight: 600; color: #8b8398; display: flex; align-items: baseline; gap: 8px; }
.mengse-comment-time { font-size: 11px; font-weight: 400; color: #c2bace; }
.mengse-comment-text { margin-top: 3px; font-size: 14px; color: #3a3346; line-height: 1.55; word-break: break-word; white-space: pre-wrap; }
.mengse-comment-reply { color: #9b86c4; }
.mengse-comment-empty { padding: 40px 0; text-align: center; color: #c2bace; font-size: 13px; }

/* 加载更多 */
.mengse-loadmore-btn {
    width: 100%; margin-top: 12px; padding: 11px 0;
    border: 1px solid #e6e0f0; border-radius: 12px;
    background: #fff; color: #7d6fa0; font-size: 13px; font-weight: 600; cursor: pointer;
}
.mengse-loadmore-btn:active { background: #f4f1fa; }

/* 夜间 */
.phone-frame.night-mode .mengse-post-engage { border-top-color: #2a2733; color: #6f6880; }
.phone-frame.night-mode #mengse-post-detail { background: #0a0a0a; }
.phone-frame.night-mode .mengse-detail-chead { color: #b9a8d6; }
.phone-frame.night-mode .mengse-comment-av { background: #2c2738; color: #b9a8d6; }
.phone-frame.night-mode .mengse-comment-name { color: #8b8398; }
.phone-frame.night-mode .mengse-comment-time { color: #6f6880; }
.phone-frame.night-mode .mengse-comment-text { color: #e8e3f0; }
.phone-frame.night-mode .mengse-comment-reply { color: #b9a8d6; }
.phone-frame.night-mode .mengse-comment-empty { color: #6f6880; }
.phone-frame.night-mode .mengse-loadmore-btn { background: #1b1922; border-color: #2a2733; color: #c6b9df; }
.phone-frame.night-mode .mengse-loadmore-btn:active { background: #242030; }

/* ===== Step B：你留言（输入条）+ char 翻牌（作者）===== */
.mengse-detail-inputbar {
    flex: 0 0 auto; display: flex; gap: 8px; align-items: center;
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px), var(--android-nav-bottom, 0px));
    border-top: 1px solid #ece7f3; background: #fff;
}
.mengse-detail-input {
    flex: 1; min-width: 0; box-sizing: border-box;
    border: 1px solid #e6e0f0; border-radius: 18px; padding: 8px 14px;
    font-size: 14px; color: #3a3346; background: #faf9fd; font-family: inherit;
}
.mengse-detail-send {
    flex: 0 0 auto; border: none; border-radius: 16px; padding: 8px 16px;
    background: #9b86c4; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}
.mengse-detail-send:active { background: #8872b4; }
.mengse-comment.is-user .mengse-comment-av { background: #9b86c4; color: #fff; }
.mengse-comment.is-user .mengse-comment-name { color: #7d6fa0; }
.mengse-comment.is-char { background: #faf0f6; border-radius: 12px; padding: 8px 10px; }
.mengse-comment.is-char .mengse-comment-av { background: linear-gradient(135deg, #d68ab8, #b86b9c); color: #fff; }
.mengse-comment-av img { width: 100%; height: 100%; object-fit: cover; }
.mengse-comment-author {
    margin-left: 6px; font-size: 10px; font-weight: 700;
    padding: 1px 6px; border-radius: 7px; background: #f0d2e4; color: #a8487e;
}
.mengse-comment-like { flex: 0 0 auto; align-self: flex-start; font-size: 12px; color: #b4abc2; padding-top: 1px; white-space: nowrap; }
.mengse-comment-like::before { content: '♡'; margin-right: 3px; font-size: 13px; }
.phone-frame.night-mode .mengse-detail-inputbar { background: #141219; border-top-color: #2a2733; }
.phone-frame.night-mode .mengse-detail-input { background: #15131a; border-color: #2f2a3a; color: #e8e3f0; }
.phone-frame.night-mode .mengse-detail-send { background: #6f5f96; }
.phone-frame.night-mode .mengse-comment.is-user .mengse-comment-av { background: #6f5f96; }
.phone-frame.night-mode .mengse-comment.is-char { background: #2a1822; }
.phone-frame.night-mode .mengse-comment.is-char .mengse-comment-av { background: linear-gradient(135deg, #a85a86, #8a4068); }
.phone-frame.night-mode .mengse-comment-author { background: #4a2638; color: #e8a8c8; }
.phone-frame.night-mode .mengse-comment-like { color: #6f6880; }

/* ===== 子步1：char 作品（事业条目卡）===== */
.mengse-works { padding: 16px; min-height: 100%; box-sizing: border-box; background: linear-gradient(180deg, #faf9fd, #ffffff); }
.mengse-work-card {
    position: relative;
    background: #fff; border: 1px solid #ece7f3; border-radius: 14px;
    padding: 14px; margin-bottom: 12px;
    box-shadow: 0 3px 12px rgba(120, 100, 160, 0.05);
}
.mengse-work-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mengse-work-type { font-size: 12px; font-weight: 700; color: #7d6fa0; background: #efeaf7; padding: 2px 8px; border-radius: 8px; }
.mengse-work-series { font-size: 12px; color: #9b86c4; font-weight: 600; }
.mengse-work-status { font-size: 11px; color: #a06f95; background: #f6eef3; padding: 1px 7px; border-radius: 8px; }
.mengse-work-card .mengse-post-badge { margin-left: auto; }
.mengse-work-title { font-size: 15px; font-weight: 700; color: #3a3346; margin-bottom: 3px; }
.mengse-work-time { font-size: 11px; color: #b4abc2; margin-bottom: 8px; }
.mengse-work-content { font-size: 14px; color: #4a4456; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.mengse-work-content-wrap { position: relative; }
.mengse-work-private .mengse-work-blur { filter: blur(6px); user-select: none; pointer-events: none; }
.phone-frame.night-mode .mengse-works { background: linear-gradient(180deg, #100f15, #0a0a0a); }
.phone-frame.night-mode .mengse-work-card { background: #1b1922; border-color: #2a2733; box-shadow: 0 3px 12px rgba(0,0,0,0.35); }
.phone-frame.night-mode .mengse-work-type { background: #262130; color: #c6b9df; }
.phone-frame.night-mode .mengse-work-series { color: #b9a8d6; }
.phone-frame.night-mode .mengse-work-status { background: #322733; color: #cf9fc0; }
.phone-frame.night-mode .mengse-work-title { color: #e8e3f0; }
.phone-frame.night-mode .mengse-work-time { color: #6f6880; }
.phone-frame.night-mode .mengse-work-content { color: #c8c2d4; }

.t74-card-actions {
    margin-top: 14px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.t74-action-btn {
    padding: 6px 14px;
    border: 1.5px solid #e0e8db;
    background: #ffffff;
    color: #6f7f6a;
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.t74-action-btn:active {
    background: #fafbf8;
    border-color: #afc3b1;
}

.t74-action-btn.danger {
    color: #d9a3a0;
}

.t74-action-btn.danger:active {
    border-color: #d9a3a0;
    background: #fef5f3;
}

.t74-empty {
    padding: 60px 20px;
    text-align: center;
    color: #afc3b1;
    font-size: 14px;
    line-height: 1.8;
}

.t74-empty-hint {
    margin-top: 8px;
    color: #b8b3a3;
    font-size: 12px;
}

/* 弹窗 */
.t74-edit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}

.t74-edit-overlay.active {
    display: flex;
}

.t74-edit-dialog {
    background: #ffffff;
    border-radius: 14px;
    padding: 22px;
    width: 86%;
    max-width: 380px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}

.t74-edit-header {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 14px;
}

.t74-form-field {
    margin-bottom: 14px;
}

.t74-form-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #6f7f6a;
    margin-bottom: 6px;
}

.t74-required {
    color: #d9a3a0;
    margin-left: 2px;
}

.t74-form-field textarea,
.t74-form-field input[type="text"],
.t74-form-field select {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e0e8db;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    box-sizing: border-box;
    font-family: inherit;
    background: #ffffff;
}

.t74-form-field textarea {
    min-height: 80px;
    resize: vertical;
}

.t74-form-field textarea:focus,
.t74-form-field input:focus,
.t74-form-field select:focus {
    outline: none;
    border-color: #afc3b1;
}

.t74-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.t74-edit-btn {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    border: 1.5px solid;
    background: #ffffff;
    transition: background 0.2s ease;
    font-family: inherit;
}

.t74-edit-btn-cancel {
    border-color: #e0e8db;
    color: #888;
}

.t74-edit-btn-save {
    border-color: #afc3b1;
    color: #6f7f6a;
}

.t74-edit-btn:active {
    background: #fafbf8;
}

/* ==================== T7.5 情感记忆 + 自我成长（花园色系） ==================== */

.t75-wrapper {
    padding: 16px 20px 24px;
}

.t75-types-list,
.t75-detail-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.t75-type-card {
    background: #ffffff;
    border: 1.5px solid #e0e8db;
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 2px 10px rgba(175, 195, 177, 0.12);
}

.t75-type-card:active {
    background: #fafbf8;
    border-color: #afc3b1;
}

.t75-type-name {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    letter-spacing: 0.3px;
}

.t75-type-count {
    font-size: 13px;
    color: #888;
}

.t75-type-arrow {
    color: #afc3b1;
    flex-shrink: 0;
}

.t75-card {
    background: #ffffff;
    border: 1.5px solid #e0e8db;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(175, 195, 177, 0.12);
}

.t75-card.narrative {
    padding: 24px 22px;
}

.t75-card-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    line-height: 1.5;
    word-break: break-word;
}

.t75-card-context {
    margin-top: 8px;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    word-break: break-word;
}

.t75-card-narrative-content {
    font-size: 14px;
    color: #333;
    line-height: 1.8;
    word-break: break-word;
    white-space: pre-wrap;
}

.t75-card-evidence {
    margin-top: 8px;
    padding: 8px 12px;
    background: #fafbf8;
    border-left: 3px solid #afc3b1;
    border-radius: 6px;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    word-break: break-word;
}

.t75-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.t75-meta-chip {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 10px;
    line-height: 1.4;
}

.t75-meta-strong {
    background: #fef0ee;
    color: #d9a3a0;
}

.t75-meta-trend {
    background: #f0f3ed;
    color: #6f7f6a;
}

.t75-meta-time {
    background: #f7f5f3;
    color: #888;
}

.t75-card-times {
    margin-top: 10px;
    font-size: 12px;
    color: #888;
    font-variant-numeric: tabular-nums;
}

.t75-card-narrative-meta {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f0f3ed;
    font-size: 12px;
    color: #888;
    line-height: 1.6;
}

.t75-card-actions {
    margin-top: 14px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.t75-action-btn {
    padding: 6px 14px;
    border: 1.5px solid #e0e8db;
    background: #ffffff;
    color: #6f7f6a;
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.t75-action-btn:active {
    background: #fafbf8;
    border-color: #afc3b1;
}

.t75-action-btn.danger {
    color: #d9a3a0;
}

.t75-action-btn.danger:active {
    border-color: #d9a3a0;
    background: #fef5f3;
}

.t75-empty {
    padding: 60px 20px;
    text-align: center;
    color: #afc3b1;
    font-size: 14px;
    line-height: 1.8;
}

.t75-empty-hint {
    margin-top: 8px;
    color: #b8b3a3;
    font-size: 12px;
}

/* 弹窗 */
.t75-edit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}

.t75-edit-overlay.active {
    display: flex;
}

.t75-edit-dialog {
    background: #ffffff;
    border-radius: 14px;
    padding: 22px;
    width: 86%;
    max-width: 380px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}

.t75-edit-header {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 14px;
}

.t75-form-field {
    margin-bottom: 14px;
}

.t75-form-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #6f7f6a;
    margin-bottom: 6px;
}

.t75-form-field textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px 12px;
    border: 1.5px solid #e0e8db;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
    background: #ffffff;
}

.t75-form-field textarea:focus {
    outline: none;
    border-color: #afc3b1;
}

.t75-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.t75-edit-btn {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    border: 1.5px solid;
    background: #ffffff;
    transition: background 0.2s ease;
    font-family: inherit;
}

.t75-edit-btn-cancel {
    border-color: #e0e8db;
    color: #888;
}

.t75-edit-btn-save {
    border-color: #afc3b1;
    color: #6f7f6a;
}

.t75-edit-btn:active {
    background: #fafbf8;
}

/* ==================== T7.6 关系时间线（花园色系） ==================== */

.t76-wrapper {
    padding: 16px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.t76-card,
.t76-legend {
    background: #ffffff;
    border: 1.5px solid #e0e8db;
    border-radius: 14px;
    padding: 18px 16px;
    box-shadow: 0 2px 10px rgba(175, 195, 177, 0.12);
}

.t76-title {
    font-size: 14px;
    font-weight: 600;
    color: #6f7f6a;
    margin-bottom: 12px;
    padding: 0 4px;
}

.t76-canvas {
    display: block;
    width: 100%;
    max-width: 360px;
    height: 200px;
    margin: 0 auto;
}

.t76-axis-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    padding: 0 4px;
    font-size: 11px;
    color: #888;
    font-variant-numeric: tabular-nums;
}

.t76-legend {
    padding: 16px 20px;
}

.t76-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
    padding: 4px 0;
}

.t76-legend-line {
    width: 14px;
    height: 2px;
    background: #afc3b1;
    flex-shrink: 0;
}

.t76-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d9a3a0;
    flex-shrink: 0;
}

.t76-legend-square {
    width: 8px;
    height: 8px;
    background: #6f7f6a;
    flex-shrink: 0;
}

.t76-legend-count {
    margin-left: auto;
    color: #888;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.t76-legend-total {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f3ed;
    font-size: 12px;
    color: #888;
    text-align: center;
}

.t76-empty {
    padding: 60px 20px;
    text-align: center;
    color: #afc3b1;
    font-size: 14px;
    line-height: 1.8;
}

.t76-empty-hint {
    margin-top: 8px;
    color: #b8b3a3;
    font-size: 12px;
}

/* ==================== T7.7 记忆设置（花园色系） ==================== */

.t77-wrapper {
    padding: 16px 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.t77-card {
    background: #ffffff;
    border: 1.5px solid #e0e8db;
    border-radius: 14px;
    padding: 20px 18px;
    box-shadow: 0 2px 10px rgba(175, 195, 177, 0.12);
}

.t77-card-title {
    font-size: 15px;
    font-weight: 600;
    color: #6f7f6a;
    margin-bottom: 8px;
}

.t77-card-desc {
    font-size: 12px;
    color: #888;
    line-height: 1.6;
    margin-bottom: 16px;
}

.t77-action-btn {
    width: 100%;
    padding: 12px 0;
    background: #afc3b1;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s, background 0.2s;
}

.t77-action-btn:hover:not(:disabled) {
    background: #9eb5a1;
}

.t77-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.t77-status {
    margin-top: 12px;
    font-size: 12px;
    color: #888;
    text-align: center;
}

/* T7.5 — emotional_peak 按情绪标签分组（花园色系） */
.t75-emotion-group {
    margin-bottom: 6px;
}

.t75-emotion-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    margin-bottom: 8px;
    background: linear-gradient(90deg, rgba(175, 195, 177, 0.18), rgba(175, 195, 177, 0.04));
    border-left: 3px solid #afc3b1;
    border-radius: 6px;
}

.t75-emotion-group-name {
    font-size: 13px;
    font-weight: 600;
    color: #6f7f6a;
}

.t75-emotion-group-count {
    font-size: 11px;
    color: #6f7f6a;
    background: #fff;
    padding: 2px 9px;
    border-radius: 10px;
    border: 1px solid #e0e8db;
    font-variant-numeric: tabular-nums;
}

.t75-emotion-group-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.t75-emotion-group-header {
    cursor: pointer;
    user-select: none;
}

.t75-emotion-group-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.t75-emotion-group-chevron {
    font-size: 11px;
    color: #6f7f6a;
    transition: transform 0.2s ease;
}

.t75-emotion-group.t75-collapsed .t75-emotion-group-chevron {
    transform: rotate(-90deg);
}

.t75-emotion-group.t75-collapsed .t75-emotion-group-body {
    display: none;
}

/* 记忆卡片时间行（T7.2 / T7.3 / T7.5 共用花园色系） */
.t73-card-time,
.t72-card-time,
.t75-card-time {
    margin-top: 4px;
    margin-bottom: 6px;
    font-size: 12px;
    color: #6f7f6a;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
}

/* ===== 查手机/心声/朋友圈 通用翻译样式（v4.3） ===== */

/* 关键修正：.fp-record 是 flex 容器，加 flex-wrap 让译文换到新行 */
.fp-record {
    flex-wrap: wrap;
}

/* 通用白点（独立于 chat 头像白点） */
.fp-translation-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: #fff;
    border: 1px solid #c8c8c8;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    z-index: 5;
    pointer-events: none;
}

/* 通用 inline 译文（嵌入元素内、独占整行） */
.fp-inline-translation {
    flex-basis: 100%;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(0, 0, 0, 0.25);
    font-size: 12px;
    color: #666;
    font-style: normal;
    line-height: 1.5;
    word-break: break-word;
    display: none;
    box-sizing: border-box;
}
.fp-inline-translation.expanded {
    display: block;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║              共伴音乐播放器（仿网易云 + 黑白灰）                  ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ===== CSS 变量（:root 全局，不污染现有选择器） ===== */
:root {
    --mp-bg: #fafafa;
    --mp-bg-card: #ffffff;
    --mp-bg-hover: #f0f0f0;
    --mp-bg-active: #e8e8e8;
    --mp-bg-overlay: rgba(0, 0, 0, 0.5);
    --mp-bg-vinyl: #1a1a1a;
    --mp-text: #333;
    --mp-text-secondary: #666;
    --mp-text-tertiary: #999;
    --mp-text-disabled: #ccc;
    --mp-border: rgba(0, 0, 0, 0.06);
    --mp-divider: #f0f0f0;
    --mp-accent: #333;
    --mp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --mp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --mp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* ===== Page 通用：absolute 填满（仿 .novel-shelf） ===== */
.music-page {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 56px;
    background: var(--mp-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.music-page.music-player-page {
    bottom: 0;
    z-index: 100;
    background: linear-gradient(180deg, #fafafa 0%, #f0f0f0 100%);
}

/* ===== 顶部 nav（仿 .novel-shelf-header） ===== */
.music-shelf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--mp-bg-card);
    border-bottom: 1px solid var(--mp-border);
    flex-shrink: 0;
    gap: 8px;
}
.music-back-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mp-text-secondary);
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}
.music-back-btn:hover {
    background: var(--mp-bg-hover);
    color: var(--mp-text);
}
.music-back-btn svg {
    width: 18px;
    height: 18px;
}
.music-shelf-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--mp-text);
    flex: 1;
    text-align: center;
}
.music-search-input {
    flex: 1;
    height: 30px;
    border: 1px solid var(--mp-border);
    border-radius: 15px;
    padding: 0 12px;
    font-size: 13px;
    background: var(--mp-bg-hover);
    outline: none;
    box-sizing: border-box;
}
.music-search-input:focus {
    border-color: var(--mp-text-tertiary);
    background: var(--mp-bg-card);
}

/* ===== 主页 ===== */
.music-home-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}
.music-search-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    background: var(--mp-bg-hover);
    border-radius: 18px;
    color: var(--mp-text-tertiary);
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 16px;
}
.music-search-trigger .search-ico {
    width: 14px;
    height: 14px;
}

.music-section {
    margin-bottom: 20px;
}
.music-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
    margin-bottom: 10px;
}
.music-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--mp-text);
}
.music-section-action {
    display: flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    color: var(--mp-text-secondary);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
.music-section-action:hover {
    background: var(--mp-bg-hover);
}
.music-section-action svg {
    width: 14px;
    height: 14px;
}

/* 歌单卡片 */
.music-playlist-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.music-playlist-card:hover {
    background: var(--mp-bg-hover);
}
.music-playlist-cover {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--mp-bg-active);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.music-playlist-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.music-playlist-cover.like-cover {
    background: var(--mp-bg-hover);
}
.music-playlist-cover.like-cover svg {
    width: 24px;
    height: 24px;
    color: var(--mp-text);
    fill: var(--mp-text);
}
.music-playlist-info {
    flex: 1;
    min-width: 0;
}
.music-playlist-name {
    font-size: 14px;
    color: var(--mp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
}
.music-playlist-meta {
    font-size: 11px;
    color: var(--mp-text-tertiary);
}
.music-playlist-create-card {
    border: 1px dashed var(--mp-border);
    color: var(--mp-text-tertiary);
    justify-content: center;
}

/* 歌曲行（最近播放 / 歌单详情 / 队列抽屉等共用） */
.music-song-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    border-radius: 8px;
    cursor: pointer;
}
.music-song-row:hover {
    background: var(--mp-bg-hover);
}
.music-song-row.playing {
    background: var(--mp-bg-hover);
}
.music-song-row.playing .music-song-title {
    color: var(--mp-accent);
    font-weight: 500;
}
.music-song-cover {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--mp-bg-active);
    flex-shrink: 0;
}
.music-song-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.music-song-info {
    flex: 1;
    min-width: 0;
}
.music-song-title {
    font-size: 13px;
    color: var(--mp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.music-song-artist {
    font-size: 11px;
    color: var(--mp-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.music-song-duration {
    font-size: 11px;
    color: var(--mp-text-tertiary);
    flex-shrink: 0;
}
.music-song-more {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--mp-text-tertiary);
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
}
.music-song-more:hover {
    background: var(--mp-bg-active);
}
.music-song-index {
    width: 24px;
    text-align: center;
    color: var(--mp-text-tertiary);
    font-size: 12px;
    flex-shrink: 0;
}

/* ===== 搜索结果页 ===== */
.music-search-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
}
.music-search-empty,
.music-search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--mp-text-tertiary);
    font-size: 13px;
}

/* ===== 歌单详情 ===== */
.music-detail-body {
    flex: 1;
    overflow-y: auto;
}
.music-detail-info {
    display: flex;
    gap: 12px;
    padding: 16px 12px;
    background: var(--mp-bg-card);
}
.music-detail-cover {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--mp-bg-active);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.music-detail-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.music-detail-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.music-detail-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--mp-text);
    margin-bottom: 6px;
    word-break: break-word;
}
.music-detail-stats {
    font-size: 12px;
    color: var(--mp-text-tertiary);
}
.music-detail-actions {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--mp-border);
    background: var(--mp-bg-card);
}
.music-play-all-btn,
.music-add-songs-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--mp-border);
    background: var(--mp-bg-card);
    border-radius: 16px;
    font-size: 12px;
    color: var(--mp-text);
    cursor: pointer;
}
.music-play-all-btn {
    background: var(--mp-accent);
    color: #fff;
    border-color: var(--mp-accent);
}
.music-play-all-btn svg,
.music-add-songs-btn svg {
    width: 14px;
    height: 14px;
}
.music-detail-songlist {
    padding: 8px 12px;
}

/* ===== 大播放器 ===== */
.music-player-header {
    background: transparent;
    border-bottom: none;
}
.music-player-title-area {
    flex: 1;
    text-align: center;
    overflow: hidden;
    min-width: 0;
}
.music-player-song-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--mp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.music-player-song-artist {
    font-size: 11px;
    color: var(--mp-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.music-player-swiper {
    flex: 1;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
}
.music-player-track {
    display: flex;
    width: 200%;
    height: 100%;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.music-player-track[data-view="vinyl"] {
    transform: translateX(0);
}
.music-player-track[data-view="lyrics"] {
    transform: translateX(-50%);
}
.music-player-track.dragging {
    transition: none;
}
.music-player-pane {
    width: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 黑胶碟（width: 60% + max-width:220px） */
.music-vinyl-wrap {
    width: 60%;
    max-width: 220px;
    aspect-ratio: 1;
}
.music-vinyl {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle,
        #1a1a1a 0%, #1a1a1a 30%,
        #2d2d2d 30%, #2d2d2d 32%,
        #1a1a1a 32%, #1a1a1a 38%,
        #2d2d2d 38%, #2d2d2d 40%,
        #1a1a1a 40%, #1a1a1a 100%);
    box-shadow: var(--mp-shadow-md);
    position: relative;
}
.music-vinyl-cover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65%;
    height: 65%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #1a1a1a;
    background: var(--mp-bg-vinyl);
}
.music-vinyl-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--mp-bg);
    z-index: 2;
}
.music-vinyl.playing {
    animation: music-vinyl-spin 25s linear infinite;
}
.music-vinyl.paused {
    animation-play-state: paused;
}
@keyframes music-vinyl-spin {
    to {
        transform: rotate(360deg);
    }
}

/* 歌词滚动 */
.music-lyrics-scroll {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 30px 16px;
    text-align: center;
    scroll-behavior: smooth;
}
.music-lyric-line {
    padding: 8px 0;
    color: var(--mp-text-tertiary);
    font-size: 14px;
    line-height: 1.6;
    transition: all 0.3s;
}
.music-lyric-line.current {
    color: var(--mp-text);
    font-weight: 600;
    font-size: 16px;
    transform: scale(1.05);
}
.music-lyrics-empty {
    color: var(--mp-text-tertiary);
    text-align: center;
    margin-top: 40%;
    font-size: 13px;
}

/* 视图指示器 */
.music-player-indicator {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 8px 0;
    flex-shrink: 0;
}
.music-player-indicator .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mp-text-disabled);
    transition: all 0.2s;
    cursor: pointer;
}
.music-player-indicator .dot.active {
    background: var(--mp-accent);
    width: 18px;
    border-radius: 3px;
}

/* 进度条 */
.music-player-progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px 12px;
    flex-shrink: 0;
}
.music-player-time {
    font-size: 11px;
    color: var(--mp-text-tertiary);
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: center;
}
.music-player-progress {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--mp-bg-active);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.music-player-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mp-accent);
    cursor: pointer;
    border: none;
}
.music-player-progress::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--mp-accent);
    cursor: pointer;
    border: none;
}

/* 控制按钮 */
.music-player-controls {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 24px 24px;
    flex-shrink: 0;
}
.music-ctrl-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--mp-text);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    padding: 0;
}
.music-ctrl-btn:hover {
    background: var(--mp-bg-hover);
}
.music-ctrl-btn svg {
    width: 22px;
    height: 22px;
}
.music-ctrl-btn.music-play-btn {
    width: 56px;
    height: 56px;
    background: var(--mp-accent);
    color: #fff;
}
.music-ctrl-btn.music-play-btn:hover {
    background: #1a1a1a;
}
.music-ctrl-btn.music-play-btn svg {
    width: 28px;
    height: 28px;
}
.music-ctrl-btn#music-loop-btn[data-mode="single"] svg,
.music-ctrl-btn#music-loop-btn[data-mode="random"] svg {
    color: var(--mp-accent);
}
.music-ctrl-btn#music-like-btn.liked .ico-heart {
    fill: var(--mp-accent);
    stroke: var(--mp-accent);
}

/* ===== 4i：共伴音乐悬浮键（黑胶风格，右上角默认） ===== */
.music-float-btn {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%,
        #2a2a2a 0%,
        #1a1a1a 30%,
        #050505 70%,
        #000 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 4px 16px rgba(0, 0, 0, 0.45);
    z-index: 1100;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    transition: transform 0.15s ease;
}
.music-float-btn:not(.dragging):active {
    transform: scale(0.95);
}
.music-float-btn.dragging {
    transition: none;
    cursor: grabbing;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
}
.music-float-btn::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: repeating-radial-gradient(
        circle at center,
        transparent 0,
        transparent 2px,
        rgba(255, 255, 255, 0.04) 2.5px,
        rgba(255, 255, 255, 0.04) 3px
    );
    pointer-events: none;
}
.music-float-cover {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    overflow: hidden;
    background: #888;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.music-float-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.music-float-btn.playing .music-float-cover {
    animation: music-vinyl-spin 6s linear infinite;
}
.music-float-icon-pause {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
}
.music-float-icon-pause svg {
    width: 14px;
    height: 14px;
}
.music-float-btn:not(.playing) .music-float-icon-pause {
    display: flex;
}

/* ===== 迷你播放器 ===== */
.music-mini-player {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--mp-border);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 10px;
    z-index: 50;
}
.music-mini-cover-wrap {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--mp-bg-vinyl);
    flex-shrink: 0;
}
.music-mini-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.music-mini-player.playing .music-mini-cover-wrap {
    animation: music-vinyl-spin 12s linear infinite;
}
.music-mini-info {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    overflow: hidden;
}
.music-mini-title {
    font-size: 13px;
    color: var(--mp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.music-mini-artist {
    font-size: 11px;
    color: var(--mp-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.music-mini-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--mp-text);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}
.music-mini-btn:hover {
    background: var(--mp-bg-hover);
}
.music-mini-btn svg {
    width: 18px;
    height: 18px;
}

/* ===== 队列抽屉 ===== */
.music-queue-drawer {
    position: absolute;
    inset: 0;
    background: var(--mp-bg-overlay);
    z-index: 110;
    display: flex;
    align-items: flex-end;
}
.music-queue-panel {
    width: 100%;
    max-height: 70%;
    background: var(--mp-bg-card);
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
}
.music-queue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mp-border);
    flex-shrink: 0;
}
.music-queue-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--mp-text);
}
.music-queue-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

/* ===== 弹窗（仿 .video-add-modal） ===== */
.music-modal {
    position: absolute;
    inset: 0;
    background: var(--mp-bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}
.music-modal-content {
    width: 90%;
    max-width: 320px;
    max-height: 85%;
    background: var(--mp-bg-card);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.music-modal-small {
    max-width: 280px;
}
.music-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--mp-border);
    flex-shrink: 0;
}
.music-modal-header span {
    font-size: 16px;
    font-weight: 500;
    color: var(--mp-text);
}
.music-modal-close {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    color: var(--mp-text-tertiary);
    cursor: pointer;
    padding: 0;
}
.music-modal-body {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.music-modal-footer {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--mp-border);
    flex-shrink: 0;
}
.music-btn {
    flex: 1;
    height: 36px;
    border: 1px solid var(--mp-border);
    background: var(--mp-bg-card);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    color: var(--mp-text);
}
.music-btn-confirm {
    background: var(--mp-accent);
    color: #fff;
    border-color: var(--mp-accent);
}
.music-btn-confirm:disabled {
    background: var(--mp-text-disabled);
    border-color: var(--mp-text-disabled);
    cursor: not-allowed;
}
.music-btn-block {
    width: 100%;
    flex: none;
}

/* 添加歌曲弹窗 - tab + 表单（仿 .video-source-tab） */
.music-source-tabs {
    display: flex;
    gap: 8px;
    margin: -16px -16px 16px;
    padding: 16px 16px 0;
}
.music-source-tab {
    flex: 1;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: var(--mp-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.music-source-tab.active {
    background: #333;
    color: #fff;
    border-color: #333;
}
.music-form-row {
    margin-bottom: 12px;
}
.music-form-row label {
    display: block;
    font-size: 12px;
    color: var(--mp-text-secondary);
    margin-bottom: 6px;
}
.music-form-row input[type="text"] {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--mp-border);
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    background: #fff;
}
.music-form-row input[type="text"]:focus {
    border-color: var(--mp-text-tertiary);
}
.music-cover-upload {
    width: 80px;
    height: 80px;
    border: 1px dashed var(--mp-border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--mp-bg-hover);
    overflow: hidden;
}
.music-cover-upload img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.music-cover-upload .cover-placeholder {
    font-size: 11px;
    color: var(--mp-text-tertiary);
}
.music-file-upload {
    border: 2px dashed var(--mp-border);
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
}
.music-file-upload .upload-icon {
    font-size: 24px;
    margin-bottom: 6px;
}
.music-file-upload .upload-text {
    font-size: 13px;
    color: var(--mp-text);
    margin-bottom: 4px;
}
.music-file-upload .upload-hint {
    font-size: 11px;
    color: var(--mp-text-tertiary);
}
.music-online-search-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.music-online-input {
    flex: 1;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--mp-border);
    border-radius: 6px;
    outline: none;
    font-size: 13px;
    box-sizing: border-box;
}
.music-online-input:focus {
    border-color: var(--mp-text-tertiary);
}
.music-online-go {
    height: 32px;
    padding: 0 14px;
    background: var(--mp-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}
.music-online-results {
    max-height: 320px;
    overflow-y: auto;
}
.music-add-to-pl-list {
    max-height: 360px;
    overflow-y: auto;
}
.music-reselect-info {
    font-size: 13px;
    color: var(--mp-text-secondary);
    margin-bottom: 16px;
    line-height: 1.6;
    word-break: break-word;
}
.music-file-info {
    font-size: 11px;
    color: var(--mp-text-tertiary);
    margin-top: 8px;
    word-break: break-word;
}

/* ===== 上下文菜单（4g 修订：absolute 定位 + JS 转 viewport→ 局部坐标） ===== */
.music-context-menu {
    position: absolute;
    z-index: 300;
    background: var(--mp-bg-card);
    border-radius: 8px;
    box-shadow: var(--mp-shadow-lg);
    padding: 4px;
    min-width: 140px;
}
.music-context-item {
    padding: 8px 12px;
    font-size: 13px;
    color: var(--mp-text);
    cursor: pointer;
    border-radius: 4px;
}
.music-context-item:hover {
    background: var(--mp-bg-hover);
}
.music-context-item.danger {
    color: #c44;
}

/* ===== 4c 补充：空状态提示 + 上下文菜单 disabled state ===== */
.music-empty-tip {
    text-align: center;
    color: var(--mp-text-tertiary);
    font-size: 12px;
    padding: 24px 16px;
    line-height: 1.6;
}
.music-context-item.disabled {
    color: var(--mp-text-disabled);
    cursor: not-allowed;
}
.music-context-item.disabled:hover {
    background: transparent;
}

/* ===== 4d 补充：搜索结果 + 按钮 / 选歌单弹窗项 ===== */
.music-song-add {
    width: 28px;
    height: 28px;
    border: 1px solid var(--mp-border);
    background: transparent;
    border-radius: 50%;
    color: var(--mp-text);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.music-song-add:hover {
    background: var(--mp-bg-hover);
}

/* ===== 4g：最近播放虚拟卡 ===== */
.music-playlist-cover.recent-cover {
    background: var(--mp-bg-hover);
}
.music-playlist-cover.recent-cover svg {
    width: 24px;
    height: 24px;
    color: var(--mp-text);
    stroke: var(--mp-text);
}

/* ===== 4g：队列行 ✕ 移除按钮（仿 .music-song-add） ===== */
.music-song-remove {
    width: 28px;
    height: 28px;
    border: 1px solid var(--mp-border);
    background: transparent;
    border-radius: 50%;
    color: var(--mp-text-secondary);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.music-song-remove:hover {
    background: var(--mp-bg-hover);
    color: var(--mp-text);
}

.music-add-to-pl-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.music-add-to-pl-item:hover {
    background: var(--mp-bg-hover);
}
.music-add-to-pl-name {
    flex: 1;
    font-size: 14px;
    color: var(--mp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.music-add-to-pl-count {
    font-size: 12px;
    color: var(--mp-text-tertiary);
    flex-shrink: 0;
}

/* ===== 线下背景音弹窗 ===== */
/* 用 absolute 而非 fixed —— 因为 .phone-container 有 perspective 创建了包含块，
   且 .phone-frame 有 overflow: hidden，会裁剪 fixed 定位的内容。
   所有项目内的弹窗都用 absolute（参见 .modal-overlay）。 */
#ambient-modal input[type="range"],
#ambient-modal input[type="checkbox"],
#ambient-add-dialog input[type="range"],
#ambient-add-dialog input[type="checkbox"] {
    accent-color: #222;
}
.ambient-modal-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}
.ambient-modal-content {
    width: 92%;
    max-width: 420px;
    max-height: 86vh;
    background: #fff;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    overflow: hidden;
}
.ambient-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
}
.ambient-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}
.ambient-modal-close {
    background: transparent;
    border: none;
    font-size: 22px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.ambient-modal-body {
    overflow-y: auto;
    padding: 12px 16px 18px;
}
.ambient-section {
    padding: 10px 0;
    border-bottom: 1px solid #f3f3f3;
}
.ambient-section:last-child { border-bottom: none; }
.ambient-section-title {
    font-size: 13px;
    color: #666;
    margin: 6px 0 8px;
    font-weight: 600;
}
.ambient-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0;
    gap: 10px;
}
.ambient-row label {
    font-size: 13px;
    color: #444;
    flex-shrink: 0;
}
.ambient-tip {
    font-size: 11px;
    color: #999;
    line-height: 1.5;
    margin-top: 6px;
}
.ambient-vol-slider {
    flex: 1;
    margin: 0 8px;
}

/* 自定义开关 */
.ambient-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}
.ambient-switch input { opacity: 0; width: 0; height: 0; }
.ambient-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #ccc;
    border-radius: 22px;
    transition: 0.2s;
}
.ambient-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.2s;
}
.ambient-switch input:checked + .ambient-slider {
    background: #222;
}
.ambient-switch input:checked + .ambient-slider:before {
    transform: translateX(18px);
}

/* 搜索区 */
.ambient-search-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.ambient-search-input {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
}
.ambient-search-input:focus { border-color: #222; }
.ambient-search-btn {
    padding: 7px 14px;
    background: #222;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}
.ambient-search-results,
.ambient-library-list {
    max-height: 260px;
    overflow-y: auto;
}
.ambient-result-item,
.ambient-lib-item {
    padding: 8px 10px;
    margin-bottom: 6px;
    background: #f7f7f7;
    border-radius: 6px;
    font-size: 12px;
}
.ambient-result-name,
.ambient-lib-name {
    font-size: 13px;
    color: #333;
    margin-bottom: 4px;
    word-break: break-all;
}
.ambient-result-meta,
.ambient-lib-controls {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 11px;
    color: #888;
}
.ambient-lib-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}
.ambient-tag {
    background: #eee;
    color: #222;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}
.ambient-btn-mini {
    padding: 3px 9px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    color: #555;
}
.ambient-btn-mini:hover { background: #f3f3f3; }
.ambient-btn-add { background: #222; color: #fff; border-color: #222; }
.ambient-btn-add:hover { background: #000; }
.ambient-btn-del { color: #222; border-color: #ddd; }
.ambient-btn-del:hover { background: #f3f3f3; }
.ambient-loop-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #666;
}
.ambient-lib-controls input[type="range"] {
    flex: 1;
    min-width: 80px;
}
.ambient-hint {
    padding: 14px;
    text-align: center;
    color: #999;
    font-size: 12px;
}
.ambient-hint input {
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
}
.ambient-hint button {
    margin-left: 4px;
    padding: 5px 10px;
    background: #222;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

/* 添加到库的子对话框 */
.ambient-add-dialog {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    z-index: 10001;
}
.ambient-add-content {
    width: 90%;
    max-width: 340px;
    background: #fff;
    border-radius: 12px;
    padding: 18px 18px 14px;
}
.ambient-add-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}
.ambient-add-name {
    font-size: 12px;
    color: #888;
    margin-bottom: 14px;
    word-break: break-all;
}
.ambient-add-row {
    margin-bottom: 12px;
}
.ambient-add-row > label {
    display: block;
    font-size: 12px;
    color: #555;
    margin-bottom: 4px;
}
.ambient-add-row input[type="text"] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
    outline: none;
}
.ambient-add-row input[type="text"]:focus { border-color: #222; }
.ambient-add-row input[type="range"] {
    width: 100%;
}
.ambient-add-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

/* ========== 速切弹窗（线下三悬浮键无关，仅承接 AI 模型配置区 DOM 迁移）========== */
.quick-switch-dialog {
    background: #fff;
    border-radius: 14px;
    width: 90%;
    max-width: 420px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.quick-switch-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.quick-switch-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.quick-switch-close {
    font-size: 22px;
    color: #999;
    cursor: pointer;
    padding: 0 6px;
    line-height: 1;
    user-select: none;
}

.quick-switch-close:active {
    color: #333;
}

.quick-switch-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}

/* 让搬进来的 settings-section 贴合 popup 边缘：保留 panel 自带 padding，清除 margin/阴影/边框 */
.quick-switch-body .settings-section {
    margin: 0;
    box-shadow: none;
    border: none;
    border-radius: 0;
}

/* 弹窗已有 header，藏掉 panel 内重复的 h3 */
.quick-switch-body .section-title {
    display: none;
}

.quick-switch-footer {
    padding: 8px 16px 12px;
    border-top: 1px solid #f0f0f0;
    text-align: center;
    flex-shrink: 0;
}

.quick-switch-hint {
    font-size: 11px;
    color: #999;
}

/* ========== 速切弹窗 tab ========== */
.quick-switch-tabs {
    display: flex;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.quick-switch-tab {
    flex: 1;
    padding: 10px 0;
    background: none;
    border: none;
    font-size: 14px;
    color: #888;
    cursor: pointer;
    transition: color 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.quick-switch-tab:active {
    background: #fafafa;
}

.quick-switch-tab.active {
    color: #333;
    font-weight: 500;
    border-bottom-color: #333;
}

.quick-switch-tab-pane {
    display: none;
}

.quick-switch-tab-pane.active {
    display: block;
    padding: 12px 16px;
}

/* AI 模型 tab：让搬入的 settings-section 自己的 padding 决定 spacing */
#quick-switch-tab-api.active {
    padding: 0;
}

/* 世界书 tab：联系人元信息 */
.quick-worldbook-meta {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
    line-height: 1.5;
}

.quick-worldbook-meta strong {
    color: #555;
    font-weight: 500;
}

/* 世界书 tab：空态 / 不可用提示 */
.quick-worldbook-empty {
    padding: 28px 12px;
    text-align: center;
    font-size: 13px;
    color: #999;
    line-height: 1.7;
}

/* 世界书 tab：保存按钮区 */
.quick-worldbook-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.quick-worldbook-save-btn {
    background: #333;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 24px;
    font-size: 13px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.quick-worldbook-save-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.quick-worldbook-save-btn:not(:disabled):active {
    opacity: 0.85;
}

/* 速切里世界书列表的容器：覆盖默认 max-height 以适配较小弹窗 */
#quick-worldbook-list {
    max-height: 280px;
}


/* ========== 感知弹窗 ========== */
.sense-dialog {
    background: #fff;
    border-radius: 14px;
    width: 90%;
    max-width: 420px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.sense-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.sense-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.sense-close {
    font-size: 22px;
    color: #999;
    cursor: pointer;
    padding: 0 6px;
    line-height: 1;
    user-select: none;
}

.sense-close:active { color: #333; }

.sense-master {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.sense-master-label {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.sense-tabs {
    display: flex;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.sense-tab {
    flex: 1;
    padding: 10px 0;
    background: none;
    border: none;
    font-size: 14px;
    color: #888;
    cursor: pointer;
    transition: color 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.sense-tab:active { background: #fafafa; }

.sense-tab.active {
    color: #333;
    font-weight: 500;
    border-bottom-color: #333;
}

.sense-tab-pane { display: none; }
.sense-tab-pane.active { display: block; }

.sense-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sense-body.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.sense-section { padding: 8px 16px 4px; }

.sense-section-title {
    font-size: 12px;
    color: #999;
    padding: 8px 0 4px;
}

.sense-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
}

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

.sense-item-label {
    flex: 1;
    font-size: 14px;
    color: #333;
}

.sense-item-hint {
    flex-basis: 100%;
    font-size: 12px;
    color: #999;
    line-height: 1.45;
}

.sense-auto-detail { padding-left: 12px; }
.sense-num-input {
    width: 64px; border: 1px solid #d0d0d0; border-radius: 8px;
    padding: 4px 8px; font-size: 13px; text-align: center; color: #333; background: #fff;
}
.phone-frame.night-mode .sense-num-input { background: #2a2a2a; color: #ddd; border-color: #444; }

.sense-platform-tag {
    font-size: 10px;
    color: #999;
    padding: 2px 6px;
    background: #f0f0f0;
    border-radius: 3px;
}

.sense-item-arrow {
    font-size: 18px;
    color: #ccc;
    padding-left: 4px;
}

.sense-item-sub {
    padding-left: 16px;
    background: #fafafa;
}

body.not-apk .sense-item[data-apk-only="1"] {
    opacity: 0.4;
    pointer-events: none;
}

.sense-footer {
    padding: 8px 16px 12px;
    border-top: 1px solid #f0f0f0;
    text-align: center;
    flex-shrink: 0;
}

.sense-hint {
    font-size: 11px;
    color: #999;
}

.sense-back {
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0 6px;
    line-height: 1;
    user-select: none;
}

.sense-back:active { color: #333; }

.sense-sub-hint {
    font-size: 11px;
    color: #999;
    line-height: 1.5;
    padding: 4px 0 2px;
}

.sense-noti-empty {
    font-size: 12px;
    color: #999;
    text-align: center;
    padding: 14px 0;
}

#sense-noti-applist-section.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.phone-frame.night-mode .sense-back { color: #777; }
.phone-frame.night-mode .sense-sub-hint { color: #777; }
.phone-frame.night-mode .sense-noti-empty { color: #777; }

.phone-frame.night-mode .sense-dialog { background: #2a2a2a; }
.phone-frame.night-mode .sense-header { border-bottom-color: #3a3a3a; }
.phone-frame.night-mode .sense-title { color: #eee; }
.phone-frame.night-mode .sense-master { background: #333; border-bottom-color: #3a3a3a; }
.phone-frame.night-mode .sense-master-label { color: #eee; }
.phone-frame.night-mode .sense-tabs { border-bottom-color: #3a3a3a; }
.phone-frame.night-mode .sense-tab { color: #777; }
.phone-frame.night-mode .sense-tab.active { color: #eee; border-bottom-color: #eee; }
.phone-frame.night-mode .sense-section-title { color: #777; }
.phone-frame.night-mode .sense-item { border-bottom-color: #333; }
.phone-frame.night-mode .sense-item-label { color: #ddd; }
.phone-frame.night-mode .sense-item-hint { color: #888; }
.phone-frame.night-mode .sense-platform-tag { background: #333; color: #888; }
.phone-frame.night-mode .sense-item-sub { background: #2e2e2e; }
.phone-frame.night-mode .sense-footer { border-top-color: #3a3a3a; }

/* 心率「立即测量」按钮（信封简约风） */
.sense-measure-btn {
    font-size: 12px;
    color: #e6a3b8;
    background: none;
    border: 1px solid #f0d8e0;
    border-radius: 0;
    padding: 4px 12px;
    cursor: pointer;
    margin-right: 4px;
}
.sense-measure-btn:active { background: #faf0f3; }
.phone-frame.night-mode .sense-measure-btn { border-color: #4a3a40; color: #c98ba0; }

/* ========== 心率测量 UI ========== */
.hr-measure-dialog {
    background: #fff;
    border: 1px solid #f0d8e0;
    border-radius: 0;
    width: 80%;
    max-width: 320px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.hr-measure-title { font-size: 16px; color: #333; letter-spacing: 2px; }
.hr-camera-wrap {
    width: 96px; height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: #1a1a1a;
    border: 1px solid #f0d8e0;
}
#hr-camera-preview { width: 100%; height: 100%; object-fit: cover; }
.hr-tip { font-size: 13px; color: #999; text-align: center; min-height: 18px; }
.hr-progress { font-size: 24px; color: #e6a3b8; font-weight: 300; letter-spacing: 1px; }
.hr-waveform { width: 240px; height: 48px; }
.hr-result { font-size: 40px; color: #333; font-weight: 200; }
.hr-result span { font-size: 16px; color: #999; }
.hr-disclaimer { font-size: 11px; color: #ccc; }
.hr-cancel-btn {
    margin-top: 4px;
    background: none;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    color: #999;
    padding: 8px 32px;
    font-size: 14px;
    cursor: pointer;
}
.hr-cancel-btn:active { background: #f5f5f5; }
.hr-done-btn {
    margin-top: 4px;
    background: none;
    border: 1px solid #f0d8e0;
    border-radius: 0;
    color: #e6a3b8;
    padding: 8px 32px;
    font-size: 14px;
    cursor: pointer;
}
.hr-done-btn:active { background: #faf0f3; }
.phone-frame.night-mode .hr-measure-dialog { background: #2a2a2a; border-color: #4a3a40; }
.phone-frame.night-mode .hr-measure-title { color: #eee; }
.phone-frame.night-mode .hr-result { color: #eee; }
.phone-frame.night-mode .hr-cancel-btn { border-color: #444; color: #999; }
.phone-frame.night-mode .hr-done-btn { border-color: #4a3a40; color: #c98ba0; }

/* 心率信封卡片（聊天流居中，白底/极淡粉/方角/信封翻盖，无渐变无 emoji） */
.chat-message.heartrate-message {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 !important;
    padding: 0 16px !important;
}
.hr-envelope {
    position: relative;
    background: #fffdfe;
    border: 1px solid #f0d8e0;
    border-radius: 0;
    text-align: center;
    min-width: 200px;
    max-width: 78%;
    box-shadow: 0 2px 7px rgba(224, 195, 205, 0.3);
    overflow: hidden;
}
/* 信封翻盖：顶部一个极淡粉倒三角（信封盖） */
.hr-envelope::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 15px;
    background: #f8e8ee;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* 标题：两侧短线装饰，像请柬抬头 */
.hr-envelope-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 10px;
    color: #c8a8b4;
    letter-spacing: 3px;
    padding: 14px 0 0;
}
.hr-envelope-title::before,
.hr-envelope-title::after {
    content: '';
    width: 14px;
    height: 1px;
    background: #ecd2da;
}
.hr-envelope-body { padding: 6px 34px 10px; }
.hr-envelope-words {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
    line-height: 1.6;
}
.hr-envelope-bpm { font-size: 12px; color: #b0a0a8; }
.hr-envelope-bpm strong {
    font-size: 20px;
    color: #555;
    font-weight: 300;
    margin: 0 3px;
    letter-spacing: 0.5px;
}
.hr-envelope-fail { font-size: 13px; color: #c0b0b5; }
.hr-envelope-pending { font-size: 13px; color: #999; margin-bottom: 4px; }

/* char 主动请求心率：底部弹出弹窗 */
/* char 请求心率：底部滑出的信封卡片（翻盖 + 装饰线，跟结果卡片统一） */
#hr-request-modal { align-items: flex-end !important; }
.hr-request-sheet {
    position: relative;
    width: 82%;
    max-width: 300px;
    margin: 0 0 36px;
    background: #fffdfe;
    border: 1px solid #f0d8e0;
    border-radius: 0;
    box-shadow: 0 4px 18px rgba(224, 195, 205, 0.4);
    overflow: hidden;
    animation: hrSlideUp 0.3s ease-out;
}
.hr-request-sheet::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 16px;
    background: #f8e8ee;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.hr-request-title {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 12px; color: #c8a8b4; letter-spacing: 4px;
    padding: 26px 0 0;
}
.hr-request-title::before, .hr-request-title::after {
    content: ''; width: 16px; height: 1px; background: #ecd2da;
}
.hr-request-words {
    font-size: 14px; color: #555; line-height: 1.7;
    padding: 0 26px; margin: 13px 0 20px; text-align: center;
}
.phone-frame.night-mode .hr-request-words { color: #ddd; }
.hr-request-start {
    width: calc(100% - 52px); margin: 0 26px; padding: 11px;
    background: #fff; color: #d99bb0;
    border: 1px solid #f0d8e0; border-radius: 0;
    font-size: 14px; letter-spacing: 2px; cursor: pointer;
}
.hr-request-start:active { background: #faf0f3; }
.hr-request-skip {
    width: 100%; padding: 12px 0 16px; margin-top: 2px;
    background: none; color: #bbb; border: none; font-size: 13px; cursor: pointer;
}
@keyframes hrSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.phone-frame.night-mode .hr-request-sheet { background: #2a2a2a; border-color: #4a3a40; box-shadow: none; }
.phone-frame.night-mode .hr-request-sheet::before { background: #3a2e34; }
.phone-frame.night-mode .hr-request-title { color: #b08a98; }
.phone-frame.night-mode .hr-request-title::before,
.phone-frame.night-mode .hr-request-title::after { background: #4a3a40; }
.phone-frame.night-mode .hr-request-start { border-color: #4a3a40; color: #c98ba0; }
.phone-frame.night-mode .hr-envelope-pending { color: #aaa; }
.hr-envelope-retry {
    display: inline-block;
    margin-top: 9px;
    background: none;
    border: 1px solid #f0d8e0;
    border-radius: 0;
    color: #d99bb0;
    padding: 4px 18px;
    font-size: 12px;
    cursor: pointer;
}
.hr-envelope-retry:active { background: #faf0f3; }
.phone-frame.night-mode .hr-envelope { background: #2a2a2a; border-color: #4a3a40; box-shadow: none; }
.phone-frame.night-mode .hr-envelope::before { background: #3a2e34; }
.phone-frame.night-mode .hr-envelope-title { color: #b08a98; }
.phone-frame.night-mode .hr-envelope-title::before,
.phone-frame.night-mode .hr-envelope-title::after { background: #4a3a40; }
.phone-frame.night-mode .hr-envelope-words { color: #aaa; }
.phone-frame.night-mode .hr-envelope-bpm { color: #998088; }
.phone-frame.night-mode .hr-envelope-bpm strong { color: #ddd; }
.phone-frame.night-mode .hr-envelope-retry { border-color: #4a3a40; color: #c98ba0; }


/* ===== 情事了了 - 主样式 ===== */

.qingshi-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    padding-bottom: 40px;
}

.qingshi-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.qingshi-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.qingshi-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.qingshi-item:last-child {
    margin-bottom: 0;
}

.qingshi-label {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.qingshi-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
}

.qingshi-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.qingshi-hint {
    font-size: 12px;
    color: #999;
    line-height: 1.5;
    margin-top: 6px;
}

.qingshi-status {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: #999;
    background: #f7f7f7;
}

.qingshi-status.configured {
    color: #4caf50;
    background: #f0f9f0;
}

.qingshi-btn-group {
    display: flex;
    gap: 12px;
}

.qingshi-btn-save,
.qingshi-btn-clear {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.qingshi-btn-save {
    background: #f5f5f5;
    color: #333;
    border: 1px solid #e0e0e0;
}

.qingshi-btn-save:hover {
    background: #e8e8e8;
}

.qingshi-btn-save:active {
    transform: scale(0.96);
}

.qingshi-btn-clear {
    background: white;
    color: #f44336;
    border: 1px solid #f44336;
}

.qingshi-btn-clear:hover {
    background: #fef0f0;
}

.qingshi-btn-clear:active {
    transform: scale(0.96);
}


/* ===== 情事了了 - 夜间模式 ===== */

.phone-frame.night-mode .qingshi-section {
    background: rgba(28, 28, 30, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

.phone-frame.night-mode .qingshi-section-title {
    color: #e8e8e8;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .qingshi-label {
    color: #e8e8e8;
}

.phone-frame.night-mode .qingshi-input {
    background: rgba(44, 44, 46, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
    color: #e8e8e8;
}

.phone-frame.night-mode .qingshi-input::placeholder {
    color: #8e8e93;
}

.phone-frame.night-mode .qingshi-input:focus {
    background: rgba(44, 44, 46, 0.8);
    border-color: #0a84ff;
}

.phone-frame.night-mode .qingshi-hint {
    color: #8e8e93;
}

.phone-frame.night-mode .qingshi-status {
    background: #1f1f1f;
    color: #888;
}

.phone-frame.night-mode .qingshi-status.configured {
    background: #1a2e1a;
    color: #6fc26f;
}

.phone-frame.night-mode .qingshi-btn-save {
    background: rgba(44, 44, 46, 0.8);
    color: #e8e8e8;
    border-color: rgba(255, 255, 255, 0.1);
}

.phone-frame.night-mode .qingshi-btn-save:hover {
    background: rgba(58, 58, 60, 0.8);
}

.phone-frame.night-mode .qingshi-btn-clear {
    background: rgba(44, 44, 46, 0.9);
    border-color: #ff453a;
    color: #ff453a;
}


/* ===== 情事了了 - 主页 3D 雪景空间 ===== */

.qingshi-snow-stage {
    flex: 1;                /* 占满 page-header 之后剩余空间 */
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #f4f7fc 0%, #d8e1ed 100%);
    touch-action: none;     /* 禁用浏览器默认滚动/缩放手势 */
    min-height: 0;          /* flex 容器中允许子项收缩 */
}

#qingshi-snow-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: block;
    touch-action: none;     /* 关键: pointer 事件目标在 canvas, 必须显式设 */
}

.qingshi-snow-hint {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    letter-spacing: 0.5px;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(20, 40, 80, 0.4);
    animation: qingshi-snow-hint-fade 4s ease forwards;
}

@keyframes qingshi-snow-hint-fade {
    0%, 30% { opacity: 1; }
    100% { opacity: 0.4; }
}

/* WebGL/Canvas 不可用降级 */
.qingshi-snow-fallback-btn {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    cursor: pointer;
    color: #1e3a5f;
    font-size: 14px;
    gap: 10px;
}

.qingshi-snow-fallback-icon {
    font-size: 56px;
    color: #38bdf8;
}

.qingshi-snow-stage.qingshi-snow-fallback #qingshi-snow-canvas {
    display: none;
}

.qingshi-snow-stage.qingshi-snow-fallback .qingshi-snow-fallback-btn {
    display: flex;
}

.phone-frame.night-mode .qingshi-snow-stage {
    background: linear-gradient(180deg, #1f2940 0%, #0e1626 100%);
}

.phone-frame.night-mode .qingshi-snow-fallback-btn {
    color: #e8e8e8;
}

.phone-frame.night-mode .qingshi-snow-fallback-icon {
    color: #7dd3fc;
}


/* ===== 情事了了 - 现实痕迹页 ===== */

.qingshi-gear-btn {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qingshi-gear-btn:hover {
    color: #1e293b;
}

.qingshi-gear-btn:active {
    transform: scale(0.92) rotate(30deg);
}

.qingshi-trace-section {
    margin-bottom: 20px;
}

.qingshi-trace-section-title {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    margin: 0 0 12px 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* 写一封信 placeholder */

.qingshi-trace-placeholder {
    background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
    border: 1.5px dashed #dbeafe;
    border-radius: 16px;
    padding: 40px 20px;
    text-align: center;
}

.qingshi-trace-placeholder .placeholder-icon {
    font-size: 32px;
    color: #94a3b8;
    margin-bottom: 12px;
}

.qingshi-trace-placeholder .placeholder-text {
    font-size: 14px;
    color: #475569;
    font-weight: 500;
    margin-bottom: 6px;
}

.qingshi-trace-placeholder .placeholder-hint {
    font-size: 12px;
    color: #94a3b8;
}


/* 邮件历史列表 */

.qingshi-history-list {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.qingshi-history-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.2s;
}

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

.qingshi-history-item:hover {
    background: #f8fafc;
}

.qingshi-history-row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #1e293b;
    font-weight: 500;
    gap: 8px;
}

.qingshi-history-row1 > span:first-child {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qingshi-history-status-sent {
    color: #38bdf8;
    font-size: 12px;
    flex-shrink: 0;
}

.qingshi-history-status-failed {
    color: #f44336;
    font-size: 12px;
    flex-shrink: 0;
}

.qingshi-history-row2 {
    font-size: 12px;
    color: #64748b;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.qingshi-history-row2 > span:first-child {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qingshi-history-empty {
    padding: 32px 16px;
    text-align: center;
    font-size: 13px;
    color: #94a3b8;
}

.qingshi-history-more-btn {
    width: 100%;
    padding: 14px;
    background: white;
    border: none;
    border-top: 1px solid #f1f5f9;
    color: #38bdf8;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.qingshi-history-more-btn:hover {
    background: #f0f9ff;
}

.qingshi-history-more-btn:active {
    background: #e0f2fe;
}


/* ===== 情事了了 - 现实痕迹页 夜间模式 ===== */

.phone-frame.night-mode .qingshi-gear-btn {
    color: #94a3b8;
}

.phone-frame.night-mode .qingshi-gear-btn:hover {
    color: #e8e8e8;
}

.phone-frame.night-mode .qingshi-trace-section-title {
    color: #94a3b8;
}

.phone-frame.night-mode .qingshi-trace-placeholder {
    background: rgba(28, 28, 30, 0.5);
    border-color: rgba(125, 211, 252, 0.15);
}

.phone-frame.night-mode .qingshi-trace-placeholder .placeholder-text {
    color: #cbd5e1;
}

.phone-frame.night-mode .qingshi-trace-placeholder .placeholder-icon,
.phone-frame.night-mode .qingshi-trace-placeholder .placeholder-hint {
    color: #64748b;
}

.phone-frame.night-mode .qingshi-history-list {
    background: rgba(28, 28, 30, 0.6);
    border-color: rgba(255, 255, 255, 0.06);
}

.phone-frame.night-mode .qingshi-history-item {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.phone-frame.night-mode .qingshi-history-item:hover {
    background: rgba(44, 44, 46, 0.5);
}

.phone-frame.night-mode .qingshi-history-row1 {
    color: #e8e8e8;
}

.phone-frame.night-mode .qingshi-history-row2,
.phone-frame.night-mode .qingshi-history-empty {
    color: #94a3b8;
}

.phone-frame.night-mode .qingshi-history-more-btn {
    background: rgba(28, 28, 30, 0.6);
    border-top-color: rgba(255, 255, 255, 0.06);
    color: #7dd3fc;
}

.phone-frame.night-mode .qingshi-history-more-btn:hover {
    background: rgba(44, 44, 46, 0.5);
}


/* ===== 情事了了 - 写一封信入口卡片 ===== */

.qingshi-write-entry {
    background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
    border: 1.5px dashed #dbeafe;
    border-radius: 16px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.qingshi-write-entry:hover {
    border-style: solid;
    border-color: #bfdbfe;
}

.qingshi-write-entry:active {
    transform: scale(0.97);
}

.qingshi-write-entry-icon {
    font-size: 32px;
    color: #38bdf8;
    margin-bottom: 12px;
}

.qingshi-write-entry-text {
    font-size: 14px;
    color: #1e293b;
    font-weight: 500;
    margin-bottom: 6px;
}

.qingshi-write-entry-hint {
    font-size: 12px;
    color: #94a3b8;
}


/* ===== 情事了了 - 写信页 ===== */

.qingshi-write-textarea {
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}

.qingshi-write-loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.qingshi-write-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e0e7ff;
    border-top-color: #38bdf8;
    border-radius: 50%;
    animation: qingshi-spin 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes qingshi-spin {
    to { transform: rotate(360deg); }
}

.qingshi-write-loading-text {
    font-size: 14px;
    color: #64748b;
}


/* 夜间模式 */

.phone-frame.night-mode .qingshi-write-entry {
    background: linear-gradient(135deg, rgba(28, 28, 30, 0.9) 0%, rgba(15, 23, 42, 0.9) 100%);
    border-color: rgba(125, 211, 252, 0.15);
}

.phone-frame.night-mode .qingshi-write-entry-text {
    color: #e8e8e8;
}

.phone-frame.night-mode .qingshi-write-entry-hint {
    color: #64748b;
}

.phone-frame.night-mode .qingshi-write-spinner {
    border-color: rgba(255, 255, 255, 0.1);
    border-top-color: #7dd3fc;
}

.phone-frame.night-mode .qingshi-write-loading-text {
    color: #94a3b8;
}


/* ===== 情事了了 - char 寄信顶部 toast ===== */

.qingshi-auto-toast {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.95);
    color: #fff;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    animation: qingshi-auto-toast-fade 3s forwards;
    max-width: 80%;
    text-align: center;
}

@keyframes qingshi-auto-toast-fade {
    0% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    10%, 80% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}


/* ===== 情事了了 - 通用 Modal（独立 namespace,不复用项目其他 modal）===== */

.qingshi-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.55);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.qingshi-modal.qingshi-modal-active {
    display: flex;
    animation: qingshi-modal-fade 0.2s ease;
}

@keyframes qingshi-modal-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.qingshi-modal-panel {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 380px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    animation: qingshi-modal-pop 0.25s ease;
}

@keyframes qingshi-modal-pop {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.qingshi-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.qingshi-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.qingshi-modal-close:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.qingshi-modal-form {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}


/* ===== 情事了了 - 定时寄信列表 ===== */

.qingshi-trace-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 12px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.qingshi-trace-section-header .qingshi-trace-section-title {
    margin: 0;
    padding: 0;
    border: none;
}

.qingshi-schedule-new-btn {
    background: #38bdf8;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.qingshi-schedule-new-btn:hover {
    background: #0ea5e9;
}

.qingshi-schedule-new-btn:active {
    transform: scale(0.96);
}

.qingshi-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qingshi-schedule-item {
    display: flex;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
}

.qingshi-schedule-main {
    flex: 1;
    min-width: 0;
}

.qingshi-schedule-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.qingshi-schedule-name {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.qingshi-schedule-meta {
    font-size: 12px;
    color: #64748b;
    line-height: 1.6;
    word-break: break-all;
}

.qingshi-schedule-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.qingshi-schedule-edit,
.qingshi-schedule-del {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.qingshi-schedule-edit {
    color: #38bdf8;
}

.qingshi-schedule-edit:hover {
    background: #f0f9ff;
}

.qingshi-schedule-del {
    color: #f43f5e;
}

.qingshi-schedule-del:hover {
    background: #fff1f2;
}


/* ===== 情事了了 - 独立 toggle 开关 ===== */

.qingshi-toggle {
    display: inline-block;
    width: 42px;
    height: 24px;
    background: #cbd5e1;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.qingshi-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.qingshi-toggle.qingshi-toggle-on {
    background: #38bdf8;
}

.qingshi-toggle.qingshi-toggle-on::after {
    transform: translateX(18px);
}


/* ===== 情事了了 - 邮件历史详情 modal ===== */

.qingshi-history-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.qingshi-history-modal-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.qingshi-history-modal-mode-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    background: #e0f2fe;
    color: #0369a1;
}

.qingshi-history-modal-mode-tag.qingshi-history-modal-mode-auto {
    background: #fef3c7;
    color: #b45309;
}

.qingshi-history-modal-mode-tag.qingshi-history-modal-mode-scheduled {
    background: #ede9fe;
    color: #6d28d9;
}

.qingshi-history-modal-status {
    font-size: 12px;
}

.qingshi-history-modal-subject {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 14px;
    line-height: 1.4;
    word-break: break-all;
}

.qingshi-history-modal-meta-row {
    display: flex;
    gap: 8px;
    font-size: 13px;
    color: #475569;
    margin-bottom: 6px;
    word-break: break-all;
}

.qingshi-history-modal-meta-label {
    color: #94a3b8;
    flex-shrink: 0;
    min-width: 50px;
}

.qingshi-history-modal-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 14px 0;
}

.qingshi-history-modal-body-text {
    font-size: 14px;
    color: #1e293b;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}


/* ===== 情事了了 - 夜间模式（新增组件部分）===== */

.phone-frame.night-mode .qingshi-modal {
    background: rgba(0, 0, 0, 0.7);
}

.phone-frame.night-mode .qingshi-modal-panel {
    background: rgba(28, 28, 30, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.phone-frame.night-mode .qingshi-modal-header {
    color: #e8e8e8;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .qingshi-modal-close {
    color: #8e8e93;
}

.phone-frame.night-mode .qingshi-modal-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #e8e8e8;
}

.phone-frame.night-mode .qingshi-trace-section-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .qingshi-schedule-new-btn {
    background: #0ea5e9;
}

.phone-frame.night-mode .qingshi-schedule-new-btn:hover {
    background: #38bdf8;
}

.phone-frame.night-mode .qingshi-schedule-item {
    background: rgba(28, 28, 30, 0.6);
    border-color: rgba(255, 255, 255, 0.06);
}

.phone-frame.night-mode .qingshi-schedule-name {
    color: #e8e8e8;
}

.phone-frame.night-mode .qingshi-schedule-meta {
    color: #94a3b8;
}

.phone-frame.night-mode .qingshi-schedule-edit,
.phone-frame.night-mode .qingshi-schedule-del {
    background: rgba(44, 44, 46, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .qingshi-schedule-edit {
    color: #7dd3fc;
}

.phone-frame.night-mode .qingshi-schedule-edit:hover {
    background: rgba(56, 189, 248, 0.1);
}

.phone-frame.night-mode .qingshi-schedule-del {
    color: #fb7185;
}

.phone-frame.night-mode .qingshi-schedule-del:hover {
    background: rgba(244, 63, 94, 0.1);
}

.phone-frame.night-mode .qingshi-toggle {
    background: rgba(255, 255, 255, 0.15);
}

.phone-frame.night-mode .qingshi-toggle.qingshi-toggle-on {
    background: #0ea5e9;
}

.phone-frame.night-mode .qingshi-history-modal-mode-tag {
    background: rgba(56, 189, 248, 0.15);
    color: #7dd3fc;
}

.phone-frame.night-mode .qingshi-history-modal-mode-tag.qingshi-history-modal-mode-auto {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.phone-frame.night-mode .qingshi-history-modal-mode-tag.qingshi-history-modal-mode-scheduled {
    background: rgba(139, 92, 246, 0.15);
    color: #c4b5fd;
}

.phone-frame.night-mode .qingshi-history-modal-subject {
    color: #e8e8e8;
}

.phone-frame.night-mode .qingshi-history-modal-meta-row {
    color: #cbd5e1;
}

.phone-frame.night-mode .qingshi-history-modal-meta-label {
    color: #64748b;
}

.phone-frame.night-mode .qingshi-history-modal-divider {
    background: rgba(255, 255, 255, 0.08);
}

.phone-frame.night-mode .qingshi-history-modal-body-text {
    color: #e8e8e8;
}


/* ============================================================
 * 诉情 · 冷雪风格统一覆盖
 *   - 全部卡片/按钮/列表/模态框/输入 → 方角(border-radius: 0)
 *   - 主要容器 → 极细冷雪色边 0.5px solid #dde5ee + 删阴影
 *   - 主页雪景背景 → 淡灰蓝冷白
 *   - 主页入口卡片(.qingshi-entry-card) - 上方居中
 * 保留圆形:
 *   .qingshi-write-spinner / .qingshi-toggle / .qingshi-toggle::after
 * ============================================================ */

/* === 全部方角 === */
.qingshi-section,
.qingshi-input,
.qingshi-status,
.qingshi-btn-save,
.qingshi-btn-clear,
.qingshi-history-list,
.qingshi-write-entry,
.qingshi-auto-toast,
.qingshi-modal-panel,
.qingshi-modal-close,
.qingshi-schedule-new-btn,
.qingshi-schedule-item,
.qingshi-schedule-edit,
.qingshi-schedule-del,
.qingshi-history-modal-mode-tag {
    border-radius: 0;
}

/* === 主要容器极细冷雪色边 + 删阴影 === */
.qingshi-section {
    border: 0.5px solid #dde5ee;
    box-shadow: none;
}

.qingshi-history-list {
    border: 0.5px solid #dde5ee;
}

.qingshi-modal-panel {
    border: 0.5px solid #dde5ee;
}

.qingshi-schedule-item {
    background: #ffffff;
    border: 0.5px solid #dde5ee;
}

/* === 写信入口卡片 → 白色 + 极细冷雪色 solid === */
.qingshi-write-entry {
    background: #ffffff;
    border: 0.5px solid #dde5ee;
}
.qingshi-write-entry:hover {
    border-color: #c8d4e0;
    background: #fafcfe;
}

/* === 主页雪景背景 → 淡灰蓝冷白 === */
.qingshi-snow-stage {
    background: linear-gradient(180deg, #eef2f6 0%, #dde4eb 100%);
}

/* === 主页入口卡片(替代信封) === */
.qingshi-entry-card {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 320px;
    padding: 18px 22px;
    background: rgba(255, 255, 255, 0.96);
    border: 0.5px solid #dde5ee;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(120, 140, 170, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    z-index: 5;
}
.qingshi-entry-card:hover {
    border-color: #c8d4e0;
    background: rgba(255, 255, 255, 1);
}
.qingshi-entry-card:active {
    transform: translateX(-50%) scale(0.98);
}
.qingshi-entry-icon {
    font-size: 22px;
    color: #9bb5cc;
    flex-shrink: 0;
}
.qingshi-entry-content {
    flex: 1;
    min-width: 0;
}
.qingshi-entry-title {
    font-size: 15px;
    font-weight: 600;
    color: #1e3a5f;
    letter-spacing: 2px;
}
.qingshi-entry-desc {
    font-size: 12px;
    color: #9bb5cc;
    margin-top: 4px;
}
.qingshi-entry-arrow {
    color: #94a3b8;
    font-size: 20px;
    flex-shrink: 0;
}

/* === 夜间模式同步 === */
.phone-frame.night-mode .qingshi-snow-stage {
    background: linear-gradient(180deg, #1f2940 0%, #0e1626 100%);
}
.phone-frame.night-mode .qingshi-entry-card {
    background: rgba(28, 28, 30, 0.85);
    border-color: rgba(125, 211, 252, 0.15);
}
.phone-frame.night-mode .qingshi-entry-card:hover {
    border-color: rgba(125, 211, 252, 0.3);
    background: rgba(28, 28, 30, 0.95);
}
.phone-frame.night-mode .qingshi-entry-title {
    color: #e8e8e8;
}
.phone-frame.night-mode .qingshi-entry-desc,
.phone-frame.night-mode .qingshi-entry-icon {
    color: #94a3b8;
}
.phone-frame.night-mode .qingshi-entry-arrow {
    color: #64748b;
}
.phone-frame.night-mode .qingshi-section {
    border-color: rgba(255, 255, 255, 0.08);
}
.phone-frame.night-mode .qingshi-write-entry {
    background: rgba(28, 28, 30, 0.6);
    border-color: rgba(125, 211, 252, 0.12);
}
.phone-frame.night-mode .qingshi-write-entry:hover {
    border-color: rgba(125, 211, 252, 0.25);
    background: rgba(28, 28, 30, 0.8);
}
.phone-frame.night-mode .qingshi-history-list {
    border-color: rgba(255, 255, 255, 0.08);
}
.phone-frame.night-mode .qingshi-modal-panel {
    border-color: rgba(255, 255, 255, 0.08);
}
.phone-frame.night-mode .qingshi-schedule-item {
    background: rgba(28, 28, 30, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
}


/* ============================================================
 * 诉情子页面蓝色统一替换为冷雪淡蓝(配合主页"诉情"卡片色调)
 *   亮蓝 #38bdf8 / 紫蓝 #667eea → 冷雪 #9bb5cc
 *   深亮蓝 #0ea5e9 → 冷雪深 #7d9bb8
 *   night 亮蓝 #7dd3fc → 柔冷蓝 #b8cce0
 *   不动: auto/scheduled mode tag(琥珀/紫)、status-failed(红)、status configured(绿)
 * ============================================================ */

/* === 输入框 focus 冷雪化 === */
.qingshi-input:focus {
    border-color: #9bb5cc;
    box-shadow: 0 0 0 3px rgba(155, 181, 204, 0.15);
}
.phone-frame.night-mode .qingshi-input:focus {
    background: rgba(44, 44, 46, 0.8);
    border-color: #9bb5cc;
}

/* === 写一封信入口图标 === */
.qingshi-write-entry-icon {
    color: #9bb5cc;
}

/* === Loading spinner === */
.qingshi-write-spinner {
    border-top-color: #9bb5cc;
}
.phone-frame.night-mode .qingshi-write-spinner {
    border-top-color: #b8cce0;
}

/* === 邮件历史 列表项 === */
.qingshi-history-status-sent {
    color: #9bb5cc;
}
.qingshi-history-more-btn {
    color: #9bb5cc;
}
.qingshi-history-more-btn:hover {
    background: #eef2f6;
}
.phone-frame.night-mode .qingshi-history-more-btn {
    color: #b8cce0;
}
.phone-frame.night-mode .qingshi-history-more-btn:hover {
    background: rgba(155, 181, 204, 0.1);
}

/* === 定时寄信 "+ 新建" 按钮 === */
.qingshi-schedule-new-btn {
    background: #9bb5cc;
}
.qingshi-schedule-new-btn:hover {
    background: #7d9bb8;
}
.phone-frame.night-mode .qingshi-schedule-new-btn {
    background: #7d9bb8;
}
.phone-frame.night-mode .qingshi-schedule-new-btn:hover {
    background: #9bb5cc;
}

/* === 定时项 编辑按钮 === */
.qingshi-schedule-edit {
    color: #9bb5cc;
}
.qingshi-schedule-edit:hover {
    background: #eef2f6;
}
.phone-frame.night-mode .qingshi-schedule-edit {
    color: #b8cce0;
}
.phone-frame.night-mode .qingshi-schedule-edit:hover {
    background: rgba(155, 181, 204, 0.1);
}

/* === toggle 开关(开启态) === */
.qingshi-toggle.qingshi-toggle-on {
    background: #9bb5cc;
}
.phone-frame.night-mode .qingshi-toggle.qingshi-toggle-on {
    background: #7d9bb8;
}

/* === 邮件历史详情 manual mode tag (默认蓝调) === */
.qingshi-history-modal-mode-tag {
    background: #eef2f6;
    color: #3a557d;
}
.phone-frame.night-mode .qingshi-history-modal-mode-tag {
    background: rgba(155, 181, 204, 0.18);
    color: #b8cce0;
}

/* === 删除确认 modal 内部文本 === */
.qingshi-history-delete-target {
    font-size: 13px;
    color: #1e3a5f;
    background: #f4f7fc;
    border: 0.5px solid #dde5ee;
    padding: 12px 14px;
    margin-bottom: 12px;
    word-break: break-all;
    line-height: 1.5;
}
.qingshi-history-delete-hint {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 16px;
    line-height: 1.5;
}
.phone-frame.night-mode .qingshi-history-delete-target {
    background: rgba(28, 28, 30, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
    color: #e8e8e8;
}
.phone-frame.night-mode .qingshi-history-delete-hint {
    color: #64748b;
}


/* ============================================================
 * 邮件 thread (user 在 app 内回信链)
 * 状态机渲染: user 回信块 + char 反应块(等待/拒绝/子 log) + 输入框
 * 全部冷雪风格: 方角 + 0.5px #dde5ee 边 + 淡白蓝底
 * ============================================================ */

.qingshi-thread-container {
    margin-top: 20px;
    border-top: 0.5px solid #dde5ee;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qingshi-thread-user {
    background: #f4f7fc;
    border: 0.5px solid #dde5ee;
    padding: 12px 14px;
}
.qingshi-thread-label {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 6px;
}
.qingshi-thread-text {
    font-size: 14px;
    color: #1e3a5f;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.6;
}

/* pending_decision: char 决策中等待 */
.qingshi-thread-pending {
    text-align: center;
    color: #94a3b8;
    padding: 8px;
    font-size: 16px;
    letter-spacing: 4px;
}

/* decided_no: 柔和拒绝提示 */
.qingshi-thread-rejection {
    text-align: center;
    padding: 12px;
}
.qingshi-thread-rejection-line {
    color: #c8d4e0;
    font-size: 14px;
    letter-spacing: 4px;
    margin-bottom: 4px;
}
.qingshi-thread-rejection-text {
    font-size: 13px;
    color: #9bb5cc;
}
.qingshi-thread-reject-reason {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 6px;
    font-style: italic;
    line-height: 1.5;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    word-break: break-word;
}

/* decided_yes_sent: child log 卡片 (可点击 navigate) */
.qingshi-thread-childlog {
    background: #ffffff;
    border: 0.5px solid #9bb5cc;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.qingshi-thread-childlog:hover {
    background: #f4f7fc;
    border-color: #7d9bb8;
}
.qingshi-thread-childlog-label {
    font-size: 12px;
    color: #9bb5cc;
    margin-bottom: 6px;
}
.qingshi-thread-childlog-subject {
    font-size: 14px;
    color: #1e3a5f;
    font-weight: 600;
    margin-bottom: 4px;
    word-break: break-all;
}
.qingshi-thread-childlog-preview {
    font-size: 12px;
    color: #9bb5cc;
    line-height: 1.5;
    margin-bottom: 6px;
    word-break: break-word;
}
.qingshi-thread-childlog-arrow {
    font-size: 12px;
    color: #9bb5cc;
    text-align: right;
}

/* 末尾输入框 */
.qingshi-reply-input-wrap {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.qingshi-reply-textarea {
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}
.qingshi-reply-submit {
    align-self: flex-end;
    padding: 8px 16px;
    width: auto;
    flex: 0 0 auto;
}

/* === night mode === */
.phone-frame.night-mode .qingshi-thread-container {
    border-top-color: rgba(255, 255, 255, 0.08);
}
.phone-frame.night-mode .qingshi-thread-user {
    background: rgba(28, 28, 30, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
}
.phone-frame.night-mode .qingshi-thread-text {
    color: #e8e8e8;
}
.phone-frame.night-mode .qingshi-thread-rejection-text {
    color: #b8cce0;
}
.phone-frame.night-mode .qingshi-thread-rejection-line {
    color: rgba(155, 181, 204, 0.4);
}
.phone-frame.night-mode .qingshi-thread-childlog {
    background: rgba(28, 28, 30, 0.6);
    border-color: rgba(155, 181, 204, 0.3);
}
.phone-frame.night-mode .qingshi-thread-childlog:hover {
    border-color: rgba(155, 181, 204, 0.5);
}
.phone-frame.night-mode .qingshi-thread-childlog-label,
.phone-frame.night-mode .qingshi-thread-childlog-preview,
.phone-frame.night-mode .qingshi-thread-childlog-arrow {
    color: #b8cce0;
}
.phone-frame.night-mode .qingshi-thread-childlog-subject {
    color: #e8e8e8;
}

/* ============ 我谕（自定义道具）模块 ============ */

/* 高度更高的弹窗：复用 .modal-dialog 但放大 */
.modal-dialog.wuyu-tall-dialog {
    width: 88%;
    max-width: 360px;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
}
.wuyu-tall-dialog .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}
.wuyu-tall-dialog .modal-header {
    position: relative;
    flex-shrink: 0;
}
.wuyu-tall-dialog .modal-header h3 {
    flex: 1;
    text-align: center;
}

/* 返回箭头按钮（编辑器 header 左侧） */
.wuyu-back-btn {
    background: none;
    border: none;
    font-size: 22px;
    color: #666;
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
}

/* 库列表 */
.wuyu-library-body { padding: 0 !important; }
.wuyu-list { list-style: none; margin: 0; padding: 0; }
.wuyu-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.wuyu-list-item.is-active { background: #fafafa; }
.wuyu-item-emoji {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.wuyu-item-main { flex: 1; min-width: 0; }
.wuyu-item-name {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wuyu-item-desc {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wuyu-item-active-tag {
    font-size: 10px;
    color: #fff;
    background: #333;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
}
.wuyu-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.wuyu-item-action {
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}
.wuyu-item-action:active { background: #f0f0f0; }
.wuyu-item-action[disabled] { opacity: 0.35; cursor: not-allowed; }

/* 当前生效横幅 */
.wuyu-active-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    font-size: 13px;
    color: #333;
}
.wuyu-active-emoji { font-size: 18px; }
.wuyu-active-text { flex: 1; color: #666; }
.wuyu-active-revoke {
    background: none;
    border: 1px solid #d0d0d0;
    color: #666;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 4px;
    cursor: pointer;
}

/* 空状态 */
.wuyu-empty {
    padding: 60px 20px;
    text-align: center;
    color: #999;
    font-size: 13px;
}

/* 表单分组 */
.wuyu-section {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
}
.wuyu-section:last-child { border-bottom: none; margin-bottom: 0; }
.wuyu-section-title {
    font-size: 13px;
    color: #999;
    font-weight: 500;
    margin: 0 0 10px 0;
}
.wuyu-required { color: #ee0a24; margin-left: 2px; }
.wuyu-editor-body .modal-label { margin-top: 10px; margin-bottom: 6px; }
.wuyu-editor-body .modal-label:first-of-type { margin-top: 0; }
.modal-textarea.wuyu-textarea-short { min-height: 56px; }
.modal-input.wuyu-emoji-input {
    width: 80px;
    text-align: center;
    font-size: 18px;
}

/* 分段切换 */
.wuyu-segmented {
    display: flex;
    gap: 6px;
    background: #f5f5f5;
    padding: 3px;
    border-radius: 8px;
    margin-bottom: 4px;
}
.wuyu-seg-btn {
    flex: 1;
    padding: 6px 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    border-radius: 6px;
    transition: all 0.15s;
    font-family: inherit;
}
.wuyu-seg-btn.active { background: #333; color: #fff; }

/* tag 输入 */
.wuyu-tag-input {
    min-height: 36px;
    padding: 6px 8px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    cursor: text;
    background: #fff;
}
.wuyu-tag-input:focus-within { border-color: #333; }
.wuyu-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #f0f0f0;
    color: #333;
    padding: 2px 4px 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}
.wuyu-tag-x {
    cursor: pointer;
    color: #999;
    font-size: 14px;
    line-height: 1;
    padding: 0 4px;
}
.wuyu-tag-x:hover { color: #333; }
.wuyu-tag-input-field {
    flex: 1;
    min-width: 60px;
    border: none;
    outline: none;
    font-size: 13px;
    padding: 2px;
    background: transparent;
    font-family: inherit;
}

/* footer 多按钮换行处理 */
.wuyu-editor-footer {
    flex-wrap: wrap;
    justify-content: flex-end !important;
}
.wuyu-editor-footer > button { margin-top: 4px; }

/* 危险删除按钮 */
.wuyu-btn-danger {
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 14px;
    border: none;
    cursor: pointer;
    background: #fff;
    color: #ee0a24;
    margin-right: auto;
    font-family: inherit;
}
.wuyu-btn-danger:active { opacity: 0.7; }

/* 递交摘要 */
.wuyu-deliver-body {
    padding: 16px 20px;
    font-size: 13px;
    color: #666;
    line-height: 1.7;
}
.wuyu-deliver-summary-line { margin: 4px 0; }
.wuyu-deliver-summary-key { color: #999; }

/* 夜间模式适配 */
.phone-frame.night-mode .modal-dialog.wuyu-tall-dialog {
    background: #2a2a2a;
}
.phone-frame.night-mode .wuyu-active-banner,
.phone-frame.night-mode .wuyu-segmented {
    background: #1f1f1f;
}
.phone-frame.night-mode .wuyu-section-title,
.phone-frame.night-mode .wuyu-item-desc { color: #888; }
.phone-frame.night-mode .wuyu-item-name { color: #ddd; }
.phone-frame.night-mode .wuyu-list-item { border-bottom-color: #3a3a3a; }
.phone-frame.night-mode .wuyu-section { border-bottom-color: #3a3a3a; }
.phone-frame.night-mode .wuyu-item-emoji { background: #1f1f1f; }
.phone-frame.night-mode .wuyu-tag { background: #3a3a3a; color: #ddd; }
.phone-frame.night-mode .wuyu-tag-input { background: #1f1f1f; border-color: #3a3a3a; }
.phone-frame.night-mode .wuyu-empty { color: #888; }
.phone-frame.night-mode .wuyu-active-text { color: #aaa; }
.phone-frame.night-mode .wuyu-active-revoke {
    border-color: #4a4a4a;
    color: #aaa;
}
.phone-frame.night-mode .wuyu-seg-btn { color: #aaa; }
.phone-frame.night-mode .wuyu-seg-btn.active { background: #ddd; color: #1f1f1f; }
.phone-frame.night-mode .wuyu-back-btn { color: #aaa; }
.phone-frame.night-mode .wuyu-btn-danger { background: #2a2a2a; }

/* ============ 我谕常驻 chip（phase 2，视觉规格仿 .novel-inject-bar） ============ */

.wuyu-active-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
    font-size: 12px;
    color: #333;
    user-select: none;
    min-height: 20px;
    cursor: pointer;
}
.wuyu-bar-emoji { font-size: 13px; flex-shrink: 0; }
.wuyu-bar-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: #666;
}
.wuyu-active-bar.is-pending .wuyu-bar-text {
    font-style: italic;
    color: #999;
}
.wuyu-active-bar.is-active .wuyu-bar-text { color: #333; }
.wuyu-bar-close {
    border: none;
    background: none;
    font-size: 14px;
    color: #999;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}
.wuyu-bar-close:active { color: #333; }
.phone-frame.night-mode .wuyu-active-bar {
    background: rgba(44, 44, 46, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
.phone-frame.night-mode .wuyu-active-bar.is-active .wuyu-bar-text { color: #ddd; }
.phone-frame.night-mode .wuyu-active-bar.is-pending .wuyu-bar-text { color: #888; }
.phone-frame.night-mode .wuyu-bar-close { color: #777; }

/* 线下模式下：chip 浮到线下卡片折叠条紧贴下方,避免被卡片遮挡
   折叠条 top:84px + 折叠条高度约 35px → chip top:120px(留 1px 间距视觉紧贴)
   has-inject-bar 时折叠条 top:114px → chip top:150px
   chat-window 是 position:absolute(15437) 的 containing block,
   chip 用 absolute 相对 chat-window,不会跑出 phone-frame
   z-index 1900 低于 .offline-meeting-card 的 2000,卡片展开时正确遮挡 chip */
.chat-window:has(#offline-meeting-card:not([style*="display: none"])) .wuyu-active-bar {
    position: absolute;
    top: 120px;
    left: 0;
    right: 0;
    z-index: 1900;
}
.chat-window.has-inject-bar:has(#offline-meeting-card:not([style*="display: none"])) .wuyu-active-bar {
    top: 150px;
}

/* ============ 我谕道具卡片旁白（phase 4） ============ */
.chat-message.narrator-message.wuyu-card-narrator {
    margin: 12px 0 !important;
}
.chat-message.narrator-message.wuyu-card-narrator .narrator-content {
    display: inline-flex !important;
    align-items: center;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid #000;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-style: normal !important;
    color: #000 !important;
    font-size: 12px !important;
    max-width: 90% !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
.chat-message.narrator-message.wuyu-card-narrator .narrator-content::before,
.chat-message.narrator-message.wuyu-card-narrator .narrator-content::after {
    content: '';
    display: inline-block;
    width: 64px;
    height: 14px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.chat-message.narrator-message.wuyu-card-narrator .narrator-content::before {
    margin-right: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 14'><path d='M5 11 C-1 6 1 3 5 6 C9 3 11 6 5 11 Z' fill='black'/><path d='M20 7 L14 2 L14 12 Z' fill='black'/><path d='M20 7 L26 2 L26 12 Z' fill='black'/><circle cx='20' cy='7' r='1.5' fill='black'/><path d='M36 7 L30 2 L30 12 Z' fill='black'/><path d='M36 7 L42 2 L42 12 Z' fill='black'/><circle cx='36' cy='7' r='1.5' fill='black'/><line x1='46' y1='7' x2='80' y2='7' stroke='black' stroke-width='1' stroke-dasharray='2,2'/></svg>");
}
.chat-message.narrator-message.wuyu-card-narrator .narrator-content::after {
    margin-left: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 14'><line x1='0' y1='7' x2='34' y2='7' stroke='black' stroke-width='1' stroke-dasharray='2,2'/><path d='M44 7 L38 2 L38 12 Z' fill='black'/><path d='M44 7 L50 2 L50 12 Z' fill='black'/><circle cx='44' cy='7' r='1.5' fill='black'/><path d='M60 7 L54 2 L54 12 Z' fill='black'/><path d='M60 7 L66 2 L66 12 Z' fill='black'/><circle cx='60' cy='7' r='1.5' fill='black'/><path d='M75 11 C69 6 71 3 75 6 C79 3 81 6 75 11 Z' fill='black'/></svg>");
}
/* 夜间模式：卡片反色 */
.phone-frame.night-mode .chat-message.narrator-message.wuyu-card-narrator .narrator-content {
    background: rgba(40, 40, 40, 0.96) !important;
    border-color: #fff !important;
    color: #fff !important;
}
.phone-frame.night-mode .chat-message.narrator-message.wuyu-card-narrator .narrator-content::before,
.phone-frame.night-mode .chat-message.narrator-message.wuyu-card-narrator .narrator-content::after {
    filter: invert(1);
}

/* IF 线控制面板 - 世界观编辑 */
.ifline-cp-field-label { display: block; font-size: 11px; color: #888; margin-top: 6px; margin-bottom: 4px; }
.ifline-cp-world-edit {
    width: 100%; min-height: 80px; padding: 6px 8px;
    border: 1px solid rgba(0,0,0,0.1); border-radius: 4px;
    font-size: 12px; line-height: 1.5; resize: vertical; box-sizing: border-box;
    transition: border-color 0.15s ease; font-family: inherit;
}
.ifline-cp-world-edit:focus { border-color: #999; outline: none; }
.ifline-cp-world-edit:disabled { background: rgba(0,0,0,0.03); cursor: default; }
.ifline-cp-world-edit.ifline-cp-saved { border-color: #4CAF50; }

/* IF 线控制面板 - 缓存记忆区 */
.ifline-cp-cache-section { padding: 8px 0; border-top: 1px solid rgba(0,0,0,0.06); }
.ifline-cp-cache-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; padding: 4px 0; font-size: 12px; color: #666; }
.ifline-cp-cache-arrow { color: #999; font-size: 10px; }
.ifline-cp-cache-list { margin-top: 6px; max-height: 240px; overflow-y: auto; }
.ifline-cp-cache-item { padding: 6px 0; border-bottom: 1px dashed rgba(0,0,0,0.05); }
.ifline-cp-cache-item:last-child { border-bottom: none; }
.ifline-cp-cache-item-header { display: flex; justify-content: space-between; font-size: 11px; color: #888; margin-bottom: 4px; }
.ifline-cp-cache-item-text {
    width: 100%; min-height: 60px; padding: 6px 8px;
    border: 1px solid rgba(0,0,0,0.1); border-radius: 4px;
    font-size: 12px; line-height: 1.5; resize: vertical; box-sizing: border-box;
    transition: border-color 0.15s ease; font-family: inherit;
}
.ifline-cp-cache-item-text:focus { border-color: #999; outline: none; }
.ifline-cp-cache-item-text[readonly] { background: rgba(0,0,0,0.03); cursor: default; }
.ifline-cp-cache-item-text.ifline-cp-saved { border-color: #4CAF50; }

/* IF 线控制面板编辑器 - 夜间模式 */
.phone-frame.night-mode .ifline-cp-world-edit,
.phone-frame.night-mode .ifline-cp-cache-item-text {
    background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); color: #ddd;
}
.phone-frame.night-mode .ifline-cp-field-label,
.phone-frame.night-mode .ifline-cp-cache-header,
.phone-frame.night-mode .ifline-cp-cache-item-header { color: #aaa; }

/* ========== 监视机器人 · 消息气泡 🤖 indicator ========== */
.spy-report-indicator {
    position: absolute;
    bottom: -2px;
    right: -4px;
    font-size: 14px;
    line-height: 1;
    z-index: 5;
    cursor: pointer;
    user-select: none;
}
.has-spy-report { /* hook,留给后续视觉调整使用 */ }

/* ========== 监视机器人 · 报告弹窗 ========== */
.spy-report-modal { max-width: 360px; }
.spy-report-modal-body { padding: 16px 20px; }
.spy-report-modal-observation {
    font-size: 15px;
    line-height: 1.6;
    color: #1c2433;
    margin-bottom: 12px;
    padding: 12px;
    background: #fafbfd;
    border-left: 2px solid #546282;
    border-radius: 6px;
    white-space: pre-wrap;
    word-break: break-word;
}
.spy-report-modal-env,
.spy-report-modal-suspicion {
    font-size: 13px;
    color: #546282;
    margin-top: 8px;
    line-height: 1.5;
    word-break: break-word;
}
.spy-report-modal-suspicion { color: #b88a3a; }
.spy-report-modal-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eef1f7;
    font-size: 12px;
    color: #8a96b0;
}

/* 夜间模式 */
.phone-frame.night-mode .spy-report-modal-observation {
    color: #e0e0e0;
    background: rgba(0, 122, 255, 0.12);
}
.phone-frame.night-mode .spy-report-modal-env,
.phone-frame.night-mode .spy-report-modal-meta {
    color: #aaa;
}
.phone-frame.night-mode .spy-report-modal-meta {
    border-top-color: rgba(255,255,255,0.1);
}

/* ========== 全屏图片查看器 ========== */
.image-viewer-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    user-select: none;
}
.image-viewer-stage {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-viewer-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform-origin: center;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
    cursor: zoom-in;
}
.image-viewer-close {
    position: absolute;
    top: max(20px, env(safe-area-inset-top));
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.image-viewer-close:active {
    background: rgba(255, 255, 255, 0.3);
}
.image-viewer-save {
    position: absolute;
    top: max(20px, env(safe-area-inset-top));
    right: 72px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.image-viewer-save:active {
    background: rgba(255, 255, 255, 0.3);
}

/* ========== 搜索图片网格视图（仿微信"图片及视频"） ========== */
#chat-search .chat-search-results.image-grid-mode {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    padding: 5px;
}
/* padding-bottom 强制 1:1（比 aspect-ratio 跨浏览器更可靠，不会被内容撑大） */
#chat-search .chat-search-img-item {
    width: 100%;
    padding-bottom: 100%;
    height: 0;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: #f0f0f0;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
#chat-search .chat-search-img-item img,
#chat-search .chat-search-img-item-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
#chat-search .chat-search-img-item img {
    object-fit: cover;
    display: block;
    pointer-events: none;
}
#chat-search .chat-search-img-item-text {
    background: #e8e8e8;
    color: #555;
    font-size: 11px;
    line-height: 1.35;
    padding: 8px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    word-break: break-word;
}
#chat-search .chat-search-img-item:active {
    opacity: 0.7;
}
/* 夜间模式 */
.phone-frame.night-mode #chat-search .chat-search-img-item {
    background: #2c2c2e;
    border-color: rgba(255, 255, 255, 0.08);
}
.phone-frame.night-mode #chat-search .chat-search-img-item-text {
    background: #3a3a3a;
    color: #c8c8c8;
}

/* ===== 监视机器人 Phase 2:风险闪烁 + 销毁动画 + 博弈弹窗 ===== */
.spy-floating-widget.risk-danger { animation: spy-pulse-danger 1.5s ease-in-out infinite; }
.spy-floating-widget.risk-critical { animation: spy-pulse-critical 0.7s ease-in-out infinite; }
@keyframes spy-pulse-danger {
    0%, 100% { box-shadow: 0 0 0 0 rgba(184, 138, 58, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(184, 138, 58, 0.45); }
}
@keyframes spy-pulse-critical {
    0%, 100% { box-shadow: 0 0 0 0 rgba(199, 62, 58, 0); }
    50%      { box-shadow: 0 0 0 6px rgba(199, 62, 58, 0.55); }
}
/* 销毁动画:emoji 从屏幕中央旋转坠落淡出 */
.spy-destroy-anim {
    position: fixed;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    font-size: 64px;
    z-index: 10002;
    pointer-events: none;
    animation: spy-destroy-fall 1.4s ease-out forwards;
}
@keyframes spy-destroy-fall {
    0%   { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
    100% { opacity: 0; transform: translate(-50%, 40vh) rotate(180deg) scale(0.4); }
}
/* 博弈弹窗 */
.spy-discovery-card {
    background: #ffffff;
    color: #333c50;
    padding: 20px;
    border-radius: 8px;
    max-width: 280px;
    border: 1px solid #e3e7ef;
    box-shadow: 0 4px 16px rgba(7, 8, 12, 0.1);
}
.spy-discovery-title {
    font-size: 16px;
    font-weight: 600;
    color: #1c2433;
    margin-bottom: 8px;
}
.spy-discovery-scene {
    font-size: 13px;
    color: #546282;
    line-height: 1.5;
    margin-bottom: 8px;
}
.spy-discovery-hint {
    font-size: 12px;
    color: #8a96b0;
    margin-bottom: 16px;
}
.spy-discovery-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.spy-discovery-btn {
    padding: 10px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    cursor: pointer;
}
.spy-discovery-retreat { background: #333c50; color: #fff; }
.spy-discovery-persist { background: #ffffff; color: #c73e3a; border: 1px solid #c73e3a; }

/* ===== 监视机器人 Phase 4:任务/牺牲/遗物/反应/可信度警示 ===== */
/* 任务选择 (复用伪装选择样式骨架) */
.spy-mission-list { display: flex; flex-direction: column; gap: 6px; }
.spy-mission-option {
    display: flex; align-items: center; gap: 10px; padding: 12px;
    background: #fff; border-radius: 8px; cursor: pointer;
    transition: all 0.15s; border: 1px solid #e3e7ef; position: relative;
}
.spy-mission-option.selected { border-color: #9cb2e8; background: rgba(156, 178, 232, 0.06); }
.spy-mission-option.locked { opacity: 0.45; cursor: not-allowed; }
.spy-mission-option:not(.locked):active { background: rgba(84, 98, 130, 0.05); }
.spy-mission-icon { font-size: 22px; flex-shrink: 0; }
.spy-mission-name { font-size: 15px; font-weight: 500; color: #333c50; flex-shrink: 0; }
.spy-mission-desc { font-size: 12px; color: #8a96b0; }
.spy-mission-lock { position: absolute; right: 12px; }

/* 牺牲模式 toggle */
.spy-sacrifice-section { padding-top: 0 !important; }
.spy-sacrifice-toggle {
    display: flex; align-items: center; gap: 8px; padding: 12px;
    background: rgba(199, 62, 58, 0.06); border-radius: 8px;
    cursor: pointer; user-select: none;
    border: 1px solid rgba(199, 62, 58, 0.15);
}
.spy-sacrifice-toggle input[type="checkbox"] {
    accent-color: #c73e3a; width: 16px; height: 16px; cursor: pointer;
}
.spy-sacrifice-label { font-size: 13px; color: #c73e3a; }

/* 监控 App 卡片任务行 + 进度条 + 牺牲角标 */
.spy-mission-bar {
    height: 4px; background: rgba(84, 98, 130, 0.12); border-radius: 2px;
    overflow: hidden; margin-top: 6px; margin-bottom: 4px;
}
.spy-mission-fill {
    height: 100%; background: #9cb2e8;
    transition: width 0.3s;
}
.spy-sacrifice-badge {
    font-size: 11px; vertical-align: super; margin-left: -4px;
}

/* 历史记录 行内入口按钮 */
.spy-history-actions { display: flex; gap: 8px; margin-top: 10px; }
.spy-history-action-btn {
    flex: 1; padding: 8px 12px; border: 1px solid #e3e7ef; border-radius: 8px;
    background: #ffffff;
    font-size: 13px; cursor: pointer; transition: all 0.15s;
}
.spy-history-remnant-btn { background: #ffffff; color: #333c50; }
.spy-history-remnant-btn:active { background: rgba(84, 98, 130, 0.06); }
.spy-history-reaction-btn { background: #ffffff; color: #c73e3a; border: 1px solid rgba(199, 62, 58, 0.3); }
.spy-history-reaction-btn:active { background: rgba(199, 62, 58, 0.05); }

/* 报告弹窗 — 可信度警示条(uncertain) */
.spy-report-modal-warn {
    background: rgba(199, 62, 58, 0.08); color: #c73e3a;
    padding: 10px 16px; font-size: 13px;
    border-bottom: 1px solid rgba(199, 62, 58, 0.15);
}
.spy-report-modal[data-reliability="uncertain"] .spy-report-modal-observation {
    border-left-color: #c73e3a;
    border-left-style: dashed;
}

/* 牺牲反应弹窗 */
.spy-sacrifice-modal { max-width: 360px; }
.spy-sacrifice-body { padding: 16px 20px; }
.spy-sacrifice-destroyscene {
    font-size: 13px; color: #c73e3a; margin-bottom: 14px;
    padding: 8px 12px; background: rgba(199, 62, 58, 0.06); border-radius: 6px;
    border: 1px solid rgba(199, 62, 58, 0.15);
}
.spy-sacrifice-section-title {
    font-size: 13px; font-weight: 600; color: #333c50;
    margin: 12px 0 6px;
}
.spy-sacrifice-reaction,
.spy-sacrifice-observation {
    font-size: 14px; line-height: 1.6; color: #333c50;
    padding: 10px 12px; background: #fafbfd;
    border-radius: 6px; white-space: pre-wrap; word-break: break-word;
}
.spy-sacrifice-reaction { border-left: 2px solid #c73e3a; }
.spy-sacrifice-observation { border-left: 2px solid #9cb2e8; }
.spy-sacrifice-meta {
    margin-top: 14px; font-size: 12px; color: #8a96b0;
    text-align: right;
}

/* 遗物弹窗 */
.spy-remnant-modal { max-width: 360px; }
.spy-remnant-body { padding: 16px 20px; }
.spy-remnant-destroyscene {
    font-size: 13px; color: #546282; margin-bottom: 14px;
    padding: 8px 12px; background: #fafbfd; border-radius: 6px;
    border: 1px solid #eef1f7;
}
.spy-remnant-text {
    font-family: monospace; letter-spacing: 1px; line-height: 1.7;
    padding: 12px; border-radius: 6px;
    background: #fafbfd; color: #333c50;
    border: 1px solid #eef1f7;
    white-space: pre-wrap; word-break: break-word;
}
.spy-remnant-text.mask-light    { background: #fafbfd; }
.spy-remnant-text.mask-mid      { background: rgba(84, 98, 130, 0.04); }
.spy-remnant-text.mask-heavy    { background: rgba(84, 98, 130, 0.06); color: #546282; }
.spy-remnant-text.mask-critical { background: rgba(84, 98, 130, 0.10); color: #8a96b0; letter-spacing: 2px; }
.spy-remnant-env,
.spy-remnant-suspicion {
    font-size: 13px; color: #546282; margin-top: 10px;
    line-height: 1.5; word-break: break-word; font-family: monospace; letter-spacing: 1px;
}
.spy-remnant-suspicion { color: #b88a3a; }
.spy-remnant-meta {
    color: #c73e3a; font-size: 12px; margin-top: 14px;
    text-align: center; font-style: italic;
}

/* 夜间模式适配 */
.phone-frame.night-mode .spy-mission-option,
.phone-frame.night-mode .spy-personality-option,
.phone-frame.night-mode .spy-disguise-option { background: #2c2c2e; }
.phone-frame.night-mode .spy-mission-name { color: #e0e0e0; }
.phone-frame.night-mode .spy-sacrifice-reaction,
.phone-frame.night-mode .spy-sacrifice-observation { background: rgba(255,255,255,0.05); color: #e0e0e0; }
.phone-frame.night-mode .spy-remnant-text { background: rgba(255,255,255,0.05); color: #d0d0d0; }
.phone-frame.night-mode .spy-remnant-text.mask-critical { background: rgba(255,255,255,0.10); color: #a0a0a0; }

/* ===== 监视机器人 Phase 3:性格选择 + 信号点 + 报告信号样式 ===== */
/* 性格选择列表 (复用伪装样式模式) */
.spy-personality-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.spy-personality-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid #e3e7ef;
    position: relative;
}
.spy-personality-option.selected {
    border-color: #9cb2e8;
    background: rgba(156, 178, 232, 0.06);
}
.spy-personality-option.locked {
    opacity: 0.45;
    cursor: not-allowed;
}
.spy-personality-option:not(.locked):active {
    background: rgba(84, 98, 130, 0.05);
}
.spy-personality-icon {
    font-size: 24px;
    flex-shrink: 0;
}
.spy-personality-name {
    font-size: 15px;
    font-weight: 500;
    color: #333c50;
    flex-shrink: 0;
}
.spy-personality-desc {
    font-size: 12px;
    color: #8a96b0;
}
.spy-personality-lock {
    position: absolute;
    right: 12px;
}

/* 监控 App 卡片显示性格 icon */
.spy-robot-personality {
    font-size: 18px;
    margin-left: 4px;
}

/* 信号点(附加在 spy-report-indicator 右下,clear 不显示)
   注:.spy-report-indicator 已是 position:absolute(见上方原始定义),
   自身已建立绝对定位上下文,::after 直接相对其定位即可,无需再覆盖为 relative */
.spy-report-indicator[data-signal="weak"]::after,
.spy-report-indicator[data-signal="lost"]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border: 1px solid #fff;
}
.spy-report-indicator[data-signal="weak"]::after { background: #b88a3a; }
.spy-report-indicator[data-signal="lost"]::after { background: #c73e3a; }

/* 报告弹窗 observation 区根据信号质量差异化 */
.spy-report-modal[data-signal="weak"] .spy-report-modal-observation {
    opacity: 0.7;
    background: rgba(184, 138, 58, 0.06);
    border-left-color: #b88a3a;
}
.spy-report-modal[data-signal="lost"] .spy-report-modal-observation {
    opacity: 0.6;
    background: rgba(199, 62, 58, 0.06);
    border-left-color: #c73e3a;
    font-family: monospace;
    letter-spacing: 2px;
}
.spy-signal-note {
    color: #b88a3a;
    font-size: 12px;
    font-style: italic;
    margin-top: 8px;
}

/* ===== 监视机器人 Phase 5:升级系统 + 成就 + 标记按钮 ===== */
/* 升级面板入口按钮 */
.spy-upgrade-entry-btn {
    margin-top: 8px;
    background: #ffffff;
    color: #333c50;
    border: 1px solid #333c50;
}
/* 升级动画弹窗 */
.spy-levelup-card {
    background: #ffffff;
    color: #333c50;
    padding: 30px 24px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(7, 8, 12, 0.1);
    max-width: 280px;
    border: 1px solid #e3e7ef;
}
.spy-levelup-icon { font-size: 48px; margin-bottom: 12px; animation: spy-levelup-bounce 0.6s ease-out; }
.spy-levelup-title { font-size: 20px; font-weight: 600; color: #1c2433; margin-bottom: 8px; }
.spy-levelup-note { font-size: 14px; color: #546282; margin-bottom: 20px; line-height: 1.5; }
.spy-levelup-ok {
    padding: 10px 32px;
    background: #333c50;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}
@keyframes spy-levelup-bounce {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* 成就解锁弹窗 */
.spy-achievement-card {
    background: #ffffff;
    color: #333c50;
    padding: 26px 24px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(7, 8, 12, 0.1);
    max-width: 280px;
    border: 1px solid #e3e7ef;
}
.spy-achievement-banner { font-size: 13px; color: #546282; margin-bottom: 8px; }
.spy-achievement-icon { font-size: 48px; margin: 8px 0; animation: spy-levelup-bounce 0.6s ease-out; }
.spy-achievement-name { font-size: 18px; font-weight: 600; color: #1c2433; margin-bottom: 6px; }
.spy-achievement-desc { font-size: 13px; color: #546282; margin-bottom: 14px; line-height: 1.5; }
.spy-achievement-reward { font-size: 14px; color: #b88a3a; margin-bottom: 18px; }
.spy-achievement-ok {
    padding: 10px 32px; background: #333c50; color: #fff;
    border: none; border-radius: 8px; font-size: 14px; cursor: pointer;
}

/* 升级面板 */
.spy-upgrade-modal { max-width: 360px; }
.spy-upgrade-body { padding: 16px 20px; max-height: 65vh; overflow-y: auto; }
.spy-upgrade-current {
    text-align: center;
    padding: 16px;
    background: #fafbfd;
    border-radius: 8px;
    margin-bottom: 16px;
    border: 1px solid #eef1f7;
}
.spy-upgrade-level-display {
    font-size: 28px; font-weight: 600; color: #1c2433; margin-bottom: 10px;
}
.spy-upgrade-progress-bar {
    height: 4px; background: rgba(84, 98, 130, 0.10); border-radius: 2px;
    overflow: hidden; margin-bottom: 6px;
}
.spy-upgrade-progress-fill {
    height: 100%;
    background: #546282;
    transition: width 0.3s;
}
.spy-upgrade-progress-label { font-size: 13px; color: #546282; }
.spy-upgrade-total { font-size: 12px; color: #8a96b0; margin-top: 4px; }

.spy-upgrade-section { margin-top: 16px; }
.spy-upgrade-section-title {
    font-size: 13px; font-weight: 600; color: #333c50; margin-bottom: 10px;
}

/* 等级路线 */
.spy-upgrade-level-route { display: flex; flex-direction: column; gap: 6px; }
.spy-upgrade-level-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; background: #fafbfd;
    border-radius: 8px; font-size: 13px;
    border: 1px solid #eef1f7;
}
.spy-upgrade-level-item.unlocked { background: rgba(90, 143, 93, 0.06); color: #5a8f5d; border-color: rgba(90, 143, 93, 0.15); }
.spy-upgrade-level-item.current  { background: rgba(84, 98, 130, 0.08); color: #333c50; font-weight: 600; border-color: #9cb2e8; }
.spy-upgrade-level-item.locked   { opacity: 0.55; }
.spy-upgrade-level-mark { font-weight: 600; min-width: 40px; }
.spy-upgrade-level-note { flex: 1; line-height: 1.4; }

/* 成就列表 */
.spy-upgrade-ach-list { display: flex; flex-direction: column; gap: 8px; }
.spy-upgrade-ach-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; background: #fafbfd; border-radius: 8px;
    border: 1px solid #eef1f7;
}
.spy-upgrade-ach-item.unlocked { background: rgba(156, 178, 232, 0.08); border-color: rgba(156, 178, 232, 0.2); }
.spy-upgrade-ach-item.locked { opacity: 0.5; }
.spy-upgrade-ach-icon { font-size: 22px; flex-shrink: 0; }
.spy-upgrade-ach-text { flex: 1; }
.spy-upgrade-ach-name { font-size: 14px; font-weight: 500; color: #333c50; margin-bottom: 2px; }
.spy-upgrade-ach-desc { font-size: 12px; color: #8a96b0; line-height: 1.4; }
.spy-upgrade-ach-placeholder { font-size: 11px; color: #b0bccf; font-weight: normal; }

.spy-upgrade-log-btn {
    width: 100%; padding: 10px;
    background: #ffffff; border: 1px solid #e3e7ef; border-radius: 8px;
    font-size: 13px; color: #333c50; cursor: pointer;
}
.spy-upgrade-log-btn:active { background: rgba(84, 98, 130, 0.05); }

/* 情报值历史日志 */
.spy-intellog-modal { max-width: 340px; }
.spy-intellog-body { padding: 12px 20px; max-height: 65vh; overflow-y: auto; }
.spy-intellog-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid #eef1f7;
    font-size: 13px;
}
.spy-intellog-time { color: #8a96b0; font-size: 12px; min-width: 70px; }
.spy-intellog-reason { flex: 1; color: #333c50; }
.spy-intellog-amount { color: #5a8f5d; font-weight: 600; }

/* 报告弹窗:标记按钮组 */
.spy-report-modal-actions {
    display: flex; flex-direction: column; gap: 6px;
    margin: 14px 0 0; padding-top: 12px;
    border-top: 1px solid #eef1f7;
}
.spy-report-action-btn {
    padding: 8px 12px; background: #ffffff;
    color: #333c50; border: 1px solid #e3e7ef; border-radius: 8px;
    font-size: 13px; cursor: pointer; transition: all 0.15s;
}
.spy-report-action-btn:active { background: rgba(84, 98, 130, 0.06); }
.spy-report-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.spy-report-awarded {
    text-align: center; padding: 10px; margin-top: 14px;
    color: #5a8f5d; font-size: 13px;
    background: rgba(90, 143, 93, 0.08); border-radius: 8px;
}

/* 夜间模式 */
.phone-frame.night-mode .spy-upgrade-current { background: rgba(255, 149, 0, 0.06); }
.phone-frame.night-mode .spy-upgrade-level-item,
.phone-frame.night-mode .spy-upgrade-ach-item,
.phone-frame.night-mode .spy-upgrade-log-btn { background: rgba(255,255,255,0.05); }
.phone-frame.night-mode .spy-upgrade-level-item.unlocked { background: rgba(52, 199, 89, 0.12); }
.phone-frame.night-mode .spy-upgrade-level-item.current  { background: rgba(255, 149, 0, 0.18); }
.phone-frame.night-mode .spy-upgrade-ach-name { color: #e0e0e0; }
.phone-frame.night-mode .spy-intellog-item { border-bottom-color: rgba(255,255,255,0.05); }
.phone-frame.night-mode .spy-intellog-reason { color: #e0e0e0; }
.phone-frame.night-mode .spy-upgrade-progress-label,
.phone-frame.night-mode .spy-upgrade-total,
.phone-frame.night-mode .spy-upgrade-section-title { color: #aaa; }

/* ===== 监视机器人 Phase 6:临终遗言 toast ===== */
.spy-lastwords-toast {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: rgba(7, 8, 12, 0.95);
    color: #cad9f5;
    padding: 12px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 10003;
    max-width: 280px;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    border-left: 2px solid #9cb2e8;
}
.spy-lastwords-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.spy-lastwords-icon { font-size: 24px; flex-shrink: 0; }
.spy-lastwords-body { flex: 1; min-width: 0; }
.spy-lastwords-title { font-size: 11px; color: #8a96b0; margin-bottom: 2px; }
.spy-lastwords-text { font-size: 13px; line-height: 1.4; word-break: break-word; }

/* ===== Phase 6 修复:报告列表可点击 + 标记按钮已领取过渡 ===== */
.spy-report-item {
    cursor: pointer;
    transition: background 0.15s;
}
.spy-report-item:active {
    background: rgba(0, 0, 0, 0.03);
}
.phone-frame.night-mode .spy-report-item:active {
    background: rgba(255, 255, 255, 0.05);
}
.spy-report-action-btn-claimed {
    background: rgba(90, 143, 93, 0.12) !important;
    color: #5a8f5d !important;
    border-color: rgba(90, 143, 93, 0.3) !important;
}

/* ===== 群聊红包/转账玩法 ===== */
.rp-type-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}
.rp-type-tab {
    flex: 1;
    padding: 7px 0;
    font-size: 13px;
    border: 1px solid #e0e0e0;
    background: #f7f7f7;
    border-radius: 8px;
    cursor: pointer;
    color: #666;
    transition: all .15s;
}
.rp-type-tab.active {
    background: #f5a0b8;
    border-color: #f5a0b8;
    color: #fff;
    font-weight: 600;
}
.rp-summary {
    font-size: 13px;
    color: #f5a0b8;
    margin-top: 4px;
}
.redpacket-card.group-redpacket.finished,
.transfer-card.group-transfer.accepted,
.transfer-card.group-transfer.rejected {
    opacity: 0.6;
}
#group-txn-detail-modal .gtd-sub {
    font-size: 13px;
    color: #888;
    margin-bottom: 10px;
    word-break: break-all;
}
#group-txn-detail-modal .gtd-list {
    max-height: 240px;
    overflow-y: auto;
}
#group-txn-detail-modal .gtd-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 4px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}
#group-txn-detail-modal .gtd-row span:last-child {
    color: #f5a0b8;
    font-weight: 600;
}
#group-txn-detail-modal .gtd-empty {
    text-align: center;
    color: #aaa;
    padding: 20px 0;
    font-size: 13px;
}

/* TTS 引擎切换 segmented control（settings 页 MiniMax/Fish 二选一） */
.tts-provider-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #f0f0f0;
    border-radius: 10px;
    margin-bottom: 16px;
}
.tts-tab-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.tts-tab-btn.active {
    background: white;
    color: #333;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.tts-tab-btn:active {
    transform: scale(0.97);
}

/* 夜间模式 */
.phone-frame.night-mode .tts-provider-tabs {
    background: rgba(255, 255, 255, 0.06);
}
.phone-frame.night-mode .tts-tab-btn {
    color: #999;
}
.phone-frame.night-mode .tts-tab-btn.active {
    background: rgba(255, 255, 255, 0.12);
    color: #e8e8e8;
}

/* ==================== char 相册系统（v27, char-album.js）—— 白灰风 ==================== */

/* ---- 1. 通用：顶栏右侧圆按钮（齿轮 / ⋯）---- */
.char-album-icon-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.char-album-icon-btn:hover { background: #f5f5f5; }
.char-album-icon-btn:active { transform: scale(0.92); background: #e8e8e8; }

/* ---- 2. 相册首页 #char-album-home ---- */
#char-album-home {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
}
.char-album-home-content {
    padding: 16px 20px;
    flex: 1;
    overflow-y: auto;
}

/* ---- 3. 通用动作按钮（"+ 新建分类"、"+ 添加图片"）---- */
.char-album-action-btn {
    width: 100%;
    padding: 14px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 14px;
    color: #666;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 16px;
    outline: none;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.char-album-action-btn:hover { background: #f8f8f8; }
.char-album-action-btn:active { transform: scale(0.98); background: #e5e5e5; }
.char-album-plus {
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    color: #666;
}

/* ---- 4. 分类格栅 ---- */
.char-album-category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.char-album-category-card {
    background: #fff;
    border: 2px solid #e5e5e5;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    -webkit-tap-highlight-color: transparent;
}
.char-album-category-card:active {
    transform: scale(0.97);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.char-album-category-card-thumb {
    width: 100%;
    aspect-ratio: 1;
    background-color: #f5f5f5;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.char-album-category-card.empty .char-album-category-card-thumb {
    background-color: #f0f0f0;
    background-image: none;
}
.char-album-category-card.empty .char-album-category-card-thumb::after {
    content: '暂无图片';
    color: #bbb;
    font-size: 12px;
}
.char-album-category-card-info {
    padding: 10px 12px;
}
.char-album-category-card-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.char-album-category-card-count {
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

/* ---- 5. 分类页 #char-album-category ---- */
#char-album-category {
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
}
.char-album-category-content {
    padding: 16px 20px;
    flex: 1;
    overflow-y: auto;
}
.char-album-image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.char-album-image-item {
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: #f5f5f5;
    transition: transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
.char-album-image-item:active {
    transform: scale(0.95);
}
.char-album-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.char-album-image-item-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    max-width: calc(100% - 8px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

/* ---- 6. 图片详情页 #char-album-image-detail ---- */
#char-album-image-detail {
    background: #fafafa;
}
.char-album-img-detail-content {
    padding: 16px 20px;
    flex: 1;
    overflow-y: auto;
}
.char-album-img-preview-wrap {
    width: 100%;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    max-height: 60vh;
    margin-bottom: 16px;
}
#char-album-img-preview {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    display: block;
}
.char-album-img-desc-block {
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    border: 1px solid #e5e5e5;
}
.char-album-img-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    margin-bottom: 8px;
}
#char-album-img-desc {
    width: 100%;
    min-height: 60px;
    padding: 10px;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    background: #fafafa;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
}
#char-album-img-desc:focus {
    outline: none;
    border-color: #999;
    background: #fff;
}
.char-album-img-save-desc {
    display: block;
    margin: 10px auto 0;
    padding: 8px 18px;
    background: #666;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.char-album-img-save-desc:active {
    transform: scale(0.96);
    background: #444;
}
.char-album-img-meta {
    background: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid #e5e5e5;
}
.char-album-img-meta-row {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #fafafa;
}
.char-album-img-meta-row:last-child {
    border-bottom: none;
}
.char-album-img-meta-key {
    color: #999;
    font-size: 13px;
    width: 60px;
    flex-shrink: 0;
}
.char-album-img-meta-val {
    color: #333;
    font-size: 13px;
    flex: 1;
    word-break: break-all;
}

/* ---- 7. 设置页 #char-album-settings ---- */
#char-album-settings {
    background: #fafafa;
}
.char-album-settings-content {
    padding: 16px 20px;
    flex: 1;
    overflow-y: auto;
}
.char-album-setting-item {
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e5e5e5;
}
.char-album-setting-info {
    flex: 1;
    min-width: 0;
}
.char-album-setting-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}
.char-album-setting-desc {
    font-size: 12px;
    color: #999;
    line-height: 1.4;
}
/* toggle switch 复用项目现成 .toggle-switch + .toggle-slider (styles.css:5482) */
.char-album-setting-btn {
    padding: 8px 16px;
    background: #666;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.char-album-setting-btn:disabled {
    background: #e0e0e0;
    color: #999;
    cursor: not-allowed;
}

/* ---- 8. modal 内容（复用 .modal-overlay 全局样式，仅写内容容器）---- */
.char-album-modal-content {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    width: 80%;
    max-width: 320px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.char-album-modal-content h3 {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 600;
    color: #333;
    text-align: center;
}
.char-album-modal-content p {
    margin: 0 0 16px;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    text-align: center;
}
.char-album-modal-content input[type="text"],
.char-album-modal-content input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 16px;
    box-sizing: border-box;
    background: #fafafa;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.char-album-modal-content input[type="text"]:focus,
.char-album-modal-content input[type="password"]:focus {
    border-color: #999;
    background: #fff;
}
.char-album-modal-buttons {
    display: flex;
    gap: 10px;
}
.char-album-modal-buttons-vertical {
    flex-direction: column;
}
.char-album-modal-buttons button {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.15s ease;
}
.char-album-modal-buttons button:active {
    transform: scale(0.97);
}
.char-album-modal-btn-cancel {
    background: #f5f5f5;
    color: #666;
}
.char-album-modal-btn-cancel:active {
    background: #e8e8e8;
}
.char-album-modal-btn-confirm {
    background: #666;
    color: #fff;
}
.char-album-modal-btn-confirm:active {
    background: #444;
}
.char-album-modal-btn-danger {
    background: #ff4d4f;
    color: #fff;
}
.char-album-modal-btn-danger:active {
    background: #e63a3c;
}

/* ---- 9. 移动列表（A5 阶段用：移动图片到分类）---- */
.char-album-move-list {
    max-height: 50vh;
    overflow-y: auto;
    margin-bottom: 12px;
}
.char-album-move-list-item {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 4px;
    cursor: pointer;
    border: 1px solid #f0f0f0;
    background: #fafafa;
    font-size: 14px;
    color: #333;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.char-album-move-list-item:active {
    background: #e5e5e5;
    border-color: #999;
}

/* ---- 10. 空状态提示（用于图片网格无图时）---- */
.char-album-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    color: #bbb;
    font-size: 13px;
    padding: 40px 0;
}

/* ---- 11. 上传选项 modal 内的辅助提示 ---- */
.char-album-upload-hint {
    text-align: center;
    color: #999;
    font-size: 11px;
    line-height: 1.4;
}

/* ---- 12.5 多选删除：操作栏 + 选中样式 ---- */
.char-album-select-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.char-album-select-btn-danger,
.char-album-select-btn-primary,
.char-album-select-btn-cancel {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.char-album-select-btn-danger {
    background: #ff4d4f;
    color: #fff;
}
.char-album-select-btn-primary {
    background: #666;
    color: #fff;
}
.char-album-select-btn-cancel {
    background: #f5f5f5;
    color: #666;
}

/* 识图 API 配置 modal: Model input + 内嵌「拉取」按钮（绝对定位叠加，input 视觉跟其他对齐）*/
.char-album-vision-model-wrap {
    position: relative;
    margin-bottom: 16px;
}
.char-album-vision-model-wrap input {
    width: 100%;
    margin-bottom: 0 !important;
    padding-right: 64px !important;
}
.char-album-vision-fetch-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    padding: 5px 10px;
    background: #666;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.char-album-vision-fetch-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* 模型列表选择 modal */
.char-album-vision-models-list {
    max-height: 50vh;
    overflow-y: auto;
    margin-bottom: 12px;
}
.char-album-vision-model-item {
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 4px;
    cursor: pointer;
    border: 1px solid #f0f0f0;
    background: #fafafa;
    font-size: 13px;
    color: #333;
    word-break: break-all;
    -webkit-tap-highlight-color: transparent;
}
.char-album-vision-model-item:active {
    background: #e5e5e5;
    border-color: #999;
}

/* 整理相册预览 modal（宽一点，含详细 movements 列表）*/
.char-album-organize-preview-content {
    width: 90% !important;
    max-width: 480px !important;
}
.char-album-organize-new-cats {
    text-align: left !important;
    color: #333 !important;
    background: #f8f8f8;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 12px !important;
}
.char-album-organize-list {
    max-height: 50vh;
    overflow-y: auto;
    margin-bottom: 12px;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
}
.char-album-organize-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid #fafafa;
}
.char-album-organize-item:last-child {
    border-bottom: none;
}
.char-album-organize-item.unchanged {
    opacity: 0.5;
}
.char-album-organize-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f5f5f5;
}
.char-album-organize-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.char-album-organize-info {
    flex: 1;
    min-width: 0;
}
.char-album-organize-desc {
    font-size: 13px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.char-album-organize-arrow {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
}
.char-album-image-item.selected {
    outline: 3px solid #ff4d4f;
    outline-offset: -3px;
}
.char-album-image-select-mark {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #999;
    box-sizing: border-box;
}
.char-album-image-item.selected .char-album-image-select-mark {
    background: #ff4d4f;
    border-color: #ff4d4f;
}
.char-album-image-item.selected .char-album-image-select-mark::after {
    content: '✓';
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
}

/* ---- 12. 上传中进度浮层（居中 toast，不挡 grid）---- */
.char-album-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(50, 50, 50, 0.85);
    color: #fff;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    z-index: 10001;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

/* ===================================
   背景媒体（视频）— 容器内动态注入
   ================================ */

.media-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}

/* ===================================
   照片墙动效（雨/雪局部动效）
   ================================ */

.photo-effect-layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    border-radius: inherit;
    overflow: hidden;
    z-index: 2;
}

.photo-effect-particle {
    position: absolute;
    top: 0;
    left: 0;
}

.photo-effect-particle.rain {
    width: 1px;
    height: 14px;
    background: linear-gradient(to bottom, transparent, rgba(180, 180, 180, 0.4), rgba(180, 180, 180, 0.7));
    animation: photo-rain-fall linear infinite;
}

.photo-effect-particle.snow {
    color: rgba(170, 170, 170, 0.85);
    text-shadow: 0 0 3px rgba(200, 200, 200, 0.4);
    animation: photo-snow-fall linear infinite;
    line-height: 1;
}

@keyframes photo-rain-fall {
    0%   { transform: translate(0, 0) rotate(var(--rotate-deg, 0deg)); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translate(var(--drift-x, 0px), var(--drift-y, 0px)) rotate(var(--rotate-deg, 0deg)); opacity: 0; }
}

@keyframes photo-snow-fall {
    0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    5%   { opacity: 0.9; }
    95%  { opacity: 0.9; }
    100% { transform: translate(var(--drift-x, 0px), var(--drift-y, 0px)) rotate(360deg); opacity: 0; }
}

.phone-frame.night-mode .photo-effect-particle.rain {
    background: linear-gradient(to bottom, transparent, rgba(230, 230, 230, 0.4), rgba(230, 230, 230, 0.7));
}

.phone-frame.night-mode .photo-effect-particle.snow {
    color: rgba(230, 230, 230, 0.9);
}

/* 动效配置弹窗 */
#photo-effect-modal .modal-content {
    width: 72%;
    max-width: 290px;
}

#photo-effect-modal .modal-body {
    text-align: left;
    padding: 4px 14px 14px;
}

#photo-effect-modal .modal-actions {
    margin-top: 14px;
}

.effect-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    padding: 9px 13px;
    background: #fafafa;
    border: 1.5px solid #e8e8e8;
    border-radius: 11px;
}

.effect-row-angle {
    /* 角度行也用横排卡片，跟其他行一致 */
    flex-direction: row;
    align-items: center;
    padding-right: 13px;
}

.effect-row-angle .effect-label {
    min-width: 0;
}

.effect-label {
    font-size: 13px;
    color: #555;
    flex-shrink: 0;
    min-width: 52px;
}

.effect-btn-group {
    display: flex;
    gap: 5px;
    margin-left: auto;
}

.effect-btn {
    min-width: 32px;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #555;
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 12.5px;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.2;
    text-align: center;
}

.effect-btn.active {
    background: #333;
    color: #fff;
    border-color: #333;
}

.effect-angle-control {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

.effect-angle-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    background: #ddd;
    height: 3px;
    border-radius: 2px;
    outline: none;
    margin: 0;
}

.effect-angle-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #333;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.effect-angle-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #333;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.effect-angle-display {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.effect-angle-arrow {
    width: 14px;
    height: 14px;
    transition: transform 0.1s ease;
    color: #333;
    flex-shrink: 0;
}

.effect-angle-value {
    font-size: 10px;
    color: #333;
    font-weight: 500;
    min-width: 24px;
    text-align: right;
    white-space: nowrap;
}

.phone-frame.night-mode .effect-label,
.phone-frame.night-mode .effect-angle-value {
    color: #ddd;
}

.phone-frame.night-mode .effect-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: #ddd;
}

.phone-frame.night-mode .effect-btn.active {
    background: #f5f5f7;
    color: #1c1c1e;
    border-color: #f5f5f7;
}

.phone-frame.night-mode .effect-angle-slider {
    background: rgba(255, 255, 255, 0.15);
}

.phone-frame.night-mode .effect-angle-arrow {
    color: #ddd;
}

/* ===================================
   桌面 frameless 模式自适应（clamp + grid align-content: space-between）
   - home-apps flex:1 撑满 home-page，余空间归 grid 内部分配
   - align-content: space-between 让 grid row 之间间距随视口高度自动拉大
   - 横纵向 padding/gap/margin 用 clamp 跟视口弹性
   - 第二页 grid 行 minmax(60, 100) 让 row 不拉伸（保留用户确认的 Xiaomi 第二页效果）
   - icon-box 跟视口 vmin 等比缩放，限 50-76
   - icon-line 不动（保护内部 ::before/::after CSS 绘图）
   - icon-label 字体不动（保持响应 GLOBAL_FONT 全局字号偏移）
   ================================ */

body .phone-frame.frameless .home-apps {
    flex: 1;
    padding-top: max(clamp(30px, 5vh, 60px), env(safe-area-inset-top, 0px));
    padding-bottom: clamp(15px, 2.5vh, 30px);
    padding-left: clamp(15px, 5vw, 32px);
    padding-right: clamp(15px, 5vw, 32px);
    margin-bottom: clamp(100px, 14vh, 130px);
    row-gap: clamp(8px, 1.8vh, 22px);
    column-gap: clamp(8px, 2.5vw, 20px);
    align-content: space-between;
}

/* 两页统一 6 行 minmax(0, 1fr) 均分 — min 0 强制所有 row 同等大小不被
   content 撑差异化，1fr 占余空间均分，两页 row 大小 / gap 完全一致。
   widget-wrapper / p2-photo-widget 跨 row 1-2 自动拉伸到 row 大小匹配 → 两页
   widget 区视觉对齐。widget-info absolute bottom: -125 保持原样，自然显示在
   row 3 空区域。note-widget / app icon 整体下移 1 row 让出 row 3 给 widget-info
   突出空间。
   align-content 显式 stretch 避免外层 space-between 干扰 1fr 分配。 */
body .phone-frame.frameless .home-page:nth-child(1) .home-apps,
body .phone-frame.frameless .home-page:nth-child(2) .home-apps {
    grid-template-rows: repeat(6, minmax(0, 1fr));
    row-gap: clamp(8px, 1.8vh, 22px);
    align-content: stretch;
}

/* 第一页 widget 区紧凑化跟 vh 联动:
   - margin-bottom: 0 取消原 130 (突出空间已由 row 3 空区让出)
   - align-self: start 让 widget-wrapper 不被 grid stretch 撑满 row 1-2 area
   - height clamp(148, 21vh, 215) 限制虚线相框高度跟随屏幕大小
     (跟 home-apps margin-bottom 增大同步收缩，保持 vh 720 widget-info 跟便签
      buffer +12 不被 dock 让空间挤压)
   widget-info / widget-avatar absolute bottom 保持原值 (-125 / -18) 跟
   widget-wrapper bottom 联动自然上移 → 低 vh 屏 widget-info 不溢出 row 4。
   vh 700: buffer +6  /  vh 720: +12  /  vh 914: +50  /  vh 1024: +77 */
body .phone-frame.frameless .home-page:nth-child(1) .widget-wrapper {
    margin-bottom: 0;
    align-self: start;
    height: clamp(148px, 21vh, 215px);
}

/* 第一页 app 整体下移 1 row 让出 row 3 给 widget-info 显示 */
body .phone-frame.frameless .home-page:nth-child(1) .note-widget {
    grid-row: 4 / 6;
}

body .phone-frame.frameless .home-page:nth-child(1) .app-weather,
body .phone-frame.frameless .home-page:nth-child(1) .app-calendar {
    grid-row: 4;
}

body .phone-frame.frameless .home-page:nth-child(1) .app-wechat,
body .phone-frame.frameless .home-page:nth-child(1) .app-meet {
    grid-row: 5;
}

body .phone-frame.frameless .home-page:nth-child(1) .app-worldbook,
body .phone-frame.frameless .home-page:nth-child(1) .app-findphone,
body .phone-frame.frameless .home-page:nth-child(1) .drift-bottle-widget {
    grid-row: 6;
}

/* row 大小 110 > app-icon natural ~78，让 icon 垂直居中 row 而非顶部对齐 */
body .phone-frame.frameless .home-apps .app-icon {
    justify-content: center;
}

/* Dock 底栏 (设置/字体/主题) icon 跟主页 app icon 大小完全一致 — frameless 模式下
   统一所有 icon 大小。dock height + nav-item padding 跟 icon 联动确保不溢出。
   page-indicators bottom 跟 dock height 联动避免被遮挡。 */
body .phone-frame.frameless .home-bottom-nav {
    height: clamp(85px, 13vh, 110px);
}

body .phone-frame.frameless .home-nav-item {
    padding: 4px 20px;
}

body .phone-frame.frameless .home-nav-item .nav-icon {
    width: clamp(50px, 14.87vmin, 76px);
    height: clamp(50px, 14.87vmin, 76px);
}

body .phone-frame.frameless .page-indicators {
    bottom: calc(clamp(85px, 13vh, 110px) + 10px);
}

body .phone-frame.frameless .icon-box {
    width: clamp(50px, 14.87vmin, 76px);
    height: clamp(50px, 14.87vmin, 76px);
}

/* ===== 数据用量监测 StorageMonitor ===== */
.sm-usage-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sm-usage-text { font-size: 14px; color: #333; }
.sm-usage-pct { font-size: 14px; font-weight: 600; color: #007AFF; flex: 0 0 auto; }
.sm-usage-bar { height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden; margin-top: 8px; }
.sm-usage-bar-fill { height: 100%; width: calc(var(--pct, 0) * 1%); background: #007AFF; border-radius: 4px; transition: width .3s ease; }
.sm-persist-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; }
.sm-persist-label { font-size: 13px; color: #666; }
.sm-btn-sm { flex: 0 0 auto; padding: 6px 14px; }
.sm-btn-primary { background: #007AFF; color: #fff; }
.sm-btn-clean { background: #8a8a8a; color: #fff; font-weight: 600; }
.sm-dist-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 4px 0; }
.sm-dist-htitle { font-size: 13px; color: #666; font-weight: 600; }
.sm-caret { font-size: 11px; color: #999; margin-left: 6px; }
.sm-clickable { cursor: pointer; }
.sm-dist-subwrap { display: flex; flex-direction: column; gap: 12px; }
.sm-dist-list { display: flex; flex-direction: column; gap: 12px; }
.sm-dist-list:empty { display: none; }
.sm-dist-row { display: flex; flex-direction: column; gap: 6px; }
.sm-dist-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sm-dist-name { font-size: 14px; color: #333; }
.sm-dist-val { font-size: 13px; color: #666; flex: 0 0 auto; }
.sm-dist-bar { height: 8px; background: #f3f3f3; border-radius: 4px; overflow: hidden; }
.sm-dist-bar-fill { height: 100%; width: calc(var(--pct, 0) * 1%); background: #07c160; border-radius: 4px; }
.sm-tag { display: inline-block; font-size: 11px; color: #fff; background: #ff9500; border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.sm-dist-sub { display: flex; justify-content: space-between; align-items: baseline; padding-left: 16px; }
.sm-dist-subname { font-size: 12px; color: #888; }
.sm-dist-subval { font-size: 12px; color: #aaa; flex: 0 0 auto; }

/* ===================== 天意（占卜）· 圣洁冷霜 ===================== */
.oracle-type-dialog { max-height: 86vh; }
.oracle-type-dialog .chat-modal-header, .oracle-type-dialog .chat-modal-footer { flex-shrink: 0; }
.oracle-type-dialog .chat-modal-header { position: relative; }
.oracle-type-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 22px; color: #999; cursor: pointer; line-height: 1; }
.oracle-type-close:active { color: #555; }

/* 类型选择 */
.oracle-type-body { padding: 16px 20px 22px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.oracle-type-hint { margin: 0 0 14px; font-size: 13px; color: #999; text-align: center; }
.oracle-type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.oracle-type-card {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 18px 10px; background: #f7f7f8; border: 1px solid #ececee; border-radius: 14px;
    cursor: pointer; font-family: inherit; color: #555;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.oracle-type-card:not(.oracle-type-locked):active { transform: scale(0.96); border-color: #cccccc; background: #ffffff; }
.oracle-type-icon { color: #888888; }
.oracle-type-name { font-size: 14px; font-weight: 600; color: #333; }
.oracle-type-desc { font-size: 11px; color: #999; }
.oracle-type-locked { opacity: 0.45; cursor: not-allowed; }
.oracle-section-title { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; color: #999; margin: 18px 4px 10px; }
.oracle-type-grid-single { grid-template-columns: 1fr; }
.phone-frame.night-mode .oracle-section-title { color: #7d8b98; }

/* 答案之书 · 整屏书场景（无弹窗框） */
.oracle-book-scene {
    flex-direction: column;
    background: radial-gradient(130% 100% at 50% 30%, rgba(44,46,52,0.5), rgba(14,15,18,0.85));
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.oracle-scene-btn { position: absolute; top: 16px; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255,255,255,0.15); color: #eaf2fb; font-size: 22px; line-height: 36px; text-align: center; cursor: pointer; padding: 0; z-index: 6; }
.oracle-scene-btn:active { background: rgba(255,255,255,0.28); }
.oracle-scene-back { left: 16px; }
.oracle-scene-close { right: 16px; }
.oracle-stage { display: flex; flex-direction: column; align-items: center; }

/* 合着的书：更厚（右侧书页叠层）+ 书脊 + 银霜双线框 + 雪花纹章 + 横线 */
.oracle-book-closed { position: relative; width: 168px; height: 224px; margin: 0 0 30px; border-radius: 3px 9px 9px 3px; filter: drop-shadow(0 18px 26px rgba(0,0,0,0.42)); }
.oracle-book-closed::after { content: ""; position: absolute; top: 5px; bottom: 5px; right: -7px; width: 11px; border-radius: 0 2px 2px 0; background: linear-gradient(to right, rgba(40,36,30,0.2), rgba(40,36,30,0) 50%), repeating-linear-gradient(to bottom, #f0efe9 0 1px, #dad8d0 1px 1.8px); box-shadow: 1px 1px 4px rgba(20, 24, 30, 0.3); }
.oracle-book-closed-face {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;
    border-radius: 3px 9px 9px 3px;
    background: linear-gradient(160deg, #f7f7f8 0%, #ededf0 55%, #e0e1e5 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55), inset 0 -22px 40px -24px rgba(0,0,0,0.08);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px 18px 22px;
}
.oracle-book-closed-face::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 13px; background: linear-gradient(to right, #c4c7cd 0%, #d6d9de 45%, #b9bcc3 100%); box-shadow: inset -3px 0 4px rgba(0,0,0,0.12); }
.oracle-book-closed-face::after { display: none; }
.oracle-book-emblem { display: none; }
.oracle-book-closed-title { font-size: 18px; font-weight: 600; letter-spacing: 4px; color: #4a4d52; text-shadow: 0 1px 0 rgba(255,255,255,0.7); }
.oracle-book-closed-rule { display: none; }
.oracle-book-closed-sub { font-size: 9.5px; letter-spacing: 0.5px; color: #9a9ea5; }

/* 浮在暗场上的素净输入 + 扁平按钮（无渐变，控件统一） */
.oracle-question-input { width: 270px; max-width: 78vw; height: 54px; resize: none; margin: 0 0 14px; padding: 12px 14px; box-sizing: border-box; border-radius: 12px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color: #edf0f5; font-family: inherit; font-size: 14px; box-shadow: none; }
.oracle-question-input::placeholder { color: rgba(255,255,255,0.4); }
.oracle-question-input:focus { outline: none; border-color: rgba(255,255,255,0.55); }
.oracle-draw-btn { width: 270px; max-width: 78vw; padding: 13px; border: none; border-radius: 12px; background: rgba(242,244,248,0.94); color: #2b323c; font-size: 15px; font-weight: 600; letter-spacing: 1px; font-family: inherit; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.26); }
.oracle-draw-btn:active { filter: brightness(0.94); }

/* 打开的书：更大、纸纹、深书沟、左页暗纹雪花、谶语更讲究 */
.oracle-book { position: relative; width: 300px; max-width: 86vw; height: 210px; margin: 0 0 22px; perspective: 1700px; filter: drop-shadow(0 22px 34px rgba(8,20,40,0.55)); }
.oracle-book-page { position: absolute; top: 0; width: 50%; height: 100%; box-sizing: border-box; background: repeating-linear-gradient(0deg, rgba(110,145,180,0.045) 0 1px, transparent 1px 27px), linear-gradient(#ffffff, #eef4fb); }
.oracle-book-left { left: 0; border-radius: 9px 0 0 9px; box-shadow: inset -16px 0 22px -16px rgba(50,85,125,0.55); display: flex; align-items: center; justify-content: center; }
.oracle-page-emblem { color: rgba(140,180,215,0.22); }
.oracle-book-right { right: 0; border-radius: 0 9px 9px 0; box-shadow: inset 16px 0 22px -16px rgba(50,85,125,0.55); display: flex; align-items: center; justify-content: center; padding: 22px 20px; position: relative; overflow: hidden; }
.oracle-book-right::before { content: ""; position: absolute; left: 50%; top: 50%; width: 150%; height: 150%; transform: translate(-50%, -50%) scale(0.4); background: radial-gradient(circle, rgba(204,228,248,0.9) 0%, rgba(204,228,248,0) 62%); opacity: 0; pointer-events: none; }
.oracle-book.revealed .oracle-book-right::before { animation: oracleBloom 1.4s ease-out forwards; }
@keyframes oracleBloom { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); } }
.oracle-answer-text { margin: 0; font-size: 16px; line-height: 1.9; color: #34383e; text-align: center; letter-spacing: 0.5px; font-weight: 500; opacity: 0; transform: translateY(6px); transition: opacity 0.6s ease, transform 0.6s ease; position: relative; z-index: 1; }
.oracle-slip.revealed .oracle-answer-text { opacity: 1; transform: translateY(0); }
.oracle-book-flip { position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: repeating-linear-gradient(0deg, rgba(110,145,180,0.045) 0 1px, transparent 1px 27px), linear-gradient(225deg, #ffffff, #e2eef9); border-radius: 0 9px 9px 0; transform-origin: left center; transform: rotateY(0deg); backface-visibility: hidden; box-shadow: inset 14px 0 20px -14px rgba(50,85,125,0.45); z-index: 2; }
.oracle-book.flipping .oracle-book-flip { animation: oracleBookFlip 1.05s cubic-bezier(0.45, 0.05, 0.25, 1) forwards; }
@keyframes oracleBookFlip { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(-165deg); } }
.oracle-book-spine { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 3px; transform: translateX(-1px); background: linear-gradient(rgba(90,120,155,0.5), rgba(120,150,185,0.3)); z-index: 3; }
.oracle-question-echo { margin: 0 0 18px; min-height: 17px; font-size: 13px; color: #c7d6e6; text-align: center; }
.oracle-book-scene .oracle-question-echo { color: #c2c6cc; }
.oracle-slip { position: relative; width: 200px; max-width: 66vw; margin: 0 0 22px; padding: 30px 24px 28px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 15px; border-radius: 10px; background: #fbfbfc; box-shadow: 0 18px 38px rgba(0,0,0,0.42), inset 0 0 0 1px rgba(255,255,255,0.6); opacity: 0; transform: translateY(16px) scale(0.96); }
.oracle-slip.flipping { animation: oracleSlipRise 0.9s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes oracleSlipRise { 0% { opacity: 0; transform: translateY(18px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.oracle-slip-emblem { color: #b8bcc3; }
.oracle-reveal-actions { display: flex; gap: 12px; }
.oracle-secondary-btn { padding: 12px 20px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.16); color: #e6e9ef; font-family: inherit; font-size: 14px; cursor: pointer; }
.oracle-secondary-btn:active { background: rgba(255,255,255,0.28); }
.oracle-interpret-btn { width: auto; padding: 12px 22px; box-shadow: 0 4px 12px rgba(0,0,0,0.22); }

/* 飘雪（整屏书场景；overflow:hidden 裁切到屏内） */
.oracle-snow { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; z-index: 5; }
.oracle-snow-flake { position: absolute; top: -10px; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #ffffff 0%, #cfe2f4 55%, rgba(207,226,244,0) 72%); box-shadow: 0 0 4px rgba(150, 190, 224, 0.55); opacity: 0; animation: oracleSnowFall linear infinite; }
@keyframes oracleSnowFall { 0% { transform: translateY(0) translateX(0); opacity: 0; } 12% { opacity: 0.7; } 88% { opacity: 0.7; } 100% { transform: translateY(680px) translateX(18px); opacity: 0; } }
.oracle-snow-flake:nth-child(1) { left: 12%; width: 5px; height: 5px; animation-duration: 11s; animation-delay: 0s; }
.oracle-snow-flake:nth-child(2) { left: 28%; width: 7px; height: 7px; animation-duration: 14s; animation-delay: 2.5s; }
.oracle-snow-flake:nth-child(3) { left: 46%; width: 4px; height: 4px; animation-duration: 10s; animation-delay: 1.2s; }
.oracle-snow-flake:nth-child(4) { left: 63%; width: 6px; height: 6px; animation-duration: 13s; animation-delay: 4s; }
.oracle-snow-flake:nth-child(5) { left: 77%; width: 5px; height: 5px; animation-duration: 12s; animation-delay: 3s; }
.oracle-snow-flake:nth-child(6) { left: 88%; width: 7px; height: 7px; animation-duration: 15s; animation-delay: 6s; }

/* 夜间模式（仅类型选择弹窗；书场景本就暗底，白书不变） */
.phone-frame.night-mode .oracle-type-dialog { background: #1b2027; }
.phone-frame.night-mode .oracle-type-hint { color: #8694a4; }
.phone-frame.night-mode .oracle-type-card { background: #242b34; border-color: #323b46; color: #aebcc8; }
.phone-frame.night-mode .oracle-type-name { color: #d3e2ee; }
.phone-frame.night-mode .oracle-type-desc { color: #7d8b98; }

/* 聊天里的天意卡（放进对话后落进聊天历史） */
.chat-message.oracle-message { width: 100% !important; max-width: 100% !important; justify-content: center; margin: 10px 0; }
.oracle-card { max-width: 76%; padding: 8px 15px; border-radius: 12px; text-align: center; background: linear-gradient(160deg, #f6fbff, #e3eef9); border: 1px solid #d7e6f3; box-shadow: 0 3px 10px rgba(90,130,170,0.14); }
.oracle-card-title { font-size: 10.5px; letter-spacing: 3px; color: #7596b4; margin-bottom: 4px; }
.oracle-card-q { font-size: 11px; color: #8a9bad; margin-bottom: 3px; }
.oracle-card-a { font-size: 12px; line-height: 1.5; color: #3a5266; letter-spacing: 0.2px; }
.phone-frame.night-mode .oracle-card { background: #232a33; border-color: #333d48; box-shadow: 0 3px 10px rgba(0,0,0,0.3); }
.phone-frame.night-mode .oracle-card-title { color: #8fb0d0; }
.phone-frame.night-mode .oracle-card-q { color: #8694a4; }
.phone-frame.night-mode .oracle-card-a { color: #cdd9e6; }

/* 天意 · 魔法八球（经典黑八球） */
.oracle-8ball-scene { flex-direction: column; background: radial-gradient(130% 100% at 50% 30%, rgba(28,28,38,0.5), rgba(6,6,10,0.82)); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.oracle-8ball { position: relative; width: 200px; height: 200px; margin: 0 0 26px; display: flex; align-items: center; justify-content: center; }
.oracle-8ball-orb { position: relative; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #5e5e68 0%, #2a2a30 26%, #0c0c10 60%, #000 100%); box-shadow: 0 24px 44px rgba(0,0,0,0.6), inset -18px -20px 48px rgba(0,0,0,0.7), inset 14px 14px 26px rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; transition: opacity 0.4s ease; }
.oracle-8ball-orb::before { content: ""; position: absolute; top: 15%; left: 25%; width: 48px; height: 30px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%); transform: rotate(-22deg); filter: blur(3px); pointer-events: none; }
.oracle-8ball-num { width: 56px; height: 56px; border-radius: 50%; background: #fff; color: #111; font-size: 30px; font-weight: 800; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.oracle-8ball-card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -52%) scale(0.92); width: 188px; box-sizing: border-box; padding: 26px 20px; border-radius: 14px; background: #1a1a1f; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 16px 34px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.45s ease, transform 0.45s ease; }
.oracle-8ball-answer { margin: 0; color: #e6e6ea; font-size: 14px; line-height: 1.6; letter-spacing: 0.5px; text-align: center; }
.oracle-8ball.revealed .oracle-8ball-orb { opacity: 0; }
.oracle-8ball.revealed .oracle-8ball-card { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.oracle-8ball.shaking { animation: oracle8Shake 0.7s ease-in-out; }
@keyframes oracle8Shake { 0%, 100% { transform: translate(0, 0) rotate(0); } 15% { transform: translate(-9px, 4px) rotate(-6deg); } 30% { transform: translate(8px, -3px) rotate(5deg); } 45% { transform: translate(-7px, 5px) rotate(-4deg); } 60% { transform: translate(6px, -4px) rotate(4deg); } 75% { transform: translate(-4px, 2px) rotate(-2deg); } }

/* 天意 · 塔罗（经典墨紫 + 翻牌） */
.oracle-tarot-scene { flex-direction: column; background: radial-gradient(130% 100% at 50% 28%, rgba(42,30,64,0.52), rgba(12,8,20,0.84)); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.oracle-tarot-card { width: 150px; height: 248px; margin: 0 0 24px; perspective: 1300px; }
.oracle-tarot-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(0deg); transition: transform 0.75s cubic-bezier(0.45, 0.05, 0.25, 1); }
.oracle-tarot-card.flipped .oracle-tarot-inner { transform: rotateY(180deg); }
.oracle-tarot-back-face, .oracle-tarot-front-face { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 12px; backface-visibility: hidden; box-sizing: border-box; overflow: hidden; box-shadow: 0 18px 34px rgba(8,5,18,0.6); }
.oracle-tarot-back-face { background: radial-gradient(circle at 50% 38%, rgba(96,76,140,0.45), transparent 62%), linear-gradient(160deg, #2e2248, #150e26); border: 1.5px solid rgba(208,176,100,0.55); display: flex; align-items: center; justify-content: center; }
.oracle-tarot-back-face::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(208,176,100,0.3); border-radius: 8px; pointer-events: none; }
.oracle-tarot-back-face::after { display: none; }
.oracle-tarot-back-emblem { color: #cdab68; opacity: 0.9; filter: drop-shadow(0 0 4px rgba(205,171,104,0.4)); position: relative; z-index: 1; }
.oracle-tarot-front-face { transform: rotateY(180deg); background: radial-gradient(circle at 50% 32%, rgba(102,80,148,0.4), transparent 60%), linear-gradient(165deg, #382a58, #1a1030); border: 1.5px solid rgba(212,180,104,0.55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 22px 14px; color: #ecdcae; }
.oracle-tarot-front-face::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(212,180,104,0.28); border-radius: 8px; pointer-events: none; }
.oracle-tarot-emblem { color: #d4b878; filter: drop-shadow(0 0 5px rgba(212,184,120,0.45)); margin-bottom: 2px; position: relative; z-index: 1; }
.oracle-tarot-name { font-size: 21px; font-weight: 700; letter-spacing: 3px; color: #ecd9a4; text-shadow: 0 1px 6px rgba(0,0,0,0.4); position: relative; z-index: 1; }
.oracle-tarot-pos { font-size: 11px; letter-spacing: 5px; color: #a890c8; position: relative; z-index: 1; }
.oracle-tarot-pos::before { content: ""; display: block; width: 26px; height: 1px; margin: 3px auto 6px; background: linear-gradient(90deg, transparent, rgba(212,180,104,0.6), transparent); }
.oracle-tarot-key { font-size: 11.5px; line-height: 1.6; text-align: center; color: #c4b3e0; margin-top: 2px; position: relative; z-index: 1; }
.oracle-tarot-card.reversed .oracle-tarot-emblem { transform: rotate(180deg); }

/* 天意 · 求签（朱红竹色签筒 + 摇签 + 签纸） */
.oracle-qian-scene { flex-direction: column; background: radial-gradient(130% 100% at 50% 30%, rgba(64,22,18,0.5), rgba(18,8,6,0.84)); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.oracle-qian-tube { position: relative; width: 80px; height: 144px; margin: 30px 0 26px; border-radius: 7px 7px 9px 9px; background: linear-gradient(90deg, #6f1c1c 0%, #a83232 50%, #6f1c1c 100%); box-shadow: 0 16px 30px rgba(40,8,8,0.5), inset 0 0 0 2px rgba(214,180,110,0.35); }
.oracle-qian-tube::before { content: ""; position: absolute; top: -4px; left: -4px; right: -4px; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #5a1414, #8a2727, #5a1414); }
.oracle-qian-stick { position: absolute; bottom: 64px; width: 5px; height: 96px; border-radius: 2px; background: linear-gradient(#dcc592, rgba(182,151,83,0.4)); transform-origin: bottom center; }
.oracle-qian-stick:nth-child(1) { left: 18px; transform: rotate(-10deg); }
.oracle-qian-stick:nth-child(2) { left: 30px; transform: rotate(-4deg); height: 104px; }
.oracle-qian-stick:nth-child(3) { left: 40px; transform: rotate(1deg); height: 100px; }
.oracle-qian-stick:nth-child(4) { left: 50px; transform: rotate(6deg); }
.oracle-qian-stick:nth-child(5) { left: 60px; transform: rotate(12deg); height: 92px; }
.oracle-qian-tube.shaking { animation: oracleQianShake 0.8s ease-in-out; }
@keyframes oracleQianShake { 0%, 100% { transform: translateY(0) rotate(0); } 12% { transform: translateY(-9px) rotate(-9deg); } 28% { transform: translateY(6px) rotate(8deg); } 44% { transform: translateY(-8px) rotate(-7deg); } 60% { transform: translateY(6px) rotate(6deg); } 76% { transform: translateY(-5px) rotate(-4deg); } 88% { transform: translateY(3px) rotate(2deg); } }
.oracle-qian-paper { width: 158px; max-width: 76vw; margin: 0 0 16px; padding: 18px 16px 20px; border-radius: 4px; background: linear-gradient(#f7eedb, #ecdcb8); border: 1px solid #c8aa6e; box-shadow: 0 14px 28px rgba(40,20,8,0.4); display: flex; flex-direction: column; align-items: center; gap: 11px; animation: oracleQianPaperRise 0.6s cubic-bezier(.2,.7,.3,1) both; }
@keyframes oracleQianPaperRise { 0% { opacity: 0; transform: translateY(16px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.oracle-qian-num { font-size: 17px; font-weight: 700; letter-spacing: 2px; color: #6e3a1a; }
.oracle-qian-ji { font-size: 24px; font-weight: 800; letter-spacing: 5px; }
.oracle-qian-ji.good { color: #c0392b; }
.oracle-qian-ji.mid { color: #9a7b3a; }
.oracle-qian-ji.bad { color: #6b6b6b; }
.oracle-qian-d { font-size: 13px; line-height: 1.6; text-align: center; color: #5a4326; }

/* ===== 抛硬币（银色双面币：正面莫比乌斯环=是 / 反面双生并蒂莲=否） ===== */
.oracle-coin-scene { flex-direction: column; background: radial-gradient(130% 100% at 50% 30%, rgba(40,44,52,0.5), rgba(12,14,18,0.84)); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.oracle-coin-scene .oracle-stage { perspective: 900px; }
.oracle-coin { position: relative; width: 124px; height: 124px; margin: 8px 0 30px; transform-style: preserve-3d; transform: rotateY(0deg); }
.oracle-coin-face { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; color: #5a6473; background: radial-gradient(circle at 38% 30%, #fbfcfe 0%, #e2e7ef 32%, #b8c0cc 64%, #8b95a4 100%); box-shadow: 0 16px 30px rgba(18,22,30,0.55), inset 0 0 0 3px rgba(255,255,255,0.6), inset 0 0 0 9px rgba(140,150,165,0.28), inset 0 -10px 18px rgba(80,88,102,0.4), inset 0 10px 18px rgba(255,255,255,0.6); }
.oracle-coin-front { transform: rotateY(0deg); }
.oracle-coin-back-face { transform: rotateY(180deg); }
.oracle-coin.flip-heads { animation: oracleCoinHeads 1.1s cubic-bezier(.3,.05,.2,1) forwards; }
.oracle-coin.flip-tails { animation: oracleCoinTails 1.1s cubic-bezier(.3,.05,.2,1) forwards; }
@keyframes oracleCoinHeads { 0% { transform: translateY(0) rotateY(0deg); animation-timing-function: cubic-bezier(.2,.65,.4,1); } 46% { transform: translateY(-165px) rotateY(700deg); animation-timing-function: cubic-bezier(.5,0,.8,.45); } 100% { transform: translateY(0) rotateY(1440deg); } }
@keyframes oracleCoinTails { 0% { transform: translateY(0) rotateY(0deg); animation-timing-function: cubic-bezier(.2,.65,.4,1); } 46% { transform: translateY(-165px) rotateY(780deg); animation-timing-function: cubic-bezier(.5,0,.8,.45); } 100% { transform: translateY(0) rotateY(1620deg); } }
.oracle-coin-ask, .oracle-coin-reveal { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.oracle-coin-verdict { font-size: 24px; font-weight: 800; letter-spacing: 3px; color: #e2e8f2; text-shadow: 0 2px 10px rgba(0,0,0,0.4); }

/* ===== 天使卡（晨光金 + 羽翼白 + 柔光浮现） ===== */
.oracle-angel-scene { flex-direction: column; background: radial-gradient(130% 100% at 50% 26%, rgba(255,246,224,0.30), rgba(36,30,22,0.86)); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.oracle-angel-closed { width: 138px; height: 196px; margin: 6px 0 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #cdab68; background: linear-gradient(160deg, #fbf4e2 0%, #f0e2bd 48%, #e6d3a4 100%); border: 1px solid rgba(214,184,116,0.7); box-shadow: 0 16px 36px rgba(60,46,20,0.42), inset 0 0 0 4px rgba(255,255,255,0.4), inset 0 0 26px rgba(214,184,116,0.35); }
.oracle-angel-closed svg { opacity: 0.7; filter: drop-shadow(0 1px 4px rgba(180,150,90,0.45)); }
.oracle-angel-card { position: relative; width: 156px; max-width: 74vw; margin: 6px 0 16px; padding: 24px 18px 22px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 0; background: linear-gradient(165deg, #fffdf6 0%, #fbf3df 55%, #f3e6c6 100%); border: 1px solid rgba(222,196,132,0.75); box-shadow: 0 18px 40px rgba(60,46,20,0.4), inset 0 0 0 4px rgba(255,255,255,0.55), 0 0 34px rgba(255,232,170,0.45); }
.oracle-angel-card.bloom { animation: oracleAngelBloom 0.95s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes oracleAngelBloom { 0% { opacity: 0; transform: translateY(16px) scale(0.9); box-shadow: 0 18px 40px rgba(60,46,20,0.4), inset 0 0 0 4px rgba(255,255,255,0.55), 0 0 0 rgba(255,232,170,0); } 60% { opacity: 1; transform: translateY(-4px) scale(1.03); box-shadow: 0 18px 40px rgba(60,46,20,0.4), inset 0 0 0 4px rgba(255,255,255,0.7), 0 0 56px rgba(255,232,170,0.78); } 100% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 18px 40px rgba(60,46,20,0.4), inset 0 0 0 4px rgba(255,255,255,0.55), 0 0 34px rgba(255,232,170,0.45); } }
.oracle-angel-emblem { color: #cdab68; opacity: 0.92; filter: drop-shadow(0 1px 5px rgba(206,170,104,0.5)); }
.oracle-angel-word { font-size: 23px; font-weight: 800; letter-spacing: 4px; color: #6e5824; text-shadow: 0 1px 8px rgba(255,236,180,0.7); }
.oracle-angel-msg { font-size: 13px; line-height: 1.7; text-align: center; color: #7a6736; }

/* ===== 观象（水镜：墨青冷水 · 涟漪浮象） ===== */
.oracle-guanxiang-scene { flex-direction: column; background: radial-gradient(130% 100% at 50% 32%, rgba(28,54,58,0.5), rgba(8,16,20,0.86)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.oracle-guanxiang-mirror { position: relative; width: 230px; height: 230px; max-width: 72vw; max-height: 72vw; margin: 4px 0 26px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: repeating-radial-gradient(circle at 50% 50%, transparent 0 7px, rgba(200,228,232,0.14) 7px 8.5px, transparent 8.5px 15px); box-shadow: inset 0 0 0 1px rgba(190,224,228,0.22); }
.oracle-guanxiang-mirror::before { display: none; }
@keyframes oracleGuanxiangShimmer { 0%, 100% { opacity: 0.5; transform: translateX(0); } 50% { opacity: 0.85; transform: translateX(8px); } }
.oracle-guanxiang-ripple { position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(206,234,238,0.7); transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; }
.oracle-guanxiang-mirror.rippling .oracle-guanxiang-ripple { animation: oracleGuanxiangRipple 1.8s ease-out; }
.oracle-guanxiang-mirror.rippling .oracle-guanxiang-ripple:nth-child(2) { animation-delay: 0.35s; }
@keyframes oracleGuanxiangRipple { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.7; } 70% { opacity: 0.18; } 100% { transform: translate(-50%, -50%) scale(9); opacity: 0; } }
.oracle-guanxiang-text { position: relative; z-index: 2; width: 80%; margin: 0; text-align: center; font-size: 15px; line-height: 1.9; letter-spacing: 1px; color: #eef7f8; text-shadow: 0 1px 10px rgba(8,30,34,0.75); opacity: 0; }
.oracle-guanxiang-text.shown { animation: oracleGuanxiangFade 1.4s ease-out forwards; }
@keyframes oracleGuanxiangFade { 0% { opacity: 0; transform: translateY(6px); filter: blur(3px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } }

/* ===== 托梦（深夜夜境 · char 入你一梦） ===== */
.oracle-tuomeng-scene { flex-direction: column; justify-content: center; background: radial-gradient(130% 100% at 50% 30%, rgba(26,32,54,0.55), rgba(6,8,18,0.9)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.oracle-tuomeng-loading { color: #aab4d4; font-size: 15px; letter-spacing: 4px; padding: 40px 0; text-align: center; animation: oracleTuomengBreath 2.4s ease-in-out infinite; }
@keyframes oracleTuomengBreath { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.95; } }
.oracle-tuomeng-reveal { display: flex; flex-direction: column; align-items: center; width: 320px; max-width: 84vw; }
.oracle-tuomeng-dream { max-height: 52vh; overflow-y: auto; width: 100%; font-size: 14px; line-height: 2; letter-spacing: 0.5px; color: #d8def0; text-align: left; white-space: pre-wrap; text-shadow: 0 1px 10px rgba(0,0,0,0.5); padding: 4px 2px; animation: oracleTuomengFade 1.6s ease-out both; }
.oracle-tuomeng-line { margin: 18px 2px 4px; font-size: 14px; line-height: 1.8; letter-spacing: 1px; color: #c7b9e4; text-align: center; animation: oracleTuomengFade 1.6s ease-out 0.4s both; }
@keyframes oracleTuomengFade { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
/* 回流梦卡：比普通占卜卡宽、梦正文左对齐、长则内滚 */
.oracle-card.oracle-card-dream { width: 100% !important; max-width: 100% !important; }
.oracle-card-dream .oracle-card-a { max-height: 240px; overflow-y: auto; text-align: left; line-height: 1.9; white-space: pre-wrap; font-size: 13px; }

/* ===== 前世今生（古卷轮回 · 暖褐调） ===== */
.oracle-qianshi-scene { flex-direction: column; justify-content: center; background: radial-gradient(130% 100% at 50% 30%, rgba(58,42,28,0.6), rgba(20,12,6,0.92)); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.oracle-qianshi-loading { color: #cdaf86; font-size: 15px; letter-spacing: 4px; padding: 40px 0; text-align: center; animation: oracleTuomengBreath 2.4s ease-in-out infinite; }
.oracle-qianshi-reveal { display: flex; flex-direction: column; align-items: center; width: 320px; max-width: 84vw; }
.oracle-qianshi-text { max-height: 56vh; overflow-y: auto; width: 100%; font-size: 14px; line-height: 2; letter-spacing: 0.5px; color: #ecdcc2; text-align: left; white-space: pre-wrap; text-shadow: 0 1px 10px rgba(0,0,0,0.5); padding: 4px 2px; animation: oracleTuomengFade 1.6s ease-out both; }
.oracle-qianshi-chen { margin: 18px 2px 4px; font-size: 14px; line-height: 1.8; letter-spacing: 2px; color: #d8b98a; text-align: center; animation: oracleTuomengFade 1.6s ease-out 0.4s both; }

/* 天意面板：char 自主开关行（副标题下方） */
.oracle-auto-row { display: flex; align-items: center; gap: 12px; margin: 2px 4px 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.oracle-auto-row .toggle-switch { flex-shrink: 0; }
.oracle-auto-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.oracle-auto-label { font-size: 14px; color: #333; }
.oracle-auto-hint { font-size: 11px; line-height: 1.5; color: #999; }
.phone-frame.night-mode .oracle-auto-row { border-bottom-color: rgba(255,255,255,0.1); }
.phone-frame.night-mode .oracle-auto-label { color: #d3e2ee; }
.phone-frame.night-mode .oracle-auto-hint { color: #7d8b98; }
/* 天意面板「生成文风」输入区 */
.oracle-style-row { display: flex; flex-direction: column; gap: 8px; margin: 2px 4px 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.oracle-style-textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 44px; padding: 8px 10px; border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; font-size: 13px; line-height: 1.6; color: inherit; background: rgba(0,0,0,0.02); font-family: inherit; }
.phone-frame.night-mode .oracle-style-row { border-bottom-color: rgba(255,255,255,0.1); }
.phone-frame.night-mode .oracle-style-textarea { color: #d3e2ee; border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); }

.sm-dist-leaf { display: flex; justify-content: space-between; align-items: baseline; padding-left: 32px; }
.sm-dist-leafname { font-size: 11px; color: #aaa; }
.sm-dist-leafval { font-size: 11px; color: #bbb; flex: 0 0 auto; }

/* ===== 位置功能 · 齿轮按钮（Step1，作用域限定不影响其它弹窗）===== */
#chat-location-modal .chat-modal-header { position: relative; }
#chat-location-modal .chat-location-settings-gear {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #888;
    display: flex;
    align-items: center;
}
#chat-location-modal .chat-location-settings-gear:active { opacity: .6; }

/* ===== 位置功能 · 真实地图选点（Step2）===== */
.loc-map-modal { position: fixed; inset: 0; z-index: 9000; background: #e9e9e9; flex-direction: column; }
.loc-map-header { flex: 0 0 auto; }
.loc-map-back { width: 40px; height: 40px; border: none; background: transparent; font-size: 28px; line-height: 1; color: #333; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; padding: 0; }
.loc-map-back:active { background: rgba(0,0,0,.05); }
.loc-map-searchbar { flex: 0 0 auto; padding: 8px 12px; background: #fff; border-bottom: 1px solid #f0f0f0; }
.loc-map-search { width: 100%; box-sizing: border-box; border: none; background: #f2f2f2; border-radius: 16px; padding: 8px 14px; font-size: 14px; outline: none; }
.loc-map-send { border: none; background: #222; color: #fff; border-radius: 6px; padding: 7px 16px; font-size: 14px; cursor: pointer; }
.loc-map-send:active { opacity: .85; }
.loc-map-body { position: relative; flex: 1 1 auto; overflow: hidden; }
.loc-map-canvas { position: absolute; inset: 0; }
.loc-map-centerpin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); pointer-events: none; z-index: 5; }
.loc-map-locate { position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; border: none; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2); color: #333; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 6; }
.loc-map-locate:active { background: #f0f0f0; }
.loc-map-results { position: absolute; inset: 0; background: #fff; overflow-y: auto; z-index: 10; }
.loc-map-panel { flex: 0 0 38vh; overflow-y: auto; background: #fff; border-top: 1px solid #eee; }
.loc-poi-item { padding: 12px 16px; border-bottom: 1px solid #f2f2f2; cursor: pointer; }
.loc-poi-item:active { background: #f7f7f7; }
.loc-poi-current { background: #f0f0f0; }
.loc-poi-name { font-size: 15px; color: #222; margin-bottom: 2px; }
.loc-poi-addr { font-size: 12px; color: #999; }
.loc-map-empty { padding: 24px; text-align: center; color: #999; font-size: 13px; }

/* 位置卡片（微信式，黑灰主题） */
.location-card { display: flex; align-items: center; gap: 10px; width: 220px; background: #fff; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); padding: 10px 12px; box-sizing: border-box; overflow: hidden; }
.location-card-info { flex: 1 1 auto; min-width: 0; }
.location-card-name { font-size: 14px; font-weight: 600; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.location-card-addr { font-size: 11px; color: #999; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.location-card-thumb { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 6px; background: #ececec; display: flex; align-items: center; justify-content: center; }
.location-card { cursor: pointer; }
/* 位置查看弹窗底部信息条 */
.loc-view-info { flex: 0 0 auto; padding: 14px 16px; background: #fff; border-top: 1px solid #eee; }
.loc-view-name { font-size: 15px; font-weight: 600; color: #1a1a1a; }
.loc-view-addr { font-size: 12px; color: #999; margin-top: 4px; }

/* 实时位置共享 */
.chat-live-share-status { cursor: pointer; }
.loc-live-end { background: #e15555; }

/* 虚拟地图（pin 板） */
.virtual-pinboard { position: relative; flex: 1 1 auto; overflow: hidden; background: linear-gradient(135deg, #f3efe6, #ece6d8); touch-action: none; cursor: grab; }
.virtual-pinboard-inner { position: absolute; inset: 0; transform-origin: center center; background-image: linear-gradient(rgba(0,0,0,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 1px); background-size: 26px 26px; }
.vpin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.vpin-dot { width: 12px; height: 12px; border-radius: 50%; background: #333; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.vpin-name { margin-top: 2px; font-size: 11px; color: #333; background: rgba(255,255,255,.88); padding: 1px 6px; border-radius: 8px; white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.virtual-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #999; font-size: 13px; }
.loc-virtual-actions { display: flex; align-items: center; gap: 6px; }
.loc-virtual-actions .loc-map-send { padding: 6px 12px; font-size: 13px; }
.virtual-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #999; font-size: 13px; line-height: 1.9; text-align: center; }
.vb-editing .vpin { pointer-events: auto; cursor: grab; }
.vpin-del { display: none; position: absolute; top: -10px; right: -10px; width: 18px; height: 18px; line-height: 16px; text-align: center; border-radius: 50%; background: #e15555; color: #fff; font-size: 13px; border: 1px solid #fff; box-sizing: border-box; cursor: pointer; }
.vb-editing .vpin-del { display: block; }
.loc-mini-modal { position: fixed; inset: 0; z-index: 10001; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; }
.loc-mini-card { background: #fff; border-radius: 14px; padding: 20px; width: 80%; max-width: 300px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.loc-mini-card h3 { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: #222; text-align: center; }
.loc-mini-card p { margin: 0 0 14px; font-size: 13px; color: #888; text-align: center; }
.loc-mini-card input { width: 100%; box-sizing: border-box; border: 1px solid #e0e0e0; border-radius: 8px; padding: 9px 12px; font-size: 14px; outline: none; margin-bottom: 14px; }
.loc-mini-btns { display: flex; flex-direction: column; gap: 8px; }
.loc-mini-btns-row { flex-direction: row; }
.loc-mini-btns-row .loc-mini-btn { flex: 1; }
.loc-mini-btn { border: none; border-radius: 8px; padding: 10px; font-size: 14px; cursor: pointer; background: #f2f2f2; color: #333; }
.loc-mini-btn.loc-mini-confirm { background: #222; color: #fff; }
.loc-mini-btn.loc-mini-cancel { background: #f2f2f2; color: #888; }
.loc-pick-list { max-height: 50vh; overflow-y: auto; margin-bottom: 12px; }
.loc-pick-item { padding: 11px 12px; border-radius: 8px; font-size: 14px; color: #333; cursor: pointer; border-bottom: 1px solid #f2f2f2; }
.loc-pick-item:active { background: #f5f5f5; }
.vpin.vpin-active .vpin-dot { background: #e15555; transform: scale(1.35); }
.vlive-marker { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; pointer-events: none; z-index: 3; }
.vlive-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.vlive-me .vlive-dot { background: #3a7afe; }
.vlive-ta .vlive-dot { background: #e15555; }
.vlive-label { margin-top: 2px; font-size: 11px; color: #fff; padding: 1px 7px; border-radius: 8px; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.vlive-me .vlive-label { background: #3a7afe; }
.vlive-ta .vlive-label { background: #e15555; }
.vmap-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.vmap-road-case { stroke: #d9d2c4; stroke-width: 4; stroke-linecap: round; }
.vmap-road { stroke: #ffffff; stroke-width: 2; stroke-linecap: round; }
.vmap-river { stroke: #bcd9ec; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.vpin-nolabel .vpin-name { display: none; }
.vpin { z-index: 1; }

/* ===== 天意 · 红线（卜你我此缘）===== */
.oracle-hongxian-scene { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.oracle-hongxian-scene .oracle-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.oracle-hongxian-loading { color: #d8a0a8; font-size: 14px; letter-spacing: 2px; animation: oracleTuomengFade 1.2s ease-out both; }
.oracle-hongxian-reveal { display: flex; flex-direction: column; align-items: center; width: 300px; max-width: 84vw; padding: 34px 28px 26px; box-sizing: border-box; border-radius: 18px; background: linear-gradient(165deg, #fdf2f4, #f7e6ea); box-shadow: 0 20px 44px rgba(60,20,28,0.4); }
.oracle-hongxian-vis { position: relative; width: 240px; max-width: 70vw; height: 64px; margin: 6px 0 22px; }
.oracle-hongxian-thread { position: absolute; top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%); border-radius: 2px; background: linear-gradient(90deg, transparent, #c0303a, transparent); box-shadow: 0 0 8px rgba(200,48,58,0.5); transition: opacity .8s ease; }
.oracle-hongxian-end { position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; transform: translateY(-50%); background: #8a2028; box-shadow: 0 0 6px rgba(200,48,58,0.6); }
.oracle-hongxian-end.left { left: -2px; }
.oracle-hongxian-end.right { right: -2px; }
.oracle-hongxian-knot { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%) rotate(45deg); background: #c0303a; border-radius: 3px; box-shadow: 0 0 10px rgba(200,48,58,0.7); display: none; }
.oracle-hongxian-line { margin: 4px 8px 2px; font-size: 15px; line-height: 2; letter-spacing: 2px; color: #9a2832; text-align: center; white-space: pre-line; animation: oracleTuomengFade 1.6s ease-out 0.3s both; }
.oracle-hongxian-vis[data-depth="1"] .oracle-hongxian-thread { opacity: .3; filter: saturate(.5); }
.oracle-hongxian-vis[data-depth="2"] .oracle-hongxian-thread { opacity: .5; filter: saturate(.7); }
.oracle-hongxian-vis[data-depth="3"] .oracle-hongxian-thread { opacity: .72; }
.oracle-hongxian-vis[data-depth="4"] .oracle-hongxian-thread { opacity: .9; }
.oracle-hongxian-vis[data-depth="5"] .oracle-hongxian-thread { opacity: 1; box-shadow: 0 0 14px rgba(200,48,58,0.85); }
.oracle-hongxian-vis[data-depth="3"] .oracle-hongxian-knot,
.oracle-hongxian-vis[data-depth="4"] .oracle-hongxian-knot,
.oracle-hongxian-vis[data-depth="5"] .oracle-hongxian-knot { display: block; }
.oracle-hongxian-vis[data-depth="5"] .oracle-hongxian-knot { width: 14px; height: 14px; animation: oracleHongxianGlow 2.2s ease-in-out infinite; }
@keyframes oracleHongxianGlow { 0%,100% { box-shadow: 0 0 8px rgba(200,48,58,0.6); } 50% { box-shadow: 0 0 18px rgba(220,80,90,0.95); } }

/* ===== 天意 · 命书（翻开命书）===== */
.oracle-mingshu-scene { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.oracle-mingshu-scene .oracle-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.oracle-mingshu-loading { color: #d8c29a; font-size: 14px; letter-spacing: 2px; animation: oracleTuomengFade 1.2s ease-out both; }
.oracle-mingshu-reveal { display: flex; flex-direction: column; align-items: center; width: 340px; max-width: 88vw; }
.oracle-mingshu-page { position: relative; width: 100%; max-height: 72vh; overflow-y: auto; padding: 26px 22px; border-radius: 4px; background: linear-gradient(#f3e9d2, #ece0c4); box-shadow: 0 8px 30px rgba(0,0,0,0.5), inset 0 0 40px rgba(140,110,70,0.18); animation: oracleTuomengFade 1.4s ease-out both; }
.oracle-mingshu-text { font-size: 14px; line-height: 2; letter-spacing: 1px; color: #2b2418; text-align: justify; white-space: pre-wrap; transition: opacity .8s ease; }
.oracle-mingshu-notes { margin-top: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='24'%3E%3Cline x1='0' y1='23.5' x2='6' y2='23.5' stroke='%239c2f25' stroke-opacity='0.32' stroke-width='1' stroke-dasharray='3,3'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 6px 24px; }
.oracle-mingshu-note { margin: 0; font-style: italic; font-size: 13px; line-height: 24px; color: #9c2f25; letter-spacing: .5px; white-space: pre-wrap; transition: opacity .6s ease; }
.oracle-mingshu-page[data-depth="1"] .oracle-mingshu-text { opacity: 1; }
.oracle-mingshu-page[data-depth="1"] .oracle-mingshu-notes { opacity: .62; }
.oracle-mingshu-page[data-depth="2"] .oracle-mingshu-text { opacity: .92; }
.oracle-mingshu-page[data-depth="2"] .oracle-mingshu-notes { opacity: .74; }
.oracle-mingshu-page[data-depth="3"] .oracle-mingshu-text { opacity: .8; }
.oracle-mingshu-page[data-depth="3"] .oracle-mingshu-notes { opacity: .9; }
.oracle-mingshu-page[data-depth="4"] .oracle-mingshu-text { opacity: .62; }
.oracle-mingshu-page[data-depth="4"] .oracle-mingshu-notes { opacity: 1; }
.oracle-mingshu-page[data-depth="5"] .oracle-mingshu-text { opacity: .48; }
.oracle-mingshu-page[data-depth="5"] .oracle-mingshu-notes { opacity: 1; }
/* 命书选择层 + 书馆 */
.oracle-mingshu-choice { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.oracle-mingshu-enter-btn { background: transparent; color: #e3d3b2; border: 1px solid rgba(216,194,154,0.45); box-shadow: none; font-weight: 500; }
.oracle-shuguan { display: block; width: 340px; max-width: 88vw; max-height: 72vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 4px 8px; animation: oracleTuomengFade 1s ease-out both; }
.oracle-shuguan-bar { position: sticky; top: 0; z-index: 2; background: #241a12; padding: 8px 0 6px; }
.oracle-shuguan-stat { color: #d8c29a; font-size: 12px; text-align: center; padding: 4px 0 10px; }
.oracle-shuguan-search { width: 100%; box-sizing: border-box; margin-bottom: 8px; padding: 7px 10px; border: 1px solid rgba(216,194,154,0.3); border-radius: 8px; background: rgba(255,255,255,0.06); color: #ecdcc2; font-size: 13px; }
.oracle-shuguan-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.oracle-shuguan-chip { padding: 4px 10px; border-radius: 12px; font-size: 12px; color: #d8c29a; background: rgba(255,255,255,0.06); cursor: pointer; }
.oracle-shuguan-chip.active { background: #9c7a3a; color: #fff; }
.oracle-shuguan-item { margin-bottom: 8px; background: #f0e6cc; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.35); }
.oracle-shuguan-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; font-size: 13px; color: #4a3b26; cursor: pointer; }
.oracle-shuguan-headtext { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oracle-shuguan-arrow { margin-left: 8px; color: #9c7a3a; font-size: 12px; }
.oracle-shuguan-body { padding: 0 14px 12px; font-size: 13px; line-height: 1.9; color: #2b2418; white-space: pre-wrap; border-top: 1px dashed rgba(120,90,50,.3); }
.oracle-shuguan-share { margin: 0 14px 12px; padding: 5px 12px; border: 1px solid rgba(156,122,58,0.5); border-radius: 8px; background: transparent; color: #7a5a2a; font-size: 12px; cursor: pointer; }
.oracle-shuguan-empty { color: #d8c29a; text-align: center; padding: 40px 0; font-size: 14px; }

/* ===== iOS 感知（快捷指令·二级页） ===== */
/* 与 apk-only 反向：仅 APK 灰掉，所有网页端均可用（避免 iOS 检测误判把真 iOS 用户锁死） */
body:not(.not-apk) .sense-item[data-ios-only="1"] { opacity: 0.4; pointer-events: none; }
.sense-ios-pack { margin: 10px 16px 4px; padding: 10px 12px; background: #faf3f5; border: 1px solid #f0dfe4; border-radius: 10px; }
.sense-ios-pack-text { font-size: 12px; color: #8a7a7e; line-height: 1.5; margin-bottom: 8px; }
.sense-ios-pack-btns { display: flex; gap: 8px; }
.sense-ios-pack-btn { flex: 1; font-size: 13px; color: #fff; background: #e6a3b8; border: none; border-radius: 8px; padding: 8px 0; cursor: pointer; }
.sense-ios-pack-btn.ghost { color: #e6a3b8; background: transparent; border: 1px solid #e6a3b8; }
.sense-ios-pack-btn:active { opacity: 0.85; }
.sense-ios-refresh { width: 100%; margin: 8px 0 2px; font-size: 13px; color: #e6a3b8; background: transparent; border: 1px dashed #eccad4; border-radius: 8px; padding: 8px 0; cursor: pointer; }
.sense-ios-refresh:active { opacity: 0.85; }
.phone-frame.night-mode .sense-ios-pack { background: #2e2a2c; border-color: #3a3438; }
.phone-frame.night-mode .sense-ios-pack-text { color: #b09a9f; }
.phone-frame.night-mode .sense-ios-refresh { border-color: #50444a; }

/* 感知动作记录（持久化灰字；iOS 待确认整行可点跳快捷指令） */
.chat-message.sense-action-message { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 6px 0 !important; }
.sense-action-content { font-size: 11px; color: #aaa; text-align: center; padding: 2px 12px; line-height: 1.4; }
.sense-action-link { color: #c98aa0; text-decoration: none; }
.sense-action-link:active { opacity: 0.7; }
.phone-frame.night-mode .sense-action-content { color: #666; }
.phone-frame.night-mode .sense-action-link { color: #c98aa0; }

/* ===================== 番外 创作面板 ===================== */
.fanwai-dialog {
    width: 86%;
    max-width: 420px;
    max-height: 82vh;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.fanwai-body {
    padding: 12px 16px 16px;
    overflow-y: auto;
}
.fanwai-field { margin-bottom: 14px; }
.fanwai-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}
.fanwai-label-hint {
    font-size: 11px;
    font-weight: 400;
    color: #999;
    margin-left: 4px;
}
.fanwai-hint {
    font-size: 11px;
    color: #999;
    margin-top: 6px;
    line-height: 1.4;
}
.fanwai-input,
.fanwai-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    color: #333;
    background: #fff;
    outline: none;
    -webkit-appearance: none;
}
.fanwai-input:focus,
.fanwai-textarea:focus { border-color: #888; }
.fanwai-textarea { min-height: 88px; resize: vertical; line-height: 1.5; }

/* 段选 */
.fanwai-seg-group { display: flex; flex-wrap: wrap; gap: 8px; }
.fanwai-seg-btn {
    flex: 0 0 auto;
    padding: 6px 14px;
    border: 1px solid #ddd;
    border-radius: 16px;
    background: #f7f7f7;
    color: #555;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}
.fanwai-seg-btn.selected {
    background: #333;
    border-color: #333;
    color: #fff;
}
.fanwai-seg-sub { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fanwai-seg-sub:last-child { margin-bottom: 0; }
.fanwai-sub-label { font-size: 12px; color: #888; flex: 0 0 40px; }

/* 文风预设 */
.fanwai-preset-area { margin-top: 8px; }
.fanwai-preset-area .setting-select { font-size: 13px; padding: 8px 36px 8px 12px; }
.fanwai-preset-actions { display: flex; gap: 8px; margin-top: 8px; }
.fanwai-preset-btn {
    flex: 0 0 auto;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 14px;
    background: none;
    color: #555;
    font-size: 12px;
    cursor: pointer;
}
.fanwai-preset-btn:active { background: rgba(0, 0, 0, 0.05); }

/* 开关行 */
.fanwai-toggle-row { display: flex; align-items: center; justify-content: space-between; }
.fanwai-toggle-row .fanwai-label { margin-bottom: 0; }

/* 生成按钮 */
.fanwai-generate-btn {
    width: 100%;
    margin-top: 4px;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: #333;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.fanwai-generate-btn:active { opacity: 0.85; }

/* 夜间 */
.phone-frame.night-mode .fanwai-dialog { background: #1f1f1f; }
.phone-frame.night-mode .fanwai-label { color: #e0e0e0; }
.phone-frame.night-mode .fanwai-label-hint,
.phone-frame.night-mode .fanwai-hint { color: #777; }
.phone-frame.night-mode .fanwai-sub-label { color: #888; }
.phone-frame.night-mode .fanwai-input,
.phone-frame.night-mode .fanwai-textarea {
    background: #2a2a2a;
    border-color: #444;
    color: #e0e0e0;
}
.phone-frame.night-mode .fanwai-seg-btn {
    background: #2a2a2a;
    border-color: #444;
    color: #bbb;
}
.phone-frame.night-mode .fanwai-seg-btn.selected {
    background: #e0e0e0;
    border-color: #e0e0e0;
    color: #222;
}
.phone-frame.night-mode .fanwai-preset-btn {
    border-color: #444;
    color: #bbb;
}
.phone-frame.night-mode .fanwai-generate-btn {
    background: #e0e0e0;
    color: #222;
}

/* ===================== 番外馆（列表）===================== */
.fanwai-library-body { padding: 12px 16px 16px; max-height: 72vh; display: flex; flex-direction: column; }
.fanwai-library-list { flex: 1; overflow-y: auto; margin-bottom: 12px; }
.fanwai-library-empty { color: #999; font-size: 13px; text-align: center; padding: 28px 0; }
.fanwai-library-item { padding: 12px; border: 1px solid #eee; border-radius: 10px; margin-bottom: 8px; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.fanwai-library-item:active { background: rgba(0, 0, 0, 0.03); }
.fanwai-library-item-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 4px; }
.fanwai-library-item-meta { font-size: 11px; color: #999; }
.phone-frame.night-mode .fanwai-library-item { border-color: #333; }
.phone-frame.night-mode .fanwai-library-item:active { background: rgba(255, 255, 255, 0.04); }
.phone-frame.night-mode .fanwai-library-item-title { color: #e0e0e0; }
.phone-frame.night-mode .fanwai-library-empty { color: #666; }

/* ===================== 番外 · 全屏阅读器 ===================== */
.fanwai-reader-overlay { position: absolute; inset: 0; background: #fff; z-index: 10001; display: flex; flex-direction: column; }
.fanwai-reader-header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: max(44px, calc(12px + env(safe-area-inset-top, 0px))) 14px 12px; border-bottom: 1px solid #eee; }
.fanwai-reader-back, .fanwai-reader-del { background: none; border: none; font-size: 14px; cursor: pointer; padding: 4px 6px; }
.fanwai-reader-back { color: #333; }
.fanwai-reader-del { color: #c0392b; }
.fanwai-reader-title { flex: 1; text-align: center; font-size: 15px; font-weight: 600; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 8px; }
.fanwai-reader-scroll { flex: 1; overflow-y: auto; padding: 16px 18px 48px; }
.fanwai-reader-cot-wrap { margin-bottom: 16px; border: 1px solid #eee; border-radius: 8px; overflow: hidden; }
.fanwai-reader-cot-head { padding: 8px 12px; font-size: 12px; color: #888; background: #f7f7f7; cursor: pointer; }
.fanwai-reader-cot { padding: 10px 12px; font-size: 12px; color: #999; white-space: pre-wrap; line-height: 1.6; border-top: 1px solid #eee; }
.fanwai-reader-body { font-size: 15px; color: #2b2b2b; line-height: 1.9; white-space: pre-wrap; }
.fanwai-reader-epilogue { margin-top: 18px; padding-top: 12px; border-top: 1px dashed #ddd; font-size: 14px; color: #666; font-style: italic; white-space: pre-wrap; }
.phone-frame.night-mode .fanwai-reader-overlay { background: #1a1a1a; }
.phone-frame.night-mode .fanwai-reader-header { border-color: #333; }
.phone-frame.night-mode .fanwai-reader-back { color: #e0e0e0; }
.phone-frame.night-mode .fanwai-reader-title { color: #e0e0e0; }
.phone-frame.night-mode .fanwai-reader-body { color: #d8d8d8; }
.phone-frame.night-mode .fanwai-reader-cot-wrap { border-color: #333; }
.phone-frame.night-mode .fanwai-reader-cot-head { background: #242424; color: #888; }
.phone-frame.night-mode .fanwai-reader-cot { color: #888; border-color: #333; }
.phone-frame.night-mode .fanwai-reader-epilogue { color: #999; border-color: #333; }

/* 番外阅读器 · 章节导航 + 续写底栏（3a-1）*/
.fanwai-reader-chapters { background: none; border: none; font-size: 18px; color: #333; cursor: pointer; padding: 4px 8px; line-height: 1; }
.fanwai-reader-chapter-menu { flex: 0 0 auto; max-height: 40vh; overflow-y: auto; background: #fafafa; border-bottom: 1px solid #eee; padding: 4px 8px; }
.fanwai-chapter-menu-item { padding: 10px 12px; font-size: 14px; color: #333; border-radius: 6px; cursor: pointer; }
.fanwai-chapter-menu-item:active { background: rgba(0, 0, 0, 0.05); }
.fanwai-chapter-menu-item.active { background: #ececec; font-weight: 600; }
.fanwai-reader-chapter-label { font-size: 12px; color: #999; margin-bottom: 12px; }
.fanwai-reader-foot { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #eee; background: #fff; }
.fanwai-reader-foot-row { display: flex; align-items: flex-end; gap: 8px; }
.fanwai-reader-foot-collapse { position: absolute; top: -19px; right: 10px; background: rgba(255, 255, 255, 0.85); border: none; border-radius: 6px; font-size: 14px; line-height: 1; color: #999; cursor: pointer; padding: 3px 9px; }
.fanwai-continue-input { flex: 1; box-sizing: border-box; min-height: 38px; max-height: 96px; padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; color: #333; background: #fff; outline: none; resize: none; -webkit-appearance: none; }
.fanwai-continue-btn { flex: 0 0 auto; padding: 9px 14px; border: none; border-radius: 8px; background: #333; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.fanwai-continue-btn:active { opacity: 0.85; }
.phone-frame.night-mode .fanwai-reader-chapters { color: #e0e0e0; }
.phone-frame.night-mode .fanwai-reader-chapter-menu { background: #242424; border-color: #333; }
.phone-frame.night-mode .fanwai-chapter-menu-item { color: #e0e0e0; }
.phone-frame.night-mode .fanwai-chapter-menu-item.active { background: #3a3a3a; }
.phone-frame.night-mode .fanwai-reader-chapter-label { color: #777; }
.phone-frame.night-mode .fanwai-reader-foot { background: #1a1a1a; border-color: #333; }
.phone-frame.night-mode .fanwai-reader-foot-collapse { color: #888; background: rgba(26, 26, 26, 0.85); }
.fanwai-reader-directions { max-height: 28vh; overflow-y: auto; }
.fanwai-directions-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #999; padding: 2px 2px 4px; }
.fanwai-directions-toggle { cursor: pointer; padding: 0 4px; font-size: 13px; line-height: 1; }
.fanwai-directions-strip { font-size: 12px; color: #999; padding: 6px 2px; text-align: center; cursor: pointer; }
.fanwai-directions-item { padding: 9px 11px; font-size: 13px; color: #333; line-height: 1.5; border: 1px solid #eee; border-radius: 8px; margin-top: 6px; cursor: pointer; }
.fanwai-directions-item:active { background: rgba(0, 0, 0, 0.04); }
.phone-frame.night-mode .fanwai-reader-directions { background: #1a1a1a; border-color: #333; }
.phone-frame.night-mode .fanwai-directions-head, .phone-frame.night-mode .fanwai-directions-strip { color: #888; }
.phone-frame.night-mode .fanwai-directions-item { color: #d8d8d8; border-color: #333; }
.fanwai-message { display: flex; justify-content: center; width: 100%; max-width: 100%; margin: 12px 0; }
.fanwai-card { width: 90%; max-width: 440px; padding: 12px 15px; background: #fff; border: 1px solid #e6e6e6; border-radius: 12px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); text-align: left; }
.fanwai-card-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.fanwai-card-title { font-size: 15px; font-weight: 600; color: #222; }
.fanwai-card-meta { font-size: 12px; color: #999; }
.fanwai-card-body { max-height: 120px; overflow-y: auto; margin: 9px 0; font-size: 13px; line-height: 1.85; color: #444; white-space: pre-wrap; }
.fanwai-card-open { font-size: 12px; color: #666; cursor: pointer; padding-top: 7px; border-top: 1px solid #f0f0f0; }
.fanwai-send-modal { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; }
.fanwai-send-dialog { width: 82%; max-width: 330px; max-height: 72%; display: flex; flex-direction: column; background: #fff; border-radius: 14px; padding: 18px; }
.fanwai-send-title { font-size: 16px; font-weight: 600; color: #222; margin-bottom: 12px; }
.fanwai-send-all { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #555; padding: 6px 2px; border-bottom: 1px solid #f0f0f0; }
.fanwai-send-note { box-sizing: border-box; width: 100%; margin: 8px 0 0; padding: 9px 11px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; color: #333; background: #fff; outline: none; }
.fanwai-send-stance-label { font-size: 13px; color: #555; margin: 10px 2px 6px; }
.fanwai-send-list { flex: 1; overflow-y: auto; margin: 8px 0; }
.fanwai-send-list label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #444; padding: 8px 2px; line-height: 1.4; cursor: pointer; }
.fanwai-send-actions { display: flex; gap: 10px; margin-top: 12px; }
.fanwai-send-actions button { flex: 1; padding: 10px 0; border: none; border-radius: 9px; font-size: 14px; cursor: pointer; }
.fanwai-send-cancel { background: #f0f0f0; color: #333; }
.fanwai-send-confirm { background: #333; color: #fff; }
.fanwai-send-modal input[type=checkbox] { accent-color: #333; }
.phone-frame.night-mode .fanwai-card { background: #222; border-color: #333; box-shadow: none; }
.phone-frame.night-mode .fanwai-card-title { color: #e8e8e8; }
.phone-frame.night-mode .fanwai-card-meta { color: #888; }
.phone-frame.night-mode .fanwai-card-body { color: #c8c8c8; }
.phone-frame.night-mode .fanwai-card-open { color: #999; border-color: #333; }
.phone-frame.night-mode .fanwai-send-modal input[type=checkbox] { accent-color: #bbb; }
.phone-frame.night-mode .fanwai-send-dialog { background: #1f1f1f; }
.phone-frame.night-mode .fanwai-send-title { color: #e8e8e8; }
.phone-frame.night-mode .fanwai-send-all { color: #c8c8c8; border-color: #333; }
.phone-frame.night-mode .fanwai-send-note { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
.phone-frame.night-mode .fanwai-send-stance-label { color: #c8c8c8; }
.phone-frame.night-mode .fanwai-send-list label { color: #c8c8c8; }
.phone-frame.night-mode .fanwai-send-cancel { background: #2a2a2a; color: #ddd; }
.phone-frame.night-mode .fanwai-send-confirm { background: #e0e0e0; color: #222; }
.fanwai-item-menu { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; z-index: 10002; }
.fanwai-item-menu-sheet { width: 80%; max-width: 300px; background: #fff; border-radius: 14px; overflow: hidden; }
.fanwai-item-menu-name { font-size: 12px; color: #999; text-align: center; padding: 12px 16px 8px; border-bottom: 1px solid #f0f0f0; }
.fanwai-item-menu-btn { display: block; width: 100%; background: none; border: none; padding: 14px 0; font-size: 15px; color: #333; cursor: pointer; }
.fanwai-item-menu-btn:active { background: rgba(0, 0, 0, 0.04); }
.fanwai-item-menu-del { color: #c0392b; }
.fanwai-item-menu-del-confirm { font-weight: 600; }
.fanwai-item-menu-cancel { color: #888; border-top: 6px solid #f4f4f4; }
.phone-frame.night-mode .fanwai-item-menu-sheet { background: #1f1f1f; }
.phone-frame.night-mode .fanwai-item-menu-name { color: #888; border-color: #333; }
.phone-frame.night-mode .fanwai-item-menu-btn { color: #e0e0e0; }
.fanwai-chapter-menu-actions { display: flex; gap: 6px; padding: 2px 2px 8px; border-bottom: 1px solid #eee; margin-bottom: 4px; }
.fanwai-menu-action-btn { flex: 1; padding: 9px 0; border: 1px solid #ddd; border-radius: 8px; background: #fff; color: #333; font-size: 12px; cursor: pointer; }
.fanwai-menu-action-btn:active { background: rgba(0, 0, 0, 0.05); }
.fanwai-sumpanel-range { font-size: 12px; color: #999; padding: 4px 2px 8px; }
.fanwai-sumpanel-text { box-sizing: border-box; width: 100%; min-height: 180px; max-height: 40vh; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; line-height: 1.6; color: #333; background: #fff; outline: none; resize: vertical; }
.phone-frame.night-mode .fanwai-chapter-menu-actions { border-color: #333; }
.phone-frame.night-mode .fanwai-menu-action-btn { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
.phone-frame.night-mode .fanwai-sumpanel-range { color: #888; }
.phone-frame.night-mode .fanwai-sumpanel-text { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
.fanwai-sumpanel-list { flex: 1; overflow-y: auto; margin: 4px 0 8px; }
.fanwai-sum-empty { font-size: 13px; color: #999; text-align: center; padding: 24px 0; }
.fanwai-sum-entry { border: 1px solid #eee; border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.fanwai-sum-entry-head { padding: 11px 12px; font-size: 13px; font-weight: 600; color: #333; cursor: pointer; }
.fanwai-sum-entry-head:active { background: rgba(0, 0, 0, 0.04); }
.fanwai-sum-entry-body { padding: 0 10px 10px; }
.fanwai-sum-entry-actions { display: flex; gap: 8px; margin-top: 8px; }
.fanwai-sum-entry-actions button { flex: 1; padding: 8px 0; border: none; border-radius: 8px; font-size: 13px; cursor: pointer; }
.fanwai-sum-del-btn { background: #f3dede; color: #c0392b; }
.fanwai-sumgen-locked { opacity: 0.45; }
.phone-frame.night-mode .fanwai-sum-entry { border-color: #333; }
.phone-frame.night-mode .fanwai-sum-entry-head { color: #e0e0e0; }
.phone-frame.night-mode .fanwai-sum-empty { color: #777; }
.phone-frame.night-mode .fanwai-sum-del-btn { background: #4a2a2a; color: #e08080; }
.fanwai-css-ref { min-height: 84px; max-height: 130px; font-family: monospace; font-size: 11px; line-height: 1.5; color: #777; background: #f7f7f7; }
.fanwai-css-input { min-height: 90px; font-family: monospace; font-size: 12px; line-height: 1.5; }
.phone-frame.night-mode .fanwai-css-ref { background: #242424; color: #8a8a8a; }
.fanwai-css-toggle { cursor: pointer; user-select: none; }
.fanwai-css-arrow { display: inline-block; font-size: 11px; color: #999; }
.phone-frame.night-mode .fanwai-item-menu-cancel { color: #888; border-color: #2a2a2a; }
.phone-frame.night-mode .fanwai-continue-input { background: #2a2a2a; border-color: #444; color: #e0e0e0; }
.phone-frame.night-mode .fanwai-continue-btn { background: #e0e0e0; color: #222; }