/* ========== 全新视觉风格：Mystic Archive (神秘档案) - 修复版 V2 ========== */

/* 1. 核心排版与垂直位置 - 统一靠上一点 */
.screen {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 水平居中 */
    justify-content: flex-start !important; /* 垂直顶部对齐 */
    padding-top: 15vh !important; /* 所有页面统一留白 */
    padding-bottom: 5vh !important;
    /* 用 JS 写入的可视高度，避免真机浏览器工具栏遮挡（fallback: 100dvh） */
    height: var(--app-vh, 100dvh) !important;
    width: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: transparent !important; /* 确保背景不遮挡 */
}

/* 真机安卓/部分浏览器：工具栏可能覆盖页面内容。
   使用 JS 计算的 inset（visualViewport offsetTop/bottom）把内容“顶开”，避免被遮住。 */
.screen {
    padding-top: calc(15vh + var(--app-inset-top, 0px)) !important;
    padding-bottom: calc(5vh + var(--app-inset-bottom, 0px)) !important;
}

/* ========== 移动端适配：不要强制 15vh 顶部留白，手机也要居中 ========== */
@media (max-width: 768px) {
    .screen {
        /* 安卓很多浏览器上下工具栏“固定覆盖网页”，visualViewport 也不可靠：
           直接硬性预留安全区（百分比 + 最小像素）来保证内容不会被盖住。 */
        /* 顶部留白少一点、底部留白多一点：更符合“底栏会遮住内容”的现实 */
        padding-top: calc(clamp(20px, 4vh, 56px) + var(--app-inset-top, 0px) + env(safe-area-inset-top)) !important;
        padding-bottom: calc(clamp(88px, 14vh, 160px) + var(--app-inset-bottom, 0px) + env(safe-area-inset-bottom)) !important;
        justify-content: flex-start !important; /* 手机端从上往下排，避免“居中导致按钮更靠下被盖” */
        /* 关键：必须固定在可视高度内滚动；否则 body 又被 overflow:hidden 卡死，长文无法下滑 */
        height: var(--app-vh, 100dvh) !important;
        min-height: var(--app-vh, 100dvh) !important;
    }
}

/* 手机端：纸张整体轻微缩小（动态），保证上下都能留出安全区 */
@media (max-width: 768px) {
    .paper-sheet {
        transform: scale(var(--app-scale, 0.92)) !important;
        transform-origin: top center !important;
    }
}

/* 封面页：无论设备都要真正居中 */
#loading-screen.screen {
    justify-content: center !important;
    /* 仍居中，但也要避开安卓固定工具栏 */
    padding-top: calc(clamp(24px, 6vh, 80px) + var(--app-inset-top, 0px) + env(safe-area-inset-top)) !important;
    padding-bottom: calc(clamp(48px, 10vh, 120px) + var(--app-inset-bottom, 0px) + env(safe-area-inset-bottom)) !important;
}

/* ========== 档案主体信息录入页（selection-screen）移动端紧凑模式 ========== */
@media (max-width: 480px) {
    /* 纸张左右空地太多 + 内容过松：缩小内边距与各区块间距 */
    #selection-screen .paper-sheet {
        width: 98% !important;
        max-width: 720px !important;
        padding: 18px 14px !important;
        margin: 0 auto 14px auto !important;
        gap: 10px !important;
    }

    #selection-screen .nav-back-btn {
        margin-bottom: 10px !important;
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    #selection-screen .stamp-box {
        margin-bottom: 8px !important;
    }

    #selection-screen h1 {
        font-size: 20px !important;
        line-height: 1.2 !important;
        margin-bottom: 6px !important;
        letter-spacing: 0.04em !important;
    }

    #selection-screen p {
        font-size: 11px !important;
        margin-bottom: 10px !important;
    }

    #selection-screen .section-title {
        font-size: 13px !important;
        /* 标题再靠上一点，给下面性别区腾空间 */
        margin: 6px 0 6px 0 !important;
    }

    #selection-screen .birth-info-section,
    #selection-screen .birth-place-section {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 核心：滚轮容器变矮（150 -> 104），仍保持 40px 选中线居中 */
    #selection-screen .picker-container {
        height: 104px !important;
    }
    #selection-screen .picker-wheel {
        /* (104 - 40) / 2 = 32 */
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    #selection-screen .picker-label {
        font-size: 10px !important;
        margin-bottom: 4px !important;
    }

    /* 四列日期/时辰：改为 grid 自适应，解决“时辰列固定200px导致溢出” */
    #selection-screen .date-time-picker {
        display: grid !important;
        grid-template-columns: 0.9fr 0.7fr 0.8fr 1.6fr !important;
        gap: 8px !important;
        width: 100% !important;
        justify-content: stretch !important;
        align-items: start !important;
    }

    #selection-screen .place-picker {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        justify-content: stretch !important;
        align-items: start !important;
    }

    #selection-screen .picker-column {
        width: auto !important;
        min-width: 0 !important;
        flex: none !important;
    }
    #selection-screen .picker-column.wide {
        width: auto !important; /* 覆盖 style_picker_fix.css 里的 200px !important */
    }

    /* 时辰选项通常更长：允许两行显示，避免被挤爆 */
    #selection-screen #time-picker .picker-option {
        white-space: normal !important;
        line-height: 1.15 !important;
        padding: 6px 4px !important;
        height: 40px !important; /* 保持与选中线一致 */
    }

    /* 性别区紧凑一点 */
    #selection-screen .gender-selection-container {
        /* 重新设计：让性别选择像“档案字段控件”，与滚轮框同风格 */
        width: 100% !important;
        max-width: 520px !important;
        margin: 12px auto 0 auto !important;
        padding: 10px 10px !important;
        background: rgba(255, 255, 255, 0.55) !important;
        border: 1px solid rgba(0,0,0,0.10) !important;
        border-radius: 10px !important;
        /* 更像上面两个滚轮框：外投影 + 轻内阴影 */
        box-shadow:
            0 10px 26px rgba(0,0,0,0.12),
            inset 0 0 10px rgba(0,0,0,0.05) !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    #selection-screen .gender-option {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        height: 44px !important;
        padding: 0 10px !important;
        border-radius: 8px !important;
        border: 1px solid rgba(0,0,0,0.18) !important;
        background: rgba(255,255,255,0.92) !important;
        box-shadow: inset 0 0 10px rgba(0,0,0,0.05) !important;
    }
    #selection-screen .gender-label {
        font-size: 12px !important;
    }

    #selection-screen .gender-option.selected {
        border-color: rgba(185, 28, 28, 0.55) !important;
        background: rgba(185, 28, 28, 0.07) !important;
    }
    #selection-screen .gender-option.selected::after {
        content: "" !important;
        position: absolute !important;
        left: 10px !important;
        right: 10px !important;
        bottom: 6px !important;
        height: 2px !important;
        background: #b91c1c !important;
        opacity: 0.9 !important;
        border-radius: 2px !important;
    }

    /* 底部按钮与页脚挤一挤 */
    #selection-screen .text-center.mt-8 {
        margin-top: 12px !important;
    }
    #selection-screen .retro-btn {
        padding: 10px 22px !important;
        font-size: 13px !important;
    }
    #selection-screen .mt-6 {
        margin-top: 10px !important;
    }
}

/* 2. 纸张容器 - 增加间距 */
.paper-sheet {
    background-color: #fdfbf7;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 1px solid #e6e2d3;
    max-width: 650px !important;
    width: 90% !important;
    padding: 60px 50px !important; /* 增加内边距 */
    margin: 0 auto 50px auto !important; /* 增加底部外边距，防止贴底 */
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important; /* 元素间距 */
}

/* ========== 结果页“神秘等待”覆盖层（轻量，不加载外部资源） ========== */
#mystic-wait-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background:
        radial-gradient(1200px 600px at 50% 10%, rgba(0,0,0,0.06), transparent 55%),
        radial-gradient(800px 500px at 20% 80%, rgba(0,0,0,0.05), transparent 60%),
        rgba(253, 251, 247, 0.88);
    backdrop-filter: blur(2px);
    z-index: 9999;
}

#chat-screen .paper-sheet {
    position: relative; /* 让 overlay 以纸张为坐标系覆盖 */
}

.mystic-wait-card {
    width: min(460px, 92%);
    border: 1px solid rgba(0,0,0,0.16);
    border-radius: 14px;
    background: rgba(255,255,255,0.78);
    box-shadow: 0 18px 40px rgba(0,0,0,0.14);
    padding: 18px 18px 14px 18px;
    text-align: center;
}

.mystic-sigil {
    width: 64px;
    height: 64px;
    margin: 4px auto 10px auto;
    border-radius: 50%;
    border: 2px double rgba(0,0,0,0.55);
    position: relative;
    animation: mysticSpin 4.5s linear infinite;
}
.mystic-sigil::before,
.mystic-sigil::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.35);
}
.mystic-sigil::after {
    inset: 18px;
    border-style: dashed;
    opacity: 0.75;
}

.mystic-wait-title {
    font-family: 'Noto Serif SC', serif;
    font-size: 18px;
    letter-spacing: 0.12em;
    color: #111;
}
.mystic-wait-sub {
    margin-top: 6px;
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 12px;
    color: rgba(0,0,0,0.62);
}

.mystic-wait-dots {
    display: inline-flex;
    gap: 8px;
    margin-top: 12px;
    height: 12px;
    align-items: center;
    justify-content: center;
}
.mystic-wait-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    animation: mysticPulse 1.2s ease-in-out infinite;
}
.mystic-wait-dots span:nth-child(2) { animation-delay: 0.15s; opacity: 0.85; }
.mystic-wait-dots span:nth-child(3) { animation-delay: 0.30s; opacity: 0.70; }

@keyframes mysticSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes mysticPulse {
    0%, 100% { transform: translateY(0); opacity: 0.35; }
    50% { transform: translateY(-3px); opacity: 0.95; }
}

/* ========== token 激活/绑定（/t/00001） ========== */
.token-activation {
    border: 1px solid rgba(0,0,0,0.16);
    border-radius: 12px;
    background: rgba(255,255,255,0.70);
    padding: 14px;
}
.token-activation-title {
    font-family: 'Noto Serif SC', serif;
    font-size: 16px;
    letter-spacing: 0.08em;
    color: #111;
}
.token-activation-sub {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(0,0,0,0.62);
}
.token-activation-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.token-bind-panel {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(0,0,0,0.10);
}
.token-bind-title {
    margin-top: 8px;
    font-family: 'Noto Serif SC', serif;
    font-size: 16px;
    letter-spacing: 0.08em;
    color: #111;
}
.token-bind-sub {
    margin-top: 6px;
    font-size: 12px;
    color: rgba(0,0,0,0.62);
}
.token-bind-actions {
    margin-top: 12px;
    display: flex;
    justify-content: center;
}

/* ========== 各页面纸张布局统一（替代 index.html 里的 inline !important）========== */
#words-screen .paper-sheet,
#question-1 .paper-sheet,
#question-2 .paper-sheet,
#question-3 .paper-sheet,
#question-4 .paper-sheet,
#chat-screen .paper-sheet {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    margin: 20px 0 !important;
}

#words-screen .paper-sheet {
    max-width: 500px !important;
    padding: 40px !important;
}

#question-1 .paper-sheet,
#question-2 .paper-sheet,
#question-3 .paper-sheet,
#question-4 .paper-sheet {
    max-width: 600px !important;
    padding: 30px !important;
    min-height: 70vh !important;
}

#chat-screen .paper-sheet {
    max-width: 800px !important;
    padding: 40px !important;
}

/* 选择题：确保选项永远在纸张内部，不会“D突出去” */
#question-1 .paper-sheet,
#question-2 .paper-sheet,
#question-3 .paper-sheet,
#question-4 .paper-sheet {
    padding-bottom: 42px !important;
}

/* 结果页：滚动到最顶时不要再“居中留白”，总是从纸张顶部开始 */
#chat-screen.screen {
    justify-content: flex-start !important;
}

/* words-screen：同理，从顶部开始（避免只看到半个返回按钮） */
#words-screen.screen,
#question-1.screen,
#question-2.screen,
#question-3.screen,
#question-4.screen {
    justify-content: flex-start !important;
}

@media (max-width: 480px) {
    /* 手机端这些页统一更紧凑一点（之前各页不一致就是因为 inline） */
    #words-screen .paper-sheet,
    #question-1 .paper-sheet,
    #question-2 .paper-sheet,
    #question-3 .paper-sheet,
    #question-4 .paper-sheet,
    #chat-screen .paper-sheet {
        width: 98% !important;
        margin: 10px 0 12px 0 !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    #words-screen .paper-sheet { padding-top: 18px !important; padding-bottom: 18px !important; }
    #question-1 .paper-sheet,
    #question-2 .paper-sheet,
    #question-3 .paper-sheet,
    #question-4 .paper-sheet { padding-top: 18px !important; padding-bottom: 34px !important; min-height: 0 !important; }
    #chat-screen .paper-sheet { padding-top: 18px !important; }
}
/* ========== 统一“返回/次要操作”按钮风格（所有页面共用）========== */
.nav-back-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(0,0,0,0.18) !important;
    background: rgba(255, 255, 255, 0.55) !important;
    box-shadow:
        0 6px 16px rgba(0,0,0,0.10),
        inset 0 0 10px rgba(0,0,0,0.04) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    color: #2c2c2c !important;
    font-family: 'Noto Serif SC', serif !important;
    font-size: 14px !important;
    letter-spacing: 0.06em !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.nav-back-btn:hover {
    transform: translateY(-1px) !important;
    background: rgba(255, 255, 255, 0.72) !important;
    border-color: rgba(0,0,0,0.25) !important;
}

.nav-back-btn:active {
    transform: translateY(0px) !important;
    box-shadow:
        0 4px 12px rgba(0,0,0,0.10),
        inset 0 0 12px rgba(0,0,0,0.06) !important;
}

/* ========== 灵魂特征标注页（words-screen）纸张“底部收口” ========== */
#words-screen .paper-sheet {
    border-radius: 10px !important;
    /* 覆盖 index.html inline 的 margin，减少“好像还能往下”的视觉错觉 */
    margin: 12px 0 14px 0 !important;
    padding-bottom: 26px !important;
}

/* 底部淡影：让纸张看起来在这里结束 */
#words-screen .paper-sheet::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 22px !important;
    pointer-events: none !important;
    background: linear-gradient(
        to bottom,
        rgba(253, 251, 247, 0) 0%,
        rgba(0, 0, 0, 0.05) 100%
    ) !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    opacity: 0.9 !important;
}

/* 底部“结束线”（很淡），模拟纸张收尾 */
#words-screen .paper-sheet::after {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
    height: 1px !important;
    pointer-events: none !important;
    background: rgba(0,0,0,0.18) !important;
    opacity: 0.35 !important;
}

/* 换一批：作为次要动作，稍微更“轻”一点 */
#words-refresh-btn.nav-back-btn {
    border-color: rgba(0,0,0,0.14) !important;
    background: rgba(255, 255, 255, 0.40) !important;
}

/* ========== 灵魂特征标注页（words-screen）手机端紧凑布局：保证底部两个按钮一行且完整可见 ========== */
@media (max-width: 480px) {
    #words-screen .paper-sheet {
        width: 98% !important;
        max-width: 720px !important;
        padding: 18px 14px 18px 14px !important;
        margin: 10px 0 12px 0 !important;
        gap: 12px !important;
    }

    /* 顶部返回按钮更紧凑 */
    #words-screen .nav-back-btn {
        padding: 8px 10px !important;
        font-size: 12px !important;
        letter-spacing: 0.04em !important;
    }

    #words-screen h2 {
        font-size: 20px !important;
        margin-bottom: 6px !important;
        line-height: 1.2 !important;
    }

    #words-screen p {
        font-size: 11px !important;
        margin-bottom: 10px !important;
    }

    /* 词卡更紧凑，整体高度压下来 */
    #words-screen .word-card {
        padding: 12px 10px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
        min-height: 0 !important;
    }

    /* 底部两个按钮：强制一行平分 */
    #words-refresh-btn,
    #words-continue-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: calc(50% - 6px) !important;
        white-space: nowrap !important;
        justify-content: center !important;
        padding: 10px 0 !important;
        font-size: 13px !important;
        letter-spacing: 0.08em !important;
        margin: 0 !important;
    }

    /* 继续按钮是 retro-btn：它默认会拉大字距/hover，手机端收敛 */
    #words-continue-btn.retro-btn {
        border-bottom-width: 1px !important;
    }

    /* 收口效果在手机端略缩小，避免“压住”底部区域的视觉 */
    #words-screen .paper-sheet::before {
        height: 14px !important;
        opacity: 0.75 !important;
    }
    #words-screen .paper-sheet::after {
        bottom: 12px !important;
        left: 14px !important;
        right: 14px !important;
    }
}

/* ========== 最终结果页（chat-screen）布局与交互修复 ========== */
/* 1) 取消“点一下纸会倾斜/缩放”的效果（来自 style.css 的 .paper-sheet rotate + :hover） */
#chat-screen .paper-sheet,
#chat-screen .paper-sheet:hover,
#chat-screen .paper-sheet:active {
    /* 禁止 rotate/hover 动画，但允许手机端 scale */
    transform: scale(var(--app-scale, 1)) !important;
    transform-origin: top center !important;
    transition: none !important;
}

/* 2) 结果页纸张底部收口 + 留出阅读缓冲区（长文可滚动，但不贴到屏幕最底） */
#chat-screen .paper-sheet {
    border-radius: 10px !important;
    padding-bottom: 70px !important; /* 给长文留呼吸感 */
}

#chat-screen .paper-sheet::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 18px !important;
    pointer-events: none !important;
    background: linear-gradient(
        to bottom,
        rgba(253, 251, 247, 0) 0%,
        rgba(0, 0, 0, 0.05) 100%
    ) !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    opacity: 0.85 !important;
}

#chat-screen .paper-sheet::after {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    right: 18px !important;
    bottom: 16px !important;
    height: 1px !important;
    pointer-events: none !important;
    background: rgba(0,0,0,0.18) !important;
    opacity: 0.35 !important;
}

/* 3) 手机端：减少左右留白、压缩顶部几行间距 */
@media (max-width: 480px) {
    #chat-screen.screen {
        padding: 12px !important; /* 覆盖 index.html inline padding:20 */
    }

    #chat-screen .paper-sheet {
        width: 98% !important;
        max-width: 720px !important; /* 覆盖 inline max-width:800 */
        padding: 18px 14px 70px 14px !important; /* 覆盖 inline padding:40 */
        margin: 10px 0 12px 0 !important; /* 覆盖 inline margin:20px 0 */
        gap: 12px !important;
    }

    /* 顶部“标题+归档重置”那一块：间距压缩 */
    #chat-screen .paper-sheet > .flex.justify-between {
        margin-bottom: 12px !important; /* 覆盖 mb-6 */
        padding-bottom: 8px !important; /* 覆盖 pb-3 */
    }

    #chat-screen #chat-title {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }

    #chat-screen .stamp-box.mb-6 {
        margin-bottom: 12px !important;
    }

    /* 归档重置按钮别太占位 */
    #chat-screen #back-btn.nav-back-btn {
        padding: 8px 10px !important;
        font-size: 12px !important;
        letter-spacing: 0.04em !important;
        white-space: nowrap !important;
    }
}

/* 5. 输入框美化 - 更大更清晰 */
textarea, input[type="text"] {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 2px solid #888 !important;
    border-radius: 4px !important;
    font-family: 'Noto Serif SC', serif !important;
    font-size: 18px !important; /* 字体变大 */
    color: #2c2c2c !important;
    padding: 20px !important; /* 增加填充 */
    width: 100% !important;
    min-height: 60px !important; /* 增加高度 */
    margin-bottom: 20px !important; /* 增加底部间距 */
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05) !important;
    transition: all 0.3s ease !important;
}

textarea:focus, input[type="text"]:focus {
    border-color: #2c2c2c !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(44, 44, 44, 0.1) !important;
}


/* 6. 生辰选择器修复 - 滚轮支持 */
.picker-container {
    height: 150px !important;
    background: #fff !important;
    border: 2px solid #2c2c2c !important;
    position: relative !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    z-index: 50 !important;
}

.picker-wheel {
    height: 100% !important;
    overflow-y: scroll !important; /* 必须 scroll */
    scroll-snap-type: y mandatory !important;
    padding-top: 55px !important;
    padding-bottom: 55px !important;
    width: 100% !important;
    position: relative !important;
    z-index: 20 !important; /* 确保在 mask 下面，但如果是 mask pointer-events:none 就没事 */
    cursor: grab !important;
}

.picker-option {
    height: 40px !important;
    line-height: 40px !important;
    text-align: center !important;
    scroll-snap-align: center !important;
    cursor: pointer !important;
    user-select: none !important;
}

.picker-mask {
    position: absolute !important;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(
        to bottom, 
        rgba(255,255,255,0.9) 0%, 
        rgba(255,255,255,0) 40%, 
        rgba(255,255,255,0) 60%, 
        rgba(255,255,255,0.9) 100%
    ) !important;
    pointer-events: none !important; /* 关键：让点击穿透到底下的 wheel */
    z-index: 30 !important;
}

/* 中间选中线 */
.picker-mask::after {
    content: '';
    position: absolute;
    top: 50%; left: 0; width: 100%; height: 40px;
    transform: translateY(-50%);
    border-top: 2px solid #b91c1c;
    border-bottom: 2px solid #b91c1c;
    background: rgba(185, 28, 28, 0.05);
    pointer-events: none !important;
}


/* 布局强制修正 */
.birth-info-section, .birth-place-section {
    width: 100% !important;
    text-align: center !important;
}

.date-time-picker, .place-picker {
    display: flex !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
}

/* 桌面/平板：性别选择也用“字段控件”风格（与滚轮一致），避免突兀 */
#selection-screen .gender-selection-container {
    width: 100% !important;
    max-width: 520px !important;
    margin: 14px auto 0 auto !important;
    padding: 12px 12px !important;
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    border-radius: 10px !important;
    box-shadow:
        0 10px 26px rgba(0,0,0,0.12),
        inset 0 0 10px rgba(0,0,0,0.05) !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

#selection-screen .gender-option {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    height: 46px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0,0,0,0.18) !important;
    background: rgba(255,255,255,0.92) !important;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05) !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

#selection-screen .gender-option:hover {
    transform: translateY(-1px) !important;
    background: #fff !important;
}

#selection-screen .gender-option.selected {
    border-color: rgba(185, 28, 28, 0.55) !important;
    background: rgba(185, 28, 28, 0.07) !important;
}

#selection-screen .gender-option.selected::after {
    content: "" !important;
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 7px !important;
    height: 2px !important;
    background: #b91c1c !important;
    opacity: 0.9 !important;
    border-radius: 2px !important;
}

#selection-screen .gender-icon {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    color: #2c2c2c !important;
    background: rgba(44,44,44,0.06) !important;
}

#selection-screen .gender-label {
    font-size: 13px !important;
    font-family: 'Noto Serif SC', serif !important;
    color: #2c2c2c !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
}

/* 按钮容器居中 */
.text-center {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

/* 7. 聊天界面样式修复 - 神秘主义风格 */
.chat-messages {
    padding: 0 !important;
}

.message {
    max-width: 100% !important;
    margin-bottom: 30px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

.message-avatar {
    display: none !important;
}

.message-content {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.message-content p {
    font-family: 'Noto Serif SC', 'Songti SC', 'SimSun', serif !important; /* 神秘且易读的衬线体 */
    font-size: 17px !important;
    line-height: 1.8 !important;
    color: #1a1a1a !important; /* 接近纯黑的深灰 */
    text-shadow: none !important;
    letter-spacing: 0.05em !important;
    text-align: justify !important;
}

/* 重点文字样式 */
.message-content strong {
    color: #000 !important;
    font-weight: 900 !important;
    border-bottom: 1px solid rgba(0,0,0,0.3);
}

.message-content em {
    color: #444 !important;
    font-style: italic !important;
}

/* 标题样式 */
.akashic-influence-title {
    color: #000 !important;
    font-family: 'Noto Serif SC', serif !important;
    font-size: 18px !important;
    margin-top: 30px !important;
    margin-bottom: 15px !important;
    border-bottom: 2px solid #000 !important;
    display: inline-block !important;
    padding-bottom: 5px !important;
}

/* 列表样式 */
.akashic-influence-list li {
    color: #2c2c2c !important;
    font-family: 'Noto Serif SC', serif !important;
    margin-bottom: 10px !important;
}

/* 诗词样式 */
.akashic-poem {
    color: #000 !important;
    font-family: 'KaiTi', '楷体', serif !important; /* 楷体更有诗意 */
    font-size: 20px !important;
    text-align: center !important;
    margin: 30px 0 !important;
    padding: 20px !important;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    font-weight: bold !important;
}

/* 用户消息样式（稍微区分） */
.user-message .message-content p {
    color: #666 !important;
    font-size: 14px !important;
    text-align: right !important;
    font-style: italic !important;
    margin-top: -10px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px dashed #ccc !important;
    padding-bottom: 5px !important;
}