/* 紫水晶地牢风：深紫石砖 + 晶体微光 + 幽暗灯笼 */
.bg-gray-100\/90.relative.inline-block {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border-radius: 22px !important;
  border: 1px solid rgba(200, 160, 255, 0.28) !important;
  background-color: #120b1d !important;
  background-image:
    linear-gradient(180deg, rgba(44, 24, 74, 0.98), rgba(14, 9, 23, 0.99)),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.05) 0 1px,
      transparent 1px 42px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.04) 0 1px,
      transparent 1px 78px
    ),
    radial-gradient(circle at 14% 18%, rgba(179, 114, 255, 0.18), transparent 24%),
    radial-gradient(circle at 84% 12%, rgba(245, 190, 104, 0.10), transparent 22%),
    radial-gradient(circle at 72% 84%, rgba(155, 96, 255, 0.20), transparent 30%),
    linear-gradient(135deg, rgba(163, 106, 255, 0.10), transparent 48%) !important;
  background-blend-mode: screen, normal, normal, screen, screen, screen, screen !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -18px 28px rgba(0, 0, 0, 0.34) !important;
  backdrop-filter: blur(7px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.08) !important;
  color: #F4EEFF !important;
}

/* 幽暗灯笼光：SMIL SVG 动态主光源 */
.bg-gray-100\/90.relative.inline-block::before {
  content: "" !important;
  position: absolute !important;
  inset: -10% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.95 !important;
  mix-blend-mode: screen !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-size: cover !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 720'><defs><radialGradient id='lantern' cx='50%25' cy='50%25' r='50%25'><stop offset='0%25' stop-color='%23FFE6A8' stop-opacity='.98'/><stop offset='35%25' stop-color='%23D79BFF' stop-opacity='.52'/><stop offset='78%25' stop-color='%239A59FF' stop-opacity='.16'/><stop offset='100%25' stop-color='%239A59FF' stop-opacity='0'/></radialGradient><filter id='blur'><feGaussianBlur stdDeviation='22'/></filter></defs><g filter='url(%23blur)'><ellipse cx='860' cy='178' rx='230' ry='170' fill='url(%23lantern)'><animate attributeName='opacity' values='.26;.9;.48;.85;.26' dur='4.9s' repeatCount='indefinite'/><animateTransform attributeName='transform' type='translate' values='0 0;10 7;0 0;-8 5;0 0' dur='7.4s' repeatCount='indefinite'/></ellipse><ellipse cx='290' cy='540' rx='180' ry='120' fill='%23C88DFF' opacity='.18'><animate attributeName='opacity' values='.08;.22;.11;.19;.08' dur='6.4s' repeatCount='indefinite'/></ellipse></g></svg>") !important;
  animation: amethyst-lantern-float 7.2s ease-in-out infinite !important;
}

/* 晶尘/余光层：让地牢更有“活着”的感觉 */
.bg-gray-100\/90.relative.inline-block::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 0.8 !important;
  background-repeat: no-repeat !important;
  background-position: 12% 82%, 84% 18%, 52% 52% !important;
  background-size: 180px 180px, 160px 160px, 120px 120px !important;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'><defs><radialGradient id='g' cx='50%25' cy='50%25' r='50%25'><stop offset='0%25' stop-color='%23F0D8FF' stop-opacity='.92'/><stop offset='45%25' stop-color='%239E61FF' stop-opacity='.40'/><stop offset='100%25' stop-color='%239E61FF' stop-opacity='0'/></radialGradient></defs><circle cx='90' cy='90' r='54' fill='url(%23g)'><animate attributeName='r' values='46;58;50;62;46' dur='5.8s' repeatCount='indefinite'/><animate attributeName='opacity' values='.35;.9;.48;.8;.35' dur='5.8s' repeatCount='indefinite'/></circle></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'><defs><radialGradient id='g' cx='50%25' cy='50%25' r='50%25'><stop offset='0%25' stop-color='%23FFDCA1' stop-opacity='.88'/><stop offset='50%25' stop-color='%23E6A54C' stop-opacity='.34'/><stop offset='100%25' stop-color='%23E6A54C' stop-opacity='0'/></radialGradient></defs><circle cx='80' cy='80' r='44' fill='url(%23g)'><animate attributeName='cy' values='82;76;82;72;82' dur='6.8s' repeatCount='indefinite'/><animate attributeName='opacity' values='.22;.48;.28;.42;.22' dur='6.8s' repeatCount='indefinite'/></circle></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><defs><radialGradient id='g' cx='50%25' cy='50%25' r='50%25'><stop offset='0%25' stop-color='%23FFFFFF' stop-opacity='.72'/><stop offset='60%25' stop-color='%23B985FF' stop-opacity='.25'/><stop offset='100%25' stop-color='%23B985FF' stop-opacity='0'/></radialGradient></defs><circle cx='60' cy='60' r='22' fill='url(%23g)'><animate attributeName='r' values='16;24;18;22;16' dur='4.6s' repeatCount='indefinite'/><animate attributeName='opacity' values='.18;.52;.24;.46;.18' dur='4.6s' repeatCount='indefinite'/></circle></svg>") !important;
  animation: crystal-drift 9s linear infinite !important;
  filter: blur(0.15px) !important;
}

/* 文字内容：高对比、清晰可读 */
.markdown-body {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
  color: #F8F4FF !important;
  font-weight: 700 !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
  line-height: 1.78 !important;
  letter-spacing: 0.12px !important;
  text-rendering: optimizeLegibility !important;
}

/* 底部附属元素：按钮 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
  color: #EEDFFF !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(214, 183, 255, 0.18) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
  background: rgba(182, 123, 255, 0.14) !important;
  border-color: rgba(231, 200, 255, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* 模型名称文本 */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
  color: #EEDFFF !important;
  font-weight: 600 !important;
  opacity: 0.92 !important;
}

/* Token 消耗文本 */
.text-orange-500 {
  color: #FFD99A !important;
  font-weight: 700 !important;
}

/* 图标随文字颜色 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary svg,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 svg {
  fill: currentColor !important;
}

/* 动画 */
@keyframes amethyst-lantern-float {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1) !important;
    opacity: 0.9 !important;
  }
  50% {
    transform: translate3d(0, -4px, 0) scale(1.02) !important;
    opacity: 1 !important;
  }
}

@keyframes crystal-drift {
  0% {
    transform: translate3d(0, 0, 0) !important;
  }
  50% {
    transform: translate3d(1.4%, -1.0%, 0) !important;
  }
  100% {
    transform: translate3d(0, 0, 0) !important;
  }
}

/* 低动效适配：保留轻微动态 */
@media (prefers-reduced-motion: reduce) {
  .bg-gray-100\/90.relative.inline-block::before {
    animation-duration: 10.5s !important;
    opacity: 0.82 !important;
  }

  .bg-gray-100\/90.relative.inline-block::after {
    animation-duration: 12s !important;
    opacity: 0.56 !important;
  }

  .MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    transition: none !important;
  }
}

/* 移动端优化 */
@media (max-width: 480px) {
  .bg-gray-100\/90.relative.inline-block {
    border-radius: 18px !important;
    box-shadow:
      0 14px 30px rgba(0, 0, 0, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      inset 0 -12px 20px rgba(0, 0, 0, 0.26) !important;
  }

  .markdown-body {
    line-height: 1.72 !important;
    letter-spacing: 0.08px !important;
  }

  .MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    padding: 4px 9px !important;
  }
}

ai{
  --bg:#120e0c;
  --panel:#1d1613;
  --panel2:#241b17;
  --panel3:#2a201b;
  --line:#5d4738;
  --line2:#7d604d;
  --text:#f6ead9;
  --muted:#c9b7a2;
  --gold:#d7a157;
  --amber:#f3c26b;
  --red:#c86b55;
  --green:#83b38a;
  --blue:#79a9c7;
  --violet:#9b87c9;
  --shadow:0 10px 26px rgba(0,0,0,.28);
  display:block;
  position:relative;
  isolation:isolate;
  color:var(--text);
  font:14px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(1200px 460px at 15% -10%, rgba(216,161,90,.16), transparent 55%),
    radial-gradient(860px 420px at 100% 0%, rgba(121,169,199,.10), transparent 40%),
    linear-gradient(180deg,#0f0b09 0%, #17110f 100%);
  border:1px solid rgba(216,161,90,.22);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
  padding:10px 10px 12px;
}
ai::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.03), transparent 24%),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.022) 22px 23px),
    radial-gradient(circle at 50% 0, rgba(243,194,107,.10), transparent 35%);
  mix-blend-mode:screen;
  opacity:.55;
  z-index:-1;
}
ai details{
  margin:8px 0;
  border:1px solid rgba(216,161,90,.18);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(36,27,23,.94), rgba(23,18,16,.94));
  box-shadow:0 6px 16px rgba(0,0,0,.16);
  overflow:hidden;
  position:relative;
}
ai details[open]{
  border-color:rgba(243,194,107,.38);
  box-shadow:0 0 0 1px rgba(243,194,107,.08) inset, 0 10px 22px rgba(0,0,0,.18);
}
ai details::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(243,194,107,.55), transparent);
  opacity:.42;
  pointer-events:none;
}
ai summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  gap:.45em;
  padding:10px 12px;
  color:#fff4df;
  font-weight:700;
  letter-spacing:.03em;
  background:
    linear-gradient(90deg, rgba(216,161,90,.20), rgba(216,161,90,.06) 45%, transparent);
  border-bottom:1px solid rgba(216,161,90,.14);
}
ai summary::-webkit-details-marker{display:none}
ai summary::before{
  content:"▸";
  color:var(--amber);
  font-size:.95em;
  transition:transform .18s ease;
}
ai details[open] > summary::before{transform:rotate(90deg)}
ai details > :not(summary){
  padding:10px 12px 12px;
}
ai details:hover{
  border-color:rgba(243,194,107,.34);
  transform:translateY(-1px);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
ai p{
  margin:.35em 0;
  color:var(--text);
}
ai strong{
  color:#ffd79a;
  font-weight:700;
}
ai em{
  color:#f0cfa3;
  font-style:normal;
}
ai hr{
  border:0;
  height:1px;
  margin:10px 0;
  background:linear-gradient(90deg, transparent, rgba(216,161,90,.35), transparent);
}
ai ul, ai ol{
  margin:.35em 0 .35em 1.15em;
  padding:0;
}
ai li{margin:.22em 0}
ai table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:.45em 0 .15em;
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:rgba(10,8,7,.22);
  border:1px solid rgba(216,161,90,.16);
  border-radius:10px;
}
ai table th,
ai table td{
  padding:7px 8px;
  border-bottom:1px solid rgba(216,161,90,.10);
  border-right:1px solid rgba(216,161,90,.08);
  vertical-align:top;
  white-space:nowrap;
}
ai table th{
  color:#1d140c;
  background:linear-gradient(180deg,#f1c57c,#d7a157);
  font-weight:800;
  text-align:left;
}
ai table tr:last-child td{border-bottom:0}
ai table th:last-child,
ai table td:last-child{border-right:0}
ai table tr:nth-child(even) td{
  background:rgba(255,255,255,.02);
}
ai details:nth-of-type(1) > summary{background:linear-gradient(90deg, rgba(216,161,90,.28), rgba(216,161,90,.06) 50%, transparent)}
ai details:nth-of-type(2) > summary{background:linear-gradient(90deg, rgba(121,169,199,.24), rgba(121,169,199,.06) 50%, transparent)}
ai details:nth-of-type(3) > summary{background:linear-gradient(90deg, rgba(200,107,85,.24), rgba(200,107,85,.06) 50%, transparent)}
ai details:nth-of-type(4) > summary{background:linear-gradient(90deg, rgba(131,179,138,.22), rgba(131,179,138,.06) 50%, transparent)}
ai details:nth-of-type(5) > summary{background:linear-gradient(90deg, rgba(155,135,201,.24), rgba(155,135,201,.06) 50%, transparent)}
ai details:nth-of-type(1)::before,
ai details:nth-of-type(2)::before,
ai details:nth-of-type(3)::before,
ai details:nth-of-type(4)::before,
ai details:nth-of-type(5)::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:2px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(243,194,107,.4), transparent);
  opacity:.55;
}
ai a{
  color:#ffd07d;
  text-decoration:none;
  border-bottom:1px dashed rgba(255,208,125,.35);
}
ai a:hover{color:#fff2cf}
ai blockquote{
  margin:.45em 0;
  padding:.5em .75em;
  color:var(--muted);
  border-left:3px solid rgba(216,161,90,.45);
  background:rgba(255,255,255,.03);
  border-radius:0 8px 8px 0;
}
ai code{
  color:#ffd79a;
  background:rgba(0,0,0,.24);
  padding:.12em .35em;
  border-radius:6px;
}
ai::selection,
ai *::selection{
  background:rgba(243,194,107,.28);
  color:#fff;
}
@media (max-width:480px){
  ai{
    padding:8px;
    border-radius:12px;
    font-size:13px;
  }
  ai summary{
    padding:9px 10px;
  }
  ai details > :not(summary){
    padding:9px 10px 10px;
  }
  ai table th,
  ai table td{
    padding:6px 7px;
  }
}