/* ═══════════════════════════════════════════════════════
   魅魔修女塞西莉亚 · 统合主题UI (APP兼容版)
   色彩体系：教堂金黑 × 魅魔绯紫
   ═══════════════════════════════════════════════════════ */

/* ——————————————————————————————————
   § 0  全局变量
   —————————————————————————————————— */
.max-w-\[720px\] {
    --bg-abyss:     #0b0a12;
    --bg-deep:      #100e1e;
    --bg-card:      #14112a;
    --bg-content:   #1a1636;
    --bg-hover:     #201b40;
    --bg-header:    #2d1b4e;
    --bg-header-hv: #3d2666;
    --gold:         #c9a84c;
    --gold-bright:  #e8d48b;
    --gold-dim:     #8a7032;
    --gold-border:  #7a6328;
    --crimson:      #9b2335;
    --pink:         #d4548a;
    --pink-glow:    rgba(212, 84, 138, 0.35);
    --pink-soft:    rgba(212, 84, 138, 0.12);
    --purple:       #7b5ea7;
    --purple-dim:   #3d2d5c;
    --text-primary: #e8e0d0;
    --text-label:   #9a8e7a;
    --text-muted:   #5c5347;
    --border-main:  #2a2045;
    --border-gold:  rgba(201, 168, 76, 0.3);
    --radius-main:  8px;
    --radius-inner: 6px;
    --radius-small: 4px;
}


/* ——————————————————————————————————
   § 1  全局 Markdown 正文
   —————————————————————————————————— */
.markdown-body {
    color: var(--text-primary) !important;
    background: var(--bg-abyss) !important;
}

.markdown-body p {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: var(--text-primary) !important;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    color: var(--gold-bright) !important;
}

.markdown-body a {
    color: var(--gold) !important;
}

.markdown-body code {
    color: var(--text-primary) !important;
    background: var(--bg-card) !important;
}

.markdown-body blockquote {
    color: var(--text-primary) !important;
    border-left-color: var(--gold-border) !important;
    background: rgba(20, 17, 42, 0.5) !important;
}

.markdown-body strong,
.markdown-body b {
    color: var(--gold-bright) !important;
}

.markdown-body em,
.markdown-body i {
    color: #cfc4b0 !important;
}

.markdown-body hr {
    border-color: var(--border-main) !important;
}


/* ——————————————————————————————————
   § 2  对话框
   —————————————————————————————————— */
.chat-container .group .relative.inline-block {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--gold-border) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6) !important;
    border-radius: var(--radius-main) !important;
    color: var(--text-primary) !important;
}

.chat-container .group .relative.inline-block > .MuiBox-root.css-0 {
    display: none !important;
}

.chat-container .group .relative.inline-block * {
    color: var(--text-primary) !important;
}

/* 对话框内按钮 */
.chat-container .group .MuiButtonBase-root.MuiButton-root.MuiButton-text {
    background: var(--bg-deep) !important;
    color: var(--gold) !important;
    border: 1px solid var(--gold-border) !important;
    border-radius: var(--radius-small) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    text-transform: none !important;
    transition: all 0.2s ease !important;
    padding: 4px 12px !important;
    min-width: auto !important;
    line-height: 1.5 !important;
}

.chat-container .group .MuiButtonBase-root.MuiButton-root.MuiButton-text:hover {
    background: var(--bg-header) !important;
    color: var(--gold-bright) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 8px rgba(201, 168, 76, 0.3) !important;
}


/* ——————————————————————————————————
   § 3  Details / Summary — 平台基础层
   —————————————————————————————————— */
.markdown-body details {
    border: 1px solid var(--gold-border) !important;
    border-radius: var(--radius-main) !important;
    margin: 16px 0 !important;
    background-color: var(--bg-deep) !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.3s ease !important;
}

.markdown-body details:hover {
    box-shadow: 0 0 20px rgba(201, 168, 76, 0.15) !important;
    border-color: var(--gold-dim) !important;
}

.markdown-body summary {
    display: flex !important;
    align-items: center !important;
    padding: 11px 18px !important;
    cursor: pointer !important;
    background: var(--bg-header) !important;
    color: var(--gold-bright) !important;
    font-weight: 600 !important;
    font-size: 1.05em !important;
    letter-spacing: 1.5px !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    list-style: none !important;
    position: relative !important;
    border-bottom: 1px solid var(--border-main) !important;
    font-family: "Noto Serif SC", "Source Han Serif SC", Georgia, serif !important;
}

.markdown-body summary::-webkit-details-marker {
    display: none !important;
}

.markdown-body summary:hover {
    background: var(--bg-header-hv) !important;
}

.markdown-body summary::before {
    content: '◆' !important;
    display: inline-block !important;
    margin-right: 10px !important;
    font-size: 0.8em !important;
    color: var(--gold-dim) !important;
    transition: transform 0.25s ease !important;
}

.markdown-body details[open] > summary::before {
    transform: rotate(90deg) !important;
    color: var(--gold) !important;
}

/* details 内所有文字颜色基准 */
.markdown-body details * {
    color: var(--text-primary) !important;
}

/* details 内代码块 */
.markdown-body details > pre,
.markdown-body details > table {
    margin: 0 !important;
    border: none !important;
    border-top: 1px solid var(--border-main) !important;
    border-radius: 0 !important;
    background-color: var(--bg-abyss) !important;
    overflow-x: auto !important;
}

.markdown-body details pre > div:first-child[style*="border-color"] {
    display: none !important;
}

.markdown-body details pre {
    padding: 0 !important;
    background: var(--bg-abyss) !important;
}

.markdown-body details pre > div[node="[object Object]"] {
    padding: 16px 20px !important;
    background: var(--bg-abyss) !important;
}

.markdown-body details pre code {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--text-primary) !important;
    background: transparent !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}


/* ——————————————————————————————————
   § 4  状态面板 · 内部组件
   —————————————————————————————————— */

/* ——— 总容器 ——— */
.status-panel {
    font-family: "Noto Serif SC", "Source Han Serif SC", Georgia, serif !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
    color: var(--text-primary) !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

/* ——— 子折叠区块 ——— */
.sp-section {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-main) !important;
    border-radius: var(--radius-small) !important;
    overflow: hidden !important;
    transition: border-color 0.3s !important;
    position: relative !important;
    margin: 3px 0 !important;
}

.sp-section[open] {
    border-color: var(--gold-dim) !important;
}

/* ——— 子标题栏 ——— */
.sp-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 9px 16px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    color: var(--gold) !important;
    background: linear-gradient(180deg, rgba(201, 168, 76, 0.08) 0%, transparent 100%) !important;
    border-bottom: 1px solid var(--border-main) !important;
    user-select: none !important;
    list-style: none !important;
    font-family: "Noto Serif SC", "Source Han Serif SC", Georgia, serif !important;
}

.sp-header::-webkit-details-marker {
    display: none !important;
}

.sp-header::before {
    content: "▸" !important;
    font-size: 10px !important;
    color: var(--gold-dim) !important;
    transition: transform 0.25s !important;
    margin-right: 4px !important;
}

.sp-section[open] > .sp-header::before {
    transform: rotate(90deg) !important;
}

.sp-icon {
    font-size: 12px !important;
    color: var(--gold-dim) !important;
}

/* ——— 内容区 ——— */
.sp-body {
    padding: 10px 16px 12px !important;
    background: var(--bg-content) !important;
}

/* ——— 数据行 ——— */
.sp-row {
    display: flex !important;
    align-items: baseline !important;
    padding: 3px 0 !important;
    gap: 8px !important;
    border-bottom: 1px solid rgba(42, 32, 69, 0.4) !important;
}

.sp-row:last-child {
    border-bottom: none !important;
}

.sp-label {
    flex: 0 0 auto !important;
    min-width: 80px !important;
    font-size: 12px !important;
    color: var(--text-label) !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
}

.sp-label::after {
    content: "：" !important;
}

.sp-val {
    flex: 1 !important;
    font-size: 13px !important;
    color: var(--text-primary) !important;
    word-break: break-all !important;
}

/* 粉色强调（魅魔专用） */
.accent-pink {
    color: var(--pink) !important;
    text-shadow: 0 0 4px rgba(212, 84, 138, 0.2) !important;
}

/* ——— 分组标题 ——— */
.sp-group-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--gold) !important;
    letter-spacing: 2px !important;
    margin: 8px 0 4px !important;
    padding-bottom: 3px !important;
    border-bottom: 1px dashed var(--border-gold) !important;
}

.sp-group-title:first-child {
    margin-top: 0 !important;
}

/* ——— 分隔线 ——— */
.sp-divider {
    height: 1px !important;
    margin: 10px 0 !important;
    background: linear-gradient(90deg, transparent 0%, var(--purple-dim) 30%, var(--gold-dim) 50%, var(--purple-dim) 70%, transparent 100%) !important;
    border: none !important;
}

/* ——— 魅魔荧光 ——— */
.succubus-glow {
    color: var(--pink) !important;
    text-shadow: 0 0 8px var(--pink-glow), 0 0 16px var(--pink-glow) !important;
}


/* ——————————————————————————————————
   § 5  塞西莉亚专属区块强调
   —————————————————————————————————— */
.sec-cecilia {
    border-color: var(--purple-dim) !important;
}

.sec-cecilia[open] {
    border-color: var(--pink) !important;
    box-shadow: 0 0 14px rgba(212, 84, 138, 0.1),
                inset 0 0 30px rgba(212, 84, 138, 0.03) !important;
}

.sec-cecilia > .sp-header {
    background: linear-gradient(180deg, rgba(212, 84, 138, 0.07) 0%, transparent 100%) !important;
}


/* ——————————————————————————————————
   § 6  进度条（影响力 & 腐化度）
   —————————————————————————————————— */
.bar-row {
    flex-wrap: wrap !important;
}

.sp-bar-wrap {
    flex: 1 !important;
    position: relative !important;
    height: 16px !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 2px !important;
    border: 1px solid var(--border-main) !important;
    overflow: hidden !important;
    min-width: 120px !important;
}

.sp-bar {
    height: 100% !important;
    border-radius: 1px !important;
    transition: width 0.6s ease !important;
}

.bar-influence {
    background: linear-gradient(90deg, var(--gold-dim), var(--gold)) !important;
}

.bar-corrupt {
    background: linear-gradient(90deg, var(--purple), var(--pink)) !important;
    box-shadow: 0 0 6px var(--pink-glow) !important;
}

.sp-bar-text {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
    letter-spacing: 1px !important;
}


/* ——————————————————————————————————
   § 7  NPC 信徒卡片
   —————————————————————————————————— */
.npc-card {
    padding: 6px 0 !important;
    margin-bottom: 6px !important;
    border-bottom: 1px solid var(--border-main) !important;
}

.npc-card:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

.npc-name {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: var(--purple) !important;
    letter-spacing: 1px !important;
    margin-bottom: 2px !important;
}


/* ——————————————————————————————————
   § 8  星记忆回廊 · 表格
   —————————————————————————————————— */
.mem-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 11.5px !important;
    margin-top: 4px !important;
    background: transparent !important;
}

.mem-table th {
    padding: 5px 6px !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    color: var(--gold-dim) !important;
    text-align: left !important;
    border-bottom: 1px solid var(--border-gold) !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
    background: transparent !important;
}

.mem-table td {
    padding: 4px 6px !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid rgba(42, 32, 69, 0.3) !important;
    vertical-align: top !important;
    background: transparent !important;
}

.mem-table th:first-child,
.mem-table td:first-child {
    width: 32px !important;
    text-align: center !important;
}

.mem-empty td {
    text-align: center !important;
    color: var(--text-muted) !important;
    font-style: italic !important;
    padding: 8px !important;
}


/* ——————————————————————————————————
   § 9  玩家选项（抉择之路）
   —————————————————————————————————— */
.option-hint {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    font-style: italic !important;
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px dashed var(--border-main) !important;
}

.option-item {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    padding: 5px 8px !important;
    margin: 3px 0 !important;
    border-radius: 3px !important;
    border: 1px solid transparent !important;
    transition: all 0.2s !important;
    background: transparent !important;
}

.option-item:hover {
    background: var(--bg-hover) !important;
    border-color: var(--gold-dim) !important;
}

.opt-key {
    flex: 0 0 auto !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: var(--gold) !important;
    min-width: 22px !important;
}

.opt-text {
    flex: 1 !important;
    font-size: 13px !important;
    color: var(--text-primary) !important;
}


/* ——————————————————————————————————
   § 10  区块左侧色带标识
   —————————————————————————————————— */
.sec-player  { border-left: 3px solid var(--gold-dim) !important; }
.sec-cecilia { border-left: 3px solid var(--pink) !important; }
.sec-npc     { border-left: 3px solid var(--purple-dim) !important; }
.sec-memory  { border-left: 3px solid var(--text-muted) !important; }
.sec-options { border-left: 3px solid var(--gold) !important; }


/* ——————————————————————————————————
   § 11  平台功能按钮
   —————————————————————————————————— */
.flex.items-center.gap-2.pb-2 > button {
    background: var(--bg-deep) !important;
    color: var(--gold) !important;
    border: 1px solid var(--gold-border) !important;
    border-radius: var(--radius-inner) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    transition: all 0.2s ease !important;
    padding: 6px 14px !important;
}

.flex.items-center.gap-2.pb-2 > button:hover {
    background: var(--bg-header) !important;
    color: var(--gold-bright) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 0 10px rgba(201, 168, 76, 0.3) !important;
}


/* ——————————————————————————————————
   § 12  输入框
   —————————————————————————————————— */
#ai-chat-input {
    background-color: var(--bg-deep) !important;
    border: 1px solid var(--gold-border) !important;
    border-radius: var(--radius-inner) !important;
    color: var(--text-primary) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
}

#ai-chat-input:focus {
    border-color: var(--gold) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3),
                0 0 8px rgba(201, 168, 76, 0.3) !important;
}

#ai-chat-input::placeholder {
    color: var(--text-muted) !important;
}

#ai-chat-bottom-input {
    background: var(--bg-abyss) !important;
    border-top: 1px solid var(--gold-border) !important;
    padding: 8px !important;
}


/* ——————————————————————————————————
   § 13  加载动画 — 旋转魅魔之菱
   —————————————————————————————————— */
@keyframes succubus-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes succubus-pulse {
    0%, 100% { box-shadow: 0 0 4px var(--pink-glow); }
    50%      { box-shadow: 0 0 12px var(--pink-glow), 0 0 20px rgba(212, 84, 138, 0.15); }
}

div:has(> .style_dot-flashing__8L91Q.style_text__zGhNq) {
    justify-content: flex-start !important;
    width: auto !important;
    height: auto !important;
}

div:has(> .style_dot-flashing__8L91Q.style_text__zGhNq)::after {
    content: '圣谕编织中，请虔诚等候…' !important;
    font-size: 13px !important;
    color: var(--gold) !important;
    margin-left: 10px !important;
    font-family: "Noto Serif SC", "Source Han Serif SC", Georgia, serif !important;
    letter-spacing: 1px !important;
}

.style_dot-flashing__8L91Q.style_text__zGhNq::before,
.style_dot-flashing__8L91Q.style_text__zGhNq::after {
    content: none !important;
    display: none !important;
}

.style_dot-flashing__8L91Q.style_text__zGhNq {
    position: relative !important;
    background: var(--pink) !important;
    width: 14px !important;
    height: 14px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    animation: succubus-spin 2s linear infinite,
               succubus-pulse 1.5s ease-in-out infinite !important;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
}


/* ——————————————————————————————————
   § 14  Markdown 内表格通用样式
   —————————————————————————————————— */
.markdown-body table {
    border-collapse: collapse !important;
    background: var(--bg-content) !important;
}

.markdown-body table th {
    background: var(--bg-header) !important;
    color: var(--gold-bright) !important;
    border: 1px solid var(--border-main) !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
}

.markdown-body table td {
    background: var(--bg-content) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-main) !important;
    padding: 5px 10px !important;
    font-size: 13px !important;
}

.markdown-body table tr:hover td {
    background: var(--bg-hover) !important;
}


/* ——————————————————————————————————
   § 15  响应式 · 移动端适配
   —————————————————————————————————— */
@media (max-width: 480px) {
    .status-panel {
        font-size: 12.5px !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .sp-label {
        min-width: 66px !important;
        font-size: 11px !important;
    }

    .sp-val {
        font-size: 12px !important;
    }

    .sp-header {
        padding: 8px 12px !important;
        font-size: 12px !important;
        letter-spacing: 1px !important;
    }

    .sp-body {
        padding: 8px 12px 10px !important;
    }

    .sp-bar-wrap {
        min-width: 90px !important;
    }

    .option-item {
        padding: 4px 6px !important;
    }

    .markdown-body summary {
        padding: 10px 14px !important;
        font-size: 0.95em !important;
    }

    .markdown-body p {
        font-size: 15px !important;
    }

    .mem-table {
        font-size: 10.5px !important;
    }

    .mem-table th,
    .mem-table td {
        padding: 3px 4px !important;
    }
}

@media (max-width: 360px) {
    .sp-row {
        flex-direction: column !important;
        gap: 2px !important;
    }

    .sp-label {
        min-width: unset !important;
    }

    .bar-row .sp-bar-wrap {
        width: 100% !important;
    }
}