/* ============================================================
   全局平台 UI 重构 (清晰可读版)
   ============================================================ */
/* 1. 突破原生宽度限制 */
.m-auto.max-w-3xl, .m-auto.max-w-2xl, [class*="max-w-3xl"], [class*="max-w-2xl"],
.md\:max-w-3xl, .lg\:max-w-\[38rem\], .lg\:max-w-\[40rem\], .xl\:max-w-\[48rem\] {
    max-width: 95% !important;
    transition: max-width 0.3s ease;
}

/* 2. 聊天气泡重构 - 清晰可读版 */
/* AI 回复气泡：深色半透明底，浅色文字 */
.chat-answer-container .markdown-body {
    background: rgba(22, 26, 34, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px 12px 12px 4px !important;
    padding: 20px 24px !important;
    color: #e2e8f0 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    line-height: 1.8 !important;
}

/* 玩家输入气泡：亮红渐变底，浅色文字 */
:not(.chat-answer-container) > .bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(135deg, #5c1a1a, #8b2e2e) !important;
    border: 1px solid #a04040 !important;
    border-radius: 12px 12px 4px 12px !important;
    color: #fce4e4 !important;
    box-shadow: 0 2px 10px rgba(120, 40, 40, 0.4);
}
:not(.chat-answer-container) > .bg-gray-100\/90.relative.inline-block .markdown-body {
    background: transparent !important;
    color: inherit !important;
    padding: 12px 18px !important;
}

/* 3. 顶部导航：半透明深色 */
.sticky.top-0 {
    background: rgba(18, 20, 25, 0.9) !important;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* 底部评论区：深色渐变底 + 浅色文字 */
div[class*="bottom-0"].w-full {
    background: linear-gradient(to top, #15171d 70%, transparent) !important;
    border-top: none !important;
    color: #cbd5e1 !important;
}

/* 评论区内的按钮、标签、提示文字 */
div[class*="bottom-0"].w-full button,
div[class*="bottom-0"].w-full span,
div[class*="bottom-0"].w-full p,
div[class*="bottom-0"].w-full label {
    color: #e2e8f0 !important;
}
div[class*="bottom-0"].w-full .text-xs,
div[class*="bottom-0"].w-full [class*="text-gray"] {
    color: #94a3b8 !important;
}

/* 输入框：深色底但可读 */
textarea, input[type="text"], [contenteditable="true"] {
    background: rgba(30, 34, 42, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    color: #f1f5f9 !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.2s !important;
}
textarea:focus, input[type="text"]:focus, [contenteditable="true"]:focus {
    border-color: #b91c1c !important;
    box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.25), inset 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    outline: none !important;
}

/* 4. 加载动画 - 保留血色魔环 */
.style_dot-flashing__8L91Q, .style_text__zGhNq { display: none !important; }
.flex.w-6.h-5.items-center.justify-center::after {
    content: "";
    width: 22px; height: 22px;
    border: 2px solid rgba(153, 27, 27, 0.2);
    border-top-color: #ef4444;
    border-radius: 50%;
    display: block;
    animation: demon-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes demon-spin { 100% { transform: rotate(360deg); } }

/* ============================================================
   角色发言颜色增强（清晰可读版 v2）
   ============================================================ */
/* 主角发言 - 浅蓝灰，稍小字号，加微光 */
span[style*="color:#2c3e50"] {
    color: #bccddc !important;
    font-size: 0.92em !important;
    font-weight: 600 !important;
    text-shadow: 0 0 5px rgba(188, 205, 220, 0.25);
}

/* 母亲发言 - 暖杏色，稍小字号，加暖光 */
span[style*="color:#8b3a3a"] {
    color: #f0c8c8 !important;
    font-size: 0.92em !important;
    font-weight: 600 !important;
    text-shadow: 0 0 5px rgba(240, 200, 200, 0.25);
}

/* 邪灵发言 - 亮猩红，保持加粗，加双光晕 */
span[style*="color:#b91c1c"] {
    color: #ff5e5e !important;
    font-size: 0.95em !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px;
    text-shadow: 0 0 6px rgba(255, 94, 94, 0.4), 0 0 14px rgba(185, 28, 28, 0.25);
}

/* ============================================================
   AI 输出内部排版增强 (简洁正文区，无红色底)
   ============================================================ */
.hw-story {
    display: block;
    background: transparent;
    border-left: 3px solid rgba(255, 255, 255, 0.15);
    padding: 20px 28px;
    border-radius: 0;
    margin: 16px 0;
    font-family: "Noto Serif SC", "Palatino Linotype", serif;
    font-size: 16.5px;
    line-height: 1.85;
    color: #e2e8f0;
}
.hw-story p { margin-bottom: 14px; text-align: justify; }

.hw-panel {
    background: rgba(22, 26, 34, 0.8);
    border: 1px solid #2a313e;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 13.5px;
    color: #cbd5e1;
    line-height: 1.7;
    overflow: hidden;
}
.hw-panel[open] {
    border-color: rgba(185, 28, 28, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.hw-panel summary {
    background: linear-gradient(90deg, #1a1e26 0%, #15171d 100%);
    color: #e2e8f0;
    padding: 12px 18px;
    font-weight: bold;
    cursor: pointer;
    list-style: none;
    position: relative;
    border-bottom: 1px solid transparent;
}
.hw-panel[open] summary {
    border-bottom-color: rgba(185, 28, 28, 0.3);
    color: #fca5a5;
}
.hw-panel summary::-webkit-details-marker { display: none; }
.hw-panel summary::after {
    content: "▼";
    position: absolute;
    right: 18px;
    color: #64748b;
    transition: 0.3s;
    font-size: 12px;
}
.hw-panel[open] summary::after {
    transform: rotate(180deg);
    color: #fca5a5;
}
.hw-panel strong { color: #f1f5f9; }
.hw-panel ul, .hw-panel ol { padding-left: 36px; margin: 8px 0; }
.hw-panel li { margin-bottom: 6px; }
.hw-panel li::marker { color: #b91c1c; font-weight: bold; }

.hw-next { border-left: 3px solid #3b82f6; }
.hw-next[open] { border-color: rgba(59, 130, 246, 0.5); }
.hw-next summary { color: #93c5fd; }
.hw-next[open] summary { color: #bfdbfe; }
/* 移动端优化：正文区域缩小字号 */
@media (max-width: 600px) {
    .hw-story {
        font-size: 15px;
        padding: 16px 20px;
        line-height: 1.7;
    }
    .chat-answer-container .markdown-body {
        font-size: 0.95em; /* 稍微缩小 */
        padding: 16px 18px !important;
    }
    /* 角色发言在移动端可能也需要微调，但可选 */
}