/* ============================================================
   views.css · 视图层共享结构与组件
   ============================================================ */

/* ---------------- 通用栅格 ---------------- */
.grid { display: grid; gap: 14px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.grid--auto-lg { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }

@media (max-width: 1400px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- 欢迎横幅 ---------------- */
.hero {
  position: relative;
  border-radius: var(--r-xl);
  padding: 22px 24px;
  background: linear-gradient(120deg, #1e3a8a 0%, #2563eb 46%, #4f46e5 100%);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(30, 58, 138, .26);
}
.hero::before,
.hero::after {
  content: ""; position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, .1);
}
.hero::before { width: 260px; height: 260px; right: -60px; top: -120px; }
.hero::after { width: 160px; height: 160px; right: 130px; bottom: -110px; background: rgba(255, 255, 255, .07); }
.hero__inner { position: relative; z-index: 1; }
.hero__title { font-size: var(--fs-24); font-weight: 700; letter-spacing: -.02em; }
.hero__desc { font-size: var(--fs-13); opacity: .84; margin-top: 6px; max-width: 640px; }
.hero__row { display: flex; gap: 24px; margin-top: 18px; flex-wrap: wrap; }
.hero__stat { display: flex; flex-direction: column; gap: 1px; }
.hero__stat b { font-size: var(--fs-20); font-weight: 700; font-variant-numeric: tabular-nums; }
.hero__stat span { font-size: var(--fs-11); opacity: .74; }
.hero .btn--default { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); color: #fff; box-shadow: none; }
.hero .btn--default:hover { background: rgba(255, 255, 255, .26); border-color: rgba(255, 255, 255, .45); color: #fff; }

/* ---------------- 模块快捷卡 ---------------- */
.qcard {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all .18s var(--ease);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.qcard:hover { border-color: var(--brand-300); box-shadow: var(--sh-3); transform: translateY(-2px); }
.qcard__ico {
  width: 40px; height: 40px; flex: none;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  border: 1px solid transparent;
}
/* 柔和色片：浅底 + 同色描边 + 同色字形。
   比"白字压在饱和渐变上"克制得多——一屏几十个图标也不会显得花，
   而且颜色可以承载信息（见下：每个类别一个固定色）。 */
.qcard__ico--brand   { background: #eff4ff; color: #2563eb; border-color: #dbe7ff; }
.qcard__ico--violet  { background: #f5f0ff; color: #7c3aed; border-color: #e7dcff; }
.qcard__ico--success { background: #eaf8f0; color: #0f9d58; border-color: #d1eedd; }
.qcard__ico--warn    { background: #fff5e9; color: #bd7008; border-color: #fae3c5; }
.qcard__ico--info    { background: #e9f6fd; color: #0b7fc4; border-color: #cce9f8; }
.qcard__ico--danger  { background: #fdeff1; color: #d92e50; border-color: #f9d8de; }
.qcard__ico--slate   { background: #f1f4f9; color: #64748b; border-color: #e3e8f1; }
.qcard__title { font-size: var(--fs-14); font-weight: 600; }
.qcard__desc {
  font-size: var(--fs-12); color: var(--text-3); margin-top: 2px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3em;     /* 恰好 2 行，保证同组卡片的页脚对齐 */
}
.qcard__foot { font-size: var(--fs-11); color: var(--text-4); margin-top: 8px; display: flex; align-items: center; gap: 5px; }

/* ---------------- 待办行 ---------------- */
.todo-row {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  transition: background .14s var(--ease);
}
.todo-row:last-child { border-bottom: 0; }
.todo-row:hover { background: var(--surface-2); }
.todo-row__main { flex: 1; min-width: 0; }
.todo-row__title { font-size: var(--fs-13); color: var(--text); line-height: 1.5; }
.todo-row.is-done .todo-row__title { color: var(--text-4); text-decoration: line-through; }
.todo-row__meta { display: flex; align-items: center; gap: 7px; margin-top: 5px; flex-wrap: wrap; }
.todo-row__due { font-size: var(--fs-11); color: var(--text-4); display: inline-flex; align-items: center; gap: 4px; }
.todo-row__due--urgent { color: var(--danger); font-weight: 600; }

/* ---------------- 时间线动态 ---------------- */
.act-row { display: flex; gap: 11px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.act-row:last-child { border-bottom: 0; }
.act-row__ico {
  width: 30px; height: 30px; flex: none; border-radius: var(--r-sm);
  display: grid; place-items: center;
}
.act-row__ico--ai { background: var(--ai-grad-soft); color: var(--violet); }
.act-row__ico--brand { background: var(--brand-50); color: var(--brand-600); }
.act-row__ico--ok { background: var(--success-bg); color: var(--success); }
.act-row__ico--violet { background: var(--violet-bg); color: var(--violet); }
.act-row__ico--info { background: var(--info-bg); color: var(--info); }
.act-row__text { font-size: var(--fs-13); color: var(--text); line-height: 1.5; }
.act-row__sub { font-size: var(--fs-11); color: var(--text-4); margin-top: 2px; }
.act-row__time { font-size: var(--fs-11); color: var(--text-4); white-space: nowrap; flex: none; }

/* ---------------- 课程卡 ---------------- */
.course-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 13px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  transition: all .16s var(--ease);
}
.course-card:hover { border-color: var(--brand-300); box-shadow: var(--sh-2); }
.course-card.is-active { border-color: var(--brand-400); background: var(--brand-50); }
.course-card__name { font-size: var(--fs-13); font-weight: 600; }
.course-card__meta { font-size: var(--fs-11); color: var(--text-3); margin-top: 2px; }

/* ---------------- 文档纸面 ---------------- */
.doc-page {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 44px 56px 60px;
  box-shadow: var(--sh-2);
  font-size: 15px;
  line-height: 1.95;
  color: #1a2233;
}
.doc-page h1 {
  font-size: 21px; font-weight: 700; text-align: center;
  line-height: 1.5; margin-bottom: 6px; letter-spacing: -.01em;
}
.doc-page h2 {
  font-size: 16px; font-weight: 700; margin: 26px 0 10px;
  padding-left: 10px; border-left: 3px solid var(--brand-600);
  line-height: 1.5;
}
.doc-page h3 { font-size: 15px; font-weight: 600; margin: 20px 0 8px; }
.doc-page p { margin: 0 0 12px; text-align: justify; }
.doc-page ul { margin: 0 0 12px; padding-left: 22px; }
.doc-page li { list-style: disc; margin-bottom: 5px; }
.doc-page .doc-meta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0; border: 1px solid var(--line-strong);
  margin: 18px 0 22px; font-size: 13px;
}
.doc-page .doc-meta > div { display: flex; border-bottom: 1px solid var(--line); }
.doc-page .doc-meta > div:nth-last-child(-n+2) { border-bottom: 0; }
.doc-page .doc-meta dt {
  width: 92px; flex: none; padding: 7px 10px;
  background: var(--surface-2); color: var(--text-3);
  border-right: 1px solid var(--line);
}
.doc-page .doc-meta dd { padding: 7px 10px; color: var(--text); flex: 1; }
.doc-page table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: 13px; }
.doc-page table th, .doc-page table td { border: 1px solid var(--line-strong); padding: 7px 10px; line-height: 1.6; }
.doc-page table th { background: var(--surface-2); font-weight: 600; text-align: center; }
.doc-page .doc-formula {
  text-align: center; padding: 14px; margin: 6px 0 16px;
  background: var(--surface-2); border-radius: var(--r-md);
  font-family: var(--mono); font-size: 14px; color: var(--brand-800);
  border: 1px solid var(--line);
}
.doc-page .ai-hint {
  display: block; padding: 9px 12px; margin: 4px 0 14px;
  background: var(--ai-grad-soft); border: 1px dashed #d8ccfb;
  border-radius: var(--r-md); font-size: 13px; color: #4c3d8f; line-height: 1.65;
}
.doc-page .cite { cursor: pointer; }

/* 编辑器内联编辑 */
.doc-page [contenteditable]:focus {
  outline: none;
  background: #fffdf3;
  box-shadow: 0 0 0 6px #fffdf3;
  border-radius: 2px;
}

/* ---------------- AI 会话 ---------------- */
.chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat__scroll { flex: 1; min-height: 0; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.msg { display: flex; gap: 9px; max-width: 100%; animation: riseIn .3s var(--ease-out) both; }
.msg--me { flex-direction: row-reverse; }
.msg__avatar {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #fff;
}
.msg__avatar--ai { background: var(--ai-grad); }
.msg__body { min-width: 0; max-width: 88%; }
.msg__bubble {
  padding: 10px 13px; border-radius: var(--r-lg);
  font-size: var(--fs-13); line-height: 1.7;
  background: var(--surface-3); color: var(--text);
  border-top-left-radius: 4px;
  word-break: break-word;
}
.msg--me .msg__bubble { background: var(--brand-600); color: #fff; border-top-left-radius: var(--r-lg); border-top-right-radius: 4px; }
.msg__bubble p { margin: 0 0 8px; }
.msg__bubble p:last-child { margin-bottom: 0; }
.msg__bubble b { font-weight: 600; }
.msg__time { font-size: 12px; color: var(--text-4); margin-top: 5px; }
.msg--me .msg__time { text-align: right; }

.chat__composer { flex: none; border-top: 1px solid var(--line); padding: 12px; background: var(--surface); }
.chat__input {
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  padding: 10px 12px; font-size: var(--fs-13); line-height: 1.6;
  min-height: 62px; resize: none; width: 100%;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.chat__input:focus { outline: none; border-color: var(--brand-500); box-shadow: var(--ring); }
.chat__tools { display: flex; align-items: center; gap: 5px; margin-top: 8px; }
.chat__hint { font-size: 12px; color: var(--text-4); margin-left: auto; }

/* AI 思考中 */
.thinking { display: inline-flex; gap: 3px; align-items: center; }
.thinking i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--violet);
  animation: pulseDot 1.2s var(--ease) infinite;
}
.thinking i:nth-child(2) { animation-delay: .18s; }
.thinking i:nth-child(3) { animation-delay: .36s; }

/* AI 生成中光带 */
.generating {
  background: linear-gradient(90deg, #eef1f7 25%, #f7f4ff 50%, #eef1f7 75%);
  background-size: 400px 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
  color: transparent !important;
}

/* ---------------- 面板内小工具 ---------------- */
.panel-sec { margin-bottom: 20px; }
.panel-sec:last-child { margin-bottom: 0; }
.panel-sec__head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-11); font-weight: 600; color: var(--text-4);
  margin-bottom: 9px;
}
.panel-tip {
  display: flex; gap: 9px; padding: 10px 11px;
  border-radius: var(--r-md); background: var(--surface-2);
  border: 1px solid var(--line); font-size: 13px; line-height: 1.65;
  color: var(--text-2); margin-bottom: 9px;
}
.panel-tip--ai { background: var(--ai-grad-soft); border-color: #e4dcfd; color: #4c3d8f; }
.panel-tip--warn { background: var(--warn-bg); border-color: var(--warn-bd); color: #92400e; }
.panel-tip__ico { flex: none; margin-top: 1px; }

/* 引用卡片 */
.ref-card {
  display: flex; gap: 9px; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); margin-bottom: 8px;
  cursor: pointer; transition: all .15s var(--ease);
}
.ref-card:hover { border-color: var(--brand-300); background: var(--brand-50); }
.ref-card__n {
  width: 19px; height: 19px; flex: none; border-radius: var(--r-xs);
  background: var(--brand-50); color: var(--brand-700);
  font-size: 11px; font-weight: 600; display: grid; place-items: center;
}
.ref-card__title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.5; }
.ref-card__meta { font-size: 12px; color: var(--text-4); margin-top: 3px; }

/* ---------------- 视图内工具条 ---------------- */
.vbar {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex: none;
  min-height: 50px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.vbar::-webkit-scrollbar { height: 0; }
.vbar > * { flex: none; }
.vbar__title { font-size: var(--fs-14); font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; }
.vbar__spacer { flex: 1 1 auto; min-width: 8px; }

/* ---------------- 左右分栏 ---------------- */
.split { display: grid; gap: 0; min-height: 0; height: 100%; }
.split--aside { grid-template-columns: 232px minmax(0, 1fr); }
.split--aside-r { grid-template-columns: minmax(0, 1fr) 292px; }
.split--doc { grid-template-columns: 268px minmax(0, 1fr); }
.split__side {
  border-right: 1px solid var(--line);
  background: var(--surface);
  min-height: 0; overflow: auto;
}
.split__main { min-width: 0; min-height: 0; overflow: auto; background: var(--bg); }
.split__side--r { border-right: 0; border-left: 1px solid var(--line); }

/* ---------------- 大搜索框区 ---------------- */
.search-hero {
  padding: 26px 24px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.search-hero__title { font-size: var(--fs-20); font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px; }
.search-hero__sub { font-size: var(--fs-13); color: var(--text-3); margin-bottom: 16px; }

/* ---------------- 片段高亮 ---------------- */
.hl { background: #fff2c2; color: #7a4b00; border-radius: 2px; padding: 0 1px; font-weight: 600; }
.hl-2 { background: var(--brand-50); color: var(--brand-800); border-radius: 2px; padding: 0 3px; font-weight: 600; }