/* =========================
 * Answer Modal
 * ========================= */
#answer-modal.show { display: flex; animation: fadeIn .2s ease-out both; }
#answer-modal-card { animation: popIn .2s ease-out both; }
#answer-modal{
    position: fixed;
    inset: 0;
    z-index: 20000; /* 弹窗永远在最上层 */
}
#answer-modal-card{
    position: relative;
    z-index: 20001;
}

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes popIn { from { transform: translateY(8px) scale(.98); opacity:0 } to { transform: translateY(0) scale(1); opacity:1 } }

.confetti-piece { position:absolute; width:8px; height:12px; opacity:.9; animation: drop 1.2s linear forwards; }
@keyframes drop { to { transform: translateY(120%) rotate(360deg); opacity: 0; } }

/* CodeMirror */
.CodeMirror { font-size: 0.8rem; border-radius: 0.75rem;  height: 100% !important;}


/* =========================
 * AI Floating Teacher + Modal
 * ========================= */
.ai-float-teacher {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 70;
    cursor: pointer;
    user-select: none;
}

.ai-teacher-avatar{
    width: 64px; height: 64px; border-radius: 999px;
    background: #fff; border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    display:flex; align-items:center; justify-content:center;
    position: relative;
    animation: aiTeacherFloat 2.2s ease-in-out infinite;
}
.ai-teacher-face{ font-size: 30px; line-height: 1; transform: translateY(-1px); }
.ai-teacher-badge{
    position: absolute; right: -2px; bottom: -2px;
    background: #7c3aed; color: #fff; font-size: 11px;
    padding: 2px 8px; border-radius: 999px; border: 2px solid #fff;
    font-weight: 700; letter-spacing: .5px;
}
.ai-teacher-avatar:hover{ transform: translateY(-1px) scale(1.03); transition: transform .12s ease-out; }
@keyframes aiTeacherFloat { 0%{transform:translateY(0)} 50%{transform:translateY(-6px)} 100%{transform:translateY(0)} }

/* =========================
 * AI Chat bubbles
 * ========================= */
.ai-row { display: flex; flex-direction: column; gap: 2px; }
.ai-row-user { align-items: flex-end; }
.ai-row-ai { align-items: flex-start; }

.ai-msg-meta { font-size: .7rem; color:#9ca3af; margin-bottom:.125rem; }

.ai-msg {
    padding: .6rem .85rem;
    border-radius: .85rem;
    max-width: 85%;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap; /* ✅ 保留换行（textContent 或 Markdown 的 <br> 都适配） */
}

.ai-msg-user { margin-left:auto; background:#4f46e5; color:#fff; }
.ai-msg-ai { margin-right:auto; background:#fff; border:1px solid #e5e7eb; color:#111827; }

/* Markdown 代码块美化（marked 输出） */
.ai-msg-ai pre {
    margin: .55rem 0;
    padding: .85rem;
    border-radius: .85rem;
    background: #0b1020;
    color: #e5e7eb;
    overflow: auto;
}
.ai-msg-ai code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
}
.ai-msg-ai pre code {
    white-space: pre; /* code block 内不强制换行，让滚动条接管 */
}

/* ✅ 注意：不要用 .ai-msg-ai a 全局改色，否则会覆盖 action 按钮 */
/* 只对正文 markdown 里的普通链接生效 */
.ai-msg-ai .ai-text a,
.ai-msg-ai p a,
.ai-msg-ai li a {
    color: #4f46e5;
    text-decoration: underline;
}

/* =========================
 * Quick Questions
 * ========================= */
.ai-quick-title{ font-size:12px; color:#6b7280; margin-bottom:6px; font-weight:600; }
.ai-quick-questions{ display:flex; flex-wrap:wrap; gap:8px; }

.ai-chip{
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
    transition: all .12s ease-out;
}
.ai-chip:hover{ border-color:#c7d2fe; background:#eef2ff; color:#3730a3; }
.ai-chip:disabled{ opacity:.55; cursor:not-allowed; }

/* =========================
 * AI Actions (backend-driven)
 * ========================= */
.ai-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

/* ✅ 让 actions 独立成“按钮”，不受上面普通 a 样式影响 */
.ai-actions .ai-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    border: 1px solid transparent;
    transition: all .12s ease-out;
    line-height: 1;
    white-space: nowrap;
}

.ai-actions .ai-action-primary {
    background: #4f46e5;
    color: #fff !important;           /* ✅ 强制白字，避免被其它 a 规则覆盖 */
}
.ai-actions .ai-action-primary:hover { background: #4338ca; }

.ai-actions .ai-action-ghost {
    background: #fff;
    border-color:#e5e7eb;
    color:#374151 !important;
}
.ai-actions .ai-action-ghost:hover { background: #f8fafc; border-color:#c7d2fe; color:#3730a3 !important; }

.ai-actions .ai-action-danger {
    background: #fee2e2;
    border-color:#fecaca;
    color:#991b1b !important;
}
.ai-actions .ai-action-danger:hover { background: #fecaca; }
/* =========================
 * TTS Speaker Button
 * ========================= */
.ai-tts-wrap {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: normal;
}
.ai-tts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 50%;
    cursor: pointer;
    transition: all .15s ease-out;
    flex-shrink: 0;
}
.ai-tts-btn:hover { background: #eef2ff; border-color: #c7d2fe; }

.ai-tts-btn.tts-loading { cursor: wait; background: #eef2ff; border-color: #c7d2fe; }
.ai-tts-btn.tts-loading svg { animation: ttsPulse .8s ease-in-out infinite; }
@keyframes ttsPulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.ai-tts-btn.tts-playing { background: #eef2ff; border-color: #818cf8; }
.ai-tts-btn.tts-paused { background: #fef3c7; border-color: #fbbf24; }

.ai-tts-hint {
    font-size: 12px;
    color: #6b7280;
}
.ai-tts-hint.tts-hint-loading { color: #4f46e5; }
.ai-tts-hint.tts-hint-playing { color: #4f46e5; }
.ai-tts-hint.tts-hint-paused { color: #d97706; }

/* 可选：更细的滚动条 */
.ek-scroll::-webkit-scrollbar { width: 10px; }
.ek-scroll::-webkit-scrollbar-thumb { background: rgba(148,163,184,.7); border-radius: 999px; }
.ek-scroll::-webkit-scrollbar-track { background: transparent; }