/* 
  《特工17》风格聊天框美化方案
  - 主题：深邃的夜色与高级灰，模拟特工的隐秘与专业。
  - 强调：高对比度，确保所有文本和操作按钮的清晰可读性。
  - 动态：平滑的过渡效果，提升交互体验。
*/

/* 统一聊天框及输入框背景 - 目标：模拟深邃夜色 */
/* 
  注意：您提供的选择器 `.bg-gray-100\/90.relative.inline-block` 
  可能指向聊天消息容器或输入框的父级。
  为了确保在主聊天区域和输入区域都生效，我们将其应用到更广泛的聊天背景上。
  如果需要区分输入和输出的背景，请提供更精确的选择器。
*/
div[class*="w-full"][class*="bg-white"][class*="bottom-0"], /* 评论区背景容器，确保移动端覆盖 */
#ai-chat-input, /* 主输入框 */
.bg-gray-100\/90.relative.inline-block /* 潜在的聊天消息容器 */
{
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important; /* 深邃的渐变背景 */
    border-radius: 8px !important; /* 圆角设计，增加现代感 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important; /* 增加深度感 */
    transition: all 0.3s ease !important; /* 平滑过渡 */
}

/* 评论区背景容器的特殊处理，避免布局冲突 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important; /* 确保评论区背景为深邃渐变 */
    box-shadow: none !important; /* 评论区背景不叠加阴影，避免影响内部元素 */
    border-radius: 0 !important; /* 评论区通常是填充底部，不设置圆角 */
}


/* 聊天框内的主要文本内容 - 确保在深色背景上清晰 */
.markdown-body,
#ai-chat-input, /* 输入框内的文字 */
.MuiTypography-body1, /* 通用文本 */
.text-sm.text-grey-600 span.font-bold, /* 用户名 */
.break-all /* 评论内容 */
{
    color: #e0e0e0 !important; /* 浅灰色文本，高对比度 */
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; /* 现代、清晰的字体 */
    line-height: 1.6 !important; /* 增加行高，提升阅读舒适度 */
    font-weight: normal !important; /* 保持正常字重，避免过度粗体 */
}

/* 输入框占位符样式 - 模拟低可见度信息 */
#ai-chat-input::placeholder {
    color: #616161 !important; /* 更深的灰色，与输入文本区分 */
    opacity: 0.7 !important; /* 轻微透明 */
    font-style: italic !important; /* 斜体，增加提示感 */
}

/* 输入框文字选中效果 */
#ai-chat-input::selection {
    background-color: #42a5f5 !important; /* 亮蓝色选中背景 */
    color: #ffffff !important; /* 白色选中文字 */
}

/* 顶部栏模型选择器 - 增加科技感 */
#ai-model-selector .group.flex.items-center {
    background-color: rgba(255, 255, 255, 0.08) !important; /* 半透明高级灰背景 */
    border-radius: 6px !important;
    padding: 4px 8px !important;
    transition: background-color 0.3s ease !important;
}

#ai-model-selector .group.flex.items-center:hover {
    background-color: rgba(255, 255, 255, 0.15) !important; /* 悬停时提亮 */
}

#ai-model-selector .truncate.text-\[13px\] {
    color: #cfd8dc !important; /* 模型名称，柔和的浅灰 */
    font-weight: 500 !important; /* 略微加粗 */
}

#ai-model-selector .shrink-0.flex.items-center svg {
    fill: #90a4ae !important; /* 下拉箭头图标，中性灰 */
}

/* 顶部栏其他图标按钮 (历史记录、音乐、设置) - 统一风格 */
.sticky.w-full.top-0 svg,
#header-setting-button svg {
    fill: #90a4ae !important; /* 图标统一为中性灰 */
    transition: fill 0.3s ease, transform 0.3s ease !important;
}

.sticky.w-full.top-0 svg:hover,
#header-setting-button svg:hover {
    fill: #ffffff !important; /* 悬停时变为白色 */
    transform: scale(1.1); /* 略微放大 */
}

/* 按钮栏 - 增加层次感和交互反馈 */
#ai-mod-button2 button.MuiButton-root {
    background-color: rgba(255, 255, 255, 0.05) !important; /* 半透明背景 */
    color: #bdbdbd !important; /* 按钮文字颜色 */
    border-radius: 5px !important;
    padding: 6px 12px !important;
    margin: 0 4px !important;
    transition: all 0.3s ease !important;
}

#ai-mod-button2 button.MuiButton-root:hover {
    background-color: rgba(255, 255, 255, 0.15) !important; /* 悬停提亮 */
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important; /* 悬停时添加阴影 */
}

#ai-mod-button2 button.MuiButton-root svg {
    fill: #bdbdbd !important; /* 按钮图标颜色 */
    transition: fill 0.3s ease !important;
}

#ai-mod-button2 button.MuiButton-root:hover svg {
    fill: #ffffff !important; /* 悬停时图标变白 */
}

/* 分页栏 - 仅允许颜色和纯视觉样式修改，禁止布局 */
.MuiPaginationItem-root {
    color: #bdbdbd !important; /* 分页按钮文字颜色 */
    background-color: rgba(255, 255, 255, 0.05) !important; /* 分页按钮背景 */
    border-radius: 4px !important;
    margin: 0 2px !important;
    transition: all 0.3s ease !important;
}

.MuiPaginationItem-root:not(.Mui-selected):not(.Mui-disabled):hover {
    background-color: rgba(255, 255, 255, 0.15) !important; /* 悬停提亮 */
    color: #ffffff !important;
}

.MuiPaginationItem-root.Mui-selected {
    background-color: #42a5f5 !important; /* 选中状态的亮蓝色 */
    color: #ffffff !important;
    font-weight: bold !important;
}

.MuiPaginationItem-root.Mui-disabled {
    color: #424242 !important; /* 禁用状态的深灰 */
    background-color: rgba(255, 255, 255, 0.02) !important; /* 极浅背景 */
}

.MuiPaginationItem-icon {
    fill: #90a4ae !important; /* 分页箭头图标 */
}

.MuiPaginationItem-root.Mui-selected .MuiPaginationItem-icon {
    fill: #ffffff !important; /* 选中状态下箭头图标变白 */
}

/* 评论区 - 保持深邃夜色主题 */

/* 评论区顶部标题 */
div.text-lg.font-bold {
    color: #e0e0e0 !important; /* 标题颜色 */
    font-family: 'Segoe UI', 'Roboto', sans-serif !important;
}

/* 个人评分文字 */
p.MuiTypography-body1.text-grey-600 {
    color: #bdbdbd !important; /* 评分文字颜色 */
}

/* 评分星星 */
span.MuiRating-iconEmpty svg,
span.MuiRating-iconFilled svg {
    fill: #fbc02d !important; /* 星星颜色，金色/黄色 */
    transition: fill 0.3s ease !important;
}

/* 评分数字 */
span.text-orange-500 {
    color: #fbc02d !important; /* 评分数字颜色，与星星一致 */
}

/* 输入框容器 (评论区) */
div.flex.flex-col.border-gray-200 {
    border-color: #37474f !important; /* 深灰边框 */
    background-color: rgba(255, 255, 255, 0.05) !important; /* 微妙的背景 */
    border-radius: 6px !important;
    padding: 10px !important;
}

/* 评论区输入框 */
textarea.rc-textarea {
    background: transparent !important; /* 背景透明，继承父容器 */
    color: #e0e0e0 !important; /* 输入文字颜色 */
    font-family: 'Segoe UI', 'Roboto', sans-serif !important;
    caret-color: #42a5f5 !important; /* 输入光标颜色 */
}

/* 评论区输入字数统计 */
div.bg-gray-100.text-gray-500 {
    color: #757575 !important; /* 字数统计颜色 */
    background: transparent !important; /* 背景透明 */
    font-family: 'Roboto', sans-serif !important;
}

/* 发送评论按钮 */
div.cursor-pointer.group.flex.items-center.justify-center {
    background-color: #42a5f5 !important; /* 亮蓝色按钮背景 */
    border-radius: 50% !important; /* 圆形按钮 */
    width: 36px !important;
    height: 36px !important;
    transition: background-color 0.3s ease, transform 0.3s ease !important;
}

div.cursor-pointer.group.flex.items-center.justify-center:hover {
    background-color: #2979ff !important; /* 悬停时更深的亮蓝色 */
    transform: scale(1.1); /* 放大效果 */
}

/* 发送评论按钮的图标 */
div[data-state="closed"] svg[data-icon="Send03"] {
    fill: #ffffff !important; /* 白色图标 */
}

/* 分割线 */
div.style_divider__mW0YX {
    background-color: #37474f !important; /* 深灰分割线 */
}

/* 排序按钮 (通用) */
button.MuiButton-containedPrimary,
button.MuiButton-outlinedPrimary {
    border-radius: 5px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

/* 排序按钮 (已选中) */
button.MuiButton-containedPrimary {
    background-color: #42a5f5 !important; /* 亮蓝色 */
    color: #ffffff !important;
}

/* 排序按钮 (未选中) */
button.MuiButton-outlinedPrimary {
    color: #bdbdbd !important; /* 浅灰色文字 */
    border-color: #42a5f5 !important; /* 亮蓝色边框 */
}

button.MuiButton-outlinedPrimary:hover {
    background-color: rgba(66, 165, 245, 0.1) !important; /* 悬停时添加微弱蓝色背景 */
    color: #ffffff !important;
}

/* 评论列表容器 */
div.p-3.overflow-y-auto {
    background-color: transparent !important; /* 保持透明，继承主背景 */
}

/* 评论项 */
div.group.ml-0 {
    background-color: rgba(255, 255, 255, 0.03) !important; /* 微妙的背景，区分评论 */
    border-radius: 6px !important;
    padding: 12px !important;
    margin-bottom: 10px !important; /* 评论间距 */
    transition: background-color 0.3s ease !important;
}

div.group.ml-0:hover {
    background-color: rgba(255, 255, 255, 0.08) !important; /* 悬停时提亮 */
}

/* 用户头像 */
div.group img.rounded-full {
    border: 2px solid #42a5f5 !important; /* 亮蓝色边框 */
    box-shadow: 0 0 8px rgba(66, 165, 245, 0.4) !important; /* 发光效果 */
}

/* 用户名 */
div.text-sm.text-grey-600 span.font-bold {
    color: #e0e0e0 !important; /* 用户名颜色 */
}

/* "（你）" 标签 */
span.text-\[10px\] {
    color: #fbc02d !important; /* 强调你自己的身份，使用金色 */
    font-weight: bold !important;
    margin-left: 4px !important;
}

/* 评论内容 */
div.break-all {
    color: #e0e0e0 !important; /* 评论内容颜色 */
    font-family: 'Segoe UI', 'Roboto', sans-serif !important;
    margin-top: 8px !important;
}

/* 时间戳 */
div.text-xs.text-grey-600 {
    color: #757575 !important; /* 时间戳颜色 */
    font-family: 'Roboto', sans-serif !important;
}

/* 点赞按钮 */
button.text-gray-400 {
    color: #90a4ae !important; /* 点赞按钮颜色 */
    transition: color 0.3s ease, transform 0.3s ease !important;
}

button.text-gray-400:hover {
    color: #ffffff !important; /* 悬停变白 */
    transform: scale(1.1); /* 放大 */
}

/* 点赞按钮的图标 */
button.text-gray-400 svg {
    fill: #90a4ae !important;
}

button.text-gray-400:hover svg {
    fill: #ffffff !important;
}

/* 回复 (无边框的两个字) */
span.cursor-pointer {
    color: #42a5f5 !important; /* 亮蓝色回复链接 */
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
}

span.cursor-pointer:hover {
    color: #2979ff !important; /* 悬停时更深的亮蓝色 */
    text-decoration: underline !important; /* 添加下划线 */
}

/* 回复区域边框 */
div.ml-8.border-l {
    border-left-color: #37474f !important; /* 深灰边框 */
}

/* 历史记录角标 (仅移动端) */
.sticky.w-full.top-0 span.MuiBadge-dot.md\:hidden {
    background-color: #fbc02d !important; /* 金色角标 */
}
#ai-chat-input:focus {
    outline: none !important; /* 移除默认轮廓 */
    box-shadow: 0 0 15px rgba(66, 165, 245, 0.6), /* 亮蓝色外发光 */
                inset 0 0 5px rgba(0, 0, 0, 0.3); /* 轻微内阴影增加深度 */
}
button,
.cursor-pointer,
#ai-model-selector .group.flex.items-center,
#ai-mod-button2 button.MuiButton-root,
.MuiPaginationItem-root,
div.cursor-pointer.group.flex.items-center.justify-center,
span.cursor-pointer
{
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%2342a5f5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>') 12 12, auto !important; /* 自定义光标，类似笔尖 */
}