/* 【爻曼卿 · 世界】全局美化样式 */
/* ===== 1. 简介页面（HTML）增强 ===== */
/* 这些样式将影响你放置在“详细介绍”中的HTML */

/* 为容器添加更精致的内阴影和光泽 */
.container {
    background: linear-gradient(145deg, #ffffff, #f0f4f8);
    position: relative;
}
.container::before {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
    z-index: -1;
    border-radius: 26px;
    opacity: 0.4;
    filter: blur(10px);
}

/* 标题动态光泽 */
h1 {
    animation: titleGlow 3s ease-in-out infinite alternate;
}
@keyframes titleGlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* 按钮涟漪效果升级 */
button, .btn {
    isolation: isolate; /* 新建层，防止溢出隐藏问题 */
}
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    transform: scale(0);
    animation: rippleEffect 0.6s linear;
    pointer-events: none;
}
@keyframes rippleEffect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* 表单输入框聚焦动效 */
input:focus, textarea:focus, select:focus {
    animation: inputPulse 0.5s ease;
}
@keyframes inputPulse {
    0% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(52, 152, 219, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); }
}

/* ===== 2. AI回复状态栏美化 (作用于主提示词回复格式) ===== */
/* 注意：AI风月中，需确保主提示词回复格式的HTML标签正确闭合且无空行 */

状态栏 {
    font-size: 0.95em;
    margin-bottom: 25px;
}
状态栏 details {
    margin-bottom: 15px;
    border-radius: 14px;
    overflow: hidden;
    border: 2px solid;
    border-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%) 1;
    background: linear-gradient(145deg, #f8fafc, #f1f5f9);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}
状态栏 details:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.15);
    border-image: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) 1;
}
状态栏 details[open] {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
}
状态栏 summary {
    padding: 18px 25px;
    background: linear-gradient(135deg, #2c3e50 0%, #4a6491 100%);
    color: white;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    position: relative;
    user-select: none;
    font-size: 1.1em;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
状态栏 summary::-webkit-details-marker {
    display: none;
}
状态栏 summary::after {
    content: '❯';
    font-size: 1.2em;
    transition: transform 0.4s ease;
    margin-left: 10px;
}
状态栏 details[open] summary::after {
    transform: rotate(90deg);
}
状态栏 p, 状态栏 li {
    margin: 15px 25px;
    line-height: 1.7;
    color: #2d3748;
    padding-left: 15px;
    border-left: 4px solid transparent;
    transition: all 0.3s;
    position: relative;
}
状态栏 p:before, 状态栏 li:before {
    content: '♥';
    color: #e74c3c;
    position: absolute;
    left: -10px;
    opacity: 0;
    transition: opacity 0.3s;
}
状态栏 p:hover, 状态栏 li:hover {
    border-left-color: #3498db;
    background-color: rgba(52, 152, 219, 0.05);
    padding-left: 20px;
}
状态栏 p:hover:before, 状态栏 li:hover:before {
    opacity: 1;
}
/* 不同状态栏的区别色 */
状态栏 details:nth-child(1) summary { background: linear-gradient(135deg, #2c3e50, #3498db); } /* 丈夫信息 */
状态栏 details:nth-child(2) summary { background: linear-gradient(135deg, #8e44ad, #9b59b6); } /* 爻曼卿状态 */
状态栏 details:nth-child(3) summary { background: linear-gradient(135deg, #27ae60, #2ecc71); } /* 环境时间 */
状态栏 details:nth-child(4) summary { background: linear-gradient(135deg, #d35400, #e67e22); } /* 短期记忆 */
状态栏 details:nth-child(5) summary { background: linear-gradient(135deg, #16a085, #1abc9c); } /* 长期记忆 */

/* ===== 3. 正文与后置状态栏美化 ===== */
正文 {
    display: block;
    line-height: 1.9;
    font-size: 1.1em;
    color: #2c3e50;
    text-align: justify;
    padding: 25px;
    background: linear-gradient(145deg, #ffffff, #fafafa);
    border-radius: 15px;
    border-left: 8px solid #e74c3c;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.05);
    margin: 25px 0;
}
正文 p {
    margin-bottom: 1.2em;
    text-indent: 2em;
}
正文 p:first-child {
    text-indent: 0;
    font-weight: bold;
    color: #2c3e50;
}

后置状态栏 details {
    margin-top: 25px;
    border: 2px dashed #95a5a6;
    background-color: #fef9e7;
}
后置状态栏 summary {
    background: linear-gradient(135deg, #7f8c8d, #95a5a6);
    font-size: 1em;
}
后置状态栏 p {
    color: #666;
    font-style: italic;
}

/* ===== 4. 移动端适配 ===== */
@media (max-width: 768px) {
    状态栏 details, 正文 {
        margin-left: 5px;
        margin-right: 5px;
        padding: 15px;
    }
    状态栏 summary {
        padding: 15px 20px;
        font-size: 1em;
    }
}