/* ===== 0. 全局背景与星星动画（迁移到平台实际容器） ===== */
.flex-1.overflow-y-auto {
    background: linear-gradient(180deg, #fff0f5 0%, #b2c9ff 40%, #1a1b2f 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
    position: relative !important;
}

/* 星星闪烁动画（原 body::after） */
.flex-1.overflow-y-auto::after {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: 
        radial-gradient(2px 2px at 10% 70%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(3px 3px at 25% 85%, #f2e6ff, transparent),
        radial-gradient(2px 2px at 42% 92%, #ffffff, transparent),
        radial-gradient(4px 4px at 68% 78%, #f8e3ff, transparent),
        radial-gradient(3px 3px at 83% 65%, #ffffff, transparent),
        radial-gradient(2px 2px at 55% 95%, #f2e6ff, transparent),
        radial-gradient(3px 3px at 91% 80%, #ffffff, transparent),
        radial-gradient(2px 2px at 37% 88%, #f8e3ff, transparent),
        radial-gradient(4px 4px at 76% 93%, #ffffff, transparent),
        radial-gradient(3px 3px at 12% 95%, #f2e6ff, transparent) !important;
    background-repeat: no-repeat !important;
    opacity: 0.5 !important;
    pointer-events: none !important;
    animation: twinkling 5s infinite alternate !important;
    z-index: 0 !important;
}

@keyframes twinkling {
    0% { opacity: 0.3; }
    100% { opacity: 0.9; }
}

/* ===== 1. 移除顶部颜色条 ===== */
[class*="bg-[#F1CBCB]"], [class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* ===== 2. 加载动画重制（星空旋转星） ===== */
/* 隐藏原有闪烁圆点 */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

/* 加载容器重制（星星+文字） */
.flex.items-center.justify-center.w-6.h-5 {
    width: auto !important;
    min-width: 80px !important;
    height: 28px !important;
    background: transparent !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-left: 30px !important;
}

/* 星星（绝对定位在左侧） */
.flex.items-center.justify-center.w-6.h-5::before {
    content: "★" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #f8e3a0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    text-shadow: 0 0 10px #c69cf0, 0 0 20px #b288d0 !important;
    animation: star-spin 1.2s infinite ease-in-out !important;
    pointer-events: none !important;
}

/* 文字 */
.flex.items-center.justify-center.w-6.h-5::after {
    content: "思念中" !important;
    position: relative !important;
    color: #f8e3a0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-shadow: 0 0 8px #c69cf0, 0 0 15px #b288d0 !important;
    animation: thinking-breath 1.5s infinite ease-in-out !important;
    margin-left: 4px !important;
}

@keyframes star-spin {
    0% { transform: translateY(-50%) rotate(0deg) scale(1); opacity: 1; }
    50% { transform: translateY(-50%) rotate(180deg) scale(1.2); opacity: 0.8; }
    100% { transform: translateY(-50%) rotate(360deg) scale(1); opacity: 1; }
}

@keyframes thinking-breath {
    0% { opacity: 0.6; text-shadow: 0 0 5px #f8e3a0; }
    50% { opacity: 1; text-shadow: 0 0 15px #ffb3c6, 0 0 25px #c69cf0; }
    100% { opacity: 0.6; text-shadow: 0 0 5px #f8e3a0; }
}

/* ===== 3. 聊天框容器（统一毛玻璃深色风格） ===== */
.bg-gray-100\/90.relative.inline-block {
    display: block !important;          /* 从 inline-block 改为 block 以支持居中 */
    margin-left: auto !important;
    margin-right: auto !important;
    width: fit-content !important;      /* 宽度随内容自适应 */
    max-width: min(800px, 90%) !important; /* 最大宽度，可根据喜好调整 */
    background: rgba(20, 18, 30, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(200, 180, 255, 0.4) !important;
    border-radius: 24px !important;
    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(180, 150, 255, 0.3) inset, 0 0 20px rgba(160, 130, 255, 0.2) !important;
    transition: all 0.3s ease !important;
}
.bg-gray-100\/90.relative.inline-block:hover {
    border-color: rgba(225, 190, 255, 0.7) !important;
    box-shadow: 0 20px 40px -8px #2f1b3b, 0 0 25px #c68bb5 !important;
}

/* ===== 4. 文本内容区域 ===== */
.markdown-body {
    color: #f0e6ff !important;
    font-size: 1rem !important;
    line-height: 1.7 !important;
    text-shadow: none !important;
}
.markdown-body p {
    margin: 0.8rem 0 !important;
}

/* ===== 5. 底部功能按钮组 ===== */
.flex.items-center.gap-2.pb-2 > button {
    background: rgba(200, 170, 240, 0.15) !important;
    border: 1px solid #b28ed6 !important;
    border-radius: 40px !important;
    color: #f0defa !important;
    padding: 0.4rem 1.2rem !important;
    font-size: 0.95rem !important;
    backdrop-filter: blur(4px) !important;
    transition: 0.2s !important;
}
.flex.items-center.gap-2.pb-2 > button:hover {
    background: rgba(170, 130, 230, 0.4) !important;
    border-color: #e1b5ff !important;
    box-shadow: 0 0 15px #c68bb5 !important;
}

/* ===== 6. 顶部导航栏 ===== */
.sticky.w-full.top-0.flex.items-center {
    background: rgba(20, 18, 30, 0.5) !important;
    backdrop-filter: blur(8px) !important;
    border-bottom: 1px solid #5a4070 !important;
    padding: 0.5rem 1rem !important;
}

/* ===== 7. AI模型选择器 ===== */
#ai-model-selector .group.flex.items-center.px-2.h-8 {
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 30px !important;
    border: 1px solid #7b5f9c !important;
    color: #f0e6ff !important;
}

/* ===== 8. 设置按钮 ===== */
#header-setting-button {
    color: #dbbaff !important;
    background: transparent !important;
}
#header-setting-button:hover {
    color: #f8e3ff !important;
    text-shadow: 0 0 8px #c69cf0 !important;
}

/* ===== 9. 底部输入区容器 ===== */
.w-full.bottom-0.z-20.inset-x-0.bg-white.transition-all {
    background: rgba(20, 18, 30, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    border-top: 1px solid #5a4070 !important;
    display: flex !important;
    justify-content: center !important;
}

/* 输入区域内部内容限制最大宽度 */
.w-full.bottom-0.z-20.inset-x-0.bg-white.transition-all > div {
    max-width: min(800px, 90%) !important;
    width: 100% !important;
}

/* ===== 10. 聊天输入框 ===== */
#ai-chat-input {
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid #7b5f9c !important;
    border-radius: 40px !important;
    color: #f0e6ff !important;
    padding: 0.6rem 1.2rem !important;
    font-size: 1rem !important;
}
#ai-chat-input::placeholder {
    color: #aa99bb !important;
}
#ai-chat-input:focus {
    border-color: #c69cf0 !important;
    box-shadow: 0 0 15px #b288d0 !important;
    outline: none !important;
}

/* ===== 11. 发送按钮 ===== */
#ai-send-button {
    background: linear-gradient(145deg, #b288d0, #8f6fb0) !important;
    border: none !important;
    border-radius: 40px !important;
    color: #ffffff !important;
    padding: 0.6rem 1.5rem !important;
    font-weight: 600 !important;
    box-shadow: 0 0 15px #b288d0 !important;
    transition: 0.2s !important;
}
#ai-send-button:hover {
    background: linear-gradient(145deg, #c79bc7, #b288d0) !important;
    box-shadow: 0 0 25px #e1b5ff !important;
}

/* ===== 12. 消耗信息框 ===== */
.text-purple-500 {
    color: #dbbaff !important;
    font-weight: 500 !important;
}

/* ===== 13. 聊天操作按钮组 ===== */
.MuiStack-root.css-1dzoql9 .MuiButton-root {
    background: rgba(200, 170, 240, 0.1) !important;
    border: 1px solid #5c4270 !important;
    border-radius: 30px !important;
    color: #d6c2e6 !important;
    padding: 0.3rem 1rem !important;
    font-size: 0.9rem !important;
}
.MuiStack-root.css-1dzoql9 .MuiButton-root:hover {
    background: rgba(170, 130, 230, 0.3) !important;
    border-color: #b288d0 !important;
}

/* ===== 14. 分页导航 ===== */
.MuiPagination-root {
    color: #f0e6ff !important;
}
.MuiPagination-root button {
    background: rgba(200, 170, 240, 0.15) !important;
    border: 1px solid #6d5185 !important;
    color: #f0e6ff !important;
    border-radius: 30px !important;
}
.MuiPagination-root button.Mui-selected {
    background: #b288d0 !important;
    border-color: #e1b5ff !important;
    color: #ffffff !important;
}

/* ===== 用户自定义卡片样式（保留，与平台无关） ===== */
.sky-journal {
    max-width: 900px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
    margin: 0 auto; /* 确保卡片自身居中 */
}

.card {
    background: rgba(20, 18, 30, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(200, 180, 255, 0.3);
    border-radius: 28px;
    padding: 1.5rem 2rem;
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(180, 150, 255, 0.2) inset;
    transition: all 0.3s ease;
}

/* 主容器 */
.sky-journal {
  max-width: 900px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}

/* ===== 卡片通用样式 ===== */
.card {
  background: rgba(20, 18, 30, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(200, 180, 255, 0.3);
  border-radius: 28px;
  padding: 1.5rem 2rem;
  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(180, 150, 255, 0.2) inset;
  transition: all 0.3s ease;
}

.card:hover {
  border-color: rgba(225, 190, 255, 0.7);
  box-shadow: 0 20px 35px -8px #2f1b3b, 0 0 15px rgba(160, 130, 255, 0.3);
}

/* 标题行 */
.card-title {
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 1.3rem;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f8e3ff;
  border-left: 6px solid;
  border-image: linear-gradient(180deg, #f8d7e3, #2d1b3a) 1;
  padding-left: 18px;
  letter-spacing: 1px;
  text-shadow: 0 0 8px #b288d0;
}

.card-title .icon {
  font-size: 1.8rem;
  filter: drop-shadow(0 0 6px #d4a5ff);
}

/* ===== 头部 ===== */
.journal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0.5rem 1rem 0.2rem 1rem;
  border-bottom: 2px solid #9f8ccf;
  color: #f0e6ff;
}

.journal-header h1 {
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: 4px;
  text-shadow: 0 0 10px #b78fce, 0 0 20px #7a4d9e;
  color: #ffffff;
}

.journal-header span {
  font-size: 0.9rem;
  color: #d6c2e6;
  font-style: italic;
}

/* ===== 场景元数据 ===== */
.scene-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  background: rgba(255, 240, 245, 0.15);
  border-radius: 40px;
  padding: 0.9rem 2rem;
  margin-bottom: 1.5rem;
  border: 1px dashed #c79bc7;
  font-size: 1rem;
  color: #f2d9ff;
}

.scene-meta div span {
  color: #dbbaff;
  font-weight: 600;
  margin-right: 8px;
}

.scene-weather {
  font-style: italic;
  background: rgba(200, 170, 240, 0.2);
  padding: 0.1rem 1.5rem;
  border-radius: 40px;
}

/* ===== 正文段落 ===== */
.main-text p {
  margin: 1.2rem 0;
  line-height: 1.8;
  text-indent: 2em;
  font-size: 1.05rem;
  color: #f2e5ff;
  word-break: break-word;
}

.main-text p:first-child {
  margin-top: 0.2rem;
}

/* ===== 玩家档案网格 ===== */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem 2.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 24px;
  padding: 1.3rem 2rem;
  border: 1px solid #5c4270;
}

.profile-item {
  display: flex;
  align-items: baseline;
  border-bottom: 1px dotted #886ab3;
  padding: 8px 0;
}

.profile-item .tag {
  color: #c9a9e6;
  width: 85px;
  font-weight: 500;
  font-size: 0.98rem;
}

.profile-item .value {
  color: #f2e5ff;
  flex: 1;
}

/* ===== 双数值条 ===== */
.stats-area {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 1.4rem 2rem;
  border-radius: 40px;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.stat-label {
  width: 70px;
  font-weight: 600;
  color: #dbbaff;
}

.stat-bar-bg {
  flex: 1;
  min-width: 220px;
  height: 16px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 40px;
  overflow: hidden;
  border: 1px solid #7b5f9c;
}

.stat-fill {
  height: 100%;
  width: 0%;
  border-radius: 40px;
  transition: width 0.3s;
}

.fill-affection {
  background: linear-gradient(90deg, #ffb3c6, #b288d0);
  box-shadow: 0 0 10px #ff99cc;
}

.fill-heartknot {
  background: linear-gradient(90deg, #79c9ff, #4f96e2);
  box-shadow: 0 0 10px #7bb3ff;
}

.stat-value {
  min-width: 70px;
  text-align: right;
  color: #f8e3ff;
  font-weight: 600;
  font-size: 1.1rem;
}

/* ===== 记忆碎片徽章 ===== */
.fragments-box {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.2);
  padding: 1.5rem 2rem;
  border-radius: 40px;
  border: 1px solid #7d5c99;
}

.fragment-badge {
  background: linear-gradient(145deg, #f8d7e3, #9f8ccf);
  border: 1px solid #f0d9b0;
  color: #1e1529;
  padding: 0.5rem 1.5rem;
  border-radius: 40px;
  font-size: 1rem;
  font-weight: 500;
  box-shadow: 0 0 12px #b288d0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fragment-badge.locked {
  background: rgba(50, 40, 60, 0.6);
  border-color: #5f4b70;
  box-shadow: none;
  color: #aa99bb;
  backdrop-filter: blur(2px);
}

.fragment-badge .emoji {
  font-size: 1.2rem;
}

/* ===== 剧情进度 ===== */
.plot-track {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 40px;
  padding: 1rem 2rem;
  border: 1px solid #8f6fb0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
}

.plot-chapter {
  background: linear-gradient(145deg, #4a2d5e, #2d1b3a);
  padding: 0.5rem 2rem;
  border-radius: 40px;
  font-weight: 600;
  color: #f8e3ff;
  border: 1px solid #c79bc7;
  box-shadow: 0 0 8px #b288d0;
}

.plot-desc {
  color: #e6d0ff;
  font-size: 1.05rem;
}

/* ===== 记忆表格 ===== */
.memory-section {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.memory-sub {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 30px;
  padding: 1.3rem 1.8rem;
  border: 1px solid #6d5185;
}

.memory-sub h3 {
  color: #dbbaff;
  font-weight: 400;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  padding-left: 15px;
  border-left: 4px solid #986fc2;
}

.mem-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.96rem;
}

.mem-table th {
  text-align: left;
  color: #c9a9e6;
  font-weight: 500;
  padding: 8px 8px 4px 8px;
  border-bottom: 1px solid #7b5f9c;
}

.mem-table td {
  padding: 10px 8px;
  border-bottom: 1px dashed #5f4b70;
  color: #f0e2ff;
}

.mem-table tr:last-child td {
  border-bottom: none;
}

.mem-table .mem-no {
  width: 45px;
  color: #b491d4;
  font-weight: 500;
}

.mem-table .mem-content {
  word-break: break-word;
}

/* ===== 行动按钮 ===== */
.action-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.8rem;
}

.action-btn {
  background: rgba(200, 170, 240, 0.15);
  border: 1px solid #b28ed6;
  border-radius: 60px;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  color: #f0defa;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
}

.action-btn:hover {
  background: rgba(170, 130, 230, 0.4);
  border-color: #e1b5ff;
  transform: translateY(-3px);
  box-shadow: 0 15px 25px -8px #22162b, 0 0 20px #c68bb5;
}

.action-custom {
  background: rgba(20, 18, 30, 0.6);
  border: 1px dashed #a884cc;
  font-style: italic;
  color: #d6c2e6;
}

/* ===== 底部脚注 ===== */
.footer-note {
  margin-top: 0.5rem;
  text-align: right;
  font-size: 0.8rem;
  color: #aa99bb;
  border-top: 1px solid #5a4070;
  padding-top: 0.7rem;
}

/* ===== 响应式调整 ===== */
@media (max-width: 600px) {
  body { padding: 1rem 0.8rem; }
  .card { padding: 1.2rem 1.2rem; }
  .scene-meta { flex-direction: column; gap: 0.5rem; }
  .stat-row { flex-wrap: wrap; }
  .stat-bar-bg { min-width: 150px; }
  .profile-grid { grid-template-columns: 1fr; }
}

/* TE 主题 - 星夜 */
.ending-te {
  background: linear-gradient(145deg, #0f0b1f, #2a1e42);
  border-color: #c69cf0;
  box-shadow: 0 0 30px #c69cf066;
}
.ending-te .ending-name { color: #f8e3a0; text-shadow: 0 0 10px #f8e3a0; }
.ending-te .ending-desc { color: #f0e6ff; }

/* HE 主题 - 夏日 */
.ending-he {
  background: linear-gradient(145deg, #ffd1dc, #b5e4ca);
  border-color: #f9b83c;
  box-shadow: 0 0 30px #ffb34780;
}
.ending-he .ending-name { color: #ff6f91; text-shadow: 0 0 10px #ffb3c6; }
.ending-he .ending-desc { color: #3e2a3d; }

/* BE 主题 - 永夜 */
.ending-be {
  background: linear-gradient(145deg, #0a0710, #1f1326);
  border-color: #b3004b;
  box-shadow: 0 0 20px #b3004b80;
}
.ending-be .ending-name { color: #b8a9c2; text-shadow: none; }
.ending-be .ending-desc { color: #8a7a99; }

/* NE 主题 - 春霞 */
.ending-ne {
  background: linear-gradient(145deg, #f0f2d7, #c7ddcc);
  border-color: #8fb39b;
  box-shadow: 0 0 20px #8fb39b80;
}
.ending-ne .ending-name { color: #8fb39b; text-shadow: 0 0 5px #b5d6c0; }
.ending-ne .ending-desc { color: #4e4e5e; }

/* ===== 移动端适配（增强） ===== */
@media (max-width: 600px) {
    .bg-gray-100\/90.relative.inline-block {
        max-width: 95% !important;
    }
    .w-full.bottom-0.z-20.inset-x-0.bg-white.transition-all > div {
        max-width: 95% !important;
    }
    .flex.items-center.justify-center.w-6.h-5 {
        min-width: 70px !important;
        height: 24px !important;
    }
    .flex.items-center.justify-center.w-6.h-5::after {
        font-size: 12px !important;
    }
    .flex.items-center.justify-center.w-6.h-5::before {
        font-size: 18px !important;
    }
    /* 其他移动端样式可继续添加 */
}

/* 修复标题栏 emoji 截断问题 */
#ai-chat-answer .card-title {
    overflow: visible !important;      /* 关键：允许内容溢出 */
    max-width: none !important;        /* 解除宽度限制（如果存在） */
    height: auto !important;           /* 解除固定高度 */
    min-height: 2.5rem !important;     /* 保证最小高度，避免布局偏移 */
    white-space: normal !important;    /* 允许换行 */
    line-height: 1.4 !important;       /* 保持舒适行高 */
}

/* 确保图标容器有足够空间，且光效不被裁剪 */
#ai-chat-answer .card-title .icon {
    display: inline-block !important;
    min-width: 2rem !important;        /* 为 emoji 预留宽度 */
    overflow: visible !important;
    /* 如果使用 box-shadow 产生光效，会被 overflow 裁剪，改用 filter 代替 */
    filter: drop-shadow(0 0 6px #d4a5ff) !important;  /* 根据原样式调整 */
    /* 保留原有效果的同时确保光效完整 */
}

/* 保险：如果父级更上层仍有 overflow hidden，可以继续放宽 */
#ai-chat-answer .card-title,
#ai-chat-answer .card,
#ai-chat-answer [class*="chat-answer"] {
    overflow: visible !important;
}

.card-title .icon {
    position: relative !important;
    top: -6px !important;  /* 负值上移，可调整为-1px、-3px等 */
}