/* 现代简约风 UI 核心变量与重置 */
.m-ui {
  --bg: #f8f9fa;
  --card: #ffffff;
  --txt-m: #2d3748;
  --txt-s: #718096;
  --txt-w: #ffffff;
  --pri: #4299e1;
  --pri-h: #3182ce;
  --bdr: #e2e8f0;
  --shd: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shd-h: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --rad-s: 8px;
  --rad-m: 12px;
  --rad-l: 16px;
  --trans: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg);
  color: var(--txt-m);
  padding: 16px;
  border-radius: var(--rad-l);
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  line-height: 1.6;
}
.m-ui * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* 1. AI思考区域 (折叠栏) */
.m-ui .tk {
  background: var(--card);
  border-radius: var(--rad-m);
  box-shadow: var(--shd);
  overflow: hidden;
  transition: var(--trans);
}
.m-ui .tk summary {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--txt-s);
  list-style: none;
  display: flex;
  align-items: center;
  user-select: none;
}
.m-ui .tk summary::-webkit-details-marker {
  display: none;
}
.m-ui .tk summary::before {
  content: "✦";
  margin-right: 8px;
  color: var(--pri);
  font-size: 16px;
  transition: transform 0.3s ease;
}
.m-ui .tk[open] summary::before {
  transform: rotate(90deg);
}
.m-ui .tk-c {
  padding: 0 16px 16px 16px;
  font-size: 13px;
  color: var(--txt-s);
  border-top: 1px dashed var(--bdr);
  margin-top: 4px;
  padding-top: 12px;
  animation: fIn 0.4s ease;
}
/* 2. 世界观区域 */
.m-ui .wd {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.m-ui .wd-i {
  background: var(--card);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--shd);
  border: 1px solid var(--bdr);
}
.m-ui .wd-l {
  color: var(--txt-s);
  font-weight: 500;
}
.m-ui .wd-v {
  color: var(--pri);
  font-weight: 600;
}
/* 3. 正文区域 */
.m-ui .ct {
  background: var(--card);
  padding: 24px;
  border-radius: var(--rad-m);
  box-shadow: var(--shd);
  font-size: 16px;
  color: var(--txt-m);
  letter-spacing: 0.3px;
  text-align: justify;
}
/* 4. 属性区域 (User & Char) */
.m-ui .pr {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.m-ui .pr-b {
  background: var(--card);
  padding: 16px;
  border-radius: var(--rad-m);
  box-shadow: var(--shd);
}
.m-ui .pr-t {
  font-size: 14px;
  font-weight: 600;
  color: var(--txt-m);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bdr);
  display: flex;
  justify-content: space-between;
}
.m-ui .pr-l {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.m-ui .pr-i {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.m-ui .pr-n { color: var(--txt-s); }
.m-ui .pr-v { font-weight: 500; color: var(--txt-m); }
/* 简约进度条 */
.m-ui .pr-bar {
  width: 100%;
  height: 6px;
  background: var(--bg);
  border-radius: 3px;
  margin-top: 4px;
  overflow: hidden;
}
.m-ui .pr-f {
  height: 100%;
  background: var(--pri);
  border-radius: 3px;
}
/* 5. 剧情选择区域 */
.m-ui .op {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.m-ui .op-t {
  font-size: 14px;
  font-weight: 600;
  color: var(--txt-s);
  margin-bottom: 4px;
  padding-left: 4px;
}
.m-ui .op-b {
  display: block;
  width: 100%;
  padding: 14px 20px;
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: var(--rad-m);
  color: var(--txt-m);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  transition: var(--trans);
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  position: relative;
  overflow: hidden;
}
.m-ui .op-b::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background: var(--pri);
  transform: scaleY(0);
  transition: transform 0.2s ease;
}
.m-ui .op-b:hover {
  transform: translateY(-2px);
  box-shadow: var(--shd-h);
  border-color: var(--pri);
  color: var(--pri);
}
.m-ui .op-b:hover::before {
  transform: scaleY(1);
}
/* 动画 */
@keyframes fIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 响应式适配 */
@media (max-width: 600px) {
  .m-ui { padding: 10px; gap: 12px; }
  .m-ui .pr { grid-template-columns: 1fr; }
  .m-ui .ct { padding: 16px; font-size: 15px; }
  .m-ui .op-b { padding: 12px 16px; font-size: 14px; }
}
@media (max-width: 350px) {
  .m-ui .wd-i { width: 100%; justify-content: space-between; }
}
/* =========================================
   加载动画覆写区域 (严格遵守要求)
   ========================================= */
/* 隐藏原始伪元素干扰 */
div.style_dot-flashing__8L91Q.style_text__zGhNq::before,
div.style_dot-flashing__8L91Q.style_text__zGhNq::after {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}
/* 容器布局重置 */
div.flex.items-center.justify-center.w-6.h-5 {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 80px !important;
  margin: 20px 0 !important;
  background: transparent !important;
}
/* 现代简约风动画：三个呼吸柔和圆点 */
div.style_dot-flashing__8L91Q.style_text__zGhNq {
  position: relative !important;
  width: 60px !important;
  height: 12px !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 auto 16px auto !important;
  left: auto !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}
/* 使用伪类构建三个圆点 */
div.style_dot-flashing__8L91Q.style_text__zGhNq {
  /* 中间圆点 */
  background-color: #cbd5e1 !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  animation: mod-breathe 1.4s infinite ease-in-out both !important;
  animation-delay: -0.16s !important;
}
div.style_dot-flashing__8L91Q.style_text__zGhNq::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: -20px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background-color: #cbd5e1 !important;
  animation: mod-breathe 1.4s infinite ease-in-out both !important;
  animation-delay: -0.32s !important;
  visibility: visible !important;
  opacity: 1 !important;
}
div.style_dot-flashing__8L91Q.style_text__zGhNq::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 20px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background-color: #cbd5e1 !important;
  animation: mod-breathe 1.4s infinite ease-in-out both !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* 简约文字提示 */
div.flex.items-center.justify-center.w-6.h-5::after {
  content: "AI正在梳理思绪..." !important;
  position: relative !important;
  display: block !important;
  left: auto !important;
  margin: 0 auto !important;
  font-size: 13px !important;
  color: #94a3b8 !important;
  font-family: -apple-system, sans-serif !important;
  letter-spacing: 1px !important;
  font-weight: 400 !important;
  text-align: center !important;
  background: none !important;
  -webkit-text-fill-color: #94a3b8 !important;
  animation: mod-fade 2s infinite ease-in-out !important;
}
/* 动画关键帧 */
@keyframes mod-breathe {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; background-color: #4299e1; }
}
@keyframes mod-fade {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
/* ========================================= */