/* --- 暗黑科技风 UI 美化 by 兴趣使然的人 --- */

/* 1. 全局与容器设定 */
.shanghai-container {
    --card-bg: #2c2c34; /* 卡片背景色 */
    --title-bg: #3e3e4a; /* 标题背景色 */
    --text-color: #e0e0e0; /* 主要文字颜色 */
    --accent-color: #4fc3f7; /* 亮眼的点缀/悬停色 */
    --border-color: #555; /* 边框颜色 */
    --shadow-color: rgba(0, 0, 0, 0.4); /* 阴影颜色 */
    --hover-bg: #4a4a58; /* 悬停背景色 */
    
    font-family: 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif; /* 优先使用思源黑体，更优雅 */
    padding: 10px;
    background: #1e1e24; /* 整体深色背景 */
    border-radius: 12px;
    margin-top: 15px; /* 与正文拉开距离 */
}

/* 2. 卡片 (<details>) 基础样式 */
.status-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden; /* 防止内容溢出圆角 */
    box-shadow: 0 4px 12px var(--shadow-color);
    transition: all 0.3s ease;
}

.status-card[open] {
    box-shadow: 0 6px 20px rgba(79, 195, 247, 0.2); /* 展开时加点辉光 */
    border-color: var(--accent-color);
}

/* 3. 卡片标题 (<summary>) 样式 */
.card-title {
    background: var(--title-bg);
    color: var(--text-color);
    padding: 12px 18px;
    font-weight: bold;
    cursor: pointer;
    list-style: none; /* 去掉默认的小三角 */
    position: relative;
    transition: background-color 0.3s ease;
}

.card-title:hover {
    background: var(--hover-bg);
    color: #fff;
}

/* 用伪元素创建自定义的展开/折叠图标 */
.card-title::before {
    content: '▶';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--accent-color);
    transition: transform 0.3s ease;
}

.status-card[open] > .card-title::before {
    transform: translateY(-50%) rotate(90deg);
}

/* 标题文字需要向右移动，给图标留出空间 */
.card-title {
    padding-left: 35px; 
}


/* 4. 卡片内容区域 */
.card-content {
    padding: 15px 20px;
    color: var(--text-color);
    border-top: 1px solid var(--border-color);
}

.status-item {
    margin: 8px 0;
    line-height: 1.6;
    font-size: 0.95em;
}

.status-item b {
    color: var(--accent-color); /* 突出关键信息标签 */
    margin-right: 5px;
}

.char-name {
    font-size: 1.1em;
    font-weight: bold;
    color: #ffab91; /* 给角色名一个特别的颜色 */
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

/* 5. 记忆区专属美化 */
.memory-divider {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--border-color), transparent);
    margin: 20px 0;
}

.mem-title {
    font-weight: bold;
    color: var(--text-color);
    margin-bottom: 10px;
}

.mem-count, .mem-progress, .mem-count-ltm {
    font-size: 0.8em;
    color: #aaa;
    margin-left: 8px;
}

.table-responsive {
    overflow-x: auto; /* 移动端表格可以横向滚动 */
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

th, td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9em;
}

thead {
    background-color: rgba(79, 195, 247, 0.1); /* 表头加点底色 */
}

th {
    color: var(--accent-color);
}

/* 6. 剧情走向选项美化 */
.options-list .option-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 10px 15px;
    margin-bottom: 8px;
    transition: all 0.2s ease-in-out;
}

.options-list .option-item:hover {
    background: rgba(79, 195, 247, 0.2);
    border-color: var(--accent-color);
    cursor: default; /* 只是展示，所以不用pointer */
    transform: translateY(-2px); /* 轻微上浮效果 */
}














/*
 * ---------------------------------
 *   模块一：对话气泡美化 (AI侧) - 居家温馨风格
 * ---------------------------------
 */
.group .bg-gray-100\/90 {
    background: #F8F8F8 !important; /* 柔和的米白或浅灰，基础色 */
    border: 1px solid #E0E0E0 !important; /* 更细、更柔和的边框 */
    border-radius: 12px !important; /* 更圆润的边角，增加温馨感 */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.08) !important; /* 柔和的浅阴影，增加层次感但不突兀 */
    color: #333333 !important; /* 柔和的深灰色文字，避免纯黑的锐利 */
    padding: 14px !important; /* 增加内边距，提供舒适的阅读空间 */
}


/*
 * ---------------------------------
 *   模块二：平台按钮美化 - 居家温馨风格
 * ---------------------------------
 */
/* "mod、流式、评论、回到底部" 等按钮 */
.flex.items-center.gap-2.pb-2 > button {
    background: #F0F0F0 !important; /* 柔和的浅灰色背景 */
    color: #555555 !important; /* 柔和的深灰文字 */
    border: 1px solid #D0D0D0 !important; /* 细边框，颜色更淡 */
    border-radius: 8px !important; /* 圆润的边角 */
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05) !important; /* 更柔和的阴影 */
    font-weight: normal !important; /* 字体不要太粗，更轻松 */
    text-transform: none !important; /* 禁用大写转换 */
    transition: all 0.2s ease-in-out !important; /* 更平滑的过渡效果 */
    padding: 8px 18px !important; /* 舒适的按钮大小 */
}
/* 按钮悬停效果 - 柔和的反馈 */
.flex.items-center.gap-2.pb-2 > button:hover {
    background: #E5E5E5 !important; /* 悬停时颜色略深，但依然柔和 */
    color: #333333 !important; /* 悬停时文字颜色略深 */
    transform: translateY(-1px) !important; /* 轻微上浮效果，更轻盈 */
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1) !important; /* 悬停时阴影略微明显 */
}

/*
 * ---------------------------------
 *   模块三：多余元素隐藏 (保持不变，因为是功能性而非风格性)
 * ---------------------------------
 */
.MuiButtonBase-root.MuiButton-root.MuiButton-default.css-w13mdt,
.absolute.z-40 .px-4.py-2.hover\:bg-indigo-100:nth-child(5),
.css-nkqe49 {
    /* display: none !important; */ /* 此处保持注释状态，不隐藏 */
}

/*
 * ---------------------------------
 *   模块四：输入栏美化 - 居家温馨风格
 * ---------------------------------
 */
#ai-chat-input {
    background-color: #FFFFFF !important; /* 干净的白色背景 */
    border: 1px solid #CCCCCC !important; /* 柔和的浅灰边框 */
    border-radius: 10px !important; /* 圆润的边角 */
    color: #444444 !important; /* 柔和的深灰文字 */
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.08) !important; /* 更柔和的内阴影 */
    padding: 10px 15px !important; /* 舒适的内边距 */
}
/* 输入框容器透明化，突出输入框本身 */
#ai-chat-bottom-input {
    background: transparent !important;
    backdrop-filter: none !important;
}