/* ============================================================================
 * chat.css — 班级与即时通讯模块
 *   微信风会话布局；圆角组件、淡蓝淡紫浅配色；沿用 theme.css 设计变量
 *   移动端 ≤768px：单栏切换（会话列表 / 聊天 / 资料抽屉）
 * ==========================================================================*/

/* ---------- 整体三栏布局 ---------- */
.chat-card { padding: 0; overflow: hidden; }
.chat-wrap {
  display: grid;
  grid-template-columns: 264px 1fr 288px;
  height: calc(100vh - 168px);
  min-height: 480px;
  background: var(--surface-2);
}

/* ---------- 左：会话列表 ---------- */
.chat-aside {
  display: flex; flex-direction: column;
  background: #f7f8fd;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.chat-aside-h { padding: 12px 10px 10px; border-bottom: 1px solid var(--line); }
.chat-aside-h .search-main { width: 100%; }
.chat-aside-actions { display: flex; gap: 6px; margin-top: 8px; }
.chat-aside-actions .btn { flex: 1; }

.chat-list { flex: 1; overflow-y: auto; padding: 6px 6px 12px; }
.chat-group-label {
  font-size: 12px; color: var(--ink-3);
  padding: 10px 8px 4px; letter-spacing: .04em;
}
.chat-conv {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 8px; border-radius: var(--r-l); cursor: pointer;
  border: 1px solid transparent;
}
.chat-conv:hover { background: #eef0fb; }
.chat-conv.on { background: var(--brand-l); border-color: var(--brand-bd); }
.chat-conv-mid { flex: 1; min-width: 0; }
.chat-conv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.chat-conv-top b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-conv-top .small { flex-shrink: 0; }
.chat-conv-last {
  font-size: 12.5px; color: var(--ink-3); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-badge {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #d8636f; color: #fff;
  font-size: 11px; line-height: 18px; text-align: center; flex-shrink: 0;
}

/* 会话置顶按钮 */
.chat-pin-btn {
  width: 24px; height: 24px; opacity: 0; flex-shrink: 0;
  color: var(--ink-4);
}
.chat-conv:hover .chat-pin-btn { opacity: .75; }
.chat-pin-btn.on { opacity: 1; color: #d9a441; }

/* 历史消息加载更多 */
.chat-loadmore {
  text-align: center; font-size: 12.5px; color: var(--brand);
  background: var(--brand-l); border: 1px solid var(--brand-bd);
  border-radius: 999px; width: fit-content;
  padding: 4px 14px; margin: 0 auto 12px; cursor: pointer;
}
.chat-loadmore:hover { background: #e3e7fa; }

/* 头像（淡蓝淡紫） */
.chat-av {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #dfe6fb, #e8e2f8);
  color: #5a66c2; font-weight: 600; font-size: 15px;
}
.chat-av.sm { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; }
.chat-av.ghost { opacity: .9; }

/* ---------- 中：聊天面板 ---------- */
.chat-main { display: flex; flex-direction: column; min-width: 0; background: var(--surface); }
.chat-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.chat-head b { font-size: 15px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-back { display: none; }

/* 置顶公告横幅 */
.chat-pin {
  padding: 7px 14px; font-size: 12.5px; color: #7a6b2f;
  background: #fdf6e7; border-bottom: 1px solid #f0dcb0;
}
.chat-pin a { color: var(--brand); }

/* 消息流 */
.chat-msgs { flex: 1; overflow-y: auto; padding: 16px 18px 10px; }
.chat-empty {
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  color: var(--ink-3); text-align: center;
}
.chat-time {
  text-align: center; font-size: 11.5px; color: var(--ink-4);
  margin: 10px 0 6px;
}
.chat-sys {
  text-align: center; font-size: 12px; color: var(--ink-3);
  background: var(--surface-3); border-radius: 999px;
  padding: 3px 12px; margin: 6px auto; width: fit-content; max-width: 80%;
}
.chat-row { display: flex; gap: 8px; margin: 4px 0; align-items: flex-start; }
.chat-row.mine { flex-direction: row-reverse; }
.chat-row-main { max-width: min(72%, 560px); min-width: 0; }
.chat-sender { font-size: 12px; color: var(--ink-3); margin: 0 0 3px 2px; }

.chat-bubble {
  position: relative;
  background: #f2f4fb;
  border: 1px solid #e3e8f6;
  border-radius: 4px 14px 14px 14px;
  padding: 8px 12px;
  font-size: 14px; line-height: 1.55; color: var(--ink);
  word-break: break-word; white-space: pre-wrap; width: fit-content; max-width: 100%;
  box-shadow: var(--sh-1);
}
.chat-row.mine .chat-bubble {
  background: var(--brand-l);
  border-color: var(--brand-bd);
  border-radius: 14px 4px 14px 14px;
}
.chat-recalled { color: var(--ink-4); font-size: 12.5px; font-style: italic; }
.chat-quote {
  border-left: 3px solid var(--brand-bd);
  background: rgba(255, 255, 255, .7);
  border-radius: 6px;
  padding: 4px 8px; margin-bottom: 6px;
  font-size: 12.5px; color: var(--ink-2);
  max-height: 64px; overflow: hidden;
}
.chat-img { max-width: 240px; max-height: 320px; border-radius: 10px; cursor: zoom-in; display: block; }

/* 悬停操作按钮 */
.chat-acts {
  position: absolute; top: -14px; right: 6px;
  display: none; gap: 2px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 1px 3px; box-shadow: var(--sh-1);
}
.chat-row.mine .chat-acts { right: auto; left: 6px; }
.chat-bubble:hover .chat-acts { display: inline-flex; }
.chat-acts .icon-btn { width: 22px; height: 22px; }

/* 试卷 / 试题 / 文件卡片 */
.chat-refcard {
  min-width: 220px; max-width: 320px;
  background: linear-gradient(150deg, #f4f6fd, #f6f3fc);
  border: 1px solid #dfe3f5; border-radius: 12px;
  padding: 10px 12px;
}
.chat-refcard-h { display: flex; align-items: center; gap: 6px; color: #5a66c2; }
.chat-refcard-h .small { margin-left: auto; }
.chat-refcard-t {
  font-size: 13.5px; font-weight: 600; margin: 6px 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chat-refcard-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.chat-refcard-acts .btn { text-decoration: none; }

/* ---------- 输入区 ---------- */
.chat-input { border-top: 1px solid var(--line); background: var(--surface); }
.chat-replying {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12.5px; color: var(--ink-2);
  background: var(--brand-l); border-bottom: 1px solid var(--brand-bd);
  padding: 5px 12px;
}
.chat-input-toolbar { display: flex; gap: 2px; padding: 6px 10px 0; }
.chat-input-row { display: flex; align-items: flex-end; gap: 8px; padding: 6px 10px 10px; }
.chat-input-row textarea {
  flex: 1; resize: none; border: 1px solid var(--line-2); border-radius: 12px;
  padding: 8px 10px; font: inherit; font-size: 14px; line-height: 1.5;
  background: var(--surface-2); max-height: 120px;
}
.chat-input-row textarea:focus { outline: none; border-color: var(--brand); background: var(--surface); }

/* ---------- 右：资料抽屉 ---------- */
.chat-drawer {
  display: flex; flex-direction: column;
  border-left: 1px solid var(--line); background: #f9fafd;
  min-width: 0; overflow: hidden;
}
.chat-drawer-h {
  padding: 12px 12px 8px; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.chat-drawer-h b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-drawer-body { flex: 1; overflow-y: auto; padding: 10px 12px 16px; }
.chat-member {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 6px; border-radius: 10px;
}
.chat-member:hover { background: #eef0fb; }
.chat-member-mid { flex: 1; min-width: 0; font-size: 13px; }
.chat-member-mid > div:first-child { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.chat-member-acts { display: none; gap: 2px; }
.chat-member:hover .chat-member-acts { display: inline-flex; }
.chat-select { font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); }

.chat-announce {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 9px 11px; margin-bottom: 8px;
}
.chat-announce.pinned { border-color: var(--brand-bd); background: var(--brand-l); }
.chat-announce-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chat-announce-h .small { margin-left: auto; }
.chat-announce-b { font-size: 13px; color: var(--ink-2); margin-top: 5px; white-space: pre-wrap; }

/* 选择列表（弹窗内） */
.pick-list { max-height: 320px; overflow-y: auto; }
.pick-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 10px; cursor: pointer; font-size: 13.5px;
  border: 1px solid transparent;
}
.pick-row:hover { background: var(--brand-l); border-color: var(--brand-bd); }
.pick-t { min-width: 0; }
.pick-t b { font-weight: 600; }

/* ---------- 新消息弹窗 ---------- */
.chat-notify {
  position: fixed; right: 18px; bottom: 88px; z-index: 300;
  display: flex; gap: 9px; align-items: center;
  background: var(--surface); border: 1px solid var(--brand-bd);
  border-radius: 14px; padding: 10px 14px;
  box-shadow: var(--sh-2); cursor: pointer;
  max-width: 320px; font-size: 13px;
  animation: chat-notify-in .25s ease;
}
.chat-notify.out { opacity: 0; transition: opacity .3s; }
.chat-notify b { font-size: 12.5px; color: var(--ink); }
.chat-notify .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes chat-notify-in {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ---------- 移动端（≤768px）：单栏切换 ---------- */
@media (max-width: 768px) {
  .chat-wrap { grid-template-columns: 1fr; height: calc(100vh - 150px); position: relative; }
  .chat-aside { border-right: none; }
  .chat-main, .chat-drawer {
    position: absolute; inset: 0; z-index: 5;
    transform: translateX(100%); transition: transform .22s ease;
  }
  .chat-wrap.in-chat .chat-main { transform: none; }
  .chat-back { display: inline-flex; }
  .chat-wrap.drawer-open .chat-drawer { transform: none; z-index: 6; }
  .chat-wrap.in-chat.drawer-open .chat-main { transform: translateX(-18%); }
  .chat-drawer {
    background: var(--surface); box-shadow: var(--sh-3);
    border-left: none;
  }
  .chat-drawer-h { flex-direction: row; align-items: center; justify-content: space-between; }
  .chat-drawer-h .seg { margin-left: auto; }
  .chat-row-main { max-width: 82%; }
  .chat-notify { right: 10px; left: 10px; max-width: none; }
}