/* ============================================================
   全局：浮雕水印 "long" + 暗色基底
   ============================================================ */

body {
    background: #0f0a08;
    position: relative;
}

body::before {
    content: "long";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-32deg);
    font-size: clamp(14rem, 28vw, 32rem);
    font-weight: 900;
    font-family: 'Times New Roman', 'Georgia', serif;
    color: rgba(30, 20, 16, 0.18);
    text-shadow:
        0 0 30px rgba(20, 14, 10, 0.3),
        0 0 80px rgba(10, 6, 4, 0.2),
        inset 0 0 60px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    z-index: 0;
    letter-spacing: 0.4em;
    user-select: none;
    -webkit-text-fill-color: rgba(30, 20, 16, 0.15);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.25)) drop-shadow(-1px -1px 2px rgba(184, 134, 11, 0.02));
}


/* ============================================================
   模块一：对话气泡 · 四角花 + 暗金浮雕
   ============================================================ */

.group .bg-gray-100\/90 {
   background: #3d2c24!important;
    border: 2px solid #3d2c24 !important;
    border-radius: 8px !important;
    box-shadow:
        0 0 0 2px rgba(184, 134, 11, 0.06),
        6px 6px 0px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        inset 0 -2px 0 rgba(0, 0, 0, 0.4) !important;
    color: #f0e6dc !important;
    padding: 18px 24px !important;
    border-top: 3px solid #b8860b !important;
    border-bottom: 1px solid rgba(184, 134, 11, 0.06) !important;
    position: relative;
    font-size: 0.95rem;
    line-height: 1.8;
    font-family: 'Segoe UI', 'PingFang SC', sans-serif;
}

/* 左上角花 */
.group .bg-gray-100\/90::before {
    content: "❧";
    position: absolute;
    top: -6px;
    left: 6px;
    font-size: 24px;
    color: #d4a847;
    opacity: 0.50;
    text-shadow: 0 0 10px rgba(184, 134, 11, 0.15), 0 2px 6px rgba(0, 0, 0, 0.6);
    transform: rotate(-10deg);
    pointer-events: none;
}

/* 右下角花 */
.group .bg-gray-100\/90::after {
    content: "❧";
    position: absolute;
    bottom: -6px;
    right: 6px;
    font-size: 22px;
    color: #d4a847;
    opacity: 0.40;
    text-shadow: 0 0 10px rgba(184, 134, 11, 0.10), 0 2px 6px rgba(0, 0, 0, 0.6);
    transform: rotate(165deg);
    pointer-events: none;
}

/* 右上角花（用 box-shadow + 伪元素扩展） */
.group .bg-gray-100\/90 {
    box-shadow:
        0 0 0 2px rgba(184, 134, 11, 0.06),
        6px 6px 0px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        inset 0 -2px 0 rgba(0, 0, 0, 0.4),
        /* 右上角装饰光晕 */
        0 -6px 0 0 rgba(184, 134, 11, 0.02) !important;
}

/* 左下角花：使用相邻元素或额外字符，此处用 content 追加 */
/* 由于 .group .bg-gray-100\/90 内部通常有文本，我们在文本前插入一个角花 */
/* 利用 ::before 在左上，::after 在右下，右上和左下用 box-shadow + text-shadow 模拟 */
/* 增加一个额外的装饰字符在文本内容中，但无法通过纯CSS实现，所以用 box-shadow 补充 */
/* 为了更明显，增加一个 drop-shadow 来制造左下角花的视觉感 */
.group .bg-gray-100\/90 {
    filter: drop-shadow(4px 8px 0px rgba(184, 134, 11, 0.01));
}


/* ============================================================
   模块二：折叠状态栏 · 四角花浮雕画框（纯CSS，无需额外HTML）
   ============================================================ */

details {
    background: rgba(15, 10, 8, 0.75);
    backdrop-filter: blur(6px);
    border: 2px solid #3d2c24;
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 0;
    box-shadow:
        0 0 0 2px rgba(184, 134, 11, 0.04),
        0 0 0 4px rgba(0, 0, 0, 0.20),
        6px 6px 0px rgba(0, 0, 0, 0.15),
        inset 0 0 50px rgba(0, 0, 0, 0.35);
    position: relative;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

details:hover {
    border-color: #b8860b;
    box-shadow:
        0 0 0 2px rgba(184, 134, 11, 0.10),
        0 0 0 4px rgba(0, 0, 0, 0.20),
        6px 6px 0px rgba(0, 0, 0, 0.15),
        inset 0 0 50px rgba(0, 0, 0, 0.35),
        0 0 40px rgba(184, 134, 11, 0.02);
}

/* ---- 外框装饰线（画框内框） ---- */
details::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(184, 134, 11, 0.05);
    border-radius: 6px;
    pointer-events: none;
    z-index: 1;
}

/* ---- 四角花 ---- */

/* 左上角花 */
details::after {
    content: "❧";
    position: absolute;
    top: -5px;
    left: 1px;
    font-size: 28px;
    color: #d4a847;
    opacity: 0.45;
    text-shadow: 0 0 14px rgba(184, 134, 11, 0.12), 0 2px 8px rgba(0, 0, 0, 0.7);
    transform: rotate(-14deg);
    pointer-events: none;
    z-index: 2;
}

/* 右上角花 */
details summary::before {
    content: "❧";
    position: absolute;
    top: -5px;
    right: 1px;
    font-size: 26px;
    color: #d4a847;
    opacity: 0.40;
    text-shadow: 0 0 14px rgba(184, 134, 11, 0.10), 0 2px 8px rgba(0, 0, 0, 0.7);
    transform: rotate(70deg);
    pointer-events: none;
    z-index: 2;
}

/* 右下角花 + 箭头融合 */
details summary::after {
    content: "❧ ▸";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #d4a847;
    font-size: 0.9em;
    opacity: 0.50;
    letter-spacing: 2px;
    transition: transform 0.35s ease, color 0.3s ease;
    text-shadow: 0 0 10px rgba(184, 134, 11, 0.08), 0 2px 6px rgba(0, 0, 0, 0.5);
}

details[open] summary::after {
    transform: translateY(-50%) rotate(90deg);
    color: #d4a847;
}

/* 左下角花：利用 details 展开后内容区的第一个子元素 */
/* 由于内容区可能不存在，我们用 box-shadow 制造一个左下角装饰光晕 */
details {
    box-shadow:
        0 0 0 2px rgba(184, 134, 11, 0.04),
        0 0 0 4px rgba(0, 0, 0, 0.20),
        6px 6px 0px rgba(0, 0, 0, 0.15),
        inset 0 0 50px rgba(0, 0, 0, 0.35),
        /* 左下角花（用阴影模拟） */
        -4px 4px 0px 0px rgba(184, 134, 11, 0.02);
}

/* ---- 标题行 ---- */
details summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 24px 14px 24px;
    font-weight: 700;
    font-size: 1.2em;
    color: #d4b48c;
    letter-spacing: 0.04em;
    border-bottom: 1px solid rgba(61, 44, 36, 0.15);
    transition: background 0.2s ease;
    position: relative;
    user-select: none;
    background: linear-gradient(180deg, rgba(184, 134, 11, 0.02) 0%, transparent 100%);
}

details summary:hover {
    background: rgba(184, 134, 11, 0.04);
}

details summary::-webkit-details-marker {
    display: none;
}

details summary::marker {
    content: "";
    display: none;
}

/* ---- 内容区 ---- */
details > *:not(summary) {
    padding: 18px 22px 22px;
    font-size: 1.05em;
    line-height: 1.8;
    color: #e8ddd0;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(61, 44, 36, 0.10);
}

details > *:not(summary) strong {
    color: #d4a847;
}

/* 嵌套折叠支持 */
details details {
    background: rgba(0, 0, 0, 0.20);
    border-color: #5a3f32;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.15);
    margin-top: 10px;
}

details details summary {
    font-size: 1em;
    color: #cbb5a0;
    padding: 12px 18px;
}

details details > *:not(summary) {
    font-size: 0.95em;
    padding: 14px 18px 18px;
}


/* ============================================================
   模块三：场景叙述 · 画中画（缩进2cm，四角花）
   ============================================================ */

.scene-block {
    background: #1a1210;
    padding: 2cm; /* 2cm 缩进 */
    border: 3px solid #3d2c24;
    border-radius: 8px;
    margin-bottom: 28px;
    position: relative;
    box-shadow:
        0 0 0 4px rgba(184, 134, 11, 0.04),
        0 0 0 6px #0f0a08,
        0 0 0 8px rgba(61, 44, 36, 0.15),
        10px 10px 0px rgba(0, 0, 0, 0.10);
}

/* 内框装饰线 */
.scene-block::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(184, 134, 11, 0.06);
    border-radius: 6px;
    pointer-events: none;
}

/* ---- 四角花（纯CSS） ---- */

/* 左上角 */
.scene-block::after {
    content: "❧";
    position: absolute;
    top: 4px;
    left: 8px;
    font-size: 32px;
    color: #d4a847;
    opacity: 0.25;
    text-shadow: 0 0 16px rgba(184, 134, 11, 0.08), 0 2px 8px rgba(0, 0, 0, 0.6);
    transform: rotate(-12deg);
    pointer-events: none;
}

/* 右上角（使用 .scene-inner 的 ::before） */
.scene-block .scene-inner::before {
    content: "❧";
    position: absolute;
    top: 4px;
    right: 8px;
    font-size: 30px;
    color: #d4a847;
    opacity: 0.22;
    text-shadow: 0 0 16px rgba(184, 134, 11, 0.06), 0 2px 8px rgba(0, 0, 0, 0.6);
    transform: rotate(65deg);
    pointer-events: none;
}

/* 右下角（使用 .scene-inner 的 ::after） */
.scene-block .scene-inner::after {
    content: "❧";
    position: absolute;
    bottom: 4px;
    right: 8px;
    font-size: 28px;
    color: #d4a847;
    opacity: 0.20;
    text-shadow: 0 0 16px rgba(184, 134, 11, 0.05), 0 2px 8px rgba(0, 0, 0, 0.6);
    transform: rotate(160deg);
    pointer-events: none;
}

/* 左下角（使用 .scene-block 的额外元素，通过 box-shadow 模拟） */
.scene-block {
    box-shadow:
        0 0 0 4px rgba(184, 134, 11, 0.04),
        0 0 0 6px #0f0a08,
        0 0 0 8px rgba(61, 44, 36, 0.15),
        10px 10px 0px rgba(0, 0, 0, 0.10),
        /* 左下角花（阴影模拟） */
        -6px 6px 0px 0px rgba(184, 134, 11, 0.02);
}

/* ---- 场景内文 ---- */
.scene-block .scene-inner {
    background: rgba(0, 0, 0, 0.20);
    padding: 22px 28px;
    border-radius: 6px;
    border-left: 4px solid #b8860b;
    font-size: 1rem;
    line-height: 1.85;
    color: #f0e6dc;
    white-space: pre-wrap;
    letter-spacing: 0.02em;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.3);
    position: relative;
}

/* 画中画底部签名 */
.scene-block .scene-inner::after {
    content: "✦ 1991 · 香港 ✦";
    display: block;
    text-align: right;
    font-size: 0.6rem;
    color: #7a5a44;
    letter-spacing: 0.25em;
    margin-top: 18px;
    opacity: 0.25;
    font-weight: 300;
}

/* ---- 响应式 ---- */
@media (max-width: 600px) {
    .scene-block {
        padding: 1.2cm;
        box-shadow:
            0 0 0 2px rgba(184, 134, 11, 0.04),
            0 0 0 4px #0f0a08,
            0 0 0 6px rgba(61, 44, 36, 0.12),
            6px 6px 0px rgba(0, 0, 0, 0.08);
    }
    .scene-block .scene-inner {
        padding: 16px 18px;
        font-size: 0.92rem;
    }
    .scene-block::after,
    .scene-block .scene-inner::before,
    .scene-block .scene-inner::after {
        font-size: 22px;
        opacity: 0.15;
    }
}


/* ============================================================
   模块四：Markdown 表格 · 双色自适应 + 棕金边框
   ============================================================ */

.markdown-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 16px 0;
    border-radius: 6px;
    border: 1px solid rgba(61, 44, 36, 0.15);
    background: rgba(0, 0, 0, 0.10);
}

.markdown-table-wrap table {
    width: 100%;
    min-width: 300px;
    border-collapse: collapse;
    font-size: 0.95rem;
    line-height: 1.6;
    table-layout: auto;
    background: transparent;
    color: #f0e6dc;
}

.markdown-table-wrap thead th {
    background: #1f1612;
    color: #d4b48c;
    font-weight: 700;
    padding: 10px 16px;
    border: 1px solid #3d2c24;
    text-align: left;
    letter-spacing: 0.04em;
    font-size: 0.9rem;
    border-bottom: 2px solid #b8860b;
}

.markdown-table-wrap tbody td {
    padding: 9px 16px;
    border: 1px solid #3d2c24;
    color: #f0e6dc;
    background: rgba(0, 0, 0, 0.05);
}

.markdown-table-wrap tbody tr {
    border-bottom: 1px solid rgba(184, 134, 11, 0.04);
}

.markdown-table-wrap tbody tr:hover td {
    background: rgba(184, 134, 11, 0.04);
}

/* 浅色背景适配（父级为浅色时） */
.light-bg .markdown-table-wrap table,
.light-bg .markdown-table-wrap tbody td {
    background: #fcf8f2;
    color: #1a1210;
    border-color: #d4c8b8;
}

.light-bg .markdown-table-wrap thead th {
    background: #e8ddd0;
    color: #3d2c24;
    border-color: #d4c8b8;
    border-bottom-color: #b8860b;
}

.light-bg .markdown-table-wrap tbody tr:hover td {
    background: #f0e6dc;
}

/* 移动端自适应 */
@media (max-width: 600px) {
    .markdown-table-wrap {
        margin: 10px 0;
        border-radius: 4px;
    }
    .markdown-table-wrap table {
        font-size: 0.8rem;
        min-width: 200px;
    }
    .markdown-table-wrap thead th,
    .markdown-table-wrap tbody td {
        padding: 6px 10px;
    }
}

/* 原生 table 自动滚动（无包裹层时） */
table:not(.no-auto-wrap) {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
}


/* ============================================================
   模块五：加载指示器 · 替换为 “（篡改中）”
   ============================================================ */

.flex.items-center.justify-center.w-6.h-5 .style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

.flex.items-center.justify-center.w-6.h-5 {
    position: relative;
}

.flex.items-center.justify-center.w-6.h-5::after {
    content: "（篡改中）";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.7rem;
    font-weight: 600;
    color: #b8860b;
    letter-spacing: 0.15em;
    font-family: 'Segoe UI', 'PingFang SC', sans-serif;
    white-space: nowrap;
    animation: flicker 1.4s ease-in-out infinite alternate;
    text-shadow: 0 0 12px rgba(184, 134, 11, 0.10);
}

@keyframes flicker {
    0% { opacity: 0.4; letter-spacing: 0.08em; filter: blur(0.5px); }
    100% { opacity: 1; letter-spacing: 0.22em; filter: blur(0px); }
}


/* ============================================================
   模块六：平台按钮 · 华丽蚀刻风格
   ============================================================ */

.flex.items-center.gap-2.pb-2 > button {
    background: #1f1612 !important;
    color: #d4b48c !important;
    border: 2px solid #3d2c24 !important;
    border-radius: 4px !important;
    box-shadow:
        3px 3px 0px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.02),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    transition: all 0.12s ease-in-out !important;
    padding: 6px 20px !important;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    border-bottom: 3px solid #b8860b !important;
}

.flex.items-center.gap-2.pb-2 > button:hover {
    background: #2a1f1a !important;
    color: #f0e6dc !important;
    transform: translate(3px, 3px) !important;
    box-shadow:
        1px 1px 0px rgba(0, 0, 0, 0.08),
        inset 0 0 20px rgba(184, 134, 11, 0.04) !important;
    border-bottom-color: #d4a847 !important;
}

.flex.items-center.gap-2.pb-2 > button:active {
    transform: translate(4px, 4px) !important;
    box-shadow: none !important;
}


/* ============================================================
   模块七：输入栏 · 画框式深色输入
   ============================================================ */

#ai-chat-input {
    background-color: #1a1210 !important;
    border: 2px solid #3d2c24 !important;
    border-radius: 6px !important;
    color: #f0e6dc !important;
    box-shadow:
        inset 2px 2px 0px rgba(0, 0, 0, 0.06),
        inset -2px -2px 0px rgba(255, 255, 255, 0.02),
        0 2px 10px rgba(0, 0, 0, 0.05) !important;
    padding: 10px 16px !important;
    font-family: 'Segoe UI', 'PingFang SC', sans-serif;
    font-size: 0.95rem;
    border-bottom: 3px solid #b8860b !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

#ai-chat-input:focus {
    border-color: #b8860b !important;
    box-shadow:
        inset 2px 2px 0px rgba(0, 0, 0, 0.06),
        inset -2px -2px 0px rgba(255, 255, 255, 0.02),
        0 0 0 3px rgba(184, 134, 11, 0.08) !important;
    outline: none !important;
}

#ai-chat-bottom-input {
    background: transparent !important;
    backdrop-filter: none !important;
}