/* 风月AI 内置CSS - 暖黄色背景版 */

body {
    background: #f5f0e6; /* 暖黄色/米白色背景 */
    font-family: 'Georgia', 'Times New Roman', serif;
    color: #2c2c2c;      /* 深灰色文字，与浅色背景搭配 */
    line-height: 1.7;
}

details {
    margin: 0.8rem 0;
    background: #ffffff; /* 折叠框白色背景 */
    border-radius: 6px;
    padding: 0.2rem 0.8rem 0.4rem 0.8rem;
    border: 1px solid #dcdcdc; /* 暖灰色边框 */
}

details summary {
    cursor: pointer;
    font-weight: 500;
    color: #333333;
    padding: 0.4rem 0;
    list-style: none;
}

details summary::before {
    content: "▶ ";
    font-size: 0.8rem;
    color: #8a6a50;
}

details[open] summary::before {
    content: "▼ ";
}

/* =================== 绝对修复 =================== */
/* 不依赖任何class，直接强制折叠框内所有底层标签的颜色 */
details p,
details li,
details ul,
details span,
details div,
details strong,
details em,
details b {
    color: #333333 !important;
}
/* 修正列表小圆点颜色 */
details ul li::marker {
    color: #333333 !important;
}
/* =============================================== */

.highlight {
    color: #b08a6a;
}

.options ul {
    list-style: none;
    padding: 0;
}

.options li {
    background: #ffffff;
    border: 1px solid #dcdcdc;
    padding: 0.6rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 6px;
    color: #333333;
}

.options li .num {
    font-weight: 600;
    color: #8a6a50;
    margin-right: 0.6rem;
}

.status-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    background: #ffffff;
    border: 1px solid #dcdcdc;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    margin: 1.2rem 0;
    font-size: 0.92rem;
}

.status-bar strong {
    color: #333333;
}

.status-bar span {
    color: #666666;
}

.narration {
    font-size: 1.05rem;
    text-align: justify;
    margin-bottom: 1.8rem;
    color: #333333;
}

.narration .dialogue {
    color: #8a6a50;
}

.title {
    font-size: 1.4rem;
    border-bottom: 1px solid #dcdcdc;
    padding-bottom: 0.5rem;
    margin-bottom: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.title small {
    font-size: 0.9rem;
    color: #888888;
}

.timestamp {
    color: #666666;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    border-left: 3px solid #8a6a50;
    padding-left: 0.8rem;
}

/* ===== 图2效果专用：卡片键值对 ===== */
.info-card {
    padding: 0.4rem 0;
}
.info-card .row {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    border-bottom: 1px solid #eeeeee;
    font-size: 0.95rem;
}
.info-card .row:last-child {
    border-bottom: none;
}
.info-card .row .label {
    color: #888888;
    font-weight: 400;
}
.info-card .row .value {
    color: #333333;
    text-align: right;
    font-weight: 500;
}
.info-card .row .value.highlight {
    color: #ff6699; /* 粉色高亮，和图2一致 */
    font-weight: 600;
}
.info-card .row.quote-block {
    flex-direction: column;
    align-items: flex-start;
    border-bottom: none;
    gap: 0.2rem;
}
.info-card .row.quote-block .value {
    text-align: left;
    font-style: italic;
    color: #8a6a50;
}
/* ===== 轮次与思维链专用卡片 ===== */
.info-card {
    background: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    padding: 0.4rem 1rem;
    margin: 0.8rem 0;
}
.info-card .row {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    border-bottom: 1px solid #eeeeee;
    font-size: 0.95rem;
}
.info-card .row:last-child {
    border-bottom: none;
}
.info-card .row .label {
    color: #888888;
    font-weight: 400;
}
.info-card .row .value {
    color: #333333;
    text-align: right;
    font-weight: 500;
}

/* ===== 强制粉色高亮（必改项） ===== */
.info-card .row .value.highlight,
.value.highlight {
    color: #ff6699 !important; /* 强制使用B站风格的粉色 */
    font-weight: 600 !important;
}

/* ===== 思维链折叠框内部微调 ===== */
details summary {
    color: #333333;
}
/* ===== 顶部头部栏 ===== */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #ff6699; /* B站风粉色底边 */
    padding-bottom: 12px;
    margin-bottom: 20px;
}
.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.logo {
    width: 40px;
    height: 40px;
    background: #ff6699;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 22px;
}
.header-title {
    font-size: 24px;
    font-weight: 700;
    color: #333333;
}
.header-title span {
    color: #ff6699 !important; /* 强制使用粉色 */
}
.header-badge {
    background: #f5f5f5;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    color: #666666;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ===== 圆角状态栏 ===== */
.status-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #f6f7f9;
    border: 1px solid #e8eaec;
    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 20px;
    gap: 8px 0;
    color: #555555;
    font-size: 14px;
}
.status-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.status-item strong {
    color: #333333;
    font-weight: 600;
}
.status-item strong .highlight-pink {
    color: #ff6699 !important; /* 需用在具体数字套壳时 */
}
.divider {
    width: 1px;
    height: 16px;
    background: #dcdcdc;
    margin: 0 12px;
}
/* ===== 强制移动端阅读排版优化 ===== */
/* 只要AI按照指令输出了 <p> 标签，这块样式就会立刻生效 */

.narration p,
.story-body p {
    text-indent: 2em !important;      /* 首行空两格 */
    line-height: 1.9 !important;      /* 行间距拉大 */
    margin-bottom: 1.2rem !important; /* 段落间的大间隔 */
    font-size: 16px !important;       /* 手机端最适字号 */
    letter-spacing: 0.5px !important; /* 字间距微调 */
}