ai {
  display: block;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #3d4451;
  background: linear-gradient(135deg, #fdfcfa 0%, #fff5f7 50%, #f0fdf4 100%);
  padding: 14px 12px;
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(255, 158, 181, 0.08), 0 2px 8px rgba(125, 211, 160, 0.06);
  position: relative;
  overflow: hidden;
}

ai::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(255, 216, 107, 0.25), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

ai::after {
  content: "";
  position: absolute;
  bottom: -30px; left: -30px;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(125, 211, 160, 0.2), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* ===== 顶部头条 ===== */
ai hd {
  display: block;
  position: relative;
  background: linear-gradient(95deg, #ff9eb5, #ffb8c8 40%, #7dd3a0 100%);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 16px 10px 22px;
  border-radius: 12px;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
  box-shadow: 0 3px 12px rgba(255, 158, 181, 0.3);
  text-shadow: 0 1px 2px rgba(0,0,0,0.08);
  overflow: hidden;
}

ai hd::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 14px;
  background-image: radial-gradient(circle at 7px 6px, #fdfcfa 2.5px, transparent 3px),
                    radial-gradient(circle at 7px 18px, #fdfcfa 2.5px, transparent 3px),
                    radial-gradient(circle at 7px 30px, #fdfcfa 2.5px, transparent 3px),
                    radial-gradient(circle at 7px 42px, #fdfcfa 2.5px, transparent 3px);
}

ai hd::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shine 4s ease-in-out infinite;
}

@keyframes shine {
  0%, 100% { left: -50%; }
  50% { left: 120%; }
}

/* ===== 正文 ===== */
ai article {
  display: block;
  background: #fffdf9;
  border-radius: 14px;
  padding: 14px 16px 14px 18px;
  margin-bottom: 12px;
  position: relative;
  border-left: 3px solid #ffd86b;
  box-shadow: inset 0 0 0 1px rgba(255, 216, 107, 0.15);
}

ai article::before {
  content: "";
  position: absolute;
  top: 6px; left: 8px;
  font-size: 36px;
  color: rgba(255, 158, 181, 0.25);
  font-family: Georgia, serif;
  line-height: 1;
}

ai article p {
  margin: 0 0 6px 0;
  color: #4a5160;
  font-size: 14.5px;
  line-height: 1.8;
}

ai article p:last-child { margin-bottom: 0; }

/* ===== Details / Summary ===== */
ai details {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  border-radius: 14px;
  margin-bottom: 10px;
  padding: 0;
  box-shadow: 0 2px 8px rgba(125, 211, 160, 0.08);
  border: 1px solid rgba(255, 158, 181, 0.12);
  overflow: hidden;
  transition: all 0.3s ease;
}

ai details[open] {
  box-shadow: 0 4px 16px rgba(255, 158, 181, 0.12);
}

ai summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(95deg, #7dd3a0, #a3e4be);
  position: relative;
  display: flex;
  align-items: center;
  user-select: none;
  transition: all 0.25s;
}

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

ai summary::after {
  content: "▾";
  margin-left: auto;
  font-size: 14px;
  transition: transform 0.3s;
  opacity: 0.85;
}

ai details[open] summary::after { transform: rotate(180deg); }

ai summary:hover {
  filter: brightness(1.05);
  letter-spacing: 0.5px;
}

/* 不同summary不同色调 */
ai details:nth-of-type(1) summary { background: linear-gradient(95deg, #7dd3a0, #a3e4be); }
ai details:nth-of-type(2) summary { background: linear-gradient(95deg, #ffb8c8, #ff9eb5); }
ai details:nth-of-type(3) summary { background: linear-gradient(95deg, #8ec5fc, #a8d8ff); }
ai details:nth-of-type(4) summary { background: linear-gradient(95deg, #ff9eb5, #ffc4a3); }
ai details:nth-of-type(5) summary { background: linear-gradient(95deg, #c5a3ff, #d4b8ff); }
ai details:nth-of-type(6) summary { background: linear-gradient(95deg, #ffd86b, #ffc46b); }

/* ===== 内容区 ===== */
ai details p {
  display: block;
  margin: 8px 10px;
  padding: 8px 10px 8px 14px;
  background: #fdfcfa;
  border-radius: 10px;
  position: relative;
  font-size: 13.5px;
  border-left: 3px solid #ffd86b;
}

ai details p[t]::before {
  content: attr(t);
  display: inline-block;
  background: linear-gradient(95deg, #ff9eb5, #ffc4a3);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 8px;
  margin-right: 8px;
  letter-spacing: 0.3px;
  vertical-align: 2px;
  box-shadow: 0 2px 4px rgba(255, 158, 181, 0.25);
}

/* ===== 主角名 f ===== */
ai f {
  display: inline-block;
  font-size: 16px;
  font-weight: 800;
  background: linear-gradient(95deg, #ff9eb5, #7dd3a0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-right: 8px;
  position: relative;
  padding-right: 4px;
}

ai f::after {
  content: "✦";
  font-size: 11px;
  color: #ffd86b;
  margin-left: 4px;
  -webkit-text-fill-color: #ffd86b;
}

/* ===== 数据行 d ===== */
ai d {
  display: block;
  padding: 4px 0 4px 4px;
  margin: 2px 0;
  font-size: 13.5px;
  color: #4a5160;
  border-bottom: 1px dashed rgba(255, 158, 181, 0.2);
  transition: all 0.2s;
}

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

ai d:hover {
  background: linear-gradient(90deg, rgba(255, 216, 107, 0.12), transparent);
  padding-left: 8px;
  border-radius: 4px;
}

/* f 后的 d 行内显示 */
ai f + d {
  display: inline;
  border: none;
  color: #8a92a0;
  font-size: 12.5px;
  background: rgba(125, 211, 160, 0.1);
  padding: 2px 8px;
  border-radius: 6px;
}

/* ===== 进度条 bar ===== */
ai bar {
  display: inline-block;
  vertical-align: middle;
  width: 110px;
  height: 10px;
  background: #f0e8e2;
  border-radius: 6px;
  margin: 0 6px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

ai bar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: attr(v %, 50%);
  background: linear-gradient(90deg, #7dd3a0, #a3e4be);
  border-radius: 6px;
  transition: width 0.6s ease;
}

/* 由于 attr() 对 width 兼容性差，用 inline width 备用方案 + 数据属性梯度 */
ai bar[v]::before { width: 50%; }
ai bar[v="0"]::before, ai bar[v="1"]::before, ai bar[v="2"]::before, ai bar[v="3"]::before, ai bar[v="4"]::before, ai bar[v="5"]::before, ai bar[v="6"]::before, ai bar[v="7"]::before, ai bar[v="8"]::before, ai bar[v="9"]::before { width: 8%; }
ai bar[v^="1"]::before { width: 15%; }
ai bar[v^="2"]::before { width: 25%; }
ai bar[v^="3"]::before { width: 35%; }
ai bar[v^="4"]::before { width: 45%; }
ai bar[v^="5"]::before { width: 55%; }
ai bar[v^="6"]::before { width: 65%; }
ai bar[v^="7"]::before { width: 75%; }
ai bar[v^="8"]::before { width: 85%; }
ai bar[v^="9"]::before { width: 95%; }
ai bar[v="100"]::before { width: 100%; }

ai bar[c="p"]::before {
  background: linear-gradient(90deg, #ff9eb5, #ffc4a3);
}

ai bar::after {
  content: "";
  position: absolute;
  top: 0; left: -30%;
  width: 30%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: barShine 2.5s ease-in-out infinite;
}

@keyframes barShine {
  0%, 100% { left: -30%; }
  60%, 100% { left: 110%; }
}

/* ===== 行动推荐 - 按钮风格 ===== */
ai details:last-of-type p[t="选项"] d {
  display: block;
  background: linear-gradient(95deg, #fff5f7, #fffaeb);
  border: 1px solid rgba(255, 216, 107, 0.4);
  border-left: 3px solid #ffd86b;
  border-bottom: 1px solid rgba(255, 216, 107, 0.4);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 6px 0;
  font-weight: 600;
  color: #4a5160;
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
}

ai details:last-of-type p[t="选项"] d:hover {
  transform: translateX(4px);
  background: linear-gradient(95deg, #fff0f4, #fff3d6);
  box-shadow: 0 3px 10px rgba(255, 216, 107, 0.25);
  border-left-color: #ff9eb5;
}

ai details:last-of-type p[t="选项"] d::after {
  content: "›";
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  color: #ff9eb5;
  font-weight: 700;
  font-size: 16px;
  opacity: 0.6;
  transition: all 0.25s;
}

ai details:last-of-type p[t="选项"] d:hover::after {
  opacity: 1;
  right: 8px;
}

/* ===== 滚动条美化 ===== */
ai ::-webkit-scrollbar { width: 6px; height: 6px; }
ai ::-webkit-scrollbar-thumb { background: linear-gradient(#ff9eb5, #7dd3a0); border-radius: 3px; }

/* ===== 粉彩梦境 · 全局美化 ===== */

/* 1. 顶部栏 */
.sticky.w-full.top-0.flex.items-center {
    background: #fdfcfa !important;
    border-bottom: 2px solid #ff9eb5 !important;
    box-shadow: 0 2px 4px rgba(255, 158, 181, 0.12) !important;
}
#ai-model-selector .truncate.text-\[13px\] {
    color: #3d4451 !important;
    font-weight: 600;
}

/* 2. 开场白与按钮栏 */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
    background: #fdfcfa !important;
    border: 1px solid rgba(255, 158, 181, 0.25) !important;
}
#ai-mod-button2 button.MuiButton-root {
    background: linear-gradient(95deg, #ff9eb5, #ffb8c8) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
}
#ai-mod-button2 button.MuiButton-root:hover {
    background: linear-gradient(95deg, #7dd3a0, #a3e4be) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(125, 211, 160, 0.3) !important;
}

/* 3. 底部输入栏 */
#ai-chat-bottom-input {
    background: #fdfcfa !important;
    border-top: 1px solid rgba(255, 216, 107, 0.3) !important;
}
#ai-chat-input {
    background: #ffffff !important;
    border: 1px solid rgba(255, 158, 181, 0.35) !important;
    color: #3d4451 !important;
    border-radius: 12px !important;
}
#ai-chat-input::placeholder {
    color: #c4a9b0 !important;
}

/* 4. 分页栏 */
.MuiPaginationItem-root {
    color: #ff9eb5 !important;
}
.MuiPaginationItem-root.Mui-selected {
    background-color: #ff9eb5 !important;
    color: #ffffff !important;
}
.MuiInputBase-input {
    color: #3d4451 !important;
}

/* 5. 评论区 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background: #fdfcfa !important;
}
div.text-lg.font-bold {
    color: #3d4451 !important;
    border-left: 4px solid #ffd86b !important;
    padding-left: 10px !important;
}
span.MuiRating-iconEmpty svg {
    color: #e8d5da !important;
}
span.MuiRating-iconFilled svg {
    color: #ffd86b !important;
}
span.text-orange-500 {
    color: #ff9eb5 !important;
}
textarea.rc-textarea {
    background: #ffffff !important;
    border: 1px solid rgba(255, 158, 181, 0.3) !important;
    color: #3d4451 !important;
}
div.bg-gray-100.text-gray-500 {
    background: rgba(255, 245, 247, 0.6) !important;
    color: #a08c93 !important;
}
button.MuiButton-containedPrimary {
    background-color: #ff9eb5 !important;
}
button.MuiButton-outlinedPrimary {
    border-color: #ff9eb5 !important;
    color: #ff9eb5 !important;
}
div.text-sm.text-grey-600 span.font-bold {
    color: #3d4451 !important;
}
div.break-all {
    color: #5a5560 !important;
}
button.text-gray-400 svg {
    color: #d4b8c0 !important;
}
button.text-gray-400:hover svg {
    color: #ff9eb5 !important;
}

/* 移除顶部颜色条 */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* 移除默认加载动画 */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

/* 聊天框主体 */
.bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(135deg, #fdfcfa 0%, #fff5f7 50%, #f0fdf4 100%) !important;
    border: 1px solid rgba(255, 158, 181, 0.15) !important;
    border-left: 6px solid #ff9eb5 !important;
    border-radius: 4px 18px 18px 4px !important;
    box-shadow: 0 4px 20px rgba(255, 158, 181, 0.08), 0 2px 8px rgba(125, 211, 160, 0.06) !important;
    padding: 20px !important;
    isolation: isolate !important;
}

/* 文本内容 */
.markdown-body {
    color: #3d4451 !important;
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.8 !important;
    letter-spacing: 0.3px !important;
}

/* 底部附加元素 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #ff9eb5 !important;
    font-weight: bold !important;
}

/* 移动端适配 */
@media (max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block {
        border-left: 4px solid #ff9eb5 !important;
        padding: 15px !important;
    }
}