/* 修复后的 AI 对话气泡组件样式 */
ai {
  display: block;
  background: linear-gradient(145deg, rgba(26, 20, 35, 0.95), rgba(15, 15, 20, 0.98));
  border: 1px solid rgba(218, 165, 32, 0.4); /* 金色边框 */
  border-radius: 12px;
  padding: 12px;
  /* 金色渐变文字（整体默认） */
  color: #e4c580;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.6;
  max-width: 100%;
  margin: 10px 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}

/* 头部区域 */
ai h {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 12px;
  /* 头部标签使用更亮的金色渐变 */
  background: linear-gradient(135deg, #f3e5ab, #d4af37);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  border-bottom: 1px solid rgba(218, 165, 32, 0.3);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

ai f {
  display: inline-block;
  white-space: nowrap;
}

/* 正文内容 - 华丽金色渐变 */
ai art {
  display: block;
  font-size: 16px;
  background: linear-gradient(135deg, #f9efc0, #e4c580, #d4af37);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin: 16px 0;
  padding: 0 4px;
  text-align: justify;
}

ai art p {
  margin-bottom: 14px;
}

/* details 容器 */
ai details {
  margin-top: 10px;
  border: 1px solid rgba(218, 165, 32, 0.3);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(40, 30, 50, 0.4);
}

ai details[t="st"] {
  border: 1px solid rgba(218, 165, 32, 0.7);
  box-shadow: 0 0 12px rgba(218, 165, 32, 0.2);
}

ai summary {
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(80, 60, 40, 0.8), rgba(30, 25, 35, 0.6));
  cursor: pointer;
  font-weight: bold;
  /* 总结文字金色渐变 */
  background: linear-gradient(135deg, #f5e6b0, #d4af37);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  list-style: none;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

ai summary::-webkit-details-marker {
  display: none;
}

ai section {
  padding: 12px;
  border-bottom: 1px dashed rgba(218, 165, 32, 0.25);
}

ai section:last-child {
  border-bottom: none;
}

ai n {
  display: block;
  font-size: 17px;
  background: linear-gradient(135deg, #fff5df, #e8c97a);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-weight: bold;
  margin-bottom: 6px;
  border-left: 3px solid #d4af37;
  padding-left: 8px;
}

ai r {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 13px;
  margin-bottom: 6px;
  color: #d9bc7a;
}

ai k {
  color: #dbbf6e;
  opacity: 0.95;
}

ai v {
  background: linear-gradient(135deg, #f5e5bb, #dfc26a);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

ai d {
  display: block;
  font-size: 13px;
  margin-top: 6px;
  color: #c9ae66;
}

ai d b {
  color: #e5c46e;
  margin-right: 4px;
}

ai grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.25);
  padding: 10px;
  border-radius: 6px;
}

ai grid v {
  font-size: 12px;
  line-height: 1.4;
  display: block;
  color: #cfb771;
}

ai grid v b {
  background: linear-gradient(135deg, #ffb347, #ff8c00);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  display: block;
  font-size: 11px;
  margin-bottom: 2px;
}

/* 性别统计特殊块 */
ai [t="sex-count"] {
  background: rgba(255, 140, 0, 0.12);
  padding: 8px;
  border-radius: 6px;
  margin-top: 10px;
  border: 1px solid rgba(218, 165, 32, 0.3);
  color: #e5bf6e;
}

ai [t="inner"] {
  font-style: italic;
  background: rgba(218, 165, 32, 0.08);
  padding: 8px;
  border-radius: 4px;
  color: #cfb15e;
}

ai [t="cog"] summary {
  background: linear-gradient(135deg, #b89f55, #9e813e);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

ai [t="act"] summary {
  background: linear-gradient(135deg, #ffb45e, #ff9933);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

ai [t="act"] {
  border-color: rgba(255, 140, 60, 0.5);
}

/* 表格样式 */
ai table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 8px 0;
}

ai th {
  text-align: left;
  background: linear-gradient(135deg, #e9d49c, #cfaa4a);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  border-bottom: 1px solid rgba(218, 165, 32, 0.4);
  padding: 4px;
}

ai td {
  padding: 6px 4px;
  border-bottom: 1px solid rgba(218, 165, 32, 0.15);
  color: #d8bc76;
}

/* --- 1. 顶部栏 (Header) 美化：磨砂玻璃与渐变边框 --- */
.sticky.w-full.top-0.flex.items-center {
    background: rgba(15, 17, 26, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(59, 130, 246, 0.3) !important; /* 蓝色边框 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* 模型选择器美化：改为方形直角 */
#ai-model-selector .group.flex.items-center {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 0px !important; /* 椭圆形改为方形 */
    padding: 2px 12px !important;
    transition: all 0.3s ease !important;
}

#ai-model-selector .group.flex.items-center:hover {
    background: rgba(59, 130, 246, 0.2) !important; /* 蓝色悬停 */
    border-color: #3b82f6 !important; /* 蓝色边框 */
}

#ai-model-selector .truncate.text-\[13px\] {
    color: #e2e8f0 !important;
    font-weight: 600 !important;
}

/* 顶部图标色彩统一：改为蓝色 */
.sticky.w-full.top-0 svg, 
#header-setting-button svg {
    color: #60a5fa !important; /* 蓝色调 */
    filter: drop-shadow(0 0 2px rgba(96, 165, 250, 0.5)) !important;
}

/* --- 2. 底部栏 (Input Bar) 美化：悬浮呼吸感 --- */
.bg-gradient-to-t {
    background: linear-gradient(to top, rgba(15, 17, 26, 1), rgba(15, 17, 26, 0)) !important;
}

#ai-chat-bottom-input {
    background: rgba(31, 41, 55, 0.95) !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important; /* 蓝色边框 */
    border-radius: 0px !important; /* 椭圆形改为方形 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    transition: border-color 0.3s ease !important;
}

#ai-chat-bottom-input:focus-within {
    border-color: #3b82f6 !important; /* 蓝色聚焦 */
}

#ai-chat-input {
    color: #000000 !important; /* 输入栏字体改为黑色 */
    font-family: ui-sans-serif, system-ui, sans-serif !important;
}

#ai-chat-input::placeholder {
    color: #9ca3af !important;
}

#ai-chat-input::selection {
    background: rgba(59, 130, 246, 0.5) !important; /* 蓝色选中 */
}

/* --- 3. 按钮栏 (Mod & Stream Buttons) 美化 --- */
#ai-mod-button2 button.MuiButton-root {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; /* 蓝色渐变 */
    border: none !important;
    border-radius: 0px !important; /* 方形直角 */
    color: white !important;
    font-weight: bold !important;
    text-transform: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#ai-mod-button2 button.MuiButton-root:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.6) !important; /* 蓝色光晕 */
    filter: brightness(1.1) !important;
}

/* 开场白/滑块选择器美化：改为方形 */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
    background: #2d3748 !important;
    border: 1px solid #4a5568 !important;
    border-radius: 0px !important; /* 方形 */
}

div.flex.items-center.h-9.cursor-pointer.group svg {
    color: #60a5fa !important; /* 蓝色图标 */
}

/* --- 4. 分页栏 (Pagination) 美化 --- */
.MuiPaginationItem-root {
    color: #cbd5e0 !important;
    border-radius: 0px !important; /* 方形 */
    transition: all 0.3s !important;
}

.MuiPaginationItem-root.Mui-selected {
    background: #3b82f6 !important; /* 蓝色选中 */
    color: white !important;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5) !important;
}

.MuiPaginationItem-root:hover:not(.Mui-selected) {
    background: rgba(59, 130, 246, 0.2) !important; /* 蓝色悬停 */
}

.MuiStack-root.css-1uwir8f .MuiBox-root {
    color: #9ca3af !important;
}

.MuiInputBase-input {
    color: #f3f4f6 !important;
    text-align: center !important;
}

/* --- 5. 评论区 (Comments Section) 全面美化 --- */
/* 主背景强制覆盖 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background: #111827 !important;
    color: #e5e7eb !important;
}

/* 标题与文字 */
div.text-lg.font-bold {
    color: #f9fafb !important;
    border-left: 4px solid #3b82f6 !important; /* 蓝色左边框 */
    padding-left: 12px !important;
}

p.MuiTypography-body1.text-grey-600 {
    color: #9ca3af !important;
}

/* 星星评分 */
span.MuiRating-iconFilled svg {
    color: #fbbf24 !important;
    filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.4)) !important;
}

span.MuiRating-iconEmpty svg {
    color: #4b5563 !important;
}

/* 评论输入框：改为方形 */
div.flex.flex-col.border-gray-200 {
    border-color: #374151 !important;
    background: #1f2937 !important;
    border-radius: 0px !important; /* 方形 */
    overflow: hidden !important;
}

textarea.rc-textarea {
    background: transparent !important;
    color: #ffffff !important;
    padding: 12px !important;
}

div.bg-gray-100.text-gray-500 {
    background: #374151 !important;
    color: #9ca3af !important;
}

/* 发送按钮 */
div.cursor-pointer.group.flex.items-center.justify-center {
    transition: transform 0.2s ease !important;
}

div.cursor-pointer.group.flex.items-center.justify-center:hover svg {
    color: #3b82f6 !important; /* 蓝色悬停 */
    transform: scale(1.1) rotate(-10deg) !important;
}

/* 评论项设计 */
div.group.ml-0 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 16px 0 !important;
}

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

div.break-all {
    color: #d1d5db !important;
    line-height: 1.6 !important;
    margin-top: 4px !important;
}

/* 排序按钮 */
button.MuiButton-containedPrimary {
    background: #3b82f6 !important; /* 蓝色主按钮 */
}

button.MuiButton-outlinedPrimary {
    border-color: #3b82f6 !important; /* 蓝色边框 */
    color: #60a5fa !important; /* 蓝色文字 */
}

/* 时间戳与回复 */
div.text-xs.text-grey-600 {
    color: #6b7280 !important;
}

span.cursor-pointer {
    color: #3b82f6 !important; /* 蓝色链接 */
    font-weight: bold !important;
}

span.cursor-pointer:hover {
    text-decoration: underline !important;
}

/* 状态栏容器通用样式 */
details, article, .status-container {
  margin-bottom: 1.2em;
}

/* 所有状态栏卡片通用样式 - 半透明蓝色系，不遮挡文字 */
details {
  background: rgba(240, 248, 255, 0.92);  /* 极浅蓝紫色，半透明 */
  border-left: 6px solid #3b82f6;          /* 醒目的蓝色竖条 */
  border-radius: 12px;
  padding: 12px 16px;
  margin: 16px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(2px);              /* 轻微磨砂，增强可读性 */
  transition: all 0.2s ease;
}

/* 鼠标悬停时略微加深边框，提升交互感（不影响阅读） */
details:hover {
  border-left-color: #1e40af;
  background: rgba(240, 248, 255, 0.96);
}

/* summary 标题样式 - 左对齐，加粗，与正文区分 */
summary {
  font-weight: 600;
  color: #1e3a8a;                         /* 深蓝色文字 */
  cursor: pointer;
  margin-bottom: 8px;
  font-size: 1.05em;
  letter-spacing: 0.3px;
  /* 移除 display: inline-block，让 summary 占满整行宽度 */
  display: block;
  /* 添加自定义三角标样式（可选，替代原生的窄三角） */
  list-style: none;  /* 移除默认三角 */
}

/* 自定义三角标样式 - 让点击区域包含整个标题 */
summary::-webkit-details-marker {
  display: none;  /* 隐藏默认三角 */
}

/* 自定义伪元素三角标 */
summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 8px;
  font-size: 0.9em;
  transition: transform 0.2s ease;
  color: #3b82f6;
}

/* 展开时三角标旋转 */
details[open] summary::before {
  transform: rotate(90deg);
}

/* 确保 summary 内的所有内容都能触发点击 */
summary {
  width: 100%;
  background: transparent;
  padding: 0;
  margin: 0 0 8px 0;
}

/* 让 summary 内的任何区域都可点击（原生已支持，这里是增强） */
summary > * {
  pointer-events: none;  /* 让内部元素不拦截点击事件，全部由 summary 处理 */
}

/* 内部的markdown代码块样式：保持干净背景，左对齐 */
details pre, details code, details .markdown, details .md {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.9em;
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  color: #1f2937;
  margin: 8px 0;
}

/* 主角信息、互动角色面板等内部区块再次确保左对齐 */
details p, details div, details ul, details ol, details .info-row {
  text-align: left;
  margin-left: 0;
  padding-left: 0;
}

/* 表格风格（如果有用表格展示状态） */
details table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255,255,255,0.5);
  border-radius: 10px;
  overflow: hidden;
}

details th, details td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid #cbd5e1;
}

/* 角色面板里的hr分割线 */
details hr {
  margin: 12px 0;
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, #3b82f6, #93c5fd, #3b82f6);
}

/* 行动推荐按钮区也左对齐，圆润风格 */
.action-buttons, .行动推荐 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
  margin-top: 16px;
}

.action-buttons button, .行动推荐 button {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  padding: 6px 14px;
  border-radius: 40px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}

.action-buttons button:hover {
  background: #dbeafe;
  border-color: #3b82f6;
}

/* 手机消息面板特殊微调 */
details .魔导手机, .魔导手机 pre {
  background: rgba(255, 255, 255, 0.6);
}

/* 我的妖姬板块内的能力列表保持简洁左对齐 */
details ul, details ol {
  padding-left: 20px;
}
details li {
  margin-bottom: 4px;
}

/* 保证正文 article 不受干扰，保持原有背景 */
article {
  background: transparent;
  line-height: 1.6;
  padding: 8px 0;
}

/* 标题栏等附加样式 */
.status-label {
  font-weight: 600;
  color: #2563eb;
  display: inline-block;
  min-width: 100px;
}

/* 确保各个备注块左对齐，无额外缩进 */
summary + * {
  margin-top: 8px;
}

/* ========= 14. 修复段落间距与状态栏格式丢失问题 ========= */
.markdown-body p,
.prose p,
[class*="markdown"] p,
div:not([class*="code"]) > p {
    margin-bottom: 0.85em !important;
    margin-top: 0.25em !important;
    line-height: 1.7 !important;
}

.message-content > * + *,
.chat-message > * + *,
.markdown-body > * + * {
    margin-top: 0.5em !important;
}

.markdown-body li,
.prose li {
    margin-bottom: 0.3em !important;
}

.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
    margin-top: 1.2em !important;
    margin-bottom: 0.5em !important;
}