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

/* 2. 统一聊天框主体美化：深邃玄青底色 + 暗金/瑰红微光边框 */
.bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(145deg, rgba(10, 15, 22, 0.95) 0%, rgba(30, 10, 15, 0.95) 100%) !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(230, 57, 70, 0.08) !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.3s ease !important;
}

/* 3. 玩家输入框特化：偏向天蓝寒冰气息，以作区分 */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
    background: linear-gradient(145deg, rgba(15, 25, 35, 0.95) 0%, rgba(10, 20, 30, 0.95) 100%) !important;
    border: 1px solid rgba(135, 206, 235, 0.4) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(135, 206, 235, 0.05) !important;
}

/* 4. 【最高可读性强制覆盖】正文文本：高对比纯色，绝对禁止阴影 */
.markdown-body {
    color: #F0F0F0 !important; 
    font-family: system-ui, -apple-system, sans-serif !important;
    font-weight: bold !important;
    text-shadow: none !important; 
    z-index: 1 !important;
    background: transparent !important;
}

/* 5. 底部附加元素：高对比浅灰色，确保在深色背景上清晰可见 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #EAEAEA !important;
    font-weight: bold !important;
}

/* 6. 隐藏默认的三个小圆点加载动画 */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
    display: none !important;
}

/* 7. 巨大的法阵加载动画容器设置 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 80px !important; /* 强制放大容器 */
    height: 80px !important;
    margin: 15px auto !important; /* 居中显示 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 8. 核心：使用SMIL内联SVG绘制【太阴欲火法阵】动效 */
/* 包含：天蓝外环(顺转) + 鎏金六芒星(逆转) + 瑰红内环与脉动阵眼 */
.flex.items-center.justify-center.w-6.h-5::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='80' height='80'><defs><filter id='g'><feGaussianBlur stdDeviation='2' result='b'/><feComposite in='SourceGraphic' in2='b' operator='over'/></filter></defs><g filter='url(%23g)'><circle cx='50' cy='50' r='42' fill='none' stroke='%2387ceeb' stroke-width='2' stroke-dasharray='15 5'><animateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='6s' repeatCount='indefinite'/></circle><polygon points='50,18 78,34 78,66 50,82 22,66 22,34' fill='none' stroke='%23d4af37' stroke-width='1.5'><animateTransform attributeName='transform' type='rotate' from='360 50 50' to='0 50 50' dur='8s' repeatCount='indefinite'/></polygon><polygon points='50,18 78,66 22,66' fill='none' stroke='%23d4af37' stroke-width='1'><animateTransform attributeName='transform' type='rotate' from='360 50 50' to='0 50 50' dur='8s' repeatCount='indefinite'/></polygon><polygon points='50,82 78,34 22,34' fill='none' stroke='%23d4af37' stroke-width='1'><animateTransform attributeName='transform' type='rotate' from='360 50 50' to='0 50 50' dur='8s' repeatCount='indefinite'/></polygon><circle cx='50' cy='50' r='20' fill='none' stroke='%23e63946' stroke-width='2' stroke-dasharray='6 4'><animateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='3s' repeatCount='indefinite'/></circle><circle cx='50' cy='50' r='6' fill='%23e63946'><animate attributeName='opacity' values='0.3;1;0.3' dur='1.5s' repeatCount='indefinite'/></circle></g></svg>") !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
}

c-ui {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: #c9d1d9;
  background: #0d1117;
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,0,0,0.8);
  --bg: #0d1117;
  --panel: rgba(20, 30, 48, 0.8);
  --gold: #d4af37;
  --d-gold: #b8860b;
  --red: #e63946;
  --blue: #87ceeb;
  --ice: #e0f7fa;
  --bdr: rgba(212, 175, 55, 0.3);
}
c-ui details {
  background: var(--panel);
  margin-bottom: 8px;
  border-radius: 4px;
  border: 1px solid var(--bdr);
  overflow: hidden;
}
c-ui summary {
  padding: 8px 10px;
  font-weight: bold;
  color: var(--gold);
  background: linear-gradient(90deg, rgba(20,30,48,1) 0%, rgba(60,10,20,0.8) 100%);
  cursor: pointer;
  list-style: none;
  border-left: 3px solid var(--d-gold);
  text-shadow: 0 0 3px rgba(212,175,55,0.5);
  transition: all 0.3s ease;
}
c-ui summary::-webkit-details-marker { display: none; }
c-ui details[open] > summary {
  border-left-color: var(--red);
  box-shadow: inset 0 -1px 0 var(--bdr);
  background: linear-gradient(90deg, rgba(20,30,48,1) 0%, rgba(138,3,3,0.4) 100%);
}
c-ui hd {
  display: flex;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--d-gold), rgba(20,30,48,0.9));
  padding: 6px 10px;
  border-radius: 4px;
  margin-bottom: 8px;
  color: var(--ice);
  font-weight: bold;
  border: 1px solid var(--gold);
  box-shadow: 0 0 8px rgba(212,175,55,0.2);
}
c-ui hd t { color: var(--ice); }
c-ui hd l { color: var(--gold); }
c-ui txt {
  display: block;
  padding: 12px;
  margin: 8px 0;
  color: var(--ice);
  background: linear-gradient(135deg, rgba(20,30,48,0.6), rgba(138,3,3,0.15));
  border-left: 2px solid var(--red);
  border-radius: 0 4px 4px 0;
  text-indent: 2em;
}
c-ui p {
  margin: 0;
  padding: 8px;
}
c-ui d {
  display: flex;
  margin-bottom: 6px;
  align-items: baseline;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  padding-bottom: 4px;
}
c-ui d:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
c-ui f {
  min-width: 65px;
  color: var(--red);
  font-weight: bold;
  margin-right: 8px;
  text-shadow: 0 0 2px rgba(230,57,70,0.4);
  flex-shrink: 0;
}
c-ui d span {
  color: var(--blue);
  flex-grow: 1;
}
c-ui lv {
  display: block;
  padding: 8px;
  background: rgba(0,0,0,0.3);
  border-top: 1px solid var(--bdr);
}
c-ui .lv-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 13px;
}
c-ui .lv-info b { color: var(--red); }
c-ui .lv-info span { color: var(--gold); font-weight: bold; }
c-ui .lv-info i { color: #888; font-size: 12px; }
@keyframes pulseGlow {
  0% { box-shadow: 0 0 3px var(--red); }
  50% { box-shadow: 0 0 10px var(--red), 0 0 5px var(--gold); }
  100% { box-shadow: 0 0 3px var(--red); }
}
c-ui bar {
  display: block;
  height: 8px;
  background: #222;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  border: 1px solid #444;
}
c-ui bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: var(--v);
  background: linear-gradient(90deg, var(--blue), var(--red), var(--gold));
  animation: pulseGlow 2s infinite;
  transition: width 0.3s ease;
}
c-ui q {
  display: block;
  padding: 10px;
  background: rgba(230,57,70,0.08);
  border-left: 3px solid var(--red);
  color: var(--gold);
  font-style: italic;
  margin: 8px;
  border-radius: 0 4px 4px 0;
}
c-ui q b { color: var(--red); margin-right: 4px; }
c-ui mr {
  display: block;
  padding: 8px;
  font-size: 12px;
  color: #888;
  background: rgba(0,0,0,0.2);
}
c-ui .o p {
  padding: 6px 8px;
  background: rgba(20,30,48,0.8);
  border: 1px solid var(--bdr);
  margin-bottom: 6px;
  border-radius: 4px;
  color: var(--ice);
  cursor: pointer;
  transition: 0.2s;
}
c-ui .o p:hover {
  background: rgba(60,10,20,0.8);
  border-color: var(--red);
  color: var(--gold);
}