/* --- 整体容器与基础样式：打造温馨底色 --- */
.cozy-home-status-container {
    font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif; /* 选用圆润字体，增加亲和力 */
    background-color: #fcf8f3; /* 浅米白背景，像刚烤好的面包一样暖 */
    border-radius: 12px; /* 大圆角，让整个容器看起来更柔和 */
    padding: 15px; /* 内部留白，呼吸感很重要 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* 柔和的阴影，增加层次感 */
    margin-bottom: 20px; /* 和主内容区保持距离 */
    color: #4a4a4a; /* 主文本颜色，不至于太黑太硬 */
    line-height: 1.6; /* 增加行高，阅读更舒适 */
}

/* --- 状态区块（details）样式：每个都是独立的小房间 --- */
.status-section {
    background-color: #ffffff; /* 每个区块用纯白，干净整洁 */
    border: 1px solid #e0e0e0; /* 细微的边框，区分度又不生硬 */
    border-radius: 8px; /* 内部区块的小圆角 */
    margin-bottom: 10px; /* 区块间距 */
    overflow: hidden; /* 确保内容不溢出圆角 */
    transition: all 0.3s ease-in-out; /* 平滑过渡动画 */
}

.status-section:last-child {
    margin-bottom: 0; /* 最后一个区块底部无间距 */
}

/* --- 摘要（summary）样式：区块的标题，点击展开的按钮 --- */
.status-summary {
    display: block; /* 确保能占据整行 */
    padding: 12px 15px; /* 内部填充 */
    background-color: #f0f4f8; /* 标题背景色，比主体背景稍深，有层次感 */
    color: #333333; /* 标题文字颜色 */
    font-weight: bold; /* 标题加粗 */
    cursor: pointer; /* 鼠标悬停变手型，提示可点击 */
    user-select: none; /* 防止文字被选中 */
    position: relative; /* 为箭头图标定位 */
    transition: background-color 0.2s ease; /* 悬停背景色过渡 */
    border-bottom: 1px solid #e9edf2; /* 底部细线 */
}

.status-summary:hover {
    background-color: #e2eaf1; /* 悬停效果，更具交互感 */
}

/* details 展开时的 summary 样式 */
.status-section[open] > .status-summary {
    background-color: #e2eaf1; /* 展开时标题背景色 */
    border-bottom-color: transparent; /* 展开时底部边框透明，与内容区融合 */
}

/* 展开/折叠箭头动画 */
.status-summary::before {
    content: '▶'; /* 默认折叠状态的箭头 */
    display: inline-block;
    margin-right: 8px;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
    color: #666;
}

.status-section[open] > .status-summary::before {
    content: '▼'; /* 展开状态的箭头 */
    transform: rotate(0deg); /* 保持向下，或根据喜好旋转 */
}

/* --- 内容区样式：真正的“家” --- */
.status-content {
    padding: 15px; /* 内容区内边距 */
    border-top: 1px solid #f0f0f0; /* 与标题区分开 */
    background-color: #ffffff; /* 内容区背景 */
}

.status-content p {
    margin-bottom: 8px; /* 段落间距 */
    display: flex; /* 让图标和文字对齐 */
    align-items: center; /* 垂直居中对齐 */
}

.status-content p:last-child {
    margin-bottom: 0; /* 最后一个段落底部无间距 */
}

/* --- 图标样式：小小的点缀，大大的提升 --- */
.status-icon {
    font-size: 1.1em; /* 图标稍大一点 */
    margin-right: 8px; /* 图标与文字间距 */
    color: #88aadd; /* 图标颜色，柔和的蓝色 */
    min-width: 20px; /* 确保图标对齐 */
    text-align: center;
}

/* --- 角色状态标题（H4）样式 --- */
.char-status-title {
    font-size: 1.2em;
    color: #6a6a6a;
    margin-bottom: 10px;
    border-bottom: 2px solid #f0f0f0; /* 底部加粗线 */
    padding-bottom: 5px;
}

.affection-change {
    font-style: italic; /* 好感度变化斜体 */
    color: #888;
    font-size: 0.9em;
    margin-top: -5px; /* 微调位置 */
}

/* --- 记忆区样式：表格要整洁 --- */
.memory-content {
    padding: 10px 15px; /* 记忆区内容内边距 */
}

.memory-subtitle {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 10px;
    padding-top: 5px;
}

.memory-table {
    width: 100%; /* 表格宽度100% */
    border-collapse: collapse; /* 边框合并 */
    margin-bottom: 15px; /* 表格底部间距 */
    font-size: 0.95em;
    background-color: #fcfcfc;
    border: 1px solid #e0e0e0;
    border-radius: 5px; /* 表格圆角 */
    overflow: hidden; /* 确保圆角生效 */
}

.memory-table th,
.memory-table td {
    border: 1px solid #eeeeee; /* 单元格边框 */
    padding: 8px 12px; /* 单元格内边距 */
    text-align: left; /* 文字左对齐 */
}

.memory-table th {
    background-color: #f5f5f5; /* 表头背景色 */
    font-weight: bold;
    color: #555;
}

.memory-table tr:nth-child(even) {
    background-color: #f9f9f9; /* 斑马纹效果，增加可读性 */
}

.memory-divider {
    border: none;
    border-top: 1px dashed #d0d0d0; /* 虚线分隔，更柔和 */
    margin: 20px 0; /* 上下间距 */
}

/* --- 剧情走向选项样式：明确又不过于突兀 --- */
.option-title {
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}

.option-list {
    list-style: none; /* 移除默认列表点 */
    padding: 0; /* 移除默认内边距 */
    margin: 0; /* 移除默认外边距 */
}

.option-list li {
    padding: 8px 10px; /* 列表项内边距 */
    margin-bottom: 5px; /* 列表项间距 */
    background-color: #fcfcfc; /* 列表项背景色 */
    border-radius: 5px; /* 列表项圆角 */
    border: 1px solid #eee;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.option-list li:hover {
    background-color: #eaf3f8; /* 悬停效果，像点击按钮 */
    border-color: #cddff0;
    cursor: pointer; /* 提示可点击 */
}













/* --- 模块一：对话气泡美化 (AI侧) - 变身温馨小语泡 --- */
.group .bg-gray-100\/90 {
    background: #fffdfa !important; /* 柔和的奶油白，比纯白更温暖 */
    border: 1px solid #e0e0e0 !important; /* 细致的浅灰色边框，不再那么突兀 */
    border-radius: 10px !important; /* 更加圆润的边角，像一块软糖 */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important; /* 柔和的扩散阴影，像轻柔的呼吸 */
    color: #4a4a4a !important; /* 温暖的深灰，阅读更舒适 */
    padding: 14px !important; /* 稍大一点的内边距，让内容更舒展 */
    line-height: 1.6 !important; /* 增加行高，阅读体验更佳 */
}


/* --- 模块二：平台按钮美化 - 变成可爱的毛线球按钮 --- */
/* "mod、流式、评论、回到底部" 等按钮 */
.flex.items-center.gap-2.pb-2 > button {
    background: #f0f4f8 !important; /* 按钮背景色，与状态栏标题保持一致 */
    color: #333333 !important; /* 按钮文字颜色 */
    border: 1px solid #cddff0 !important; /* 柔和的浅蓝色边框 */
    border-radius: 6px !important; /* 更圆润的边角，不再那么“硬” */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important; /* 柔和的阴影 */
    font-weight: 600 !important; /* 稍加粗，但不过分 */
    text-transform: none !important; /* 禁用大写转换，保持亲和力 */
    transition: all 0.15s ease-in-out !important; /* 平滑的过渡动画 */
    padding: 8px 18px !important; /* 调整内边距，让按钮看起来更饱满 */
}
/* 按钮悬停效果 - “轻柔按压” */
.flex.items-center.gap-2.pb-2 > button:hover {
    background: #e2eaf1 !important; /* 模拟按下的颜色变化，更柔和 */
    color: #333333 !important;
    transform: translateY(1px) !important; /* 按钮轻微下沉，更自然 */
    box-shadow: 0 1px 3px 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: #fffcf7 !important; /* 温暖的米白色背景 */
    border: 1px solid #cddff0 !important; /* 柔和的浅蓝色边框 */
    border-radius: 8px !important; /* 圆润的输入框 */
    color: #333333 !important; /* 输入文字颜色 */
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1) !important; /* 轻微的内阴影，增加层次感 */
    padding: 10px 12px !important; /* 舒适的内边距 */
}
/* 输入框容器透明化，突出输入框本身 (保持不变) */
#ai-chat-bottom-input { 
    background: transparent !important; 
    backdrop-filter: none !important; 
}