/* =============================================================================
 * AI 在线面试样式（设置页 /ai-interview.html + 考试页 /ai-interview/quiz.html）
 * 考试页为微信式一问一答对话：左右气泡、底部输入栏、思考动画
 * 与 common.css 共用 CSS 变量（--primary-color 等），风格对齐 practice.css
 * 视觉：柔和渐变、卡片阴影、微动效
 * ============================================================================= */

.aii-doc .content {
  min-width: 0;
}

/* ============================== 头部 Hero ============================== */

.aii-hero {
  position: relative;
  text-align: center; padding: 44px var(--space-24) 40px ;
  margin-bottom: var(--space-24);
  border-radius: var(--radius-16);
  overflow: hidden;
  background:
    radial-gradient(ellipse 600px 220px at 15% -20%, rgba(93, 151, 67, .18), transparent 60%),
    radial-gradient(ellipse 500px 200px at 85% -30%, rgba(52, 152, 219, .12), transparent 60%),
    linear-gradient(160deg, var(--primary-lighter), rgba(255, 255, 255, .4) 45%, #f3f7f1);
  border: 1px solid rgba(93, 151, 67, .18);
}

.aii-hero::before,
.aii-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.aii-hero::before {
  width: 120px;
  height: 120px;
  right: 6%;
  top: -46px;
  background: radial-gradient(circle, rgba(93, 151, 67, .14), transparent 70%);
}

.aii-hero::after {
  width: 90px;
  height: 90px;
  left: 8%;
  bottom: -40px;
  background: radial-gradient(circle, rgba(52, 152, 219, .12), transparent 70%);
}

.aii-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-12);
  margin-bottom: var(--space-12);
  border-radius: 20px;
  background: rgba(93, 151, 67, .12);
  border: 1px solid rgba(93, 151, 67, .25);
  color: var(--primary-dark);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: .5px;
}

.aii-hero-title {
  position: relative;
  font-size: var(--fs-h1);
  margin: 0 0 10px;
  color: var(--text-primary);
  letter-spacing: .5px;
}

.aii-hero-title .aii-hero-emoji {
  display: inline-block;
  margin-right: var(--space-4);
  animation: aiiFloat 3s ease-in-out infinite;
}

@keyframes aiiFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-6px) rotate(3deg); }
}

.aii-hero-sub {
  position: relative;
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-15);
}

/* ============================== 未完成面试提示条 ============================== */

.aii-continue {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
  padding: var(--space-12) var(--space-16); margin-bottom: var(--space-16);
  border-radius: var(--radius-12);
  background: linear-gradient(135deg, var(--primary-lighter), rgba(52, 152, 219, .08));
  border: 1px solid rgba(93, 151, 67, .3);
}

/* display:flex 会覆盖 hidden 属性的默认隐藏，需显式还原 */
.aii-continue[hidden] {
  display: none;
}

.aii-continue-icon {
  font-size: var(--fs-18);
}

.aii-continue-text {
  flex: 1;
  min-width: 200px;
  font-size: var(--fs-13);
  color: var(--text-primary);
}

/* ============================== 左右两栏布局 ============================== */

.aii-body {
  display: flex;
  gap: var(--space-20);
  align-items: flex-start;
  margin-bottom: var(--space-32);
}

/* 左栏：设置 / 进度面板 */
.aii-sidebar {
  width: 300px;
  flex-shrink: 0;
  position: sticky;
  top: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* 右栏：对话 / 报告 */
.aii-main {
  flex: 1;
  min-width: 0;
}

/* ============================== 面板卡片 ============================== */

.aii-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-16);
  padding: var(--space-20) var(--space-16);
  box-shadow: var(--shadow-sm);
}

.aii-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
  padding-bottom: var(--space-12);
  border-bottom: 1px dashed var(--border-color);
}

.aii-panel-title {
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}

.aii-panel-desc {
  font-size: var(--fs-12);
  color: var(--text-muted);
  text-align: right;
}

/* ============================== 设置表单 ============================== */

.aii-form {
  display: flex;
  flex-direction: column; gap: var(--space-16);
}

.aii-field {
  display: flex;
  flex-direction: column; gap: var(--space-8);
}

.aii-label {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center; gap: var(--space-4);
}

.aii-label::before {
  content: '';
  width: 4px;
  height: 14px;
  border-radius: var(--radius-2);
  background: linear-gradient(180deg, var(--primary-color), var(--primary-light));
}

.aii-required {
  color: #e04f5f;
}

.aii-field-tip {
  margin: 0;
  font-size: var(--fs-12);
  color: var(--text-muted);
  line-height: 1.5;
}

/* 方向多选列表 */
.aii-dir-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-height: 224px;
  overflow-y: auto;
  padding-right: var(--space-4);
  scrollbar-width: thin;
}

.aii-dir-option {
  display: flex;
  align-items: center; gap: var(--space-8);
  padding: var(--space-8) var(--space-10);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-12);
  cursor: pointer;
  transition: all .2s ease;
  font-size: var(--fs-13);
  color: var(--text-primary);
  -webkit-user-select: none;
  user-select: none;
  background: var(--bg-body, #fff);
}

.aii-dir-option:hover {
  border-color: var(--primary-light);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(93, 151, 67, .08);
}

.aii-dir-option input {
  accent-color: var(--primary-color);
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}

.aii-dir-option.is-checked {
  border-color: var(--primary-color);
  background: linear-gradient(135deg, var(--primary-lighter), rgba(93, 151, 67, .06));
  color: var(--primary-dark);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--primary-color);
}

.aii-dir-count {
  margin-left: auto;
  font-size: var(--fs-11);
  color: var(--text-muted);
  background: var(--bg-hover, #eef1f6);
  padding: 1px var(--space-8);
  border-radius: var(--radius-12);
  font-variant-numeric: tabular-nums;
}

.aii-dir-option.is-checked .aii-dir-count {
  background: rgba(93, 151, 67, .14);
  color: var(--primary-dark);
}

/* 方向列表空状态：数据加载失败时的兜底提示（避免渲染空白列表让用户无从下手） */
.aii-dir-empty {
  margin: 0;
  padding: var(--space-20) var(--space-12);
  font-size: var(--fs-12);
  color: var(--text-muted);
  text-align: center;
  line-height: 1.7;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-12);
}

/* 提示条警告反馈：点击「开始面试」未满足条件时闪烁一次（给出明确视觉响应） */
.aii-field-tip.is-warn {
  color: #e04f5f;
  font-weight: 600;
  animation: aii-tip-shake .45s ease;
}

@keyframes aii-tip-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-3px); }
  40%, 80% { transform: translateX(3px); }
}

/* 单选 pill 组 */
.aii-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.aii-pill {
  padding: var(--space-6) var(--space-16);
  border: 1px solid var(--border-color);
  border-radius: 22px;
  background: var(--bg-card);
  font-size: var(--fs-13);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .2s ease;
  -webkit-user-select: none;
  user-select: none;
}

.aii-pill:hover {
  border-color: var(--primary-light);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.aii-pill.is-active {
  border-color: var(--primary-color);
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(93, 151, 67, .28);
}

/* 难度多选 checkbox 组 */
.aii-checks {
  display: flex;
  gap: var(--space-8);
}

.aii-check {
  display: flex;
  align-items: center; gap: var(--space-4);
  padding: var(--space-6) var(--space-12);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-12);
  font-size: var(--fs-13);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .2s;
  -webkit-user-select: none;
  user-select: none;
}

.aii-check:hover {
  border-color: var(--primary-light);
}

.aii-check.is-checked {
  border-color: var(--primary-color);
  background: var(--primary-lighter);
  color: var(--primary-dark);
  font-weight: 600;
}

.aii-check input {
  accent-color: var(--primary-color);
}

/* 按钮 */
.aii-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-10) var(--space-24);
  border-radius: var(--radius-12);
  border: 1px solid transparent;
  font-size: var(--fs-14);
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}

.aii-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.aii-btn-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: #fff;
  box-shadow: 0 4px 14px rgba(93, 151, 67, .3);
}

.aii-btn-primary:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(93, 151, 67, .36);
}

.aii-btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.aii-btn-ghost {
  background: transparent;
  border-color: var(--border-color);
  color: var(--text-secondary);
}

.aii-btn-ghost:hover:not(:disabled) {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background: var(--primary-lighter);
}

.aii-btn-full {
  width: 100%;
}

.aii-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* ============================== 面试进度面板 ============================== */

.aii-progress-bar {
  height: 8px;
  background: var(--bg-hover, #eef1f6);
  border-radius: var(--radius-4);
  overflow: hidden;
}

.aii-progress-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color), #6fbf4f);
  border-radius: var(--radius-4);
  transition: width .4s ease;
}

.aii-progress-text {
  margin-top: var(--space-6);
  font-size: var(--fs-12);
  color: var(--text-muted);
}

.aii-timer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-12); margin-top: var(--space-12);
  background: linear-gradient(135deg, var(--primary-lighter), rgba(93, 151, 67, .05));
  border: 1px solid var(--primary-light);
  border-radius: var(--radius-12);
}

.aii-timer-label {
  font-size: var(--fs-12);
  color: var(--text-secondary);
}

.aii-timer-value {
  font-family: var(--font-mono);
  font-size: var(--fs-22);
  font-weight: 700;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}

.aii-timer-value.is-warning {
  color: #e04f5f;
  animation: aiiPulse 1s ease-in-out infinite;
}

@keyframes aiiPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

.aii-answered {
  margin-top: var(--space-16);
}

.aii-answered-title {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text-primary); margin-bottom: var(--space-8);
}

.aii-answered-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.aii-answered-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-10);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-12);
  font-size: var(--fs-12);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .2s;
}

.aii-answered-item:hover {
  border-color: var(--primary-light);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.aii-answered-item.is-current {
  border-color: var(--primary-color);
  background: var(--primary-lighter);
  color: var(--primary-dark);
  box-shadow: inset 0 0 0 1px var(--primary-color);
}

.aii-answered-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg-hover, #eef1f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-11);
  font-weight: 600;
}

.aii-answered-item.is-answered .aii-answered-num {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: #fff;
}

.aii-answered-item.is-skipped .aii-answered-text {
  text-decoration: line-through;
  opacity: .6;
}

.aii-answered-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aii-answered-item .aii-answered-end {
  font-size: var(--fs-11);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ============================== 介绍卡片 ============================== */

.aii-intro-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-16);
  padding: var(--space-32) 34px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.aii-intro-card::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  right: -60px;
  top: -60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(93, 151, 67, .1), transparent 70%);
}

.aii-intro-badge {
  display: inline-block;
  padding: var(--space-4) var(--space-16);
  border-radius: 22px;
  background: linear-gradient(135deg, var(--primary-lighter), rgba(93, 151, 67, .08));
  border: 1px solid var(--primary-light);
  color: var(--primary-dark);
  font-size: var(--fs-13);
  font-weight: 600;
  margin-bottom: var(--space-16);
}

.aii-intro-title {
  margin: 0 0 10px;
  font-size: var(--fs-22);
  color: var(--text-primary);
}

.aii-intro-text {
  margin: 0 0 20px;
  font-size: var(--fs-14);
  line-height: var(--lh-loose);
  color: var(--text-secondary);
}

.aii-intro-text strong {
  color: var(--primary-dark);
}

.aii-intro-steps {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.aii-intro-steps li {
  display: flex;
  align-items: center; gap: var(--space-10);
  font-size: var(--fs-14);
  color: var(--text-primary);
}

.aii-intro-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-13);
  font-weight: 600;
  box-shadow: 0 3px 8px rgba(93, 151, 67, .3);
}

.aii-intro-notes { padding: var(--space-16) ;
  background: linear-gradient(135deg, var(--bg-hover, #f6f8fa), rgba(93, 151, 67, .04));
  border-radius: var(--radius-12);
  border: 1px solid var(--border-color);
}

.aii-intro-notes-title {
  margin: 0 0 6px;
  font-size: var(--fs-14);
  color: var(--text-primary);
}

.aii-intro-notes p {
  margin: 0;
  font-size: var(--fs-13);
  line-height: var(--lh-base);
  color: var(--text-secondary);
}

/* ============================== 对话区（微信式聊天） ============================== */

/* 聊天卡片：消息线程 + 底部输入栏 */
.aii-chat-card {
  display: flex;
  flex-direction: column;
  height: 560px;
  max-height: calc(100vh - 300px);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* 消息线程（可滚动） */
.aii-chat {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-16) var(--space-16) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  scroll-behavior: smooth;
}

/* 一组问答（AI 问题 + 用户回答/跳过提示），用于定位与高亮 */
.aii-msg-pair {
  display: flex;
  flex-direction: column; gap: var(--space-12);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-12);
  animation: aiiFadeIn .3s ease;
}

.aii-msg-pair.is-highlight {
  animation: aiiHighlight 2s ease both;
}

@keyframes aiiHighlight {
  0%, 60% { background: rgba(93, 151, 67, .18); }
  100% { background: transparent; }
}

/* 消息行：AI 在左，用户（me）在右 */
.aii-msg-row {
  display: flex;
  gap: var(--space-10);
  align-items: flex-start;
}

.aii-msg-row.aii-msg-me {
  flex-direction: row-reverse;
}

.aii-msg-row .aii-msg-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-12);
  font-size: var(--fs-17);
  box-shadow: none;
}

.aii-msg-row.aii-msg-me .aii-msg-avatar {
  background: linear-gradient(135deg, rgba(52, 152, 219, .16), rgba(52, 152, 219, .08));
  border-color: rgba(52, 152, 219, .32);
}

/* 气泡主体列（气泡 + 时间） */
.aii-msg-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 78%;
  min-width: 0;
}

.aii-msg-row.aii-msg-me .aii-msg-main {
  align-items: flex-end;
}

/* 气泡（微信式圆角，无左侧强调线） */
.aii-msg-row .aii-msg-bubble {
  flex: none;
  padding: var(--space-10) var(--space-16);
  background: #f2f3f5;
  border: none;
  border-left: none;
  border-radius: 4px 14px 14px 14px;
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: none;
}

.aii-msg-row.aii-msg-me .aii-msg-bubble {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: #fff;
  border-radius: 14px 4px 14px 14px;
}

.aii-msg-row .aii-msg-error {
  background: rgba(224, 79, 95, .06);
  border: 1px solid rgba(224, 79, 95, .35);
  color: #e04f5f;
}

/* 气泡时间 */
.aii-msg-time {
  font-size: var(--fs-11);
  color: var(--text-muted);
}

/* 系统提示（跳过本题） */
.aii-msg-system {
  align-self: center;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-12);
  background: rgba(0, 0, 0, .05);
  color: var(--text-muted);
  font-size: var(--fs-12);
}

/* AI 思考中动画 */
.aii-thinking {
  display: inline-flex;
  align-items: center; gap: var(--space-4);
  padding: var(--space-6) var(--space-2);
}

.aii-thinking-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  animation: aiiBlink 1.2s infinite both;
}

.aii-thinking-dot:nth-child(2) { animation-delay: .2s; }
.aii-thinking-dot:nth-child(3) { animation-delay: .4s; }

@keyframes aiiBlink {
  0%, 80%, 100% { opacity: .2; transform: scale(.85); }
  40% { opacity: 1; transform: scale(1); }
}

.aii-retry-link {
  display: inline-block;
  padding: 0 4px;
  color: var(--primary-color);
  cursor: pointer;
  text-decoration: underline;
}

/* 底部输入栏（微信式） */
.aii-chat-inputbar {
  flex: none;
  border-top: 1px solid var(--border-color);
  padding: var(--space-10) var(--space-16) var(--space-12);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.aii-chat-inputbar-tip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  font-size: var(--fs-12);
  color: var(--text-muted);
}

.aii-chat-timer {
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}

.aii-chat-inputbar-row {
  display: flex;
  gap: var(--space-10);
  align-items: stretch;
}

.aii-chat-textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-12);
  padding: var(--space-10) var(--space-12);
  font-size: var(--fs-14);
  line-height: var(--lh-ui);
  color: var(--text-primary);
  background: var(--bg-body, #fff);
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
}

.aii-chat-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(93, 151, 67, .12);
}

.aii-chat-textarea:disabled {
  background: var(--bg-hover, #f5f5f5);
  cursor: not-allowed;
}

.aii-chat-actions {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-8);
}

.aii-chat-actions .aii-btn {
  white-space: nowrap;
}

/* ============================== 报告加载/错误提示 ============================== */

/* 报告区内的 AI 消息（生成中 / 失败 / 空内容），与聊天区气泡独立 */
.aii-msg {
  display: flex;
  gap: var(--space-10);
  align-items: flex-start;
  animation: aiiFadeIn .3s ease;
}

@keyframes aiiFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.aii-msg .aii-msg-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-12);
  background: linear-gradient(135deg, var(--primary-lighter), rgba(93, 151, 67, .12));
  border: 1px solid var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-20);
  box-shadow: 0 0 0 4px rgba(93, 151, 67, .08);
}

.aii-msg .aii-msg-bubble {
  flex: 1;
  min-width: 0; padding: var(--space-16) ;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--primary-color);
  border-radius: 4px 14px 14px 14px;
  font-size: var(--fs-14);
  line-height: var(--lh-loose);
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: var(--shadow-sm);
}

.aii-msg .aii-msg-bubble.aii-msg-error {
  color: #e04f5f;
  border-left-color: #e04f5f;
  border-color: rgba(224, 79, 95, .35);
  background: rgba(224, 79, 95, .05);
}

/* ============================== 报告区 ============================== */

.aii-report {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.aii-report-summary {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-16);
  padding: var(--space-20) var(--space-24);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.aii-report-summary::before {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  right: -50px;
  top: -50px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(93, 151, 67, .1), transparent 70%);
}

.aii-report-summary-title {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0 0 14px;
  font-size: var(--fs-17);
  color: var(--text-primary);
}

/* 报告内 Markdown 渲染内容 */
.aii-md {
  font-size: var(--fs-14);
  line-height: var(--lh-loose);
  color: var(--text-primary);
  word-break: break-word;
}

.aii-md > *:first-child { margin-top: 0; }
.aii-md > *:last-child { margin-bottom: 0; }

.aii-md h2, .aii-md h3, .aii-md h4 {
  margin: 1.2em 0 .5em;
  color: var(--text-primary);
  line-height: 1.5;
}

.aii-md h2 { font-size: var(--fs-17); }
.aii-md h3 { font-size: var(--fs-15); }
.aii-md h4 { font-size: var(--fs-14); }

.aii-md p { margin: .6em 0; }

.aii-md ul, .aii-md ol {
  margin: .6em 0;
  padding-left: 1.6em;
}

.aii-md li { margin: .25em 0; }

.aii-md blockquote {
  margin: .8em 0;
  padding: var(--space-8) var(--space-16);
  border-left: 3px solid var(--primary-light);
  background: var(--primary-lighter);
  border-radius: 0 8px 8px 0;
  color: var(--text-secondary);
}

.aii-md code {
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-4);
  background: var(--bg-hover, #eef1f6);
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: #c7254e;
}

.aii-md pre {
  margin: .8em 0;
  padding: var(--space-12);
  border-radius: var(--radius-8);
  background: #282c34;
  overflow-x: auto;
}

.aii-md pre code {
  padding: 0;
  background: transparent;
  color: #abb2bf;
}

.aii-md table {
  border-collapse: collapse;
  margin: .8em 0;
  width: 100%;
  font-size: var(--fs-13);
}

.aii-md th, .aii-md td {
  border: 1px solid var(--border-color);
  padding: var(--space-6) var(--space-10);
  text-align: left;
}

.aii-md th {
  background: var(--bg-hover, #f6f8fa);
  font-weight: 600;
}

.aii-md a {
  color: var(--primary-color);
}

/* 每题明细卡片 */
.aii-report-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-16);
  overflow: hidden;
  transition: box-shadow .2s ease;
}

.aii-report-item:hover {
  box-shadow: var(--shadow-sm);
}

.aii-report-item-head {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--border-color);
  background: linear-gradient(135deg, var(--bg-hover, #f6f8fa), rgba(93, 151, 67, .04));
}

.aii-report-item-index {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-13);
  font-weight: 700;
}

.aii-report-item-title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aii-report-item-score {
  flex-shrink: 0;
  padding: var(--space-4) var(--space-12);
  border-radius: 22px;
  font-size: var(--fs-13);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.aii-report-item-score.is-good { background: rgba(46, 204, 113, .14); color: #1e9e5a; }
.aii-report-item-score.is-mid { background: rgba(241, 196, 15, .18); color: #b58a00; }
.aii-report-item-score.is-low { background: rgba(224, 79, 95, .14); color: #d33d4e; }
.aii-report-item-score.is-empty { background: var(--bg-hover, #eef1f6); color: var(--text-muted); }

.aii-report-item-body { padding: var(--space-16) ;
  display: flex;
  flex-direction: column; gap: var(--space-12);
}

.aii-report-row {
  font-size: var(--fs-13);
  line-height: var(--lh-base);
  color: var(--text-secondary);
}

.aii-report-row-label {
  display: inline-block;
  font-weight: 600;
  color: var(--text-primary);
  margin-right: var(--space-6);
}

.aii-report-row-value {
  white-space: pre-wrap;
  word-break: break-word;
}

.aii-report-row-value.is-answer {
  padding: var(--space-10) var(--space-12);
  background: var(--bg-hover, #f6f8fa);
  border-radius: var(--radius-12);
  border: 1px solid var(--border-color);
  display: block;
  margin-top: var(--space-4);
}

.aii-report-row-value.is-empty-answer {
  color: var(--text-muted);
  font-style: italic;
}

.aii-report-comment {
  padding: var(--space-12);
  border-radius: var(--radius-12);
  border: 1px dashed var(--primary-light);
  background: rgba(93, 151, 67, .04);
}

.aii-report-comment-label {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--primary-dark);
  margin-bottom: var(--space-6);
}

/* 报告概要（左栏） */
.aii-report-meta {
  display: flex;
  flex-direction: column; gap: var(--space-8);
  font-size: var(--fs-13);
  color: var(--text-secondary);
}

.aii-report-meta-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-10);
  padding-bottom: var(--space-8);
  border-bottom: 1px dashed var(--border-color);
}

.aii-report-meta-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.aii-report-meta-row b {
  color: var(--text-primary);
  font-weight: 600;
  text-align: right;
}

.aii-score-box {
  margin: 16px 0;
  padding: var(--space-16);
  text-align: center;
  background: linear-gradient(135deg, var(--primary-lighter), rgba(93, 151, 67, .06));
  border: 1px solid var(--primary-light);
  border-radius: var(--radius-12);
}

.aii-score-num {
  display: block;
  font-size: 36px;
  font-weight: 800;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}

.aii-score-label {
  display: block;
  margin-top: var(--space-4);
  font-size: var(--fs-12);
  color: var(--text-secondary);
}

/* ============================== 报告生成中（收卷 → 评分 → 评语） ============================== */

/* 全屏评分弹层：交卷瞬间盖住整个页面，提示任何位置都不会漏看 */
.aii-overlay {
  position: fixed;
  inset: 0;
  z-index: 15000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-20);
  background: rgba(12, 22, 15, .48);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}

.aii-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.aii-overlay.is-leaving {
  opacity: 0;
}

.aii-overlay-card {
  width: min(440px, 94vw);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 36px var(--space-28) var(--space-28);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: aiiOverlayPop .32s ease;
}

@keyframes aiiOverlayPop {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 弹层背后报告区的占位提示（生成完成后被成绩卡替换） */
.aii-report-pending {
  padding: 60px var(--space-20);
  background: var(--bg-card);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-16);
  color: var(--text-muted);
  font-size: var(--fs-13);
  text-align: center;
}

/* 收卷确认条：第一时间告诉用户「没卡死，已经交卷了」 */
.aii-loading-confirm {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16); margin-bottom: var(--space-24);
  border-radius: 22px;
  background: linear-gradient(135deg, var(--primary-lighter), rgba(93, 151, 67, .08));
  border: 1px solid rgba(93, 151, 67, .3);
  color: var(--primary-dark);
  font-size: var(--fs-13);
  font-weight: 700;
}

/* 大号转圈 + 机器人脉冲 */
.aii-loading-anim {
  position: relative;
  width: 92px;
  height: 92px; margin-bottom: var(--space-16);
}

.aii-loading-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid var(--primary-lighter);
  border-top-color: var(--primary-color);
  animation: aiiSpin 1.1s linear infinite;
}

.aii-loading-bot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  animation: aiiPulse 1.6s ease-in-out infinite;
}

@keyframes aiiSpin {
  to { transform: rotate(360deg); }
}

.aii-loading-title {
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--text-primary); margin-bottom: var(--space-16);
}

/* 生成步骤：当前步骤高亮脉冲，已完成打勾 */
.aii-loading-steps {
  list-style: none;
  margin: 0 auto 20px;
  padding: 0;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.aii-loading-step {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-12);
  border: 1px solid var(--border-color);
  background: var(--bg-body, #fff);
  color: var(--text-muted);
  font-size: var(--fs-13);
  opacity: .65;
  transition: all .3s ease;
}

.aii-loading-step.is-active {
  border-color: var(--primary-color);
  background: linear-gradient(135deg, var(--primary-lighter), rgba(93, 151, 67, .05));
  color: var(--primary-dark);
  font-weight: 600;
  opacity: 1;
  box-shadow: 0 4px 14px rgba(93, 151, 67, .14);
  animation: aiiStepNudge 1.8s ease-in-out infinite;
}

@keyframes aiiStepNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

.aii-loading-step-icon {
  font-size: var(--fs-16);
}

.aii-loading-step-text {
  flex: 1;
  text-align: left;
}

.aii-loading-step-state {
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--primary-color);
}

/* 已等待计时：数字跳动证明页面活着 */
.aii-loading-wait {
  font-size: var(--fs-14);
  color: var(--text-secondary);
  margin-bottom: var(--space-16);
}

.aii-loading-wait b {
  font-family: var(--font-mono);
  font-size: var(--fs-20);
  font-weight: 800;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}

/* 流动进度条 */
.aii-loading-bar {
  width: 100%;
  max-width: 300px;
  height: 6px;
  border-radius: var(--radius-4);
  background: var(--bg-hover, #eef1f6);
  overflow: hidden; margin-bottom: var(--space-12);
}

.aii-loading-bar span {
  display: block;
  height: 100%;
  width: 45%;
  border-radius: var(--radius-4);
  background: linear-gradient(90deg, var(--primary-color), #6fbf4f);
  animation: aiiSlide 1.4s ease-in-out infinite;
}

@keyframes aiiSlide {
  0% { margin-left: -45%; }
  100% { margin-left: 100%; }
}

.aii-loading-tip {
  font-size: var(--fs-12);
  color: var(--text-muted);
}

/* 侧栏评分框加载态：整体呼吸脉冲 + 小转圈 */
.aii-score-box.is-loading {
  animation: aiiPulse 1.8s ease-in-out infinite;
}

.aii-score-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: var(--space-6);
  vertical-align: -2px;
  border-radius: 50%;
  border: 2px solid rgba(93, 151, 67, .25);
  border-top-color: var(--primary-color);
  animation: aiiSpin .8s linear infinite;
}

/* ============================== 报告完成：成绩总览 / 评语 / 逐题 ============================== */

/* 成绩总览卡（大分数 + 等级徽章 + 概览 chips） */
.aii-report-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between; gap: var(--space-16);
  flex-wrap: wrap;
  padding: var(--space-24) var(--space-28);
  border-radius: var(--radius-16);
  overflow: hidden;
  background:
    radial-gradient(ellipse 480px 200px at 90% -30%, rgba(93, 151, 67, .16), transparent 60%),
    linear-gradient(160deg, var(--primary-lighter), rgba(255, 255, 255, .5) 50%, #f3f7f1);
  border: 1px solid rgba(93, 151, 67, .22);
  box-shadow: var(--shadow-sm);
  animation: aiiFadeIn .4s ease both;
}

.aii-report-hero-label {
  font-size: var(--fs-13);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
}

.aii-report-hero-num {
  line-height: 1;
}

.aii-report-hero-num b {
  font-size: 46px;
  font-weight: 800;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}

.aii-report-hero-num span {
  font-size: var(--fs-17);
  color: var(--text-secondary);
  margin-left: var(--space-2);
}

.aii-report-hero-level {
  margin-top: var(--space-10);
}

.aii-report-level-badge {
  display: inline-block;
  padding: var(--space-4) var(--space-12);
  border-radius: 20px;
  font-size: var(--fs-12);
  font-weight: 700;
}

.aii-report-level-badge.is-excellent { background: rgba(46, 204, 113, .16); color: #1e9e5a; border: 1px solid rgba(46, 204, 113, .35); }
.aii-report-level-badge.is-good { background: rgba(52, 152, 219, .14); color: #2471a3; border: 1px solid rgba(52, 152, 219, .32); }
.aii-report-level-badge.is-pass { background: rgba(241, 196, 15, .16); color: #b58a00; border: 1px solid rgba(241, 196, 15, .35); }
.aii-report-level-badge.is-weak { background: rgba(224, 79, 95, .14); color: #d33d4e; border: 1px solid rgba(224, 79, 95, .32); }

.aii-report-hero-chips {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: flex-end;
}

.aii-report-chip {
  display: inline-flex;
  align-items: center; gap: var(--space-4);
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-16);
  background: rgba(255, 255, 255, .75);
  border: 1px solid rgba(93, 151, 67, .22);
  color: var(--text-secondary);
  font-size: var(--fs-12);
  white-space: nowrap;
}

/* 综合评语卡：头部加「AI 生成」徽章 */
.aii-report-summary .aii-report-summary-title {
  margin: 0;
}

.aii-report-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10); margin-bottom: var(--space-12);
}

.aii-report-summary-badge {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-10);
  border-radius: var(--radius-16);
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: #fff;
  font-size: var(--fs-11);
  font-weight: 600;
  white-space: nowrap;
}

/* 逐题分区标题 */
.aii-report-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 8px 0 2px;
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--text-primary);
}

.aii-report-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(93, 151, 67, .35), transparent);
}

/* 逐题卡片依次入场淡入：--i 由 ai-interview.js 按题序写成行内自定义属性，缺省 0 */
.aii-report-item {
  animation: aiiRise .45s ease both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes aiiRise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}


.aii-report-error-icon {
  font-size: 44px;
  margin-bottom: var(--space-12);
}

.aii-report-error-title {
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-8);
}

.aii-report-error-text {
  font-size: var(--fs-13);
  color: var(--text-secondary);
  margin-bottom: var(--space-20);
}

.aii-report-error .aii-btn,
.aii-overlay-card .aii-btn {
  min-width: 180px;
  margin-bottom: var(--space-12);
}

.aii-report-error-tip {
  font-size: var(--fs-12);
  color: var(--text-muted);
}

/* 尊重系统减弱动效设置 */
@media (prefers-reduced-motion: reduce) {
  .aii-loading-ring,
  .aii-loading-bot,
  .aii-loading-step.is-active,
  .aii-loading-bar span,
  .aii-score-spinner,
  .aii-report-item,
  .aii-overlay-card {
    animation: none;
  }
}

/* ============================== 右侧栏：面试相关 ============================== */

/* 面试小贴士 */
.aii-side-tips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.aii-side-tips li {
  position: relative; padding-left: var(--space-12);
  font-size: var(--fs-13);
  line-height: var(--lh-base);
  color: var(--text-secondary);
}

.aii-side-tips li::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--space-8);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary-color);
  opacity: .55;
}

/* 相关功能链接 */
.aii-side-links {
  display: flex;
  flex-direction: column;
}

.aii-side-links a {
  display: block;
  padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-8);
  font-size: var(--fs-13);
  color: var(--text-primary);
  text-decoration: none;
  transition: all .2s;
}

.aii-side-links a:hover {
  background: var(--primary-lighter);
  color: var(--primary-dark);
  text-decoration: none;
}

/* 考试页 Hero 只收内边距（页面内容以聊天为主）；标题字号与其它 Hero 一致走 --fs-h1 */
.aii-hero-quiz {
  padding: var(--space-28) var(--space-24) var(--space-24); margin-bottom: var(--space-16);
}

/* ============================== 响应式 ============================== */

/* ================================================================
   固定一屏布局（桌面端 ≥992px，与面试题库页一致）：
   页面整体不滚动 —— 头部 / 底部备案条固定，左中右三栏各自独立滚动
   ================================================================ */
@media (min-width: 992px) {
    body.page-ai-interview,
    body.page-ai-interview-quiz {
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .main.page-ai-interview,
    .main.page-ai-interview-quiz {
        flex: 1;
        min-height: 0;
        margin-top: var(--header-height);
        padding: 10px 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* footer margin 已随全站归零（common.css），固定布局直接占位即可 */

    .page-ai-interview .aii-doc,
    .page-ai-interview-quiz .aii-doc {
        flex: 1;
        min-height: 0;
        margin: 0 auto;
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
        gap: var(--space-32);
        overflow: hidden;
        padding: 0 18px 14px;
    }

    /* 文档列（hero + 左设置 + 右对话）：白底卡片，内部纵向布局 */
    .page-ai-interview .aii-doc > .content,
    .page-ai-interview-quiz .aii-doc > .content {
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 0 18px 16px;
        border-radius: var(--radius-12);
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(93, 151, 67, 0.12);
        box-shadow: 0 10px 34px rgba(0, 0, 0, 0.1);
    }

    /* Hero 压缩：只占固定一小块，不参与滚动 */
    .page-ai-interview .aii-hero,
    .page-ai-interview-quiz .aii-hero {
        flex: none;
        padding: var(--space-16) var(--space-24) var(--space-12);
        margin-bottom: var(--space-12);
    }

    .page-ai-interview .aii-hero-badge,
    .page-ai-interview-quiz .aii-hero-badge {
        margin-bottom: var(--space-6);
        padding: var(--space-2) var(--space-12);
        font-size: var(--fs-11);
    }

    .page-ai-interview .aii-hero-title,
    .page-ai-interview-quiz .aii-hero-title {
        margin-bottom: var(--space-4);
    }

    .page-ai-interview .aii-hero-sub,
    .page-ai-interview-quiz .aii-hero-sub {
        font-size: var(--fs-13);
    }

    /* 主体两栏：占满剩余高度，各自内部滚动 */
    .page-ai-interview .aii-body,
    .page-ai-interview-quiz .aii-body {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        margin-bottom: 0;
    }

    .page-ai-interview .aii-sidebar,
    .page-ai-interview-quiz .aii-sidebar {
        position: static;
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(93, 151, 67, 0.35) transparent;
        padding-right: var(--space-4);
    }

    .page-ai-interview .aii-main,
    .page-ai-interview-quiz .aii-main {
        height: 100%;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scroll-behavior: smooth;
        padding-right: var(--space-10);
        scrollbar-width: thin;
        scrollbar-color: rgba(93, 151, 67, 0.35) transparent;
    }

    /* 考试页聊天卡片：占满主区高度，消息线程内部滚动 */
    .page-ai-interview-quiz .aii-chat-card {
        height: 100%;
        max-height: none;
    }

    .page-ai-interview .aii-main::-webkit-scrollbar,
    .page-ai-interview-quiz .aii-main::-webkit-scrollbar,
    .page-ai-interview .aii-sidebar::-webkit-scrollbar,
    .page-ai-interview-quiz .aii-sidebar::-webkit-scrollbar {
        width: 6px;
    }

    .page-ai-interview .aii-main::-webkit-scrollbar-thumb,
    .page-ai-interview-quiz .aii-main::-webkit-scrollbar-thumb,
    .page-ai-interview .aii-sidebar::-webkit-scrollbar-thumb,
    .page-ai-interview-quiz .aii-sidebar::-webkit-scrollbar-thumb {
        background: rgba(93, 151, 67, 0.35);
        border-radius: var(--radius-4);
    }

    /* 右侧栏：静态定位，小贴士/相关功能固定高度，友情链接占剩余并内部滚动 */
    .page-ai-interview .sidebar,
    .page-ai-interview-quiz .sidebar {
        position: static;
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-24);
        overflow: hidden;
        padding-top: 0;
    }

    .page-ai-interview .aii-side-widget,
    .page-ai-interview-quiz .aii-side-widget {
        flex: none;
        margin-bottom: 0;
    }

    .page-ai-interview .friend-links-widget,
    .page-ai-interview-quiz .friend-links-widget {
        flex: 1 1 0;
        min-height: 0;
        height: auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}

@media (max-width: 860px) {
  .aii-body {
    flex-direction: column;
  }

  .aii-sidebar {
    width: 100%;
    position: static;
  }

  .aii-dir-list {
    max-height: 180px;
  }

  .aii-hero {
    padding: var(--space-32) var(--space-16) var(--space-28);
  }

  /* 字号由 --fs-h1 的 clamp 下限统一收敛，此处不再覆写 */

  /* 考试页：Hero 更紧凑，聊天卡片优先占满可视高度 */
  .aii-hero-quiz {
    padding: var(--space-20) var(--space-16) var(--space-16); margin-bottom: var(--space-12);
  }


  .aii-chat-card {
    height: calc(100vh - 400px);
    min-height: 380px;
    max-height: none;
  }

  /* 报告成绩卡：窄屏改纵向堆叠 */
  .aii-report-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .aii-report-hero-chips {
    align-items: flex-start;
  }
}