/* 【风月转换rili】 */
ai {
  display: block;
  max-width: 680px;
  margin: 0 auto;
  font-family: "Noto Serif SC", "Source Han Serif CN", serif;
  color: #F0E0C0;
  background: #1e1410;
  border: 1.5px solid #C41E3A;
  border-radius: 6px;
  box-shadow: 0 0 24px 3px #C41E3A44, 0 4px 16px #0009, inset 0 0 60px 0px #2a100555;
  padding: 0;
  overflow: hidden;
  position: relative;
}
ai::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23a0601844' stroke-width='0.8'%3E%3Cpolygon points='30,2 58,16 58,44 30,58 2,44 2,16'/%3E%3Cpolygon points='30,10 50,20 50,40 30,50 10,40 10,20'/%3E%3Cline x1='30' y1='2' x2='30' y2='58'/%3E%3Cline x1='2' y1='16' x2='58' y2='44'/%3E%3Cline x1='58' y1='16' x2='2' y2='44'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
  opacity: 0.22;
}
ai > * {
  position: relative;
  z-index: 1;
}
.fox-container {
  padding: 0;
}
.narrative-area {
  padding: 14px 18px 14px 22px;
  border-bottom: 1px solid #5a2818;
  line-height: 1.95;
  font-size: 15px;
  color: #F0E0C0;
  background: linear-gradient(160deg, #2a1a0e 0%, #1e1410 60%, #1a1008 100%);
  position: relative;
}
.narrative-area::before {
  content: "";
  display: block;
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #FFD060 0%, #E8A020 30%, #C41E3A 70%, transparent 100%);
  border-radius: 0 0 0 4px;
}
.narrative-area::after {
  content: "";
  display: block;
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #C41E3A55 30%, #E8A02066 60%, transparent 100%);
}
.narrative-area p {
  margin: 0 0 0.8em 0;
}
.narrative-area p:last-child {
  margin-bottom: 0;
}
.cot-container {
  background: #160f08;
  border-bottom: 1px solid #3a2010;
  font-size: 12px;
  color: #7a6040;
}
.cot-container summary {
  padding: 5px 14px;
  cursor: pointer;
  color: #8a7050;
  font-size: 11.5px;
  list-style: none;
  user-select: none;
  letter-spacing: 0.05em;
}
.cot-container summary::-webkit-details-marker {
  display: none;
}
.cot-container summary::before {
  content: "▸ ";
  color: #C41E3A;
}
.cot-container[open] summary::before {
  content: "▾ ";
}
.cot-container p {
  padding: 4px 16px 7px 16px;
  margin: 0;
  line-height: 1.65;
}
.name-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 13px 56px 12px 22px;
  border-bottom: 1px solid #5a2818;
  background: linear-gradient(100deg, #2e1c0e 0%, #261408 55%, #1e1410 100%);
  position: relative;
  overflow: hidden;
}
.name-box::before {
  content: "";
  display: block;
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, #FFD060 0%, #E8A020 35%, #C41E3A 75%, #8B1020 100%);
}
.name-box::after {
  content: "";
  display: block;
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='none' stroke='%23E8A020' stroke-width='1.2' opacity='0.5'/%3E%3Ccircle cx='20' cy='20' r='11' fill='none' stroke='%23C41E3A' stroke-width='1' opacity='0.55'/%3E%3Ccircle cx='20' cy='20' r='4' fill='%23E8A020' opacity='0.4'/%3E%3Cline x1='20' y1='2' x2='20' y2='38' stroke='%23E8A020' stroke-width='0.8' opacity='0.35'/%3E%3Cline x1='2' y1='20' x2='38' y2='20' stroke='%23E8A020' stroke-width='0.8' opacity='0.35'/%3E%3Cline x1='7' y1='7' x2='33' y2='33' stroke='%23E8A020' stroke-width='0.5' opacity='0.22'/%3E%3Cline x1='33' y1='7' x2='7' y2='33' stroke='%23E8A020' stroke-width='0.5' opacity='0.22'/%3E%3Cpolygon points='20,2 24,16 38,20 24,24 20,38 16,24 2,20 16,16' fill='none' stroke='%23E8A020' stroke-width='0.6' opacity='0.28'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.8;
  animation: rotateSeal 20s linear infinite;
}
@keyframes rotateSeal {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}
name-tag {
  font-size: 20px;
  font-weight: 700;
  color: #FFD060;
  letter-spacing: 0.12em;
  text-shadow: 0 0 14px #E8A02099, 0 0 30px #C41E3A44, 0 1px 3px #0009;
}
SL {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 3px;
  letter-spacing: 0.07em;
  vertical-align: middle;
  margin-left: 2px;
}
SL[T="0"] {
  background: linear-gradient(90deg, #1a1200, #3e3000);
  color: #FFE97A;
  border: 1px solid #FFD700;
  box-shadow: 0 0 12px 3px #FFD70077, 0 0 4px #fff3;
  text-shadow: 0 0 10px #FFD700;
  animation: sl0pulse 2s ease-in-out infinite;
}
@keyframes sl0pulse {
  0%,100% { box-shadow: 0 0 12px 3px #FFD70077, 0 0 4px #fff3; }
  50% { box-shadow: 0 0 26px 7px #FFD700bb, 0 0 10px #fff5; }
}
SL[T="1"] {
  background: linear-gradient(90deg, #2e0006, #580012);
  color: #FF8080;
  border: 1px solid #CC0020;
  box-shadow: 0 0 10px 2px #CC002077;
  text-shadow: 0 0 8px #FF003399;
  animation: sl1pulse 2.8s ease-in-out infinite;
}
@keyframes sl1pulse {
  0%,100% { box-shadow: 0 0 10px 2px #CC002077; }
  50% { box-shadow: 0 0 20px 5px #C41E3Acc; }
}
SL[T="2"] {
  background: linear-gradient(90deg, #1e082a, #3c1250);
  color: #E098FF;
  border: 1px solid #8B35A0;
  box-shadow: 0 0 7px 1px #9B59B655;
  text-shadow: 0 0 6px #C39BD3;
}
SL[T="3"] {
  background: linear-gradient(90deg, #10103e, #202060);
  color: #90B8FF;
  border: 1px solid #3040A0;
  box-shadow: 0 0 6px 1px #4060CC44;
}
SL[T="4"] {
  background: linear-gradient(90deg, #081e18, #10302a);
  color: #70DEBB;
  border: 1px solid #1A8060;
  box-shadow: 0 0 5px 1px #4CAF8044;
}
SL[T="5"] {
  background: linear-gradient(90deg, #141e00, #243400);
  color: #B0D870;
  border: 1px solid #527800;
  box-shadow: 0 0 4px 1px #80C04033;
}
SL[T="6"] {
  background: #1c1c1c;
  color: #909090;
  border: 1px solid #484848;
}
info {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  color: #B09878;
  background: linear-gradient(90deg, #281c10, #221608);
  border: 1px solid #5a3020;
  border-radius: 3px;
  padding: 1px 8px;
  margin: 1px 2px;
  vertical-align: middle;
  gap: 4px;
}
info::before {
  content: "◆";
  color: #C41E3A;
  font-size: 8px;
  line-height: 1;
}
abli {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  color: #80D0EE;
  background: linear-gradient(90deg, #0c1e2e, #081824);
  border: 1px solid #2a6888;
  border-radius: 3px;
  padding: 1px 8px;
  margin: 1px 3px;
  vertical-align: middle;
  gap: 3px;
}
abli::before {
  content: "⊹";
  color: #4AAAC0;
  font-size: 10px;
  line-height: 1;
}
f {
  display: inline;
  color: #FFD060;
  font-weight: 600;
  text-shadow: 0 0 8px #E8A02066;
}
d {
  display: block;
  font-size: 13px;
  color: #D8C8A8;
  padding: 3px 8px 3px 12px;
  border-left: 2px solid #5a2818;
  margin: 2px 0;
  line-height: 1.7;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
d:hover {
  border-left-color: #E8A020;
  color: #F0E0C0;
  background: #301a0a44;
}
ai details {
  border-bottom: 1px solid #3a1e0e;
}
ai details:last-child {
  border-bottom: none;
}
ai details > summary {
  display: flex;
  align-items: center;
  padding: 9px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #E8A020;
  background: linear-gradient(90deg, #2e1c0e 0%, #221408 50%, #1e1410 100%);
  border-bottom: 1px solid #5a2818;
  list-style: none;
  user-select: none;
  position: relative;
  overflow: hidden;
}
ai details > summary::-webkit-details-marker {
  display: none;
}
ai details > summary::before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 9px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpolygon points='8.5,1 16,8.5 8.5,16 1,8.5' fill='none' stroke='%23E8A020' stroke-width='1.5'/%3E%3Ccircle cx='8.5' cy='8.5' r='2.8' fill='%23C41E3A'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.28s cubic-bezier(.4,2,.5,1);
}
ai details[open] > summary::before {
  transform: rotate(45deg);
}
ai details > summary::after {
  content: "";
  display: block;
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 80px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 28'%3E%3Crect x='0' y='0' width='14' height='14' fill='%23C41E3A' opacity='0.15'/%3E%3Crect x='14' y='14' width='14' height='14' fill='%23C41E3A' opacity='0.15'/%3E%3Crect x='28' y='0' width='14' height='14' fill='%23C41E3A' opacity='0.15'/%3E%3Crect x='42' y='14' width='14' height='14' fill='%23C41E3A' opacity='0.15'/%3E%3Crect x='56' y='0' width='14' height='14' fill='%23C41E3A' opacity='0.15'/%3E%3Crect x='70' y='14' width='10' height='14' fill='%23C41E3A' opacity='0.15'/%3E%3C/svg%3E");
  background-size: 28px 28px;
  background-repeat: repeat-x;
  opacity: 0.8;
  pointer-events: none;
}
ai details > summary:hover {
  background: linear-gradient(90deg, #3a2210 0%, #2c1a0a 50%, #261610 100%);
  color: #FFD060;
}
.hud-content {
  padding: 10px 14px 10px 14px;
  background: #1e1410;
}
.hud-content > p[t] {
  background: linear-gradient(105deg, #261808 0%, #1e1410 100%);
  border: 1px solid #5a2818;
  border-left: 3px solid #C41E3A;
  border-radius: 5px;
  padding: 8px 12px 8px 14px;
  margin: 7px 0;
  position: relative;
  overflow: hidden;
}
.hud-content > p[t]::before {
  content: attr(t);
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: #E8A020;
  letter-spacing: 0.14em;
  margin-bottom: 5px;
  padding-bottom: 4px;
  border-bottom: 1px solid #5a2818;
}
.hud-content > p[t]::after {
  content: "";
  display: block;
  position: absolute;
  right: 8px; top: 8px;
  width: 22px; height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpolygon points='11,1 21,11 11,21 1,11' fill='none' stroke='%23E8A020' stroke-width='1' opacity='0.25'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.5;
}
.hud-content > p[t="主角"]::before,
.hud-content > p[t="角色锁定"]::before {
  content: attr(t);
  color: #FFD060;
  border-bottom-color: #6a3020;
}
.hud-content > p[t="主角"],
.hud-content > p[t="角色锁定"] {
  border-left-color: #E8A020;
  background: linear-gradient(105deg, #2e1c0a 0%, #221408 100%);
  box-shadow: inset 0 0 20px 0 #E8A01511;
}
.hud-content > p[t="NPC"]::before {
  content: attr(t);
  color: #D4B896;
}
.hud-content > p[t="NPC"] {
  border-left-color: #8a6848;
}
.hud-content > p[t="宗门"]::before,
.hud-content > p[t="门派"]::before,
.hud-content > p[t="组织"]::before {
  content: attr(t);
  color: #80D0EE;
}
.hud-content > p[t="宗门"],
.hud-content > p[t="门派"],
.hud-content > p[t="组织"] {
  border-left-color: #2a6888;
}
.hud-content > p[t="大事记"]::before,
.hud-content > p[t="记忆"]::before {
  content: attr(t);
  color: #B09878;
}
.hud-content > p[t="行动"]::before {
  content: attr(t);
  color: #B0D870;
}
.hud-content > p[t="行动"] {
  border-left-color: #527800;
}
.hud-content > p[t="角色锁定"] > d {
  display: inline-flex;
  align-items: center;
  border-left: none;
  background: linear-gradient(135deg, #2e1c0e 0%, #221408 100%);
  border: 1px solid #6a3820;
  border-radius: 4px;
  padding: 6px 12px;
  margin: 3px 4px 3px 0;
  font-size: 12px;
  color: #D8C8A8;
  vertical-align: top;
  transition: border-color 0.18s, color 0.18s, background 0.18s, transform 0.15s, box-shadow 0.18s;
  position: relative;
  overflow: hidden;
  cursor: default;
}
.hud-content > p[t="角色锁定"] > d::before {
  content: "";
  display: block;
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #6a3820;
  transition: background 0.18s;
}
.hud-content > p[t="角色锁定"] > d:hover {
  border-color: #E8A020;
  color: #FFD060;
  background: linear-gradient(135deg, #3a2210 0%, #2c1808 100%);
  transform: translateX(2px);
  box-shadow: 0 2px 10px #E8A02022;
}
.hud-content > p[t="角色锁定"] > d:hover::before {
  background: linear-gradient(180deg, #FFD060, #C41E3A);
}
.kimetsu-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 10px 14px 13px 14px;
  background: linear-gradient(180deg, #1a1008 0%, #160e06 100%);
  border-top: 1px solid #3a1e0e;
  position: relative;
}
.kimetsu-opts::before {
  content: "";
  display: block;
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C41E3A66, #E8A02055, #C41E3A66, transparent);
}
.opt-btn {
  display: block;
  padding: 9px 12px;
  font-size: 12.5px;
  color: #D8C8A8;
  background: linear-gradient(135deg, #2e1c0e 0%, #221408 100%);
  border: 1px solid #6a3820;
  border-radius: 5px;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, transform 0.15s, background 0.18s, box-shadow 0.18s;
  line-height: 1.55;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.opt-btn::before {
  content: "";
  display: block;
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #6a3820;
  transition: background 0.18s;
}
.opt-btn::after {
  content: "";
  display: block;
  position: absolute;
  right: 6px; bottom: 5px;
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpolygon points='7,1 13,7 7,13 1,7' fill='none' stroke='%23E8A020' stroke-width='1' opacity='0.2'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.6;
  transition: opacity 0.18s;
}
.opt-btn:hover {
  border-color: #E8A020;
  color: #FFD060;
  background: linear-gradient(135deg, #3a2210 0%, #2c1808 100%);
  transform: translateX(3px);
  box-shadow: 0 2px 12px #E8A02022, inset 0 0 15px #E8A01510;
}
.opt-btn:hover::before {
  background: linear-gradient(180deg, #FFD060, #C41E3A);
}
.opt-btn:hover::after {
  opacity: 1;
}
.opt-btn:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.skill-anchor {
  display: inline;
  color: #80D0EE;
  border-bottom: 1px dashed #4AAAC077;
  cursor: help;
  position: relative;
}
.skill-tooltip {
  display: block;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 100;
  min-width: 200px;
  max-width: 280px;
  background: #241810;
  border: 1px solid #C41E3A;
  border-radius: 5px;
  padding: 9px 13px;
  font-size: 12px;
  color: #D8C8A8;
  line-height: 1.68;
  box-shadow: 0 6px 24px #0009, 0 0 12px #C41E3A33;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.22s, transform 0.22s;
  white-space: normal;
}
.skill-anchor:hover .skill-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(3px);
}
ai h2 {
  font-size: 14px;
  font-weight: 700;
  color: #E8A020;
  margin: 6px 0 3px 0;
  padding: 0;
  letter-spacing: 0.1em;
}
ai h3 {
  font-size: 13px;
  font-weight: 600;
  color: #B08040;
  margin: 4px 0 2px 0;
  padding: 0;
}
ai strong {
  color: #FFD060;
  font-weight: 700;
  text-shadow: 0 0 6px #E8A02044;
}
ai em {
  color: #D8C0A0;
  font-style: italic;
}
ai hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C41E3A66, transparent);
  margin: 8px 0;
}
ai p {
  margin: 3px 0;
  line-height: 1.8;
}
ai ul {
  margin: 3px 0 3px 18px;
  padding: 0;
}
ai li {
  font-size: 13px;
  color: #D8C8A8;
  margin: 2px 0;
  line-height: 1.68;
}
ai li::marker {
  color: #C41E3A;
}

/* ============================================================
   鬼灭之刃 (Demon Slayer) — Chat Box Theme
   Author: AI Assistant
   ============================================================ */

/* ----------------------------------------------------------
   0. 隐藏默认顶部颜色装饰条
   ---------------------------------------------------------- */
[class*="bg-[#F1CBCB]"],
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* ----------------------------------------------------------
   1. 统一聊天框 — 基础容器
      选择器: .bg-gray-100\/90.relative.inline-block
   ---------------------------------------------------------- */
.bg-gray-100\/90.relative.inline-block {
    /* 深墨绿/藏青底色 — 炭治郎羽织的暗面 */
    background:
        /* 市松格纹 pattern（炭治郎标志性格纹） */
        repeating-conic-gradient(
            rgba(16, 69, 71, 0.12) 0% 25%,
            transparent 0% 50%
        ) 0 0 / 28px 28px,
        /* 主渐变底色 */
        linear-gradient(
            160deg,
            #0a1a1a 0%,
            #0d2626 25%,
            #102e2e 50%,
            #0b2020 75%,
            #071515 100%
        ) !important;

    /* 日轮刀锻造纹路边框 — 左侧赤红，右侧钢蓝 */
    border: 1.5px solid transparent !important;
    border-image: linear-gradient(
        180deg,
        #b8342a 0%,
        #e8503e 15%,
        #f0a050 30%,
        #c0c0c8 50%,
        #7898b0 70%,
        #4a6a80 85%,
        #2a3a4a 100%
    ) 1 !important;

    border-radius: 14px !important;

    /* 血鬼术微光外发光 */
    box-shadow:
        0 0 8px 1px rgba(184, 52, 42, 0.25),
        0 0 20px 2px rgba(184, 52, 42, 0.10),
        inset 0 1px 0 0 rgba(240, 160, 80, 0.08),
        inset 0 -1px 0 0 rgba(120, 152, 176, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.45) !important;

    /* 层叠上下文隔离 — 保护伪元素动效 */
    isolation: isolate !important;
    position: relative !important;
    overflow: hidden !important;

    padding: 18px 20px 14px 20px !important;

    transition: box-shadow 0.4s ease, border-image 0.4s ease !important;
}

/* Hover 时日轮刀发光增强 */
.bg-gray-100\/90.relative.inline-block:hover {
    box-shadow:
        0 0 14px 3px rgba(232, 80, 62, 0.35),
        0 0 30px 4px rgba(184, 52, 42, 0.18),
        inset 0 1px 0 0 rgba(240, 160, 80, 0.14),
        inset 0 -1px 0 0 rgba(120, 152, 176, 0.10),
        0 6px 24px rgba(0, 0, 0, 0.55) !important;
}

/* ----------------------------------------------------------
   3. 背景动效 — 呼吸の型・流光粒子
      使用 ::before / ::after 伪元素 + SVG SMIL 动画
      即使平台禁用 CSS @keyframes 也能运动
   ---------------------------------------------------------- */

/* ::before — 漂浮的藤花光点 */
.bg-gray-100\/90.relative.inline-block::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0.5 !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Ccircle cx='30' cy='40' r='1.5' fill='%23c8a0d8'%3E%3Canimate attributeName='opacity' values='0.2;0.8;0.2' dur='3.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='cy' values='40;32;40' dur='4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='130' cy='80' r='1' fill='%23d8b8e8'%3E%3Canimate attributeName='opacity' values='0.3;0.9;0.3' dur='2.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='cy' values='80;70;80' dur='3.6s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='200' cy='55' r='1.2' fill='%23b890c8'%3E%3Canimate attributeName='opacity' values='0.15;0.7;0.15' dur='4.2s' repeatCount='indefinite'/%3E%3Canimate attributeName='cy' values='55;46;55' dur='5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='80' cy='160' r='0.8' fill='%23e0c0f0'%3E%3Canimate attributeName='opacity' values='0.2;0.85;0.2' dur='3s' repeatCount='indefinite'/%3E%3Canimate attributeName='cy' values='160;150;160' dur='3.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='230' cy='190' r='1.3' fill='%23c098d0'%3E%3Canimate attributeName='opacity' values='0.1;0.65;0.1' dur='4.8s' repeatCount='indefinite'/%3E%3Canimate attributeName='cy' values='190;180;190' dur='4.4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='50' cy='230' r='0.9' fill='%23d0a8e0'%3E%3Canimate attributeName='opacity' values='0.25;0.75;0.25' dur='3.2s' repeatCount='indefinite'/%3E%3Canimate attributeName='cy' values='230;222;230' dur='4.1s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='170' cy='210' r='1.1' fill='%23b888c0'%3E%3Canimate attributeName='opacity' values='0.18;0.72;0.18' dur='3.9s' repeatCount='indefinite'/%3E%3Canimate attributeName='cy' values='210;200;210' dur='4.6s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
    background-size: 260px 260px !important;
}

/* ::after — 斜向流动的呼吸纹（水之呼吸 / 日之呼吸交织） */
.bg-gray-100\/90.relative.inline-block::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0.25 !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cdefs%3E%3ClinearGradient id='breath' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%234a90d9' stop-opacity='0.6'%3E%3Canimate attributeName='stop-opacity' values='0.6;0.15;0.6' dur='5s' repeatCount='indefinite'/%3E%3C/stop%3E%3Cstop offset='50%25' stop-color='%23f0a050' stop-opacity='0.4'%3E%3Canimate attributeName='stop-opacity' values='0.4;0.1;0.4' dur='4s' repeatCount='indefinite'/%3E%3C/stop%3E%3Cstop offset='100%25' stop-color='%23e8503e' stop-opacity='0.5'%3E%3Canimate attributeName='stop-opacity' values='0.5;0.12;0.5' dur='6s' repeatCount='indefinite'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-50 80 Q75 40 150 80 T350 80' stroke='url(%23breath)' stroke-width='1.2' fill='none' opacity='0.7'%3E%3Canimate attributeName='d' values='M-50 80 Q75 40 150 80 T350 80;M-50 80 Q75 120 150 80 T350 80;M-50 80 Q75 40 150 80 T350 80' dur='6s' repeatCount='indefinite'/%3E%3C/path%3E%3Cpath d='M-50 160 Q75 120 150 160 T350 160' stroke='url(%23breath)' stroke-width='0.8' fill='none' opacity='0.5'%3E%3Canimate attributeName='d' values='M-50 160 Q75 120 150 160 T350 160;M-50 160 Q75 200 150 160 T350 160;M-50 160 Q75 120 150 160 T350 160' dur='7s' repeatCount='indefinite'/%3E%3C/path%3E%3Cpath d='M-50 240 Q75 200 150 240 T350 240' stroke='url(%23breath)' stroke-width='0.6' fill='none' opacity='0.35'%3E%3Canimate attributeName='d' values='M-50 240 Q75 200 150 240 T350 240;M-50 240 Q75 270 150 240 T350 240;M-50 240 Q75 200 150 240 T350 240' dur='8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
    background-size: 300px 300px !important;
}

/* CSS @keyframes 增强 — 作为 SMIL 的补充层（若平台允许则叠加微动） */
@keyframes kimetsu-bg-drift {
    0%   { background-position: 0 0; }
    100% { background-position: 260px 260px; }
}

.bg-gray-100\/90.relative.inline-block::before {
    animation: kimetsu-bg-drift 40s linear infinite !important;
}

@keyframes kimetsu-wave-drift {
    0%   { background-position: 0 0; }
    100% { background-position: 300px 0; }
}

.bg-gray-100\/90.relative.inline-block::after {
    animation: kimetsu-wave-drift 25s linear infinite !important;
}

/* ----------------------------------------------------------
   4. 文本内容 — .markdown-body
      高对比度白色文本，绝对可读
      禁止 text-shadow
   ---------------------------------------------------------- */
.markdown-body {
    color: #F0F0F0 !important;
    font-family: "Noto Serif JP", "Source Han Serif SC", "Georgia", "Times New Roman", serif !important;
    font-size: 15px !important;
    line-height: 1.78 !important;
    letter-spacing: 0.02em !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    text-shadow: none !important;
}

/* 段落间距 */
.markdown-body p {
    margin-bottom: 0.7em !important;
}

/* 加粗文本 — 日之呼吸金色 */
.markdown-body strong,
.markdown-body b {
    color: #f0c060 !important;
    font-weight: bold !important;
    text-shadow: none !important;
}

/* 斜体文本 — 藤花淡紫 */
.markdown-body em,
.markdown-body i {
    color: #d8b8e8 !important;
    font-style: italic !important;
    text-shadow: none !important;
}

/* 行内代码 */
.markdown-body code {
    background: rgba(240, 160, 80, 0.12) !important;
    color: #f0c878 !important;
    border: 1px solid rgba(240, 160, 80, 0.25) !important;
    border-radius: 4px !important;
    padding: 1px 5px !important;
    font-family: "Fira Code", "Consolas", monospace !important;
    font-size: 0.9em !important;
    text-shadow: none !important;
}

/* 代码块 */
.markdown-body pre {
    background: rgba(7, 21, 21, 0.85) !important;
    border: 1px solid rgba(120, 152, 176, 0.3) !important;
    border-left: 3px solid rgba(232, 80, 62, 0.5) !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    overflow-x: auto !important;
}

.markdown-body pre code {
    background: transparent !important;
    border: none !important;
    color: #c8d8e8 !important;
    padding: 0 !important;
}

/* 引用块 — 鬼舞辻无惨的暗红 */
.markdown-body blockquote {
    border-left: 3px solid rgba(184, 52, 42, 0.6) !important;
    background: rgba(184, 52, 42, 0.06) !important;
    padding: 10px 16px !important;
    margin: 10px 0 !important;
    border-radius: 0 8px 8px 0 !important;
    color: #e0d0d0 !important;
    text-shadow: none !important;
}

/* 链接 — 水之呼吸蓝 */
.markdown-body a {
    color: #60b0e0 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(96, 176, 224, 0.4) !important;
    text-shadow: none !important;
    transition: color 0.3s ease !important;
}

.markdown-body a:hover {
    color: #90d0f8 !important;
    text-decoration-color: rgba(144, 208, 248, 0.6) !important;
}

/* 标题 — 日轮刀锻造金 */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    color: #f0c060 !important;
    font-weight: bold !important;
    text-shadow: none !important;
    border-bottom: 1px solid rgba(240, 192, 96, 0.15) !important;
    padding-bottom: 4px !important;
    margin-top: 1em !important;
}

/* 水平线 — 日轮刀刃纹 */
.markdown-body hr {
    border: none !important;
    height: 1px !important;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(184, 52, 42, 0.5) 20%,
        rgba(240, 160, 80, 0.6) 50%,
        rgba(120, 152, 176, 0.5) 80%,
        transparent 100%
    ) !important;
    margin: 16px 0 !important;
}

/* 列表标记 */
.markdown-body ul {
    list-style-type: disc !important;
}

.markdown-body ul li::marker {
    color: #e8503e !important;
}

.markdown-body ol li::marker {
    color: #f0a050 !important;
    font-weight: bold !important;
}

/* 表格 */
.markdown-body table {
    border-collapse: collapse !important;
    width: 100% !important;
}

.markdown-body th {
    background: rgba(184, 52, 42, 0.2) !important;
    color: #f0c060 !important;
    border: 1px solid rgba(240, 160, 80, 0.25) !important;
    padding: 8px 12px !important;
    font-weight: bold !important;
    text-shadow: none !important;
}

.markdown-body td {
    border: 1px solid rgba(120, 152, 176, 0.2) !important;
    padding: 6px 12px !important;
    color: #e0e0e0 !important;
    text-shadow: none !important;
}

.markdown-body tr:nth-child(even) td {
    background: rgba(16, 46, 46, 0.3) !important;
}

/* ----------------------------------------------------------
   5. 底部附加元素 — 按钮、模型名称、Token消耗
   ---------------------------------------------------------- */

/* 操作按钮 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: #c0b8a8 !important;
    font-size: 12px !important;
    opacity: 0.7 !important;
    transition: color 0.3s ease, opacity 0.3s ease !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #f0c060 !important;
    opacity: 1 !important;
}

/* 模型名称文本 */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #8898a8 !important;
    font-size: 11px !important;
    font-family: "Fira Code", "Consolas", monospace !important;
    opacity: 0.65 !important;
}

/* Token消耗文本 */
.text-orange-500 {
    color: #e8503e !important;
    font-size: 11px !important;
    font-family: "Fira Code", "Consolas", monospace !important;
    opacity: 0.75 !important;
}

/* ============================================
   鬼灭之刃 · 和风美化主题
   主色调: 藤紫 #b388ff / 墨绿 #2d7d6e / 暖金 #e8b84b
   辅助色: 樱粉 #f8bbd0 / 云白 #faf5ff / 炭灰 #3a3a3a
   ============================================ */

/* ------------------------------------------
   一、顶部栏
   ------------------------------------------ */

/* 顶部栏主容器 */
.sticky.w-full.top-0.flex.items-center {
  background: linear-gradient(135deg, #faf5ff 0%, #ede7f6 40%, #e8eaf6 70%, #e0f2f1 100%) !important;
  border-bottom: 2px solid transparent !important;
  border-image: linear-gradient(90deg, #b388ff 0%, #e8b84b 35%, #2d7d6e 65%, #f8bbd0 100%) 1 !important;
  box-shadow: 0 2px 12px rgba(179, 136, 255, 0.15), 0 1px 4px rgba(45, 125, 110, 0.08) !important;
  transition: box-shadow 0.3s ease, background 0.3s ease !important;
  position: relative !important;
}

/* 顶部栏 - 市松模様（炭治郎耳饰纹样）伪元素装饰 */
.sticky.w-full.top-0.flex.items-center::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image:
    repeating-conic-gradient(#b388ff11 0% 25%, transparent 0% 50%) !important;
  background-size: 16px 16px !important;
  opacity: 0.45 !important;
  pointer-events: none !important;
}

/* 顶部栏悬停效果 */
.sticky.w-full.top-0.flex.items-center:hover {
  box-shadow: 0 3px 18px rgba(179, 136, 255, 0.25), 0 2px 8px rgba(232, 184, 75, 0.12) !important;
}

/* 模型选择器容器 */
#ai-model-selector .group.flex.items-center {
  background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(237,231,246,0.7) 100%) !important;
  border: 1.5px solid #ce93d8 !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 6px rgba(179, 136, 255, 0.12) !important;
  position: relative !important;
}

#ai-model-selector .group.flex.items-center::after {
  content: "⚔" !important;
  position: absolute !important;
  right: -6px !important;
  top: -6px !important;
  font-size: 10px !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
  transform: rotate(-15deg) !important;
}

#ai-model-selector .group.flex.items-center:hover {
  border-color: #e8b84b !important;
  box-shadow: 0 2px 12px rgba(232, 184, 75, 0.25), 0 0 0 3px rgba(232, 184, 75, 0.08) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(252,243,224,0.6) 100%) !important;
}

#ai-model-selector .group.flex.items-center:hover::after {
  opacity: 0.7 !important;
  transform: rotate(0deg) !important;
}

/* 模型名称文字 */
#ai-model-selector .truncate.text-\[13px\] {
  color: #4a148c !important;
  font-family: "Noto Serif SC", "Georgia", serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 0 8px rgba(179, 136, 255, 0.15) !important;
  transition: color 0.3s ease !important;
}

#ai-model-selector .group.flex.items-center:hover .truncate.text-\[13px\] {
  color: #bf360c !important;
  text-shadow: 0 0 6px rgba(232, 184, 75, 0.2) !important;
}

/* 下拉箭头 */
#ai-model-selector .shrink-0.flex.items-center svg {
  color: #7e57c2 !important;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease !important;
}

#ai-model-selector .group.flex.items-center:hover .shrink-0.flex.items-center svg {
  color: #e8b84b !important;
  transform: rotate(180deg) !important;
}

/* 历史记录图标(移动端) */
.sticky.w-full.top-0 svg.lucide-clock-8 {
  color: #7e57c2 !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
}

.sticky.w-full.top-0 svg.lucide-clock-8:hover {
  color: #e8b84b !important;
  transform: rotate(15deg) scale(1.1) !important;
}

/* 历史记录未读角标 */
.sticky.w-full.top-0 span.MuiBadge-dot.md\:hidden {
  background-color: #e8b84b !important;
  box-shadow: 0 0 6px rgba(232, 184, 75, 0.6), 0 0 12px rgba(232, 184, 75, 0.3) !important;
  animation: kimetsu-badge-pulse 2s ease-in-out infinite !important;
}

@keyframes kimetsu-badge-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(232, 184, 75, 0.6), 0 0 12px rgba(232, 184, 75, 0.3); transform: scale(1); }
  50% { box-shadow: 0 0 10px rgba(232, 184, 75, 0.8), 0 0 20px rgba(232, 184, 75, 0.4); transform: scale(1.2); }
}

/* 音乐按钮 */
.sticky.w-full.top-0 button.MuiIconButton-root:has(svg.lucide-music-2) {
  transition: background 0.3s ease !important;
  border-radius: 50% !important;
}

.sticky.w-full.top-0 button.MuiIconButton-root:has(svg.lucide-music-2):hover {
  background: rgba(179, 136, 255, 0.12) !important;
}

.sticky.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2 {
  color: #7e57c2 !important;
  transition: color 0.3s ease, transform 0.4s ease !important;
}

.sticky.w-full.top-0 button.MuiIconButton-root:hover svg.lucide-music-2 {
  color: #e8b84b !important;
  transform: rotate(10deg) scale(1.15) !important;
}

/* 移动端设置图标 */
.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]) {
  color: #7e57c2 !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
}

.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]):hover {
  color: #2d7d6e !important;
  transform: rotate(45deg) !important;
}

/* 设置按钮 */
#header-setting-button {
  transition: background 0.3s ease, box-shadow 0.3s ease !important;
  border-radius: 50% !important;
  position: relative !important;
}

#header-setting-button:hover {
  background: rgba(45, 125, 110, 0.1) !important;
  box-shadow: 0 0 12px rgba(45, 125, 110, 0.15) !important;
}

#header-setting-button svg {
  color: #2d7d6e !important;
  transition: color 0.3s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#header-setting-button:hover svg {
  color: #e8b84b !important;
  transform: rotate(90deg) !important;
}


/* ------------------------------------------
   二、开场白选择器
   ------------------------------------------ */

div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
  background: linear-gradient(135deg, #faf5ff 0%, #fff8e1 50%, #e0f2f1 100%) !important;
  border: 1.5px solid #ce93d8 !important;
  border-radius: 22px !important;
  box-shadow: 0 2px 8px rgba(179, 136, 255, 0.12), inset 0 1px 0 rgba(255,255,255,0.8) !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(232, 184, 75, 0.15), transparent) !important;
  transition: left 0.6s ease !important;
  pointer-events: none !important;
}

div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover {
  border-color: #e8b84b !important;
  box-shadow: 0 4px 16px rgba(232, 184, 75, 0.2), 0 0 0 3px rgba(232, 184, 75, 0.06) !important;
  transform: translateY(-1px) !important;
}

div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover::before {
  left: 100% !important;
}

/* 左侧滑块图标 */
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="SlidersH"] {
  color: #7e57c2 !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
}

div.flex.items-center.h-9.cursor-pointer.group:hover svg[data-icon="SlidersH"] {
  color: #e8b84b !important;
  transform: scale(1.15) !important;
}

/* 右侧下拉箭头 */
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="ChevronDown"] {
  color: #7e57c2 !important;
  transition: color 0.3s ease, transform 0.35s ease !important;
}

div.flex.items-center.h-9.cursor-pointer.group:hover svg[data-icon="ChevronDown"] {
  color: #2d7d6e !important;
  transform: rotate(180deg) !important;
}

/* 备用选择器 */
div.h-9.rounded-md.cursor-pointer.group:has(svg[data-icon="SlidersH"]) {
  background: linear-gradient(135deg, #faf5ff 0%, #fff8e1 50%, #e0f2f1 100%) !important;
  border: 1.5px solid #ce93d8 !important;
  border-radius: 22px !important;
  transition: all 0.35s ease !important;
}


/* ------------------------------------------
   三、按钮栏
   ------------------------------------------ */

/* 按钮栏容器 */
#ai-mod-button2 {
  position: relative !important;
}

#ai-mod-button2::before {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 10% !important;
  width: 80% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, #ce93d8, #e8b84b, #2d7d6e, transparent) !important;
  opacity: 0.4 !important;
}

/* 按钮样式 */
#ai-mod-button2 button.MuiButton-root {
  background: linear-gradient(135deg, rgba(250,245,255,0.9) 0%, rgba(237,231,246,0.8) 100%) !important;
  border: 1.5px solid #ce93d8 !important;
  border-radius: 18px !important;
  color: #4a148c !important;
  font-family: "Noto Serif SC", "Georgia", serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.8px !important;
  padding: 5px 16px !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 4px rgba(179, 136, 255, 0.1) !important;
  position: relative !important;
  overflow: hidden !important;
}

#ai-mod-button2 button.MuiButton-root::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  background: radial-gradient(circle, rgba(232, 184, 75, 0.25) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
  transition: width 0.5s ease, height 0.5s ease !important;
  pointer-events: none !important;
}

#ai-mod-button2 button.MuiButton-root:hover {
  border-color: #e8b84b !important;
  color: #bf360c !important;
  box-shadow: 0 3px 14px rgba(232, 184, 75, 0.22), 0 0 0 3px rgba(232, 184, 75, 0.06) !important;
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(252,243,224,0.7) 100%) !important;
}

#ai-mod-button2 button.MuiButton-root:hover::before {
  width: 120px !important;
  height: 120px !important;
}

#ai-mod-button2 button.MuiButton-root:active {
  transform: translateY(0px) scale(0.97) !important;
  box-shadow: 0 1px 4px rgba(179, 136, 255, 0.15) !important;
}

/* 按钮图标 */
#ai-mod-button2 button.MuiButton-root svg {
  color: #7e57c2 !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
}

#ai-mod-button2 button.MuiButton-root:hover svg {
  color: #e8b84b !important;
  transform: scale(1.12) !important;
}


/* ------------------------------------------
   四、底部栏
   ------------------------------------------ */

/* 底部栏外层渐变背景 */
.bg-gradient-to-t {
  background: linear-gradient(to top, #faf5ff 0%, rgba(250,245,255,0.85) 50%, transparent 100%) !important;
}

/* 输入框容器 */
#ai-chat-bottom-input {
  background: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(237,231,246,0.6) 40%, rgba(224,242,241,0.5) 100%) !important;
  border: 2px solid #ce93d8 !important;
  border-radius: 24px !important;
  box-shadow: 0 3px 16px rgba(179, 136, 255, 0.12), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

#ai-chat-bottom-input::before {
  content: "" !important;
  position: absolute !important;
  top: -2px !important;
  left: -2px !important;
  right: -2px !important;
  bottom: -2px !important;
  background: linear-gradient(135deg, #b388ff, #e8b84b, #2d7d6e, #f8bbd0, #b388ff) !important;
  background-size: 300% 300% !important;
  border-radius: 26px !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
  pointer-events: none !important;
  animation: kimetsu-border-flow 4s ease infinite !important;
  animation-play-state: paused !important;
}

@keyframes kimetsu-border-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

#ai-chat-bottom-input:focus-within {
  border-color: transparent !important;
  box-shadow: 0 4px 24px rgba(179, 136, 255, 0.2), 0 0 0 4px rgba(179, 136, 255, 0.06) !important;
}

#ai-chat-bottom-input:focus-within::before {
  opacity: 0.6 !important;
  animation-play-state: running !important;
}

/* 主输入框 */
#ai-chat-input {
  color: #3a3a3a !important;
  font-family: "Noto Serif SC", "Segoe UI", sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.3px !important;
  caret-color: #7e57c2 !important;
  background: transparent !important;
}

/* 占位符 */
#ai-chat-input::placeholder {
  color: #b39ddb !important;
  font-style: italic !important;
  font-family: "Noto Serif SC", "Georgia", serif !important;
  letter-spacing: 1px !important;
  opacity: 0.7 !important;
}

/* 文字选中效果 */
#ai-chat-input::selection {
  background: rgba(232, 184, 75, 0.3) !important;
  color: #4a148c !important;
}


/* ------------------------------------------
   五、分页栏（仅颜色与视觉样式）
   ------------------------------------------ */

/* 分页按钮 */
.MuiPaginationItem-root {
  color: #6a1b9a !important;
  font-family: "Noto Serif SC", "Georgia", serif !important;
  font-weight: 500 !important;
  border-color: #ce93d8 !important;
  background: rgba(250, 245, 255, 0.7) !important;
  transition: all 0.3s ease !important;
  border-radius: 12px !important;
}

.MuiPaginationItem-root:hover {
  background: linear-gradient(135deg, #ede7f6 0%, #fff8e1 100%) !important;
  border-color: #e8b84b !important;
  color: #bf360c !important;
  box-shadow: 0 2px 8px rgba(232, 184, 75, 0.2) !important;
}

/* 选中状态 */
.MuiPaginationItem-root.Mui-selected {
  background: linear-gradient(135deg, #7e57c2 0%, #5e35b1 100%) !important;
  color: #fff8e1 !important;
  border-color: #7e57c2 !important;
  box-shadow: 0 2px 10px rgba(126, 87, 194, 0.35), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}

.MuiPaginationItem-root.Mui-selected:hover {
  background: linear-gradient(135deg, #9575cd 0%, #7e57c2 100%) !important;
  box-shadow: 0 3px 14px rgba(126, 87, 194, 0.4) !important;
}

/* 禁用状态 */
.MuiPaginationItem-root.Mui-disabled {
  color: #d1c4e9 !important;
  border-color: #e8e0f0 !important;
  background: rgba(245, 240, 255, 0.4) !important;
  opacity: 0.6 !important;
}

/* 翻页箭头图标 */
.MuiPaginationItem-icon {
  color: #7e57c2 !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
}

.MuiPaginationItem-root:hover .MuiPaginationItem-icon {
  color: #e8b84b !important;
  transform: scale(1.2) !important;
}

/* 跳转输入区域容器 */
.MuiStack-root.css-1uwir8f {
  background: rgba(250, 245, 255, 0.5) !important;
  border-radius: 12px !important;
}

/* 跳转输入区域文字 */
.MuiStack-root.css-1uwir8f .MuiBox-root {
  color: #6a1b9a !important;
  font-family: "Noto Serif SC", "Georgia", serif !important;
}

/* 跳转输入框 */
.MuiInputBase-input {
  color: #4a148c !important;
  border-color: #ce93d8 !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.8) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.MuiInputBase-input:focus {
  border-color: #7e57c2 !important;
  box-shadow: 0 0 0 3px rgba(126, 87, 194, 0.12) !important;
}


/* ------------------------------------------
   六、评论区
   ------------------------------------------ */

/* 评论区背景主容器 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
  background: linear-gradient(180deg, #faf5ff 0%, #f3e5f5 30%, #ede7f6 60%, #e8eaf6 100%) !important;
  border-top: 2px solid transparent !important;
  border-image: linear-gradient(90deg, #b388ff, #e8b84b, #2d7d6e, #f8bbd0) 1 !important;
}

/* 顶部标题 "评论(x)" */
div.text-lg.font-bold {
  color: #4a148c !important;
  font-family: "Noto Serif SC", "Georgia", serif !important;
  letter-spacing: 2px !important;
  text-shadow: 0 1px 3px rgba(179, 136, 255, 0.15) !important;
  position: relative !important;
}

div.text-lg.font-bold::after {
  content: "" !important;
  position: absolute !important;
  bottom: -4px !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: linear-gradient(90deg, #b388ff, #e8b84b, transparent) !important;
  border-radius: 1px !important;
}

/* "个人评分"文字 */
p.MuiTypography-body1.text-grey-600 {
  color: #6a1b9a !important;
  font-family: "Noto Serif SC", "Georgia", serif !important;
  font-weight: 500 !important;
}

/* 评分容器 */
span.MuiRating-root {
  transition: transform 0.3s ease !important;
}

span.MuiRating-root:hover {
  transform: scale(1.05) !important;
}

/* 未选中的星星(空心) */
span.MuiRating-iconEmpty svg {
  color: #d1c4e9 !important;
  transition: color 0.3s ease !important;
}

span.MuiRating-root:hover span.MuiRating-iconEmpty svg {
  color: #ce93d8 !important;
}

/* 选中的星星 */
span.MuiRating-iconFilled svg {
  color: #e8b84b !important;
  filter: drop-shadow(0 1px 3px rgba(232, 184, 75, 0.4)) !important;
  transition: transform 0.2s ease !important;
}

span.MuiRating-iconFilled:hover svg {
  transform: scale(1.2) rotate(5deg) !important;
}

/* 评分数字 */
span.text-orange-500 {
  color: #e8b84b !important;
  font-weight: 700 !important;
  font-family: "Noto Serif SC", "Georgia", serif !important;
  text-shadow: 0 0 6px rgba(232, 184, 75, 0.2) !important;
}

/* 输入框容器 */
div.flex.flex-col.border-gray-200 {
  border-color: #ce93d8 !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 2px 8px rgba(179, 136, 255, 0.08) !important;
  transition: all 0.3s ease !important;
}

div.flex.flex-col.border-gray-200:focus-within {
  border-color: #7e57c2 !important;
  box-shadow: 0 3px 16px rgba(126, 87, 194, 0.15), 0 0 0 3px rgba(126, 87, 194, 0.06) !important;
}

/* 评论输入框 */
textarea.rc-textarea {
  color: #3a3a3a !important;
  font-family: "Noto Serif SC", "Segoe UI", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  background: transparent !important;
  caret-color: #7e57c2 !important;
}

textarea.rc-textarea::placeholder {
  color: #b39ddb !important;
  font-style: italic !important;
}

textarea.rc-textarea::selection {
  background: rgba(232, 184, 75, 0.3) !important;
  color: #4a148c !important;
}

/* 输入字数统计 */
div.bg-gray-100.text-gray-500 {
  background: rgba(237, 231, 246, 0.5) !important;
  color: #7e57c2 !important;
  font-family: "Noto Serif SC", "Georgia", serif !important;
  border-radius: 0 0 14px 14px !important;
}

/* ============================
   鬼灭之刃 · 加载动画美化
   ============================ */

/* 隐藏原有的三个加载圆点 */
#ai-chat-answer .chat-answer-container .style_dot-flashing__8L91Q {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* ============================
   主容器：鬼灭之刃风格重构
   ============================ */
#ai-chat-answer .chat-answer-container div:has(> .style_dot-flashing__8L91Q) {
    /* 布局重置 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 420px !important;
    min-height: 350px !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 30px 20px 50px !important;
    margin: 10px 0 !important;

    /* 鬼灭深夜背景 —— 深紫黑渐变 */
    background:
        /* GIF主图层 */
        url('https://pic1.imgdb.cn/item/69daeddffc6349c0d2bbc83c.gif') no-repeat center 45% / contain,
        /* 底部暗角渐变 */
        radial-gradient(ellipse at 50% 120%, rgba(120, 0, 50, 0.25) 0%, transparent 65%),
        /* 主背景渐变：鬼灭夜空色调 */
        linear-gradient(175deg,
            #0a0612 0%,
            #110b1f 20%,
            #1a0e2e 40%,
            #15091f 60%,
            #0d0618 80%,
            #08030f 100%) !important;

    /* 鬼灭风格边框 —— 市松模様（棋盘格）+ 渐变叠加 */
    border: 3px solid transparent !important;
    border-image: linear-gradient(
        135deg,
        #1a472a 0%,      /* 炭治郎羽织 · 墨绿 */
        #2d8659 8%,
        #000000 8%,       /* 黑格 */
        #000000 16%,
        #1a472a 16%,
        #2d8659 24%,
        #000000 24%,
        #000000 32%,
        #1a472a 32%,
        #2d8659 40%,
        #000000 40%,
        #000000 48%,
        #1a472a 48%,
        #2d8659 56%,
        #000000 56%,
        #000000 64%,
        #1a472a 64%,
        #2d8659 72%,
        #000000 72%,
        #000000 80%,
        #1a472a 80%,
        #2d8659 88%,
        #000000 88%,
        #000000 96%,
        #1a472a 96%
    ) 1 !important;

    border-radius: 0 !important;

    /* 外层辉光 */
    box-shadow:
        0 0 15px rgba(120, 0, 50, 0.3),
        0 0 40px rgba(80, 0, 120, 0.15),
        inset 0 0 30px rgba(0, 0, 0, 0.5),
        inset 0 0 80px rgba(10, 5, 20, 0.4) !important;

    /* 移除原有动画 */
    animation: none !important;
}

/* ============================
   外框装饰层 · 和风纹样叠加
   ============================ */

/* 四角装饰 + 顶部藤花纹 */
#ai-chat-answer .chat-answer-container div:has(> .style_dot-flashing__8L91Q)::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;

    /* 四角和风装饰角标 —— 用渐变模拟 */
    background:
        /* 左上角装饰 */
        linear-gradient(135deg, rgba(45, 134, 89, 0.6) 0%, rgba(45, 134, 89, 0.3) 3%, transparent 3.5%) no-repeat 0 0 / 60px 60px,
        linear-gradient(135deg, rgba(45, 134, 89, 0.4) 0%, transparent 5%) no-repeat 0 0 / 40px 40px,
        /* 右上角装饰 */
        linear-gradient(225deg, rgba(45, 134, 89, 0.6) 0%, rgba(45, 134, 89, 0.3) 3%, transparent 3.5%) no-repeat 100% 0 / 60px 60px,
        linear-gradient(225deg, rgba(45, 134, 89, 0.4) 0%, transparent 5%) no-repeat 100% 0 / 40px 40px,
        /* 左下角装饰 */
        linear-gradient(45deg, rgba(120, 0, 50, 0.6) 0%, rgba(120, 0, 50, 0.3) 3%, transparent 3.5%) no-repeat 0 100% / 60px 60px,
        linear-gradient(45deg, rgba(120, 0, 50, 0.4) 0%, transparent 5%) no-repeat 0 100% / 40px 40px,
        /* 右下角装饰 */
        linear-gradient(315deg, rgba(120, 0, 50, 0.6) 0%, rgba(120, 0, 50, 0.3) 3%, transparent 3.5%) no-repeat 100% 100% / 60px 60px,
        linear-gradient(315deg, rgba(120, 0, 50, 0.4) 0%, transparent 5%) no-repeat 100% 100% / 40px 40px,

        /* 顶部横向装饰线 */
        linear-gradient(90deg,
            transparent 0%,
            transparent 10%,
            rgba(45, 134, 89, 0.15) 10%,
            rgba(45, 134, 89, 0.3) 50%,
            rgba(45, 134, 89, 0.15) 90%,
            transparent 90%,
            transparent 100%
        ) no-repeat center 8px / 80% 1px,

        /* 底部横向装饰线 */
        linear-gradient(90deg,
            transparent 0%,
            transparent 10%,
            rgba(120, 0, 50, 0.15) 10%,
            rgba(120, 0, 50, 0.3) 50%,
            rgba(120, 0, 50, 0.15) 90%,
            transparent 90%,
            transparent 100%
        ) no-repeat center calc(100% - 8px) / 80% 1px !important;
}

/* ============================
   经典语录层 · 底部呈现
   ============================ */
#ai-chat-answer .chat-answer-container div:has(> .style_dot-flashing__8L91Q)::after {
    /* 鬼灭经典语录 */
    content: '「生殺与奪の権を他人に握らせるな」' !important;
    display: block !important;
    position: absolute !important;
    bottom: 14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 3 !important;
    pointer-events: none !important;

    /* 语录文字样式 */
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "MS Mincho", "Noto Serif SC", "Source Han Serif SC", serif !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
    white-space: nowrap !important;
    color: transparent !important;

    /* 鬼灭渐变文字 —— 日轮刀色变 */
    background: linear-gradient(
        90deg,
        #4a9e6e 0%,       /* 绿 · 炭治郎 */
        #7ec8a0 15%,
        #e8d5a3 30%,      /* 金 · 善逸 */
        #f0c060 45%,
        #d4a0c0 60%,      /* 粉 · 祢豆子 */
        #c87da0 75%,
        #8eb4d4 90%,       /* 蓝 · 义勇 */
        #6a9fc4 100%
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;

    /* 文字辉光 */
    filter: drop-shadow(0 0 6px rgba(78, 158, 110, 0.4))
            drop-shadow(0 0 12px rgba(120, 0, 50, 0.2)) !important;

    /* 呼吸明灭动画 */
    animation: kimetsu-quote-breathe 4s ease-in-out infinite,
               kimetsu-quote-fadein 1.5s ease-out both !important;
}

/* ============================
   关键帧动画定义
   ============================ */

/* 语录呼吸明灭 */
@keyframes kimetsu-quote-breathe {
    0%, 100% {
        opacity: 0.7;
        filter: drop-shadow(0 0 6px rgba(78, 158, 110, 0.4))
                drop-shadow(0 0 12px rgba(120, 0, 50, 0.2));
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 10px rgba(78, 158, 110, 0.7))
                drop-shadow(0 0 20px rgba(120, 0, 50, 0.35));
    }
}

/* 语录入场 */
@keyframes kimetsu-quote-fadein {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(8px);
    }
    100% {
        opacity: 0.7;
        transform: translateX(-50%) translateY(0);
    }
}

/* ============================
   容器呼吸光效动画
   ============================ */
@keyframes kimetsu-border-glow {
    0%, 100% {
        box-shadow:
            0 0 15px rgba(120, 0, 50, 0.3),
            0 0 40px rgba(80, 0, 120, 0.15),
            inset 0 0 30px rgba(0, 0, 0, 0.5),
            inset 0 0 80px rgba(10, 5, 20, 0.4);
    }
    50% {
        box-shadow:
            0 0 20px rgba(120, 0, 50, 0.45),
            0 0 55px rgba(80, 0, 120, 0.25),
            0 0 8px rgba(45, 134, 89, 0.2),
            inset 0 0 35px rgba(0, 0, 0, 0.5),
            inset 0 0 90px rgba(10, 5, 20, 0.35);
    }
}

/* 将呼吸光效应用到主容器（覆盖静态box-shadow） */
#ai-chat-answer .chat-answer-container div:has(> .style_dot-flashing__8L91Q) {
    animation: kimetsu-border-glow 3.5s ease-in-out infinite !important;
}

/* ============================
   内框装饰 · 水之呼吸纹理
   ============================ */

/* 利用容器内的隐藏元素做额外装饰层 */
#ai-chat-answer .chat-answer-container .style_dot-flashing__8L91Q {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
}

/* 水之呼吸 · 流水纹伪元素 */
#ai-chat-answer .chat-answer-container .style_dot-flashing__8L91Q::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    width: 200% !important;
    height: 200% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0.04 !important;

    /* 水波纹理 —— 多层径向渐变模拟 */
    background:
        radial-gradient(ellipse at 20% 50%,
            rgba(100, 180, 220, 0.8) 0%,
            transparent 50%) no-repeat,
        radial-gradient(ellipse at 80% 30%,
            rgba(78, 158, 110, 0.6) 0%,
            transparent 45%) no-repeat,
        radial-gradient(ellipse at 50% 80%,
            rgba(120, 0, 50, 0.5) 0%,
            transparent 40%) no-repeat !important;

    animation: kimetsu-water-flow 12s linear infinite !important;
}

/* 水纹流动 */
@keyframes kimetsu-water-flow {
    0% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(3deg) scale(1.02);
    }
    50% {
        transform: rotate(0deg) scale(1.04);
    }
    75% {
        transform: rotate(-3deg) scale(1.02);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}

/* 血鬼术 · 飘散粒子伪元素 */
#ai-chat-answer .chat-answer-container .style_dot-flashing__8L91Q::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0.06 !important;

    /* 飘散光点 —— 多层小径向渐变 */
    background:
        radial-gradient(circle 2px at 15% 20%, rgba(78, 158, 110, 0.9) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 75% 15%, rgba(240, 192, 96, 0.9) 0%, transparent 100%),
        radial-gradient(circle 2px at 85% 70%, rgba(200, 125, 160, 0.9) 0%, transparent 100%),
        radial-gradient(circle 1px at 25% 80%, rgba(142, 180, 212, 0.9) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 50% 45%, rgba(78, 158, 110, 0.8) 0%, transparent 100%),
        radial-gradient(circle 2px at 40% 65%, rgba(120, 0, 50, 0.7) 0%, transparent 100%),
        radial-gradient(circle 1px at 65% 85%, rgba(240, 192, 96, 0.8) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 90% 40%, rgba(142, 180, 212, 0.8) 0%, transparent 100%),
        radial-gradient(circle 1px at 10% 55%, rgba(200, 125, 160, 0.7) 0%, transparent 100%),
        radial-gradient(circle 2px at 55% 10%, rgba(120, 0, 50, 0.6) 0%, transparent 100%) !important;

    animation: kimetsu-particles-drift 8s ease-in-out infinite !important;
}

/* 粒子飘动 */
@keyframes kimetsu-particles-drift {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0.06;
    }
    25% {
        transform: translateY(-8px) translateX(4px);
        opacity: 0.09;
    }
    50% {
        transform: translateY(-3px) translateX(-3px);
        opacity: 0.05;
    }
    75% {
        transform: translateY(-10px) translateX(2px);
        opacity: 0.08;
    }
}

/* ============================
   内边框 · 双重和风线框
   ============================ */

/* 内侧装饰边框 —— 用outline + outline-offset模拟 */
#ai-chat-answer .chat-answer-container div:has(> .style_dot-flashing__8L91Q) {
    outline: 1px solid rgba(45, 134, 89, 0.2) !important;
    outline-offset: -10px !important;
}

/* ============================
   语录随机感增强 · 多段语录轮播
   利用animation在不同时间段切换content
   ============================ */

/* 覆盖之前的::after，改用动画切换语录 */
#ai-chat-answer .chat-answer-container div:has(> .style_dot-flashing__8L91Q)::after {
    animation: kimetsu-quote-breathe 4s ease-in-out infinite,
               kimetsu-quote-fadein 1.5s ease-out both,
               kimetsu-quote-rotate 20s step-end infinite !important;
}

/* 语录轮播 —— 鬼灭经典台词 */
@keyframes kimetsu-quote-rotate {
    0% {
        content: '「生殺与奪の権を他人に握らせるな」' !important;
    }
    20% {
        content: '「頑張れ　炭治郎　頑張れ！！」' !important;
    }
    40% {
        content: '「俺は俺の責務を全うする！！」' !important;
    }
    60% {
        content: '「判断が遅い」' !important;
    }
    80% {
        content: '「禰豆子は俺が守る」' !important;
    }
}

/* ============================
   GIF图片区域保护 · 确保图片清晰可见
   ============================ */

/* 图片周围的呼吸光晕 */
#ai-chat-answer .chat-answer-container div:has(> .style_dot-flashing__8L91Q) {
    background-blend-mode: normal !important;
}

/* ============================
   响应式适配
   ============================ */
@media screen and (max-width: 480px) {
    #ai-chat-answer .chat-answer-container div:has(> .style_dot-flashing__8L91Q) {
        height: 320px !important;
        min-height: 260px !important;
        padding: 24px 14px 44px !important;
    }

    #ai-chat-answer .chat-answer-container div:has(> .style_dot-flashing__8L91Q)::after {
        font-size: 11px !important;
        letter-spacing: 1px !important;
        bottom: 12px !important;
    }

    #ai-chat-answer .chat-answer-container div:has(> .style_dot-flashing__8L91Q) {
        outline-offset: -7px !important;
    }
}

@media screen and (max-width: 360px) {
    #ai-chat-answer .chat-answer-container div:has(> .style_dot-flashing__8L91Q) {
        height: 280px !important;
        min-height: 220px !important;
        padding: 20px 10px 40px !important;
    }

    #ai-chat-answer .chat-answer-container div:has(> .style_dot-flashing__8L91Q)::after {
        font-size: 10px !important;
        letter-spacing: 0.5px !important;
    }
}