/* 校园雷达 · AI 问答对话框
   全部取自设计令牌(tokens.css), 保证与全站同一套颜色/圆角/阴影/动效。
   无障碍: 面板是 role=dialog + aria-modal, Esc 关闭, 焦点进入输入框并在关闭后归还;
   所有可点元素 >= 24x24 (WCAG 2.2 AA 2.5.8)。 */

.ai-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 120;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 18px 0 14px;
  border: 0; border-radius: var(--rad-pill);
  background: var(--accent); color: var(--on-accent);
  font-size: var(--fs-14); font-weight: 600; cursor: pointer;
  box-shadow: var(--shadow-3);
  transition: background var(--dur-18) var(--ease), transform var(--dur-18) var(--ease);
}
.ai-fab:hover { background: var(--accent-ink); transform: translateY(-1px); }
.ai-fab svg { width: 20px; height: 20px; display: block; }
.ai-fab[hidden] { display: none; }

/* 底部导航是悬浮胶囊, 窄屏要把按钮抬起来免得压在一起 */
@media (max-width: 820px) {
  .ai-fab { right: 16px; bottom: 96px; padding: 0 14px; }
}

.ai-panel {
  position: fixed; right: 24px; bottom: 24px; z-index: 130;
  width: min(440px, calc(100vw - 32px));
  height: min(660px, calc(100vh - 48px));
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--rad-16);
  background: var(--surface); box-shadow: var(--shadow-3);
  overflow: hidden;
}
.ai-panel[hidden] { display: none; }
@media (max-width: 820px) {
  .ai-panel { right: 0; left: 0; bottom: 0; width: auto;
    height: min(80vh, 640px); border-radius: var(--rad-16) var(--rad-16) 0 0; }
}

.ai-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.ai-head b { font-size: var(--fs-14); color: var(--ink); }
.ai-head .ai-status { font-size: var(--fs-10); color: var(--muted); margin-left: 2px; }
.ai-head .ai-tools { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.ai-close, .ai-clear {
  display: grid; place-items: center; min-width: 32px; height: 32px;
  padding: 0 8px; border: 0; border-radius: var(--rad-6); background: transparent;
  color: var(--muted); cursor: pointer; font-size: var(--fs-12);
}
.ai-close { font-size: var(--fs-16); }
.ai-close:hover, .ai-clear:hover { background: var(--accent-soft); color: var(--ink2); }

.ai-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex;
  flex-direction: column; gap: 14px; background: var(--surface); }
.ai-msg { max-width: 92%; font-size: var(--fs-13); line-height: 1.62; }
.ai-msg .ai-bubble {
  padding: 10px 13px; border-radius: var(--rad-12);
  white-space: pre-wrap; word-break: break-word;
}
.ai-msg.user { align-self: flex-end; }
.ai-msg.user .ai-bubble { background: var(--accent); color: var(--on-accent); }
.ai-msg.bot .ai-bubble { background: var(--accent-soft); color: var(--ink); }
.ai-msg.system .ai-bubble { background: var(--bg); color: var(--muted);
  border: 1px dashed var(--line); font-size: var(--fs-12); }
.ai-msg .ai-src { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.ai-msg .ai-src span, .ai-msg .ai-src a {
  font-size: var(--fs-10); color: var(--muted);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--rad-pill); padding: 3px 9px;
}
.ai-msg .ai-src a { color: var(--accent); text-decoration: none; }
.ai-msg .ai-src a:hover { text-decoration: underline; }
.ai-msg .ai-meta { margin-top: 4px; font-size: var(--fs-10); color: var(--faint); }

/* 流式输出时的光标 */
.ai-cursor { display: inline-block; width: 2px; height: 1em; vertical-align: -2px;
  margin-left: 2px; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .ai-cursor { animation: ai-caret 1s steps(2) infinite; }
}
@keyframes ai-caret { 0%, 50% { opacity: 1 } 51%, 100% { opacity: 0 } }

.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.ai-chips button {
  min-height: 32px; padding: 6px 12px; border: 1px solid var(--line);
  border-radius: var(--rad-pill); background: var(--bg); color: var(--ink2);
  font-size: var(--fs-12); cursor: pointer; text-align: left;
}
.ai-chips button:hover { border-color: var(--accent); color: var(--accent); }

.ai-form { display: flex; gap: 8px; padding: 12px 16px 14px;
  border-top: 1px solid var(--line); background: var(--bg); }
.ai-input {
  flex: 1; min-height: 44px; max-height: 120px; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--rad-8);
  background: var(--surface); color: var(--ink); font-size: var(--fs-13);
  font-family: inherit; resize: none;
}
.ai-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ai-send {
  min-width: 64px; min-height: 44px; padding: 0 16px;
  border: 0; border-radius: var(--rad-8); background: var(--accent);
  color: var(--on-accent); font-size: var(--fs-13); font-weight: 600; cursor: pointer;
}
.ai-send:hover:not(:disabled) { background: var(--accent-ink); }
.ai-send:disabled { opacity: .55; cursor: default; }

.ai-typing { display: inline-flex; gap: 4px; align-items: center; color: var(--muted); }
.ai-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .ai-typing i { animation: ai-blink 1.2s infinite; }
  .ai-typing i:nth-child(2) { animation-delay: .18s; }
  .ai-typing i:nth-child(3) { animation-delay: .36s; }
}
@keyframes ai-blink { 0%, 60%, 100% { opacity: .25 } 30% { opacity: 1 } }

/* 相关材料推送区: 位于输入栏下方 */
.ai-related {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: 10px 16px 12px;
  max-height: 220px; overflow-y: auto;
}
.ai-rel-title {
  font-size: var(--fs-10); color: var(--muted); font-weight: 700;
  letter-spacing: .04em; margin-bottom: 8px;
}
.ai-rel-title span { font-weight: 400; }
.ai-rel-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ai-rel-row:empty { display: none; }

.ai-file {
  min-height: 28px; padding: 4px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--rad-pill);
  background: var(--surface); color: var(--ink2);
  font-size: var(--fs-11); cursor: pointer; text-align: left;
}
.ai-file:hover { border-color: var(--accent); color: var(--accent); }

.ai-link {
  display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: var(--rad-pill);
  background: var(--accent-soft); color: var(--accent);
  font-size: var(--fs-11); text-decoration: none;
}
.ai-link:hover { background: var(--accent); color: var(--on-accent); }

.ai-excerpt {
  margin-top: 8px; border: 1px solid var(--line); border-radius: var(--rad-8);
  background: var(--surface); max-height: 190px; overflow-y: auto;
  font-size: var(--fs-11); color: var(--ink2);
}
.ai-excerpt-head {
  position: sticky; top: 0; display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; background: var(--bg); border-bottom: 1px solid var(--line);
  font-size: var(--fs-10); color: var(--muted);
}
.ai-excerpt-close {
  margin-left: auto; min-height: 24px; padding: 2px 8px;
  border: 1px solid var(--line); border-radius: var(--rad-6);
  background: var(--surface); color: var(--ink2); font-size: var(--fs-10); cursor: pointer;
}
.ai-excerpt-body {
  padding: 8px 10px; white-space: pre-wrap; word-break: break-word; line-height: 1.6;
}