/* =========================================
   可爱清新风RPG界面美化：状态栏、折叠面板与聊天底栏 (V2)
   ========================================= */

/* 顶部状态栏美化：更精致，视觉上暗示两行 */
pre {
    background: linear-gradient(135deg, #f0f8ff 0%, #e6f7ff 100%) !important; /* 柔和的天空蓝渐变背景 */
    border: 1px solid #b0e0e6 !important; /* 浅蓝色细边框 */
    border-left: 6px solid #87ceeb !important; /* 更明显的左侧天蓝色强调边框 */
    border-radius: 18px !important; /* 更圆润的边角 */
    box-shadow: 0 6px 20px rgba(135, 206, 235, 0.3), inset 0 2px 5px rgba(255, 255, 255, 0.6) !important; /* 更深邃的柔和阴影，带有内部高光 */
    padding: 20px 25px !important; /* 更宽敞的内边距 */
    color: #333333 !important; /* 深灰色文字，确保最佳可读性 */
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
    line-height: 1.8 !important; /* 更宽松的行高，提升舒适度 */
    position: relative !important; /* 为内部的伪元素定位做准备 */
    overflow: hidden !important; /* 确保内容不溢出 */
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5) !important; /* 增加文字的立体感和清晰度 */
}

/* 视觉分隔线：在状态栏内部添加一条淡雅的横线，视觉上将内容分为两部分 */
/* 用户需自行在状态栏文本中安排内容，使其与此分隔线逻辑对应 */
pre::after {
    content: '';
    display: block;
    width: 85%; /* 分隔线宽度 */
    height: 1px; /* 细线 */
    background: linear-gradient(to right, transparent 0%, rgba(176, 224, 230, 0.6) 30%, rgba(176, 224, 230, 0.6) 70%, transparent 100%); /* 渐变淡蓝色分隔线 */
    margin: 15px auto 0 auto !important; /* 居中显示，并提供上下空间 */
    opacity: 0.8 !important;
}


/* 折叠面板 (details) 美化：添加鼠标悬停流光效果 */
details {
    background: #ffffff !important; /* 纯白背景 */
    border: 1px solid #b0e0e6 !important; /* 浅蓝色边框 */
    border-radius: 12px !important; /* 圆角 */
    padding: 12px 16px !important;
    margin: 10px 0 !important;
    box-shadow: 0 2px 8px rgba(176, 224, 230, 0.2) !important; /* 柔和阴影 */

    /* 流光效果所需属性 */
    position: relative !important;
    overflow: hidden !important; /* 关键：隐藏溢出的流光 */
    /* 背景图层：第一个是流光，第二个是基础背景色 */
    background-image: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 30%, /* 流光中心亮度 */
        rgba(255, 255, 255, 0.7) 50%, /* 流光最亮部分 */
        rgba(255, 255, 255, 0.4) 70%,
        rgba(255, 255, 255, 0) 100%
    ), #ffffff !important;
    background-size: 250% 100% !important; /* 流光宽度是元素的两倍多 */
    background-position: 100% 0 !important; /* 初始位置：流光在元素右侧外部 */
    transition: background-position 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), /* 流光动画曲线 */
                border-color 0.3s ease-in-out,
                box-shadow 0.3s ease-in-out !important; /* 其他属性的平滑过渡 */
}

details:hover {
    border-color: #87ceeb !important; /* 悬停时边框变亮 */
    box-shadow: 0 5px 20px rgba(135, 206, 235, 0.4) !important; /* 悬停时阴影更明显 */
    background-position: -150% 0 !important; /* 悬停时流光从右向左划过 */
}

summary {
    font-weight: bold !important;
    color: #4682b4 !important; /* 钢蓝色文字 */
    cursor: pointer !important;
    font-size: 16px !important;
    outline: none !important;
    user-select: none !important;
    padding-left: 5px !important;
}
summary::marker {
    color: #a8dadc !important; /* 箭头颜色 */
    font-size: 1.2em !important;
}

/* 记忆区表格美化 - 保持清新 */
table {
    border-collapse: collapse !important;
    width: 100% !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid #e0f2f7 !important;
    margin-top: 10px !important;
}
th {
    background-color: #f0f8ff !important;
    color: #4682b4 !important;
    padding: 10px !important;
    text-align: left !important;
    border-bottom: 1px solid #e0f2f7 !important;
}
td {
    padding: 10px !important;
    border-top: 1px solid #f0f8ff !important;
    color: #555555 !important;
}

/* 底部输入框可爱清新改造 */
#ai-chat-bottom-input {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(245, 245, 245, 0.8)) !important;
    backdrop-filter: blur(8px) !important;
    border-top: 1px solid #e0e0e0 !important;
}
#ai-chat-input {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #b0e0e6 !important;
    border-radius: 20px !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
    padding: 10px 15px !important;
    font-size: 15px !important;
}
#ai-chat-input:focus {
    border-color: #87ceeb !important;
    box-shadow: 0 0 10px rgba(135, 206, 235, 0.3) !important;
}
#ai-chat-input::placeholder {
    color: #a0a0a0 !important;
}
#ai-chat-input::selection {
    background: #add8e6 !important;
    color: #333333 !important;
}