ai, ai * {
  box-sizing: border-box;
}
ai {
  --bg-panel: #fffcfd;
  --c-pink-light: #ffe3e8;
  --c-pink-main: #ffb7c5;
  --c-pink-dark: #d9778c;
  --c-text-main: #6b5b63;
  --c-text-sub: #9e8a93;
  display: block;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-text-main);
  text-align: left;
  word-break: break-word;
}
ai text {
  display: block;
  margin-bottom: 12px;
  padding: 0 4px;
}
ai details {
  background: var(--bg-panel);
  border: 1px solid var(--c-pink-light);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(255, 183, 197, 0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
ai details[open] {
  box-shadow: 0 6px 20px rgba(255, 183, 197, 0.25);
  border-color: var(--c-pink-main);
}
ai summary {
  background: linear-gradient(135deg, #fff0f3 0%, #ffe3e8 100%);
  padding: 12px 16px;
  font-weight: bold;
  color: var(--c-pink-dark);
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-bottom: 1px solid transparent;
  letter-spacing: 1px;
}
ai summary::-webkit-details-marker {
  display: none;
}
ai details[open] summary {
  border-bottom-color: #ffd1da;
}
ai summary:hover {
  background: linear-gradient(135deg, #ffe3e8 0%, #ffd1da 100%);
}
ai d {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 8px 12px;
  padding: 8px 10px 8px 14px;
  background: #ffffff;
  border-left: 4px solid var(--c-pink-light);
  border-radius: 4px 10px 10px 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
  font-size: 13px;
}
ai d::before {
  content: "✦ " attr(t);
  color: var(--c-text-sub);
  font-size: 12px;
  margin-right: 8px;
  font-weight: bold;
}
ai d[t="和好值"] {
  border-left-color: var(--c-pink-main);
  background: linear-gradient(90deg, #fffafb, #ffffff);
}
ai d[t="和好值"]::before {
  color: var(--c-pink-main);
}
ai b {
  font-weight: normal;
  color: var(--c-text-main);
}
ai b::after {
  content: " [" attr(p) "/120]";
  color: var(--c-pink-dark);
  font-family: "Comic Sans MS", monospace;
  font-weight: bold;
  margin-left: 4px;
}
ai e {
  color: var(--c-text-sub);
}
ai i {
  font-style: normal;
  color: var(--c-pink-dark);
  margin-left: 6px;
  background: #fff0f3;
  padding: 1px 6px;
  border-radius: 10px;
}
ai i::before {
  content: " ↬ 真心: ";
  color: #bfa5ac;
  font-size: 11px;
}
ai v {
  color: var(--c-text-main);
  border-bottom: 2px dotted var(--c-pink-main);
}
ai h {
  color: #fff;
  background: var(--c-pink-main);
  padding: 2px 8px;
  border-radius: 12px;
  box-shadow: 0 0 0 transparent;
  animation: soft-glow 3s infinite alternate;
}
ai m {
  display: block;
  margin: 10px 12px;
  padding: 10px 10px 10px 34px;
  position: relative;
  font-size: 13px;
  background: #ffffff;
  border: 1px solid #ffeaee;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(255, 183, 197, 0.08);
}
ai m::before {
  content: attr(k);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 24px;
  writing-mode: vertical-lr;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  border-radius: 7px 0 0 7px;
  letter-spacing: 2px;
}
ai m[k="浅"]::before {
  background: #fff0f3;
  color: var(--c-pink-main);
}
ai m[k="深"]::before {
  background: #ffe3e8;
  color: var(--c-pink-dark);
}

/* ================= 剧情抉择样式 ================= */
ai c {
  display: flex;
  align-items: center;
  margin: 8px 12px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px dashed var(--c-pink-main);
  border-radius: 8px;
  font-size: 13px;
  color: var(--c-text-main);
  transition: all 0.3s ease;
}
ai c::before {
  content: attr(n);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  background: var(--c-pink-light);
  color: var(--c-pink-dark);
  border-radius: 50%;
  font-weight: bold;
  font-size: 12px;
  margin-right: 10px;
  flex-shrink: 0;
}
ai c[n="自由"]::before {
  content: "✎";
  background: var(--c-pink-main);
  color: #ffffff;
}
@media (hover: hover) {
  ai c:hover {
    background: #fff0f3;
    border-style: solid;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(255, 183, 197, 0.3);
  }
}

/* ================= 记忆中枢样式 ================= */
ai details mt {
  display: block;
  margin: 12px 12px 6px 12px;
  font-weight: bold;
  color: var(--c-pink-dark);
  font-size: 13px;
  border-bottom: 1px dashed var(--c-pink-light);
  padding-bottom: 4px;
}
ai details mt:first-of-type {
  margin-top: 8px;
}
ai details p {
  display: block;
  margin: 4px 12px 4px 16px;
  font-size: 12px;
  color: var(--c-text-main);
  line-height: 1.6;
}

@keyframes soft-glow {
  0% { box-shadow: 0 0 0 transparent; background: var(--c-pink-main); }
  100% { box-shadow: 0 0 8px rgba(255, 183, 197, 0.6); background: var(--c-pink-dark); }
}

/* ================= 移动端专属自适应优化 ================= */
@media screen and (max-width: 600px) {
  ai details {
    margin-bottom: 10px;
    border-radius: 10px;
  }
  ai summary {
    padding: 10px 12px;
    font-size: 13px;
  }
  ai d, ai m, ai c {
    margin: 6px 8px; /* 缩小左右边距，让内容区更宽 */
  }
  ai d {
    padding: 8px 8px 8px 10px;
  }
  ai m {
    padding: 10px 10px 10px 28px; /* 缩小左侧文字留白 */
  }
  ai m::before {
    width: 20px;
    font-size: 11px;
  }
  ai c {
    padding: 8px 10px;
  }
  ai details mt {
    margin: 10px 8px 4px 8px;
  }
  ai details p {
    margin: 4px 8px 4px 12px;
  }
}
/* =========================================
   1. 隐藏多余的顶部颜色装饰条，保持精致感
========================================= */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* =========================================
   2. 统一聊天框主体美化：微微偏白的淡粉色
========================================= */
.bg-gray-100\/90.relative.inline-block {
    /* 微微偏白的淡粉色渐变 */
    background: linear-gradient(135deg, #FFF7F9 0%, #FFE8EE 100%) !important;
    border: 1px solid rgba(255, 182, 193, 0.6) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(255, 192, 203, 0.2), inset 0 1px 3px rgba(255, 255, 255, 0.8) !important;
    padding: 16px !important;
    transition: all 0.3s ease !important;
}

/* 鼠标悬浮时微微加深发光，增强交互感 */
.bg-gray-100\/90.relative.inline-block:hover {
    box-shadow: 0 6px 20px rgba(255, 182, 193, 0.35), inset 0 1px 3px rgba(255, 255, 255, 0.9) !important;
}

/* =========================================
   3. 文本排版与高对比度颜色分配 (统一字体)
========================================= */
/* 基础文本：深炭灰/微棕色，确保在粉底上绝对清晰。统一系统字体栈 */
.markdown-body {
    color: #2C1E23 !important; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    line-height: 1.7 !important;
}

/* 强调描写 (加粗)：深勃艮第红，极粗，带微弱背景强调 */
.markdown-body strong {
    color: #721C24 !important;
    font-weight: 900 !important;
    background: rgba(255, 182, 193, 0.2) !important;
    padding: 0 2px !important;
    border-radius: 3px !important;
}

/* 心理/轻语描写 (斜体)：深紫罗兰色，保持斜体样式 */
.markdown-body em {
    color: #4A235A !important;
    font-style: italic !important;
    font-weight: 600 !important;
}

/* 旁白/背景描写 (引用区块)：深咖色，带左侧粉色饰条 */
.markdown-body blockquote {
    color: #4E342E !important;
    background: rgba(255, 255, 255, 0.7) !important;
    border-left: 4px solid #FF8DA1 !important;
    padding: 8px 12px !important;
    margin: 10px 0 !important;
    border-radius: 0 8px 8px 0 !important;
    font-weight: bold !important;
}

/* =========================================
   4. 底部附加元素美化 (按钮、模型名、Token)
========================================= */
/* 统一调整为柔和的深玫瑰灰色，融入整体色调但保持清晰 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #8B5A65 !important;
    font-weight: bold !important;
    transition: color 0.2s !important;
}

/* 底部按钮悬浮效果 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #D81B60 !important;
    background: rgba(255, 182, 193, 0.2) !important;
}

/* =========================================
   5. 加载动画美化 (SMIL内联SVG，强制覆盖)
========================================= */
/* 强制隐藏默认闪烁点 */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

/* 配置加载容器 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 注入由SMIL驱动的玫瑰粉色双环律动SVG动画，免疫平台CSS动画限制 */
.flex.items-center.justify-center.w-6.h-5::before {
    content: '' !important;
    position: absolute !important;
    width: 24px !important;
    height: 24px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23FFB6C1' stroke-width='2' stroke-dasharray='15 15'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='6' fill='none' stroke='%23FF69B4' stroke-width='2' stroke-dasharray='10 10'%3E%3CanimateTransform attributeName='transform' type='rotate' from='360 12 12' to='0 12 12' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='12' cy='12' r='2' fill='%23DB7093'%3E%3Canimate attributeName='r' values='1.5;3;1.5' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}