/* ============ 主题色变量（用容器定义，规避root限制） ============ */
.sb-scene,.sb-user,.sb-npc,.sb-memory,.sb-branch,.sb-text,text,[data-role="text"]{
  --warm-1:#fffbf0;
  --warm-2:#fff4d9;
  --warm-3:#ffe8a8;
  --warm-4:#ffd97d;
  --amber:#d4a574;
  --text-main:#5a4a3a;
  --text-soft:#8a7a6a;
}

/* ============ 通用 details 样式 ============ */
.sb-scene,.sb-user,.sb-npc,.sb-memory,.sb-branch{
  margin:10px 0;
  border-radius:14px;
  background:linear-gradient(135deg,var(--warm-1) 0%,var(--warm-2) 100%);
  border:1px solid var(--warm-3);
  box-shadow:0 2px 8px rgba(212,165,116,.15);
  overflow:hidden;
  font-size:14px;
  color:var(--text-main);
  line-height:1.7;
}

.sb-scene>summary,.sb-user>summary,.sb-npc>summary,
.sb-memory>summary,.sb-branch>summary{
  padding:10px 14px;
  cursor:pointer;
  font-weight:600;
  color:var(--amber);
  background:linear-gradient(90deg,var(--warm-2),var(--warm-1));
  list-style:none;
  position:relative;
  user-select:none;
  transition:background .25s;
}
.sb-scene>summary::-webkit-details-marker,
.sb-user>summary::-webkit-details-marker,
.sb-npc>summary::-webkit-details-marker,
.sb-memory>summary::-webkit-details-marker,
.sb-branch>summary::-webkit-details-marker{display:none;}

.sb-scene>summary::after,.sb-user>summary::after,.sb-npc>summary::after,
.sb-memory>summary::after,.sb-branch>summary::after{
  content:"✦";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%) rotate(0);
  color:var(--warm-4);
  transition:transform .35s ease;
  font-size:16px;
}
.sb-scene[open]>summary::after,.sb-user[open]>summary::after,
.sb-npc[open]>summary::after,.sb-memory[open]>summary::after,
.sb-branch[open]>summary::after{
  transform:translateY(-50%) rotate(180deg);
}

.sb-scene>summary:hover,.sb-user>summary:hover,.sb-npc>summary:hover,
.sb-memory>summary:hover,.sb-branch>summary:hover{
  background:linear-gradient(90deg,var(--warm-3),var(--warm-2));
}

/* ============ 内部统一容器 ============ */
.sb-body{
  padding:12px 14px;
  background:rgba(255,255,255,.55);
}
.sb-body p{margin:3px 0;}

/* ============ 主角 / NPC小分块 ============ */
.sb-block{
  margin:8px 0;
  padding:8px 10px;
  border-left:3px solid var(--warm-4);
  background:rgba(255,244,217,.45);
  border-radius:6px;
}
.sb-block b{color:var(--amber);font-size:13.5px;}

/* ============ NPC人物卡 ============ */
.npc-card{
  padding:10px;
  background:rgba(255,255,255,.55);
  border-radius:8px;
  margin-bottom:8px;
}
.npc-card:last-child{margin-bottom:0;}

/* ============ 记忆回廊：可横向滑动 ============ */
.mem-title{
  margin:8px 0 6px;
  text-align:center;
  font-weight:600;
  color:var(--amber);
  font-size:13px;
  letter-spacing:1px;
}
.mem-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:8px;
  background:rgba(255,255,255,.7);
  border:1px dashed var(--warm-3);
  margin-bottom:8px;
}
.mem-scroll::-webkit-scrollbar{height:4px;}
.mem-scroll::-webkit-scrollbar-thumb{
  background:var(--warm-3);border-radius:2px;
}
.mem-scroll table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
  font-size:12.5px;
}
.mem-scroll th{
  background:var(--warm-3);
  color:var(--text-main);
  padding:6px 8px;
  font-weight:600;
  white-space:nowrap;
}
.mem-scroll td{
  padding:6px 8px;
  border-bottom:1px dashed var(--warm-3);
  vertical-align:top;
  word-break:break-word;
}
.mem-scroll tr:nth-child(even) td{
  background:rgba(255,244,217,.35);
}

/* ============ 剧情分支 ============ */
.sb-branch-list p{
  margin:6px 0;
  padding:8px 12px;
  background:rgba(255,255,255,.7);
  border-radius:8px;
  border-left:3px solid var(--warm-4);
  transition:transform .2s, box-shadow .2s;
  cursor:default;
}
.sb-branch-list p:hover{
  transform:translateX(4px);
  box-shadow:0 2px 6px rgba(212,165,116,.25);
  background:var(--warm-2);
}

/* ============ 正文区域（强制覆盖新版平台样式） ============ */
text,
.sb-text,
[data-role="text"],
div.narrative-content {
  display: block !important;
  margin: 10px 0 !important;
  padding: 14px 16px !important;
  background: linear-gradient(135deg, rgba(255, 251, 240, .85) 0%, rgba(255, 244, 217, .85) 100%) !important;
  border-radius: 12px !important;
  border: 1px solid var(--warm-3) !important;
  box-shadow: 0 2px 6px rgba(212,165,116,.12) !important;
  color: #3a2a32 !important;
  line-height: 1.85 !important;
  font-size: 14.5px !important;
  position: relative !important;
}

/* 左侧装饰条 */
text::before,
.sb-text::before,
[data-role="text"]::before,
div.narrative-content::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 3px !important;
  height: 100% !important;
  background: linear-gradient(180deg, var(--warm-4) 0%, var(--amber) 50%, var(--warm-4) 100%) !important;
  border-radius: 12px 0 0 12px !important;
}

/* 内部段落样式重置（关键！） */
text > p,
.sb-text > p,
[data-role="text"] > p,
div.narrative-content > p {
  margin: 8px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  color: #3a2a32 !important;
  line-height: 1.85 !important;
  font-size: 14.5px !important;
}

text > p:first-child,
.sb-text > p:first-child,
[data-role="text"] > p:first-child,
div.narrative-content > p:first-child {
  margin-top: 0 !important;
}

text > p:last-child,
.sb-text > p:last-child,
[data-role="text"] > p:last-child,
div.narrative-content > p:last-child {
  margin-bottom: 0 !important;
}

/* ============ user台词样式（用户 - 天蓝色） ============ */
text span.user,
.sb-text span.user,
[data-role="text"] span.user,
div.narrative-content span.user,
span.user {
  color: #4a90e2 !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 2px rgba(74, 144, 226, .2) !important;
  padding: 0 2px !important;
  border-radius: 2px !important;
  background: linear-gradient(to bottom, rgba(74, 144, 226, .08), rgba(74, 144, 226, .12)) !important;
  transition: all 0.2s ease !important;
}

text span.user:hover,
.sb-text span.user:hover,
[data-role="text"] span.user:hover,
div.narrative-content span.user:hover,
span.user:hover {
  background: linear-gradient(to bottom, rgba(74, 144, 226, .15), rgba(74, 144, 226, .2)) !important;
}

/* ============ 鬼舞辻无惨台词样式（血红色） ============ */
text span.muzan,
.sb-text span.muzan,
[data-role="text"] span.muzan,
div.narrative-content span.muzan,
span.muzan {
  color: #c41e3a !important;
  font-weight: 600 !important;
  text-shadow: 0 0 4px rgba(196, 30, 58, .3) !important;
  padding: 0 2px !important;
  border-radius: 2px !important;
  background: linear-gradient(to bottom, rgba(196, 30, 58, .08), rgba(196, 30, 58, .12)) !important;
  transition: all 0.2s ease !important;
}

text span.muzan:hover,
.sb-text span.muzan:hover,
[data-role="text"] span.muzan:hover,
div.narrative-content span.muzan:hover,
span.muzan:hover {
  background: linear-gradient(to bottom, rgba(196, 30, 58, .15), rgba(196, 30, 58, .2)) !important;
}

/* ============ 思维链隐藏 ============ */
think{
  display:none !important;
}

/* ============ 移动端适配 ============ */
@media (max-width:480px){
  .sb-scene,.sb-user,.sb-npc,.sb-memory,.sb-branch{
    font-size:13px;
  }
  .mem-scroll table{min-width:480px;}
  text,
  .sb-text,
  [data-role="text"],
  div.narrative-content {
    padding: 12px 14px !important;
    font-size: 13.5px !important;
  }
  text > p,
  .sb-text > p,
  [data-role="text"] > p,
  div.narrative-content > p {
    font-size: 13.5px !important;
  }
}