/* ==========================================================================
   阿库玛_Akuma 专属聊天框美化 - 地雷系赛博风 + 巨型图片加载舱
   ========================================================================== */

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

/* 2. 统一聊天框基础样式 (深色背景，粗黑边框，粉紫阴影) */
.bg-gray-100\/90.relative.inline-block {
    background-color: #120a14 !important; /* 极深紫黑色 */
    border: 3px solid #000000 !important;
    border-radius: 12px !important;
    box-shadow: 5px 5px 0px #ff007f !important; /* 亮粉色偏移阴影 */
    padding: 15px !important;
    margin-bottom: 10px !important;
    transition: all 0.3s ease !important;
}

/* 3. 单独区分玩家(User)的输入框 (换个边框和阴影颜色以示区分) */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
    background-color: #1a1a24 !important;
    box-shadow: 5px 5px 0px #00ced1 !important; /* 亮青色阴影 */
}

/* 4. 【最高原则】确保主文本绝对清晰可读 (深底浅字) */
.markdown-body {
    color: #f0f0f0 !important; /* 高对比度浅灰白 */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, 'Microsoft YaHei' !important;
    font-size: 15px !important;
    text-shadow: none !important; /* 严禁文字阴影影响阅读 */
    background: transparent !important;
    z-index: 2 !important;
    position: relative !important;
}

/* 5. 底部附加元素 (按钮、模型名、Token等) 颜色适配 */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary,
.MuiTypography-root.MuiTypography-body2.css-6c0gf2,
.text-orange-500 {
    color: #ff99cc !important; /* 浅粉色，既能看清又符合主题 */
    font-weight: bold !important;
}

/* ==========================================================================
   巨型自定义加载模块 (图片 + SVG动画 + 伪进度条 + 提示字)
   ========================================================================== */

/* 隐藏系统默认的三个闪烁小圆点 */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
    display: none !important;
}

/* 突破默认加载容器的限制，将其变为一个巨大的展示舱 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 100% !important;
    min-width: 280px !important;
    height: 350px !important; /* 给予巨大的高度空间 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: transparent !important;
    margin: 15px 0 !important;
    padding-top: 10px !important;
}

/* ::before 承担：指定图片 + 旋转的十字星芒SVG动画 */
.flex.items-center.justify-center.w-6.h-5::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 260px !important; /* 图片区域高度 */
    /* 使用多重背景：上层是您的图片(contain保持原比例)，下层是SVG动画 */
    background-image: 
        url('https://catai.wiki/1f7de882-5918-47d3-34a9-d72d40f18c00/w=3000'),
        url('data:image/svg+xml;utf8,<svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g transform="translate(50,50)"><path d="M0 -40 L10 -10 L40 0 L10 10 L0 40 L-10 10 L-40 0 L-10 -10 Z" fill="%23ff007f" opacity="0.3"><animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="4s" repeatCount="indefinite"/></path><circle cx="0" cy="0" r="35" fill="none" stroke="%23ff66b2" stroke-width="1" stroke-dasharray="5 5"><animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="8s" repeatCount="indefinite"/></circle></g></svg>');
    background-position: center center, center center !important;
    background-size: contain, 200px 200px !important; /* 图片自适应居中，动画固定大小 */
    background-repeat: no-repeat, no-repeat !important;
    margin-bottom: 15px !important;
    border-radius: 8px !important;
    box-shadow: 0 0 20px rgba(255, 0, 127, 0.2) !important;
}

/* 进度条动画关键帧 */
@keyframes loadingProgress {
    0% { background-size: 0% 100%; }
    50% { background-size: 80% 100%; }
    100% { background-size: 100% 100%; }
}

/* ::after 承担：伪进度条 + 提示文字 */
.flex.items-center.justify-center.w-6.h-5::after {
    content: "建议2到4游玩记忆，下方有快捷键，按需使用。" !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 90% !important;
    height: 40px !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    text-align: center !important;
    text-shadow: 1px 1px 0px #000 !important;
    /* 进度条底色与边框 */
    background-color: #1a0f1a !important; 
    border: 2px solid #ff007f !important;
    border-radius: 20px !important;
    box-shadow: 3px 3px 0px #000 !important;
    /* 动态进度条背景 */
    background-image: linear-gradient(90deg, rgba(255, 0, 127, 0.6) 0%, rgba(255, 102, 178, 0.8) 100%) !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    /* 应用动画模拟加载过程 */
    animation: loadingProgress 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate !important;
}

/* 移动端适配 */
@media (max-width: 480px) {
    .flex.items-center.justify-center.w-6.h-5 { height: 280px !important; }
    .flex.items-center.justify-center.w-6.h-5::before { height: 180px !important; }
    .flex.items-center.justify-center.w-6.h-5::after { font-size: 10px !important; width: 95% !important; }
}

c-ui {
  display: block;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  background: #0d0912;
  color: #e0d8e6;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid #3a1c4a;
  box-shadow: inset 0 0 40px rgba(138, 43, 226, 0.1), 0 0 15px rgba(255, 42, 133, 0.15);
  --pink: #ff2a85;
  --purple: #8a2be2;
  --gold: #ffcc00;
  --cyan: #00f0ff;
  --red: #ff003c;
  --dark: #16101d;
  line-height: 1.5;
}
c-ui details {
  margin-bottom: 8px;
  background: var(--dark);
  border-radius: 8px;
  border: 1px solid #2d193b;
  overflow: hidden;
  transition: all 0.3s ease;
}
c-ui summary {
  padding: 10px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(90deg, #22122e 0%, #110918 100%);
  color: var(--pink);
  text-shadow: 0 0 8px rgba(255, 42, 133, 0.6);
  border-bottom: 1px solid #4a2b5e;
  display: flex;
  align-items: center;
  position: relative;
}
c-ui summary::-webkit-details-marker { display: none; }
c-ui summary::marker { content: ''; }

/* 场记板头部 */
c-ui hd {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: repeating-linear-gradient(45deg, #111, #111 12px, #eee 12px, #eee 24px);
  padding: 6px;
  border-radius: 6px;
  margin-bottom: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.5);
  border: 2px solid #333;
}
c-ui hd t, c-ui hd l {
  background: #000;
  color: #fff;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
  border-left: 3px solid var(--gold);
  text-shadow: 0 0 3px var(--gold);
}

/* 文本正文区 - 烟雾与逼仄感 */
c-ui txt {
  display: block;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255,42,133,0.08) 0%, rgba(138,43,226,0.05) 100%);
  border-left: 4px solid var(--pink);
  margin-bottom: 10px;
  color: #f0e6f5;
  text-shadow: 1px 1px 2px #000;
  position: relative;
  border-radius: 0 8px 8px 0;
}
c-ui txt::after {
  content: '🚬';
  position: absolute;
  top: 5px;
  right: 10px;
  font-size: 20px;
  opacity: 0.4;
  filter: drop-shadow(0 -10px 10px rgba(255,255,255,0.6));
}

/* 键值对网格布局 (移动端适配) */
c-ui p {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  padding: 10px;
  margin: 0;
}
c-ui d {
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,0.5);
  border: 1px solid #3d2452;
  border-radius: 6px;
  padding: 6px;
  position: relative;
  padding-left: 12px;
}
/* 胶囊状装饰 */
c-ui d::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 18px;
  background: linear-gradient(to bottom, var(--pink) 50%, #fff 50%);
  border-radius: 10px;
  box-shadow: 0 0 5px var(--pink);
}
c-ui f {
  font-size: 11px;
  color: #b594d6;
  text-transform: uppercase;
  margin-bottom: 3px;
  font-weight: bold;
}
c-ui span {
  font-size: 13px;
  color: #fff;
}

/* 模块个性化: V圈动态 (赛博青色对比) */
c-ui .nw summary { color: var(--cyan); text-shadow: 0 0 8px var(--cyan); }
c-ui .nw d::before { background: linear-gradient(to bottom, var(--cyan) 50%, #fff 50%); box-shadow: 0 0 5px var(--cyan); }

/* 模块个性化: 病娇女友 (蕾丝裙边与粉紫) */
c-ui .c {
  border: 1px solid var(--pink);
  box-shadow: 0 0 10px rgba(255,42,133,0.3);
  position: relative;
  padding-bottom: 15px;
}
/* 底部蕾丝花边效果 */
c-ui .c::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 12px;
  background: radial-gradient(circle at 10px 0, transparent 10px, var(--pink) 11px);
  background-size: 20px 12px;
  opacity: 0.8;
}
c-ui .c summary { background: linear-gradient(90deg, #330b1c 0%, #1a0814 100%); }

/* 模块个性化: 直播面板 (打赏金币与高亮) */
c-ui .v-stats { border-color: var(--gold); }
c-ui .v-stats summary { color: var(--gold); text-shadow: 0 0 8px var(--gold); }
c-ui .v-stats d { background: rgba(30,20,0,0.6); border-color: #554411; }
c-ui .v-stats d::before { background: linear-gradient(to bottom, var(--gold) 50%, #fff 50%); box-shadow: 0 0 5px var(--gold); }
c-ui .v-stats span { color: #ffeb99; font-weight: bold; }

/* 模块个性化: 里垢 (夸张笔记风/小刀) */
c-ui .th {
  background: #1a0505;
  border: 1px dashed var(--red);
  transform: rotate(-1deg);
}
c-ui .th summary { color: var(--red); text-shadow: 0 0 8px var(--red); background: #220505; }
c-ui .th summary::after { content: '🔪'; position: absolute; right: 10px; font-size: 16px; }
c-ui q {
  display: block;
  padding: 12px;
  color: #ff99aa;
  font-family: "楷体", serif;
  font-size: 13px;
  line-height: 1.6;
  text-shadow: 1px 1px 0 #000;
  border-left: 4px solid var(--red);
  background: rgba(255,0,0,0.05);
}
c-ui q b { color: var(--red); display: block; margin-bottom: 4px; }

/* 进度条 (心电图/血槽感) */
c-ui lv {
  display: block;
  padding: 10px;
  background: rgba(0,0,0,0.7);
  margin: 6px 10px;
  border-radius: 6px;
  border: 1px solid #4a152d;
}
c-ui .lv-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 6px;
}
c-ui .lv-info b { font-size: 13px; color: #ff66a3; }
c-ui .lv-info span { font-size: 12px; color: #fff; font-weight: bold; background: var(--pink); padding: 2px 6px; border-radius: 4px; }
c-ui .lv-info i { font-size: 11px; color: #a888c0; font-style: normal; max-width: 50%; text-align: right; }
c-ui bar {
  display: block;
  height: 10px;
  background: #220a14;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
}
c-ui bar::after {
  content: '';
  display: block;
  height: 100%;
  width: var(--v, 0%);
  background: linear-gradient(90deg, #8a2be2, #ff2a85, #ff88bb);
  box-shadow: 0 0 10px var(--pink);
  transition: width 0.5s ease;
  border-radius: 5px;
}

/* 记忆模块 */
c-ui .m mr { display: block; font-size: 11px; color: #888; padding: 8px; background: #111; border-bottom: 1px solid #333; }
c-ui .sm summary { font-size: 13px; padding: 6px 10px; background: #1a1a1a; color: #ccc; border: none; }

/* 选项模块 (游戏发光按键) */
c-ui .o p { display: block; padding: 10px 15px; margin: 6px 10px; background: rgba(138,43,226,0.1); border: 1px solid var(--purple); border-radius: 6px; color: #d4b5ff; cursor: pointer; transition: 0.2s; }
c-ui .o p:hover { background: rgba(138,43,226,0.3); box-shadow: 0 0 15px rgba(138,43,226,0.5); transform: translateX(5px); color: #fff; }

/* 系统隐藏 */
c-ui .sys { opacity: 0.5; border-color: #333; }
c-ui .sys summary { color: #666; background: #000; font-size: 12px; text-shadow: none; }