/* 生僻词标注 + 框图芯片行 + 会话级代码替换 */
/* 可提问内容统一 hover 提示：呼吸式金色描边 + 轻微上浮 + 气泡箭头提示 */
.ai-term{cursor:pointer;border-bottom:1px dashed #d49312;border-radius:3px;padding:0 1px;transition:background .15s,box-shadow .15s,transform .15s}
.ai-term:hover{background:#fff7e0;box-shadow:0 0 0 1px rgba(212,147,18,.55);transform:translateY(-1px)}
/* 代码区（可编辑）内的标注 span 非交互：不显示点击手势，也不打扰编辑/选中 */
.code-text .ai-term{cursor:text;border-bottom-color:#d49312}
.code-text .ai-term:hover{background:transparent;box-shadow:none;transform:none}
.code-line .ai-term:hover{background:rgba(148,163,184,.14);box-shadow:0 0 0 1px rgba(52,120,246,.25);transform:none}
.ai-term-code{border-bottom-color:#d49312}
.ai-term-text{border-bottom-color:#3478f6}
.ai-term-text:hover{background:#eaf2ff;box-shadow:0 0 0 1px rgba(52,120,246,.4)}
.code-line.ai-snippet{cursor:pointer;background:rgba(148,163,184,.10)}
.code-line.ai-snippet:hover{background:rgba(148,163,184,.18)}
.ai-whole-hint{display:inline-block;margin-left:10px;padding:2px 9px;font-size:11px;border:1px solid #235fc7;border-radius:999px;color:#235fc7;cursor:pointer;vertical-align:middle;transition:background .15s,box-shadow .15s,transform .15s}
.ai-whole-hint:hover{background:#eaf2ff;box-shadow:0 0 0 2px rgba(52,120,246,.28);transform:translateY(-1px)}
.ai-visual-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px;border-top:1px dashed #d9e1ec;font-size:12px}
.ai-step-visual-chips{display:flex;flex-wrap:wrap;gap:6px;padding:6px 12px;border-top:1px dashed #e0e7ef;font-size:12px}
.ai-chip{border:1px solid #cfdbea;border-radius:999px;padding:2px 10px;background:#f8fafc;color:#334155;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s}
.ai-chip:hover{background:#eaf2ff;border-color:#3478f6;color:#1d4ed8;transform:translateY(-1px);box-shadow:0 2px 6px rgba(52,120,246,.2)}
.ai-chip-empty{color:#94a3b8}
.ai-code-bar{display:flex;align-items:center;gap:10px;padding:6px 12px;background:#fffbe6;border:1px solid #f3d97a;border-bottom:none;border-radius:10px 10px 0 0;font-size:12px;color:#9a5b13}
.ai-restore-btn{margin-left:auto;border:1px solid #c43d55;border-radius:7px;padding:3px 10px;font-size:11.5px;background:#fff;color:#c43d55;cursor:pointer}
.ai-restore-btn:hover{background:#fff0f0}

/* ── 代码框选中 → AI 解释 浮动菜单 ── */
.ai-sel-menu{position:absolute;z-index:9999;display:inline-block;background:#fff;border:1px solid #cfdbea;border-radius:10px;box-shadow:0 6px 18px rgba(31,49,78,.18);padding:4px}
.ai-sel-menu[hidden]{display:none}
.ai-sel-menu-btn{border:1px solid #235fc7;background:linear-gradient(135deg,#3478f6,#235fc7);color:#fff;font-size:12.5px;font-weight:700;border-radius:8px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.ai-sel-menu-btn:hover{filter:brightness(1.08)}

/* ── 三处方框点击 → AI 解释 入口（CSS ::after，随每步 innerHTML 刷新不丢失）── */
.sv-keypoint{cursor:pointer;transition:background .15s}
.sv-keypoint::after{content:" 💬";font-style:normal;color:#d49312;font-weight:700}
.sv-keypoint:hover{background:rgba(212,147,18,.08);border-radius:4px}
.sv-keypoint:hover::after{color:#9a5b13}
.step-visual .sv-head::after{content:"  💬 解释";color:#3478f6;font-weight:700;font-size:12.5px;margin-left:auto;align-self:center;flex-shrink:0;transition:color .15s}
.step-visual .sv-head:hover{background:rgba(52,120,246,.06);border-radius:6px}
.step-visual .sv-head:hover::after{color:#1d4ed8}
.mem-panel-inline .panel-title,.vars-panel-inline .panel-title{cursor:pointer;transition:background .15s}
.mem-panel-inline .panel-title::after,.vars-panel-inline .panel-title::after{content:" 💬";color:#3478f6}
.mem-panel-inline .panel-title:hover,.vars-panel-inline .panel-title:hover{background:rgba(52,120,246,.06);border-radius:4px}
.mem-panel-inline .panel-title:hover::after,.vars-panel-inline .panel-title:hover::after{color:#1d4ed8}

/* ── 主图「解释」按钮：挂在 .main-canvas-wrap 右上角，避开 .anim-controls 进度条 ── */
.main-canvas-wrap{position:relative}
.ai-main-explain-btn{position:absolute;top:8px;right:8px;z-index:9;padding:3px 11px;border:1px solid #235fc7;border-radius:999px;background:rgba(255,255,255,.94);color:#235fc7;font-size:12px;font-weight:600;cursor:pointer;box-shadow:none;transition:background .15s,box-shadow .15s,transform .15s}
.ai-main-explain-btn:hover{background:#eaf2ff;box-shadow:0 0 0 2px rgba(52,120,246,.28);transform:translateY(-1px)}
@media(max-width:700px){.ai-main-explain-btn{top:6px;right:6px;padding:2px 9px;font-size:11px}}

/* ── 可解释内容 hover 提示气泡：鼠标移到 AI 可解释区域时浮现 ── */
.ai-hover-tip{
  position:fixed;z-index:10001;max-width:260px;padding:5px 10px;
  font-size:12px;font-weight:600;line-height:1.4;color:#fff;
  background:#1e3a5f;border-radius:8px;box-shadow:0 4px 12px rgba(31,49,78,.28);
  pointer-events:none;white-space:nowrap;opacity:0;transform:translateY(4px);
  transition:opacity .15s ease,transform .15s ease;
}
.ai-hover-tip.show{opacity:1;transform:translateY(0)}

/* ── 代码区手写编辑（整个代码框为单一编辑宿主，跨行可自由选中）── */
pre[contenteditable="true"]{outline:none;caret-color:#3478f6}
pre[contenteditable="true"] .ln{user-select:none;-webkit-user-select:none}
pre[contenteditable="true"] .code-text{border-radius:3px}
pre[contenteditable="true"] .code-text:hover{box-shadow:0 0 0 1px rgba(52,120,246,.35)}
pre[contenteditable="true"]:focus{box-shadow:0 0 0 1px rgba(52,120,246,.45);border-radius:8px}

/* ── 代码框彩色语法高亮：token 配色（适配代码区深色底）── */
pre[contenteditable="true"] .tok-kw{color:#c678dd;font-weight:600}
pre[contenteditable="true"] .tok-type{color:#e5c07b}
pre[contenteditable="true"] .tok-str{color:#98c379}
pre[contenteditable="true"] .tok-num{color:#d19a66}
pre[contenteditable="true"] .tok-cmt{color:#7f848e;font-style:italic}
pre[contenteditable="true"] .tok-pre{color:#e06c75}
pre[contenteditable="true"] .tok-fn{color:#61afef}

/* ── 选中代码框后：闪烁光标提示（聚焦时边框闪烁，提示正处于可编辑状态）── */
pre[contenteditable="true"].ai-code-focus{animation:ai-code-caret 1.1s ease-in-out infinite}
@keyframes ai-code-caret{
  0%,100%{box-shadow:0 0 0 1px rgba(52,120,246,.55)}
  50%{box-shadow:0 0 0 2px rgba(52,120,246,.85),0 0 10px rgba(52,120,246,.5)}
}