/* ============================================================
   「真·ELIZA」区域样式（第4课 #elizaReal）
   挂在 public/app/experience/C73/js/eliza-real.js 上
   ============================================================ */
#elizaReal { --er-ink:#0d2259; --er-ink2:#384f82; --er-mute:#8496bb; --er-line:#e6ecfb; }

/* ---------- 顶部：规则表切换 ---------- */
#elizaReal .er-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:2px 0 14px; }
#elizaReal .er-bar-h { font-size:12.5px; font-weight:800; color:var(--er-mute); }
#elizaReal .er-tab { border:1.5px solid var(--er-line); background:#fff; color:#5b21b6; border-radius:30px;
  padding:6px 15px; font-size:12.5px; font-weight:800; cursor:pointer; font-family:inherit; transition:.18s; }
#elizaReal .er-tab:hover { background:#f6f2ff; transform:translateY(-1px); }
#elizaReal .er-tab.on { background:linear-gradient(135deg,#7c3aed,#5b21b6); color:#fff; border-color:transparent;
  box-shadow:0 6px 16px -8px rgba(91,33,182,.8); }
#elizaReal .er-btn { border:none; border-radius:30px; padding:7px 16px; font-size:12.5px; font-weight:800;
  cursor:pointer; font-family:inherit; background:#eef2fc; color:#5a6b96; transition:.18s; }
#elizaReal .er-btn:hover { background:#e4e9f8; transform:translateY(-1px); }
#elizaReal .er-reset { margin-left:auto; }

/* ---------- 主体：左聊天 / 右规则追踪 ---------- */
#elizaReal .er-grid { display:grid; grid-template-columns:1fr 340px; gap:14px; align-items:start; }
#elizaReal .er-chat { background:#fff; border:2px solid var(--er-line); border-radius:18px; overflow:hidden; }
#elizaReal .er-chat-h { padding:10px 14px; font-size:13px; font-weight:800; color:var(--er-ink);
  background:#f7f9ff; border-bottom:1px solid var(--er-line); }
#elizaReal .er-chat-h span { font-weight:700; color:var(--er-mute); font-size:12px; }
#elizaReal .er-log { height:300px; overflow-y:auto; padding:14px 14px 6px; display:flex; flex-direction:column;
  gap:9px; background:#fbfcff; }
#elizaReal .er-b { max-width:82%; padding:9px 13px; border-radius:14px; font-size:13.5px; line-height:1.7;
  word-break:break-word; flex:0 0 auto; }
#elizaReal .er-b.me { align-self:flex-end; background:linear-gradient(135deg,#7c8bff,#3b5bdb); color:#fff;
  border-bottom-right-radius:4px; }
#elizaReal .er-b.bot { align-self:flex-start; background:#fff; border:1px solid var(--er-line); color:var(--er-ink2);
  border-bottom-left-radius:4px; }
#elizaReal .er-chips { display:flex; gap:7px; flex-wrap:wrap; padding:10px 14px 0; background:#fff; }
#elizaReal .er-chips button { border:1.5px solid #dbe4fb; background:#fff; color:#5b21b6; border-radius:30px;
  padding:5px 12px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; transition:.18s; }
#elizaReal .er-chips button:hover { background:#f6f2ff; }
#elizaReal .er-input { display:flex; gap:8px; padding:10px 14px 14px; background:#fff; }
#elizaReal .er-input input { flex:1; border:2px solid var(--er-line); border-radius:30px; padding:9px 16px;
  font-size:13.5px; font-family:inherit; color:var(--er-ink); outline:none; transition:.18s; }
#elizaReal .er-input input:focus { border-color:#7c8bff; }
#elizaReal .er-input button { border:none; border-radius:30px; padding:9px 22px; font-size:13px; font-weight:800;
  cursor:pointer; font-family:inherit; color:#fff; background:linear-gradient(135deg,#7c8bff,#3b5bdb); transition:.18s; }
#elizaReal .er-input button:hover { transform:translateY(-1px); }

/* ---------- 右侧：这次命中了什么 ---------- */
#elizaReal .er-side { background:#fff; border:2px solid var(--er-line); border-radius:18px; padding:12px 14px 14px; }
#elizaReal .er-side-h { font-size:13px; font-weight:800; color:var(--er-ink); margin-bottom:10px; }
#elizaReal .er-steps { list-style:none; display:flex; flex-direction:column; gap:8px; font-size:12.5px;
  line-height:1.7; color:var(--er-ink2); }
#elizaReal .er-steps li { border-left:3px solid #e8eefc; padding:2px 0 2px 10px; flex:0 0 auto; }
#elizaReal .er-steps li.er-idle { border-left-color:#f3d9a4; color:var(--er-mute); }
#elizaReal .er-s { display:block; font-size:11px; font-weight:800; color:var(--er-mute); letter-spacing:.3px; }
#elizaReal .er-steps code { background:#f4f7ff; border:1px solid #e6ecfb; border-radius:7px; padding:1px 6px;
  font-size:12px; color:#5b21b6; font-family:ui-monospace,Consolas,Menlo,monospace; }
#elizaReal .er-kw { color:#5b21b6; }
#elizaReal .er-rk { display:inline-block; background:#e8f0ff; color:#1e4fd6; border-radius:20px;
  padding:1px 8px; font-size:10.5px; font-weight:800; margin-left:5px; }
#elizaReal .er-bad { display:inline-block; background:#f5f6fa; color:#a8b4d0; border-radius:20px;
  padding:1px 8px; font-size:11px; margin-right:4px; text-decoration:line-through; }
#elizaReal .er-reply { color:#0ea876; }
#elizaReal .er-mem { margin-top:10px; padding-top:9px; border-top:1px dashed #e2e8f8; font-size:12px;
  color:var(--er-mute); line-height:1.9; }
#elizaReal .er-mpush { display:inline-block; background:#fff6e5; color:#b7791f; border-radius:20px;
  padding:1px 9px; font-size:11px; font-weight:800; margin-right:6px; }
#elizaReal .er-mitem { display:inline-block; background:#f3e8ff; color:#7c3aed; border-radius:20px;
  padding:1px 9px; font-size:11px; font-weight:700; margin-right:4px; }

/* ---------- 完整规则表 ---------- */
#elizaReal .er-full { margin-top:16px; border:1px solid var(--er-line); border-radius:16px; background:#fbfcff;
  overflow:hidden; }
#elizaReal .er-full > summary { cursor:pointer; padding:11px 15px; font-size:13px; font-weight:800; color:#5b21b6;
  background:#f7f2ff; list-style:none; }
#elizaReal .er-full > summary::-webkit-details-marker { display:none; }
#elizaReal .er-full > summary::before { content:'▸ '; }
#elizaReal .er-full[open] > summary::before { content:'▾ '; }
#elizaReal .er-note { padding:10px 15px 0; font-size:12px; line-height:1.75; color:var(--er-mute); }
#elizaReal .er-note b { color:#5b21b6; }
#elizaReal .er-table { padding:10px 15px 14px; display:flex; flex-direction:column; gap:6px;
  max-height:420px; overflow-y:auto; }
#elizaReal .er-k { border:1px solid #e6ecfb; border-radius:12px; background:#fff; overflow:hidden;
  flex:0 0 auto; }
#elizaReal .er-k > summary { cursor:pointer; padding:7px 12px; font-size:12.5px; color:var(--er-ink2);
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; list-style:none; }
#elizaReal .er-k > summary::-webkit-details-marker { display:none; }
#elizaReal .er-k > summary::before { content:'＋'; color:#a8b4d0; font-weight:800; }
#elizaReal .er-k[open] > summary::before { content:'－'; color:#7c3aed; }
#elizaReal .er-k[open] > summary { background:#faf7ff; }
#elizaReal .er-k b { color:#5b21b6; font-size:13px; }
#elizaReal .er-kn { font-size:11px; color:#a8b4d0; margin-left:auto; }
#elizaReal .er-k.none b { color:#b7791f; }
#elizaReal .er-rules { padding:4px 12px 10px; display:flex; flex-direction:column; gap:7px; }
#elizaReal .er-rule { font-size:12.5px; color:var(--er-ink2); line-height:1.7; }
#elizaReal .er-rule code { background:#f4f7ff; border:1px solid #e6ecfb; border-radius:7px; padding:1px 6px;
  font-size:12px; color:#5b21b6; font-family:ui-monospace,Consolas,Menlo,monospace; }
#elizaReal .er-tag { display:inline-block; background:#fff6e5; color:#b7791f; border-radius:20px;
  padding:0 8px; font-size:10.5px; font-weight:800; margin-right:5px; }
#elizaReal .er-ras { padding-left:10px; color:#67789e; font-size:12px; }

/* ---------- 页脚小结 ---------- */
#elizaReal .er-foot { margin-top:14px; padding:11px 14px; border-radius:14px; background:#fffaf0;
  border:1px solid #f6e7c8; font-size:12.5px; line-height:1.8; color:#8a6d3b; }
#elizaReal .er-foot b { color:#b7791f; }

/* ---------- 窄屏 ---------- */
@media (max-width:900px) {
  #elizaReal .er-grid { grid-template-columns:1fr; }
  #elizaReal .er-log { height:240px; }
  #elizaReal .er-reset { margin-left:0; }
}

/* ---- 故事页配图统一「科技感」：深色相框 + 洋红描边（与本课自制示意图同一套视觉） ---- */
.st-card .st-fig img { background:#0A1330; border-color:rgba(224,119,224,.34);
  box-shadow:0 0 0 1px rgba(10,19,48,.08),0 12px 26px -18px rgba(10,19,48,.8); }