/* ========================================================= */
/* ===== 《自宅警备员》· builtInCss v4.0 ===== */
/* ===== 折叠面板文字与正文对齐 + 视觉层次 + 移动端适配 ===== */
/* ========================================================= */

/* ===== 0. CSS变量 ===== */
:root {
  --bg-page:        #f2ece4;
  --bg-card:        #fefcf8;
  --bg-card2:       #f8f2e8;
  --bg-card3:       #f0e8dc;
  --bg-warm:        #faf4ea;
  --border:         #d4c8b4;
  --border-light:   #e2d8c8;
  --border-strong:  #c0a888;
  --text:           #3a2e22;
  --text-dim:       #8a7864;
  --text-bright:    #22160a;
  --accent-warm:    #c87040;
  --accent-rose:    #c87060;
  --accent-gold:    #d49840;
  --accent-teal:    #509878;
  --rmate-a:        #d07040;
  --rmate-a-bg:     rgba(208,112,64,0.10);
  --rmate-a-border: rgba(208,112,64,0.22);
  --rmate-b:        #509878;
  --rmate-b-bg:     rgba(80,152,120,0.10);
  --rmate-b-border: rgba(80,152,120,0.22);
  --rmate-c:        #9870b8;
  --rmate-c-bg:     rgba(152,112,184,0.10);
  --rmate-c-border: rgba(152,112,184,0.22);
  --pure-love:      #5088b8;
  --pure-love-bg:   rgba(80,136,184,0.10);
  --corruption:     #b84848;
  --corruption-bg:  rgba(184,72,72,0.10);
  --tech-green:     #40a070;
  --tech-green-dim: rgba(64,160,112,0.10);
  --risk-red:       #b84840;
  --risk-red-dim:   rgba(184,72,64,0.10);
  --shadow-card:    0 2px 8px rgba(80,50,30,0.08);
  --shadow-pop:     0 6px 24px rgba(80,50,30,0.12);
  --shadow-hover:   0 4px 16px rgba(80,50,30,0.10);
  --radius-sm:      6px;
  --radius-md:      12px;
  --radius-lg:      18px;
  --transition:     0.2s ease;
  --font-mono:      'SF Mono','Cascadia Code','Consolas','Courier New',monospace;
}

/* ========================================================= */
/* ===== 1. 通用折叠栏 ===== */
/* ========================================================= */
details {
  display: block; background: var(--bg-card); padding: 0;
  margin-bottom: 14px; max-width: 100%; width: 100%; box-sizing: border-box;
  border: 1px solid var(--border); border-left: 5px solid var(--accent-warm);
  box-shadow: var(--shadow-card); border-radius: var(--radius-md);
  transition: box-shadow var(--transition), border-color var(--transition);
  overflow: hidden;
}
details[open] {
  box-shadow: var(--shadow-pop); border-color: var(--border-strong);
}
details:hover { border-left-color: var(--accent-rose); }

details summary {
  display: flex; align-items: center; justify-content: space-between;
  list-style: none; cursor: pointer; position: relative;
  background: linear-gradient(135deg, var(--bg-card2) 0%, var(--bg-warm) 100%);
  padding: 14px 22px;
  font-weight: 700; letter-spacing: 0.5px; color: var(--text-bright);
  font-size: 1.05em;
  width: 100%; max-width: 100%;
  box-sizing: border-box; text-align: left; user-select: none;
  transition: all var(--transition); overflow: hidden;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: 1px solid transparent;
}
details[open] summary { border-bottom-color: var(--border-light); }
details summary::after {
  content: "▾"; font-size: 0.78em; color: var(--accent-warm);
  transition: transform var(--transition); margin-left: auto; font-weight: 700;
}
details summary:hover {
  background: linear-gradient(135deg, var(--bg-card3) 0%, var(--bg-card2) 100%);
}
details[open] summary::after { transform: rotate(180deg); color: var(--accent-rose); }
details summary::-webkit-details-marker { display: none; }
details summary::marker { display: none; content: ""; }
details:not([open]) summary { border-radius: var(--radius-md); }

/* ↑ 核心：折叠内容基准 = 1em，与正文一致 */
.details-body {
  background: var(--bg-card); color: var(--text);
  padding: 18px 22px; font-size: 1em; line-height: 1.78;
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* ========================================================= */
/* ===== 2. 监控模块 ===== */
/* ========================================================= */
details.surveillance-details {
  border-left-color: var(--accent-teal);
}
details.surveillance-details > summary {
  background: linear-gradient(135deg, #f0f6f2 0%, #e8f0ea 100%);
}
details.surveillance-details > summary::after { color: var(--accent-teal); }

.surveillance-body { padding: 0 !important; background: #fafdf8 !important; }

.surv-overview {
  padding: 16px 22px;
  background: linear-gradient(180deg, #f8faf6 0%, #f4f8f0 100%);
  border-bottom: 1px solid var(--border-light);
}
/* 小标签保持略小，但已从 0.8em 上调 */
.surv-overview-title {
  font-size: 0.88em; font-weight: 800; color: var(--text-dim);
  letter-spacing: 1.2px; margin-bottom: 12px;
  font-family: var(--font-mono); text-transform: uppercase;
}
.surv-cam-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px;
}
.surv-cam-slot {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 14px 8px; border-radius: var(--radius-sm);
  font-size: 0.82em; text-align: center;
  background: linear-gradient(180deg, rgba(64,160,112,0.06) 0%, rgba(64,160,112,0.10) 100%);
  border: 1px solid rgba(64,160,112,0.20);
}
.surv-cam-slot .surv-cam-icon { font-size: 1.4em; }
.surv-cam-slot .surv-cam-label { font-weight: 700; color: var(--accent-teal); letter-spacing: 0.5px; }
.surv-cam-slot .surv-cam-status { font-size: 0.88em; color: var(--accent-teal); font-weight: 600; }

.surv-hidden-status, .surv-phone-status {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: var(--bg-card);
  border-radius: var(--radius-sm); border: 1px solid var(--border-light);
  font-size: 0.88em; margin-bottom: 8px;
}
.surv-hidden-icon, .surv-phone-icon { font-size: 1.1em; }
.surv-hidden-label, .surv-phone-label { color: var(--text-dim); flex: 1; font-weight: 600; }
.surv-hidden-list { color: var(--text); font-weight: 700; }
.surv-phone-state {
  font-weight: 700; letter-spacing: 0.5px;
  padding: 3px 10px; border-radius: 3px; font-size: 0.9em;
}
.surv-phone-state.hacked {
  color: var(--accent-teal); background: rgba(64,160,112,0.10);
  border: 1px solid rgba(64,160,112,0.20);
}
.surv-phone-state.locked {
  color: var(--text-dim); background: var(--bg-card2);
  border: 1px solid var(--border-light);
}

.surv-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--border-light) 20%, var(--border-light) 80%, transparent 100%);
}

.surv-cam-feeds { padding: 16px 22px; }

.surv-feed {
  margin-bottom: 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--bg-card); box-shadow: var(--shadow-card);
}
.surv-feed:last-child { margin-bottom: 0; }
.surv-feed-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 16px;
  background: linear-gradient(135deg, #f8faf6 0%, #f0f4ee 100%);
  border-bottom: 1px solid var(--border-light);
  font-family: var(--font-mono);
  font-size: 0.78em;
}
.surv-feed-label {
  color: var(--accent-teal); letter-spacing: 0.8px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.surv-feed-label::before {
  content: "●"; color: var(--accent-teal); font-size: 0.55em;
  animation: recPulse 1.5s ease-in-out infinite;
}
@keyframes recPulse { 0%,100%{opacity:1} 50%{opacity:0.35} }
.surv-feed-timestamp { color: var(--text-dim); letter-spacing: 0.5px; font-weight: 500; }
.surv-feed-body { padding: 16px 18px; }
/* ↑ 监控画面描述 → 1em */
.surv-feed-text {
  display: block; font-size: 1em; color: var(--text); line-height: 1.78;
}

.surv-messages {
  padding: 16px 22px;
  border-top: 1px solid var(--border-light);
  background: linear-gradient(180deg, #fafdf8 0%, #f8faf6 100%);
}
.surv-messages-header {
  font-size: 0.88em; font-weight: 800; color: var(--text-dim);
  letter-spacing: 0.8px; margin-bottom: 12px; font-family: var(--font-mono);
}
/* surv-cam-note：每个摄像头下方的覆盖说明 */
.surv-cam-slot .surv-cam-note {
  font-size: 0.68em;
  color: var(--text-dim);
  opacity: 0.7;
  line-height: 1.3;
  text-align: center;
}

/* surv-hidden-detail：隐藏设备的具体位置 */
.surv-hidden-detail {
  font-size: 0.72em;
  color: var(--text-dim);
  padding: 6px 12px 6px 24px;
  font-family: var(--font-mono);
  line-height: 1.5;
  opacity: 0.8;
}

/* surv-action-window：行动窗口提示 */
.surv-action-window {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  margin-top: 6px;
  background: rgba(212,152,64,0.08);
  border: 1px solid rgba(212,152,64,0.2);
  border-radius: var(--radius-sm);
  font-size: 0.72em;
}
.surv-action-icon { font-size: 1em; }
.surv-action-label { color: var(--accent-gold); font-weight: 700; white-space: nowrap; }
.surv-action-text { color: var(--text); line-height: 1.4; }

/* surv-monitor-header：监视器画面区标题 */
.surv-monitor-header {
  font-size: 0.78em; font-weight: 800; color: var(--text-dim);
  letter-spacing: 0.8px; margin-bottom: 10px;
  font-family: var(--font-mono); text-transform: uppercase;
}
.surv-monitor-header::before {
  content: "▶ ";
  color: var(--accent-teal);
  font-size: 0.7em;
}

/* surv-feed-hid：隐藏摄像头画面（视觉区分） */
.surv-feed-hid {
  border-color: rgba(192,96,96,0.2) !important;
}
.surv-feed-hid .surv-feed-header {
  background: linear-gradient(135deg, #fef6f4 0%, #faf0ec 100%) !important;
}
.surv-feed-hid .surv-feed-label {
  color: var(--corruption) !important;
}
.surv-feed-hid .surv-feed-label::before {
  color: var(--corruption) !important;
}

/* surv-sound-section：声音感知区 */
.surv-sound-section {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-light);
  background: linear-gradient(180deg, #fefdfa 0%, #faf8f2 100%);
}
.surv-sound-header {
  font-size: 0.72em; font-weight: 800; color: var(--text-dim);
  letter-spacing: 0.8px; margin-bottom: 8px; font-family: var(--font-mono);
}
.surv-sound-body {
  font-size: 0.82em; color: var(--text); line-height: 1.65;
}

/* surv-msg-empty：无消息占位 */
.surv-msg-empty {
  font-size: 0.76em; color: var(--text-dim);
  font-style: italic; text-align: center; padding: 10px;
  opacity: 0.6;
}

/* ========================================================= */
/* ===== 3. 室友档案面板 ===== */
/* ========================================================= */
details.roommate-details { border-left: 5px solid var(--accent-warm); }
details.roommate-details[data-rmate="A"] { border-left-color: var(--rmate-a); }
details.roommate-details[data-rmate="B"] { border-left-color: var(--rmate-b); }
details.roommate-details[data-rmate="C"] { border-left-color: var(--rmate-c); }

.rmate-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 0.9em; font-weight: 800; color: #fff; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.rmate-badge.A { background: var(--rmate-a); }
.rmate-badge.B { background: var(--rmate-b); }
.rmate-badge.C { background: var(--rmate-c); }

.roommate-body { background: var(--bg-card) !important; padding: 18px 22px !important; }

.rmate-quickinfo { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.rmate-age, .rmate-occupation {
  font-size: 0.9em; padding: 5px 14px; border-radius: 16px;
  background: var(--bg-card2); color: var(--text-dim);
  border: 1px solid var(--border-light); font-weight: 600;
}
.rmate-status {
  font-size: 0.85em; padding: 5px 14px; border-radius: 16px;
  font-weight: 700; letter-spacing: 0.5px;
}
.rmate-status.纯爱 {
  background: var(--pure-love-bg); color: var(--pure-love);
  border: 1px solid rgba(80,136,184,0.22);
}
.rmate-status.堕落 {
  background: var(--corruption-bg); color: var(--corruption);
  border: 1px solid rgba(184,72,72,0.22);
}

.rmate-section { margin-bottom: 14px; }
/* 小标签保持可辨但不过小 */
.rmate-section-label {
  display: block;
  font-size: 0.85em; font-weight: 800;
  color: var(--text-dim); letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 5px;
}
/* ↑ 正文级 */
.rmate-text { font-size: 1em; color: var(--text); line-height: 1.78; margin: 0; }

.rmate-inner-thoughts {
  background: linear-gradient(135deg, #fef9f2 0%, #faf3e6 100%);
  border-left: 4px solid var(--accent-gold); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px; margin: 16px 0; font-style: italic;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.rmate-thoughts-label {
  display: block;
  font-size: 0.85em; font-weight: 800;
  color: var(--accent-gold); letter-spacing: 0.5px; margin-bottom: 5px;
}
.rmate-inner-thoughts p { margin: 0; font-size: 1em; color: var(--text); line-height: 1.78; }

.rmate-stat-row { margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--border-light); }

/* ========================================================= */
/* ===== 4. 数值进度条 ===== */
/* ========================================================= */
.stat-bar { margin: 14px 0; }
.stat-bar .stat-label {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; font-size: 1em; color: var(--text); margin-bottom: 6px; gap: 8px;
}
.stat-bar .stat-label span {
  font-weight: 500; font-size: 0.96em; color: var(--text-dim); white-space: nowrap;
}
.stat-bar .bar-track {
  width: 100%; height: 10px; background: var(--bg-card3);
  border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.08);
  border: 1px solid var(--border-light);
}
.stat-bar .bar-fill {
  height: 100%; border-radius: 999px; transition: width 0.6s ease; position: relative;
}
.stat-bar .bar-fill::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 40%; background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 100%);
  border-radius: 999px;
}
.stat-bar.trust .bar-fill { background: linear-gradient(90deg, #5088b8 0%, #70b0d8 100%); }
.stat-bar.corruption .bar-fill { background: linear-gradient(90deg, #b84848 0%, #d86868 100%); }
.stat-bar.risk-global .bar-fill { background: linear-gradient(90deg, var(--accent-gold) 0%, var(--risk-red) 100%); }

/* ===== 4b. 数值总览面板 ===== */
.stats-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin: 16px 0;
}
.stats-col {
  padding: 16px; border-radius: var(--radius-md);
  background: var(--bg-card); border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card); text-align: center;
}
.stats-col-header {
  font-weight: 800; font-size: 1em; margin-bottom: 10px;
  padding-bottom: 10px; border-bottom: 2px solid var(--border-light);
}
.stats-col.A .stats-col-header { color: var(--rmate-a); border-bottom-color: var(--rmate-a-border); }
.stats-col.B .stats-col-header { color: var(--rmate-b); border-bottom-color: var(--rmate-b-border); }
.stats-col.C .stats-col-header { color: var(--rmate-c); border-bottom-color: var(--rmate-c-border); }

.stats-mini-row {
  font-size: 0.92em; color: var(--text-dim);
  padding: 6px 0; display: flex; justify-content: space-between; align-items: center;
}
.stats-mini-row span { font-weight: 700; color: var(--text); font-size: 1.05em; }

.stats-detail {
  margin-top: 14px; padding: 12px 16px;
  background: var(--bg-card2); border-radius: var(--radius-sm); border: 1px solid var(--border-light);
}
.stats-detail p { margin: 0; font-size: 0.92em; color: var(--text-dim); line-height: 1.65; }

/* ========================================================= */
/* ===== 5. 时间锚点 ===== */
/* ========================================================= */
.time-header {
  background: linear-gradient(160deg, #fefaf4 0%, #faf2e4 30%, #f6ece0 100%);
  border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 22px;
  border: 2px solid var(--border-light);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.8);
  position: relative; overflow: hidden;
}
.time-header::before {
  content: ""; position: absolute; top: -40%; right: -10%;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(200,112,64,0.08) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.time-header::after {
  content: ""; position: absolute; bottom: -30%; left: -5%;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(80,152,120,0.05) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.time-row-main {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px;
  position: relative; z-index: 1;
}
.time-icon { font-size: 1.4em; }
.time-day { font-size: 1.35em; font-weight: 800; letter-spacing: 0.5px; color: var(--text-bright); }
.time-sep { font-size: 1.15em; color: var(--text-dim); margin: 0 2px; }
.time-period { font-size: 1.1em; font-weight: 700; color: var(--accent-warm); }
.time-clock {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-card); color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.92em; font-weight: 600;
  padding: 4px 12px; border-radius: 14px;
  border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  margin-left: 6px;
}
.time-row-loc {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font-size: 0.96em; position: relative; z-index: 1;
}
.time-loc-text { color: var(--text-dim); font-weight: 500; letter-spacing: 0.5px; }

.time-row-roommates {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
  position: relative; z-index: 1;
}
.rmate-tag {
  font-size: 0.88em; font-weight: 700; padding: 4px 12px;
  border-radius: 14px; letter-spacing: 0.3px; white-space: nowrap;
}
.rmate-tag.rmate-a { background: var(--rmate-a-bg); color: var(--rmate-a); border: 1px solid var(--rmate-a-border); }
.rmate-tag.rmate-b { background: var(--rmate-b-bg); color: var(--rmate-b); border: 1px solid var(--rmate-b-border); }
.rmate-tag.rmate-c { background: var(--rmate-c-bg); color: var(--rmate-c); border: 1px solid var(--rmate-c-border); }

.time-row-weather, .time-row-surroundings {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.92em; position: relative; z-index: 1;
}
.time-weather-text, .time-surroundings-text { color: var(--text-dim); }
.time-surroundings-text { font-style: italic; }

.time-divider {
  height: 2px; margin: 14px 0;
  background: linear-gradient(90deg, transparent 0%, var(--border) 15%, var(--border) 85%, transparent 100%);
  position: relative; z-index: 1;
}
.time-row-budget {
  display: flex; align-items: center; gap: 14px;
  font-size: 0.9em; flex-wrap: wrap; position: relative; z-index: 1;
}
.budget-label { color: var(--text-dim); font-weight: 600; }
.budget-item { font-weight: 700; padding: 3px 12px; border-radius: 12px; font-size: 0.96em; letter-spacing: 0.3px; }
.budget-item.risk { color: var(--risk-red); background: var(--risk-red-dim); }
.budget-item.cam { color: var(--accent-teal); background: var(--tech-green-dim); }
.budget-item.route { letter-spacing: 0.5px; }
.budget-item.route.纯爱 { color: var(--pure-love); background: var(--pure-love-bg); }
.budget-item.route.堕落 { color: var(--corruption); background: var(--corruption-bg); }

/* ========================================================= */
/* ===== 6. 正文容器 ===== */
/* ========================================================= */
.narrative-p { text-indent: 2em; line-height: 1.95; margin: 0.85em 0; font-size: 1em; }

.khorra-output {
  max-width: 100%; width: 100%; box-sizing: border-box;
  background: transparent;           /* 去背景 */
  border-radius: 0;                  /* 去圆角 */
  padding: 0;                        /* 去内边距 */
  border: none;                      /* 去边框 */
  box-shadow: none;                  /* 去阴影 */
  line-height: 1.85; color: var(--text);
}

/* ========================================================= */
/* ===== 7. 对话气泡 ===== */
/* ========================================================= */
.dialogue-box,
.dialogue-box[data-role] {
  position: relative; display: block;
  border-radius: 4px 16px 16px 16px !important;
  padding: 14px 20px 14px 18px !important;
  margin: 16px 0 16px 10px !important;
  text-indent: 0 !important;
  border-left-width: 4px !important; border-left-style: solid !important;
}
.dialogue-box .speaker,
.dialogue-box[data-role] .speaker {
  display: block; font-size: 0.88em; font-weight: 800;
  margin-bottom: 4px; letter-spacing: 0.5px; text-transform: uppercase;
}
.dialogue-box .dialogue-text,
.dialogue-box[data-role] .dialogue-text {
  display: block; font-size: 1.05em; line-height: 1.78;
}

.dialogue-box[data-role="rmate-a"] {
  background: linear-gradient(135deg, #fef8f2 0%, #faf0e4 100%) !important;
  border-left-color: var(--rmate-a) !important;
  box-shadow: 0 2px 10px rgba(208,112,64,0.08) !important;
}
.dialogue-box[data-role="rmate-a"] .speaker { color: var(--rmate-a) !important; }
.dialogue-box[data-role="rmate-a"] .dialogue-text { color: #5a3a28 !important; }

.dialogue-box[data-role="rmate-b"] {
  background: linear-gradient(135deg, #f2f8f4 0%, #e6f2ea 100%) !important;
  border-left-color: var(--rmate-b) !important;
  box-shadow: 0 2px 10px rgba(80,152,120,0.08) !important;
}
.dialogue-box[data-role="rmate-b"] .speaker { color: var(--rmate-b) !important; }
.dialogue-box[data-role="rmate-b"] .dialogue-text { color: #2a4a3a !important; }

.dialogue-box[data-role="rmate-c"] {
  background: linear-gradient(135deg, #f6f2fa 0%, #ece4f4 100%) !important;
  border-left-color: var(--rmate-c) !important;
  box-shadow: 0 2px 10px rgba(152,112,184,0.08) !important;
}
.dialogue-box[data-role="rmate-c"] .speaker { color: var(--rmate-c) !important; }
.dialogue-box[data-role="rmate-c"] .dialogue-text { color: #4a2a5a !important; }

.dialogue-box[data-role="user"] {
  background: linear-gradient(135deg, #f4f0ec 0%, #ede8e2 100%) !important;
  border-left-color: #a89880 !important;
  box-shadow: 0 2px 10px rgba(168,152,128,0.08) !important;
}
.dialogue-box[data-role="user"] .speaker { color: #7a6a58 !important; }
.dialogue-box[data-role="user"] .dialogue-text { color: #5a4a3a !important; }

/* ========================================================= */
/* ===== 8. 内心独白 ===== */
/* ========================================================= */
.inner-monologue {
  font-style: italic; color: var(--text-dim);
  background: linear-gradient(135deg, #fef9f2 0%, #faf3e6 100%);
  border-left: 4px solid var(--accent-gold); padding: 14px 20px; margin: 18px 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 1em; line-height: 1.78; text-indent: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

/* ========================================================= */
/* ===== 9. 解锁提醒 ===== */
/* ========================================================= */
.unlock-notice {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 16px 0 20px 0; padding: 14px 22px;
  background: linear-gradient(135deg, #fef8ee 0%, #faf0dc 100%);
  border: 2px solid var(--accent-gold); border-radius: var(--radius-md);
  font-size: 0.96em; color: var(--text);
  box-shadow: 0 2px 10px rgba(212,152,64,0.12);
}
.unlock-icon { font-size: 1.25em; }
.unlock-text strong { color: var(--accent-warm); font-weight: 800; }

/* ========================================================= */
/* ===== 10. 选择面板 ===== */
/* ========================================================= */
.choice-panel {
  margin-top: 20px; padding: 20px 24px;
  background: linear-gradient(135deg, #fefaf4 0%, #f8f2e8 100%);
  border: 2px solid var(--border-light); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.choice-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.choice-icon { font-size: 1.15em; color: var(--accent-teal); }
.choice-title { font-size: 1em; font-weight: 800; color: var(--text-bright); letter-spacing: 0.5px; }
.choice-list { display: flex; flex-direction: column; gap: 10px; }
.choice-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px 18px;
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: all 0.15s ease; box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.choice-card:hover {
  border-color: var(--border-strong); box-shadow: var(--shadow-hover); transform: translateX(2px);
}
.choice-card[data-choice="1"] { border-left: 5px solid var(--rmate-a); }
.choice-card[data-choice="2"] { border-left: 5px solid var(--rmate-b); }
.choice-card[data-choice="3"] { border-left: 5px solid var(--rmate-c); }
.choice-left { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.choice-label {
  display: inline-block; width: fit-content;
  font-size: 0.8em; font-weight: 800; letter-spacing: 0.8px;
  padding: 3px 10px; border-radius: 3px; text-transform: uppercase;
}
.choice-card[data-choice="1"] .choice-label { color: var(--rmate-a); background: var(--rmate-a-bg); }
.choice-card[data-choice="2"] .choice-label { color: var(--rmate-b); background: var(--rmate-b-bg); }
.choice-card[data-choice="3"] .choice-label { color: var(--rmate-c); background: var(--rmate-c-bg); }
.choice-text { font-size: 0.94em; color: var(--text); line-height: 1.55; }
.choice-arrow {
  font-size: 0.85em; color: var(--text-dim); flex-shrink: 0;
  transition: transform 0.15s ease; font-weight: 700;
}
.choice-card:hover .choice-arrow { color: var(--accent-warm); transform: translateX(4px); }
.choice-note {
  margin-top: 12px; font-size: 0.82em; color: var(--text-dim);
  font-style: italic; text-align: center; letter-spacing: 0.3px;
}

/* ========================================================= */
/* ===== 11. 微信消息组件 ===== */
/* ========================================================= */
.wechat-msg-list { display: flex; flex-direction: column; gap: 8px; }
.wechat-msg { display: flex; gap: 10px; margin-bottom: 8px; align-items: flex-start; }
.wechat-msg.left { flex-direction: row; }
.wechat-msg.right { flex-direction: row-reverse; }
.wechat-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.84em; font-weight: 800; color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.10);
}
.wechat-bubble {
  background: var(--bg-card); padding: 10px 14px;
  border-radius: 3px 12px 12px 12px;
  font-size: 0.94em; color: var(--text); line-height: 1.55; word-break: break-word;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  border: 1px solid var(--border-light);
}
.wechat-msg.right .wechat-bubble { border-radius: 12px 3px 12px 12px; }
.wechat-bubble.self { background: #eaf6ee; border-color: rgba(64,160,112,0.15); }
.wechat-name { display: block; font-size: 0.8em; color: var(--text-dim); margin-bottom: 3px; font-weight: 700; }

/* ========================================================= */
/* ===== 12. 记忆存档 ===== */
/* ========================================================= */
.memory-config-body {
  font-size: 0.9em; color: var(--text-dim); line-height: 1.7;
  font-family: var(--font-mono);
  background: var(--bg-card2); padding: 10px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-light);
}
.memory-table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.memory-table th {
  text-align: left; padding: 8px 10px; font-weight: 700;
  color: var(--text-dim); border-bottom: 2px solid var(--border-light);
  background: var(--bg-card2); letter-spacing: 0.5px;
}
.memory-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--border-light);
  color: var(--text); vertical-align: top; line-height: 1.6;
}
.memory-table tr:last-child td { border-bottom: none; }
.memory-note {
  font-size: 0.84em; color: var(--text-dim);
  margin-top: 10px; font-style: italic; text-align: center;
  padding: 8px; background: var(--bg-card2); border-radius: var(--radius-sm);
}

.memory-summary {
  background: var(--bg-card); border: 2px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-card);
}
.memory-summary-header {
  background: linear-gradient(135deg, var(--bg-card2) 0%, var(--bg-card3) 100%);
  border-bottom: 1px solid var(--border);
  padding: 12px 18px; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
}
.memory-summary-icon { font-size: 1.1em; }
.memory-summary-title { font-weight: 800; color: var(--text-bright); letter-spacing: 0.5px; }
.memory-summary-body { padding: 18px; font-size: 1em; color: var(--text); line-height: 1.8; }
.memory-summary-footer {
  background: var(--bg-card2); border-top: 1px solid var(--border);
  padding: 10px 18px; font-size: 0.82em; color: var(--text-dim);
  display: flex; justify-content: space-between; font-family: var(--font-mono);
}

/* ========================================================= */
/* ===== 13. 思维链折叠 ===== */
/* ========================================================= */
.cot-exec-content {
  font-size: 0.92em; color: var(--text-dim);
  line-height: 1.68; white-space: pre-wrap; font-family: var(--font-mono);
  background: var(--bg-card2); padding: 14px 18px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-light);
}

/* ========================================================= */
/* ===== 14. 信息行 ===== */
/* ========================================================= */
.info-line { display: block; width: 100%; margin: 4px 0; line-height: 1.55; font-size: 0.94em; }
.info-line .stat-detail-label { display: inline; margin-right: 4px; font-weight: 700; color: var(--text-dim); }

/* ========================================================= */
/* ===== 15. 内存嵌套折叠 ===== */
/* ========================================================= */
details.memory-config,
details.memory-stm,
details.memory-ltm {
  background: transparent; border: none; border-left: none;
  box-shadow: none; margin-bottom: 10px;
}
details.memory-config[open],
details.memory-stm[open],
details.memory-ltm[open] { box-shadow: none; border-color: transparent; }
details.memory-config:hover,
details.memory-stm:hover,
details.memory-ltm:hover { border-left-color: transparent; }

details.memory-config > summary,
details.memory-stm > summary,
details.memory-ltm > summary {
  display: flex; align-items: center; gap: 8px;
  list-style: none; cursor: pointer;
  background: var(--bg-card2); border-radius: var(--radius-sm);
  padding: 10px 16px; font-weight: 700; font-size: 0.92em;
  color: var(--text-dim); letter-spacing: 0.5px;
  border-left: none; border: 1px solid var(--border-light);
}
details.memory-config > summary::before,
details.memory-stm > summary::before,
details.memory-ltm > summary::before { display: none; }
details.memory-config > summary::after,
details.memory-stm > summary::after,
details.memory-ltm > summary::after {
  content: "▾"; font-size: 0.7em; color: var(--text-dim);
  margin-left: auto; transition: transform 0.2s ease;
}
details.memory-config[open] > summary::after,
details.memory-stm[open] > summary::after,
details.memory-ltm[open] > summary::after { transform: rotate(180deg); }
details.memory-config > summary:hover,
details.memory-stm > summary:hover,
details.memory-ltm > summary:hover { background: var(--bg-card3); color: var(--text-bright); }

/* ========================================================= */
/* ===== 16. 场景插图 ===== */
/* ========================================================= */
.scene-illustration {
  width: 100%; max-width: 420px; margin: 20px auto;
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-pop);
  border: 3px solid var(--border-strong); background: var(--bg-card); text-align: center;
}
.scene-illustration img { width: 100%; height: auto; display: block; object-fit: cover; }
.scene-caption {
  display: block; padding: 10px 16px; font-size: 0.94em; font-weight: 700;
  color: var(--text-dim);
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card2) 100%);
  letter-spacing: 0.5px; border-top: 1px solid var(--border-light);
}

/* ========================================================= */
/* ===== 17. 强制换行保护 ===== */
/* ========================================================= */
details, details > * {
  word-wrap: break-word; overflow-wrap: anywhere;
  word-break: break-word; white-space: normal; max-width: 100%;
}
.stat-bar, .bar-track, .bar-fill { min-width: 0; max-width: 100%; }
.unlock-notice { flex-wrap: wrap; text-align: center; }

/* ========================================================= */
/* ===== 18. 移动端适配 ===== */

/* ----- 18a. ≤768px ----- */
@media (max-width: 768px) {
  .khorra-output { padding: 18px 16px; }

  details summary { padding: 12px 16px; font-size: 1em; }
  .details-body { padding: 14px 16px; font-size: 0.96em; }

  .time-header { padding: 16px 18px; border-radius: var(--radius-md); }
  .time-day { font-size: 1.2em; }
  .time-clock { font-size: 0.84em; }

  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .surv-cam-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .surv-feed-text { font-size: 0.96em; }

  .rmate-text { font-size: 0.96em; }
  .rmate-inner-thoughts p { font-size: 0.96em; }

  .dialogue-box, .dialogue-box[data-role] {
    margin-left: 0 !important; margin-right: 0 !important;
    padding: 12px 16px !important;
  }
  .choice-text { font-size: 0.9em; }
  .memory-table { font-size: 0.88em; }
  .memory-config-body { font-size: 0.86em; }
  .memory-note { font-size: 0.8em; }
  .cot-exec-content { font-size: 0.88em; }
  .narrative-p { font-size: 0.96em; }
}

/* ----- 18b. ≤540px ----- */
@media (max-width: 540px) {
  .khorra-output { padding: 14px 12px; border-radius: var(--radius-md); }

  details { margin-bottom: 10px; border-left-width: 4px; border-radius: var(--radius-sm); }
  details summary { padding: 10px 14px; font-size: 0.94em; }
  .details-body { padding: 12px 14px; font-size: 0.92em; }

  .time-header { padding: 14px 14px; border-radius: var(--radius-md); margin-bottom: 16px; }
  .time-row-main { gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
  .time-day { font-size: 1.1em; }
  .time-period { font-size: 0.94em; }
  .time-clock { font-size: 0.8em; }
  .time-row-loc { font-size: 0.88em; }
  .rmate-tag { font-size: 0.82em; }
  .time-row-weather, .time-row-surroundings { font-size: 0.86em; }
  .time-row-budget { gap: 8px; font-size: 0.84em; }

  .stats-grid { grid-template-columns: 1fr; gap: 8px; }
  .stats-col {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px; padding: 12px 14px; text-align: left;
  }
  .stats-col-header {
    margin-bottom: 0; padding-bottom: 0; border-bottom: none;
    padding-right: 10px; border-right: 2px solid var(--border-light);
    min-width: fit-content; font-size: 0.92em;
  }
  .stats-mini-row {
    flex: 1; min-width: 100px;
    justify-content: flex-start; gap: 8px;
    padding: 2px 0; font-size: 0.86em;
  }
  .stats-detail p { font-size: 0.86em; }

  .surv-cam-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .surv-cam-slot { font-size: 0.78em; }
  .surv-feed-text { font-size: 0.92em; }
  .surv-hidden-status, .surv-phone-status { font-size: 0.82em; }
  .surv-feed-header { font-size: 0.74em; }

  .rmate-text { font-size: 0.92em; }
  .rmate-section-label { font-size: 0.8em; }
  .rmate-inner-thoughts p { font-size: 0.92em; }
  .rmate-thoughts-label { font-size: 0.8em; }

  .stat-bar .stat-label { font-size: 0.94em; }
  .stat-bar .stat-label span { font-size: 0.9em; }

  .dialogue-box, .dialogue-box[data-role] {
    margin: 12px 0 !important; padding: 10px 14px !important;
    border-radius: 4px 12px 12px 12px !important;
  }
  .dialogue-box .dialogue-text, .dialogue-box[data-role] .dialogue-text { font-size: 0.96em; }

  .inner-monologue { font-size: 0.94em; }
  .unlock-notice { font-size: 0.9em; }
  .choice-card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; }
  .choice-text { font-size: 0.88em; }
  .choice-arrow { align-self: flex-end; }
  .choice-note { font-size: 0.78em; }

  .memory-table { font-size: 0.82em; }
  .memory-table th:nth-child(2),
  .memory-table td:nth-child(2) { display: none; }
  .memory-config-body { font-size: 0.82em; }
  .memory-note { font-size: 0.76em; }
  .cot-exec-content { font-size: 0.84em; }
  .narrative-p { text-indent: 1.4em; font-size: 0.94em; }
}

/* ----- 18c. ≤380px ----- */
@media (max-width: 380px) {
  .khorra-output { padding: 10px 8px; border-radius: var(--radius-sm); }

  details summary { padding: 8px 10px; font-size: 0.88em; }
  .details-body { padding: 10px 10px; font-size: 0.88em; }

  .time-header { padding: 10px 10px; }
  .time-day { font-size: 1em; }
  .time-row-budget { gap: 4px; }
  .budget-item { font-size: 0.88em; padding: 2px 6px; }

  .stats-col { padding: 10px 10px; gap: 4px; }
  .stats-col-header { font-size: 0.86em; }
  .stats-mini-row { font-size: 0.8em; }

  .surv-cam-grid { gap: 4px; }
  .surv-cam-slot { font-size: 0.72em; padding: 8px 2px; }

  .dialogue-box .dialogue-text, .dialogue-box[data-role] .dialogue-text { font-size: 0.9em; }

  .memory-table { font-size: 0.76em; }
  .choice-card { padding: 10px 10px; }
  .choice-text { font-size: 0.84em; }

  .rmate-quickinfo { flex-direction: column; gap: 4px; }
  .rmate-age, .rmate-occupation, .rmate-status { align-self: flex-start; }
}

/* ----- 18d. 触摸友好 ----- */
@media (hover: none) and (pointer: coarse) {
  details summary { min-height: 44px; }
  .choice-card { min-height: 44px; }
  .memory-config > summary,
  .memory-stm > summary,
  .memory-ltm > summary { min-height: 40px; }
}