/* --- 可爱粉色折叠状态栏 & Markdown表格美化 by NPC --- */

/* 
 * 使用方法: 
 * 1. 将此代码复制到你的CSS文件中。
 * 2. 你的HTML中用 <details> 标签包裹内容即可自动生效。
 * 3. 你可以修改下面的 --cute-pink-theme-color 和 --text-color 变量来轻松更换主题颜色。
 */

/* == 变量定义：在这里轻松修改颜色和字体 == */
:root {
  --cute-pink-theme-color: #f7d9e3; /* 主题粉色，用于背景和边框 */
  --cute-pink-accent-color: #f2a2c0; /* 点缀粉色，用于悬停和焦点 */
  --cute-pink-bg-color: #fff6f9;    /* 内容区域的背景色 */
  --text-color: #583c47;            /* 主要文字颜色，深玫瑰色，在白色和淡色背景上很清晰 */
  --border-radius-main: 12px;       /* 主要圆角大小 */
  --border-radius-small: 8px;       /* 内部小圆角大小 */
}

/* == 折叠栏整体容器 <details> == */
details {
  /* 整体轮廓和间距 */
  margin: 1.5em 0;
  border: 2px solid var(--cute-pink-theme-color);
  border-radius: var(--border-radius-main);
  background-color: var(--cute-pink-bg-color);
  box-shadow: 0 4px 12px rgba(231, 180, 200, 0.3); /* 可爱的粉色阴影 */
  transition: all 0.3s ease-in-out;
  overflow: hidden; /* 防止内部元素溢出圆角 */
}

/* 展开时的样式 */
details[open] {
  box-shadow: 0 6px 16px rgba(231, 180, 200, 0.5);
}

/* == 折叠栏标题 <summary> == */
details summary {
  /* 布局和外观 */
  padding: 12px 20px;
  background-color: var(--cute-pink-theme-color);
  color: var(--text-color);
  font-weight: bold;
  cursor: pointer;
  list-style: none; /* 移除默认的三角箭头 */
  position: relative;
  transition: background-color 0.2s ease;
  outline: none; /* 移除点击时的焦点框 */
}

/* 鼠标悬停在标题上时的效果 */
details summary:hover {
  background-color: var(--cute-pink-accent-color);
}

/* 自定义展开/折叠的图标 */
details summary::before {
  content: '🎀'; /* 用可爱的蝴蝶结作为图标 */
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* 果冻一样的动画效果 */
}

/* 展开时，图标旋转 */
details[open] > summary::before {
  transform: translateY(-50%) rotate(90deg);
}

/* 调整标题文字位置，给图标留出空间 */
details summary {
  padding-left: 45px; 
}

/* == 折叠栏内部内容 == */
.details-content, /* 建议给details里的内容套一个div，方便控制 */
details > *:not(summary) { /* 如果不想加div，就用这个选择器 */
  padding: 20px;
  font-size: 1.2em; /* 按照要求设置字体大小 */
  color: var(--text-color);
  line-height: 1.6;
  border-top: 2px dashed var(--cute-pink-theme-color); /* 可爱的虚线分割 */
}


/* == 针对Markdown表格的特殊美化 == */

/* 表格容器，用于实现响应式滚动 */
details .table-container,
details div:has(> table) { /* 自动选择包含table的div */
  overflow-x: auto; /* 核心！在手机端内容超出时，允许水平滚动 */
  margin: 1em 0;
  border-radius: var(--border-radius-small);
  border: 1px solid var(--cute-pink-theme-color);
}

/* 表格主体 */
details table {
  width: 100%; /* 宽度自适应 */
  border-collapse: collapse; /* 合并边框 */
  min-width: 500px; /* 保证在宽屏下不会挤压得太厉害，可根据内容调整 */
  font-size: 0.9em; /* 相对父级缩小一点，让表格更紧凑 */
  background-color: #ffffff; /* 给表格一个白色背景，确保在任何背景下文字都清晰 */
  color: #333333; /* 使用深灰色文字，在白色背景上对比度高，即使在黑色背景的页面中，由于表格自身有白色背景，也能看清 */
}

/* 表头和表元格 */
details th,
details td {
  padding: 12px 15px;
  text-align: left;
  border: 1px solid var(--cute-pink-theme-color);
}

/* 表头 */
details th {
  background-color: var(--cute-pink-theme-color);
  color: var(--text-color);
  font-weight: bold;
}

/* 表格行 - 斑马条纹 */
details tbody tr:nth-of-type(even) {
  background-color: var(--cute-pink-bg-color); /* 偶数行加个淡淡的粉色背景 */
}

details tbody tr:hover {
  background-color: var(--cute-pink-accent-color) !important; /* 鼠标悬停高亮 */
  color: #fff;
}














/* --- 可爱粉色风格 - 界面组件美化 by NPC --- */

/* 
 * 核心：颜色和圆角变量
 * 在这里修改，所有组件的风格都会一起改变哦！
 */
:root {
  --cute-pink-theme-color: #f7d9e3; /* 主题粉色，用于背景和边框 */
  --cute-pink-accent-color: #f2a2c0; /* 点缀粉色，用于悬停和焦点 */
  --cute-pink-bg-color: #fff6f9;    /* 内容区域的背景色 */
  --text-color: #583c47;            /* 主要文字颜色，深玫瑰色 */
  --border-radius-main: 12px;       /* 主要圆角大小 */
  --border-radius-small: 8px;       /* 内部小圆角大小 */
}



/* 
 * ---------------------------------
 *   模块二：平台按钮美化
 * ---------------------------------
 */
/* "mod、流式、评论、回到底部" 等按钮 */
.flex.items-center.gap-2.pb-2 > button {
    background: var(--cute-pink-theme-color) !important; /* 主题粉色背景 */
    color: var(--text-color) !important;                 /* 深玫瑰色文字 */
    border: 2px solid var(--cute-pink-theme-color) !important;
    border-radius: var(--border-radius-small) !important;/* 小圆角 */
    box-shadow: 0 2px 5px rgba(231, 180, 200, 0.6) !important; /* 更精致的小阴影 */
    font-weight: bold !important;
    text-transform: none !important;
    transition: all 0.2s ease-in-out !important;         /* 动画过渡更平滑 */
    padding: 6px 16px !important;
    transform: translateY(0); /* 初始化位置 */
}
/* 按钮悬停效果 - “轻盈上浮” */
.flex.items-center.gap-2.pb-2 > button:hover {
    background: var(--cute-pink-accent-color) !important; /* 悬停时使用更艳丽的点缀粉色 */
    color: #fff !important;                              /* 文字变白，对比更清晰 */
    transform: translateY(-2px) !important;              /* 按钮轻微上浮 */
    box-shadow: 0 4px 8px rgba(231, 180, 200, 0.8) !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: 2px solid var(--cute-pink-theme-color) !important; /* 主题粉色边框 */
    border-radius: var(--border-radius-main) !important;   /* 可爱的大圆角 */
    color: var(--text-color) !important;                   /* 深玫瑰色文字 */
    box-shadow: none !important; /* 移除原来的内阴影，让它更清爽 */
    transition: all 0.2s ease;
}
/* 输入框获取焦点时的效果 */
#ai-chat-input:focus {
    border-color: var(--cute-pink-accent-color) !important; /* 边框变为点缀粉色 */
    box-shadow: 0 0 8px rgba(242, 162, 192, 0.5) !important; /* 添加柔和的粉色外发光 */
    outline: none !important; /* 移除浏览器默认的焦点轮廓 */
}

/* 输入框容器透明化，突出输入框本身 */
#ai-chat-bottom-input { 
    background: transparent !important; 
    backdrop-filter: none !important; 
}