/* ============================================================
   AI 学习系统 · 全局样式（设计系统）
   所有页面共用：配色 / 字体 / 基础组件 / 布局骨架
   约定：每页只写自己的补充样式（web/assets/css/<页面>.css），
        通用的东西写在这里，避免重复。
   配色仅使用 黑 / 灰 / 红 / 蓝 / 绿，亮色主题。
   兼容性：仅使用 Flexbox + 变量 + 常规属性，避免 CSS 嵌套 / :has 等新特性。
   字号基准：正文 15px（字号一律不小于此，保护视力）；控件 34px、按钮 30px、紧凑按钮 26px
        —— 按钮/控件**做得扁**（贴近字高），靠间距而非高度避免误触，提高信息密度。顶栏 44px（≤900px 时 40px），且**不参与 flex 收缩**（内容再高也不会被压扁/顶走）。
   ============================================================ */

:root {
  /* —— 中性色（黑 / 灰） —— */
  --c-ink: #14171c;          /* 主文字（近黑） */
  --c-ink-2: #4b5563;        /* 次级文字（灰） */
  --c-ink-3: #868e9c;        /* 弱化文字（浅灰） */
  --c-line: #dfe3e9;         /* 分割线 / 边框 */
  --c-line-2: #c9cfd8;       /* 较重的边框（按钮 / 控件） */
  --c-bg: #f4f6f8;           /* 页面底色（浅灰） */
  --c-surface: #ffffff;      /* 卡片 / 底色（白） */
  --c-surface-2: #f7f9fb;    /* 次级底色 */

  /* —— 主题色 —— */
  --c-blue: #1f6feb;
  --c-blue-weak: #e8f1ff;
  --c-green: #14874c;
  --c-green-weak: #e5f5ec;
  --c-red: #cf2e37;
  --c-red-weak: #fdecec;

  /* —— 圆角 / 阴影 / 间距 —— */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 6px 16px rgba(16, 24, 40, 0.06);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* —— 字体 —— */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
    "Noto Sans CJK SC", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* —— 字号层级（平板优先；正文不超过 16px，密集列表 13–15px；整体偏紧凑） ——
     统一口径：同一语义一律取同一档，页面里不再各处写死不同字号。
       --fs-h1    页面标题     （.page-head h1、首页大标题）
       --fs-h2    区块标题     （卡片 / 面板一级标题、课程卡标题、弹窗标题）
       --fs-h3    小标题       （区块内小节标题、空态标题、顶栏品牌）
       --fs-h4    分组小标题   （分组 / 成员分组标题）
       --fs-body  正文         （正文基准、列表主文字、控件文字）
       --fs-sub   辅助         （说明文字、元信息、表格、小按钮）
       --fs-xs    极小         （时间戳、徽标、密集列表次级文字） */
  --fs-h1: 22px;
  --fs-h2: 18px;
  --fs-h3: 16px;
  --fs-h4: 15px;
  --fs-body: 15px;
  --fs-sub: 13px;
  --fs-xs: 12px;
}

/* ---------- reset ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--c-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { margin: 0 0 0.5em; font-weight: 600; line-height: 1.3; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { margin: 0 0 1em; }
img { max-width: 100%; }

/* ---------- 布局骨架 ---------- */
.container { max-width: 1140px; margin: 0 auto; padding: 0 var(--space-5); }
/* 列表页（我的课程 / 班级）：左对齐 + 放宽，卡片从左往右铺，避免大屏上内容居中留白 */
.container-wide { max-width: none; margin: 0; padding: 0 var(--space-6); }
.app { min-height: 100vh; display: flex; flex-direction: column; }

/* 页面标题区：低密度页共用的小标签/副标题（高密度页不强制使用） */
.page-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  color: var(--c-ink-3); margin-bottom: 6px;
}
.page-tag::before {
  content: ""; width: 14px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #4f8df7, #8f8aff);
}
.page-sub { margin: 0 0 6px; color: var(--c-ink-3); font-size: 14px; }

/* 顶栏：全站统一 */
.topbar {
  position: sticky; top: 0; z-index: 50;
  height: 44px;
  flex: 0 0 auto;             /* 绝不参与收缩：AI/聊天内容再高也不会把顶栏压扁或挤出屏幕 */
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.26));
  border-bottom: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 22px -12px rgba(31, 45, 80, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  white-space: nowrap;
  overflow: hidden;           /* 永远单行 */
}
.topbar .brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 9px;
  font-weight: 700;
  font-size: 16px;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
}
.topbar .brand:hover { text-decoration: none; }
.brand-dot {
  width: 22px; height: 22px; border-radius: 7px;
  position: relative; display: inline-block; flex: 0 0 auto;
  background: linear-gradient(140deg, #7db8ff, #8f8aff 52%, #6fd8d4);
  box-shadow: 0 4px 12px rgba(96, 124, 255, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -2px 4px rgba(60, 80, 180, 0.28);
}
.brand-dot::after {
  content: "";
  position: absolute; left: 4px; top: 3px;
  width: 6px; height: 4px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.9);
  filter: blur(1px);
}
/* 导航：永远单行；放不下时本列横向滚动（右侧「个人设置 / 退出」永不被挤走） */
.topbar .nav {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: nowrap; overflow-x: auto; min-width: 0;
  scrollbar-width: none;            /* Firefox：不显示滚动条，避免占高 */
  -webkit-overflow-scrolling: touch;
}
.topbar .nav::-webkit-scrollbar { display: none; }
.topbar .nav a {
  position: relative;
  color: var(--c-ink-2); font-size: 15px; text-decoration: none;
  padding: 5px 12px; border-radius: 9px;
  border: 1px solid transparent;
  transition: all .18s ease;
}
.topbar .nav a:hover { color: var(--c-ink); background: rgba(255, 255, 255, 0.55); text-decoration: none; }
/* 未读红点（如「消息中心」）：只在导航项右上角点一个小圆点，不带数字 */
.nav-dot {
  position: absolute; top: 1px; right: 1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-red);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.86);
}
.topbar .nav a.active {
  color: var(--c-blue);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.66);
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 12px -2px rgba(31, 45, 80, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.topbar .nav a.active::after {
  content: "";
  position: absolute; left: 50%; bottom: 2px;
  width: 16px; height: 2.5px; margin-left: -8px;
  border-radius: 3px;
  background: linear-gradient(90deg, #4f8df7, #8f8aff 60%, #5fd0cc);
}
.topbar .nav .nav-disabled {
  color: var(--c-ink-3); font-size: var(--fs-body); padding: 7px 12px; cursor: default;
}
.topbar .nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.topbar .nav-right .row {
  padding: 3px 10px 3px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 3px 10px -3px rgba(31, 45, 80, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.topbar .avatar {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, #6fa8ff, #8a7dff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}


/* ---------- 按钮（更扁：高度贴近字高，靠间距而不是靠高度避免误触） ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 34px; padding: 0 13px;
  border: 1px solid #b9c5d6; border-bottom-color: #96a6bd; border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f2f5fa); color: var(--c-ink);
  font-size: 15px; font-family: inherit; cursor: pointer; white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 3px 0 rgba(111, 129, 158, 0.18), 0 6px 10px -6px rgba(31, 45, 80, 0.24);
  transform: translateY(-1px);
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, transform 0.12s, box-shadow 0.12s;
}
.btn:hover { background: linear-gradient(180deg, #ffffff, #f8faff); border-color: var(--c-ink-3); text-decoration: none; }
.btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(111, 129, 158, 0.15);
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.btn-primary { background: linear-gradient(180deg, #3f86f5, #236cd8); border-color: #236cd8; border-bottom-color: #1b58b3; color: #fff; }
.btn-primary:hover { background: linear-gradient(180deg, #4a90fa, #1b63d4); border-color: #1b63d4; }
.btn-green { background: linear-gradient(180deg, #2bb673, #168f55); border-color: #168f55; border-bottom-color: #0f6e41; color: #fff; }
.btn-green:hover { background: linear-gradient(180deg, #31c17d, #11713f); border-color: #11713f; }
.btn-danger { background: linear-gradient(180deg, #ef5a62, #d63740); border-color: #d63740; border-bottom-color: #ad2830; color: #fff; }
.btn-danger:hover { background: linear-gradient(180deg, #f26870, #b7252e); border-color: #b7252e; }
/* 弱按钮：仍然保留边框，只是底色更轻 */
.btn-ghost { background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(244, 247, 252, 0.72)); border-color: rgba(154, 170, 194, 0.62); color: var(--c-ink-2); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.94); color: var(--c-ink); border-color: var(--c-ink-3); }
.btn-block { width: 100%; }
.btn-lg { height: 44px; font-size: 17px; }
/* 紧凑按钮：用于表格行内 / 密集区；平板可点尺寸不低于 32px */
.btn-sm { height: 32px; padding: 0 10px; font-size: 14px; border-radius: 8px; }

/* ---------- 表单 ---------- */
.field { margin-bottom: var(--space-4); }
.field label { display: block; margin-bottom: 8px; font-size: var(--fs-body); color: var(--c-ink-2); font-weight: 500; }
.input {
  width: 100%; height: 34px; padding: 0 10px;
  border: 1px solid var(--c-line-2); border-radius: 8px;
  background: var(--c-surface); color: var(--c-ink);
  font-size: 15px; font-family: inherit;
}
.input::placeholder { color: var(--c-ink-3); }
.input:focus {
  outline: none; border-color: var(--c-blue);
  box-shadow: 0 0 0 3px var(--c-blue-weak);
}
textarea.input { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.7; }
select.input { appearance: none; -webkit-appearance: none; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-pad { padding: var(--space-4); }

/* ---------- 标签 / 徽章 ---------- */
.tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: var(--fs-sub); line-height: 18px;
  background: var(--c-surface-2); color: var(--c-ink-2);
  border: 1px solid var(--c-line);
}
.tag-blue { background: var(--c-blue-weak); color: var(--c-blue); border-color: transparent; }
.tag-green { background: var(--c-green-weak); color: var(--c-green); border-color: transparent; }
.tag-red { background: var(--c-red-weak); color: var(--c-red); border-color: transparent; }

/* ---------- 头像 ---------- */
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-sub); font-weight: 600; flex: 0 0 auto;
}

/* ---------- 提示条 ---------- */
.alert {
  padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: var(--fs-body); margin-bottom: var(--space-3);
  border: 1px solid transparent;
}
.alert-error { background: var(--c-red-weak); color: var(--c-red); border-color: #f6d3d4; }
.alert-info { background: var(--c-blue-weak); color: var(--c-blue); border-color: #d3e3ff; }
.alert-success { background: var(--c-green-weak); color: var(--c-green); border-color: #cfe9db; }

/* ---------- 工具类 ---------- */
.muted { color: var(--c-ink-2); }
.faint { color: var(--c-ink-3); }
.small { font-size: var(--fs-sub); }
.center { text-align: center; }
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.wrap { flex-wrap: wrap; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.grow { flex: 1 1 auto; }
.hide { display: none !important; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-5 { margin-top: var(--space-5); }

/* ---------- 空状态（列表 / 表格通用：图标 + 标题 + 一句引导 + 一个操作） ---------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: var(--space-5) var(--space-4); white-space: normal;
}
.empty-state .empty-ico { display: inline-flex; color: var(--c-ink-3); margin-bottom: var(--space-3); }
.empty-state .empty-title { margin: 0 0 var(--space-1); font-size: var(--fs-h3); font-weight: 600; color: var(--c-ink); }
.empty-state .empty-desc {
  margin: 0 0 var(--space-4); font-size: var(--fs-sub); line-height: 1.6;
  color: var(--c-ink-3); max-width: 42ch;
}

/* ---------- 面板（比卡片更轻，信息密集页面用） ---------- */
.panel {
  background: var(--c-surface);
  border-radius: var(--radius);
}

/* ---------- 轻提示 ---------- */
.toast {
  position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%);
  background: var(--c-ink); color: #fff;
  padding: 12px 20px; border-radius: var(--radius-sm);
  font-size: var(--fs-body); z-index: 100;
  opacity: 0; transition: opacity 0.2s;
  pointer-events: none;
}
.toast.show { opacity: 1; }
.toast.toast-success { background: var(--c-green); }
.toast.toast-error { background: var(--c-red); }

/* ---------- 私聊消息弹框（全站，右上角） ---------- */
.als-msgpop-layer {
  position: fixed; top: 52px; right: 12px;
  z-index: 300;
  display: flex; flex-direction: column; gap: 8px;
  max-width: 340px;
}
.als-msgpop {
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--c-surface); color: var(--c-ink);
  border: 1px solid var(--c-line-2); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .18);
  padding: 8px 10px; cursor: pointer;
}
.als-msgpop:hover { border-color: var(--c-blue); }
.als-msgpop-main { flex: 1 1 auto; min-width: 0; }
.als-msgpop-name { display: block; font-size: var(--fs-sub); font-weight: 600; line-height: 1.4; }
.als-msgpop-tag { margin-left: 5px; font-weight: 400; font-size: var(--fs-xs); color: var(--c-ink-3); }
.als-msgpop-text {
  display: block; margin-top: 2px;
  font-size: var(--fs-sub); color: var(--c-ink-2); line-height: 1.4;
  word-break: break-all;
}
.als-msgpop-x {
  flex: 0 0 auto; border: none; background: none;
  color: var(--c-ink-3); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.als-msgpop-x:hover { color: var(--c-ink); }
@media (max-width: 899px) {
  .als-msgpop-layer { top: 48px; right: 8px; left: 8px; max-width: none; }
}

/* ---------- 响应式（平板 / 小屏：尽量用满屏幕） ---------- */
@media (max-width: 899px) {
  .topbar { gap: var(--space-3); padding: 0 var(--space-3); height: 40px; }
  /* 窄屏下导航改为单行横向滚动：允许收缩（min-width:0），避免把右侧「个人设置 / 退出」挤出屏幕；
     顶栏本身不换行、不撑高。 */
  .topbar .nav {
    gap: 3px; flex-wrap: nowrap; overflow-x: auto;
    flex: 0 1 auto; min-width: 0;
    -webkit-overflow-scrolling: touch;
  }
  .topbar .nav a { flex: 0 0 auto; font-size: var(--fs-sub); padding: 3px 8px; }
  .topbar .nav-right { flex: 0 0 auto; gap: var(--space-2); }
  .topbar .brand { font-size: var(--fs-h3); flex: 0 0 auto; }
  .container { padding: 0 var(--space-4); }
  .hide-sm { display: none !important; }
}

/* 触屏滚动容器：启用惯性滚动（平板滑动更顺滑）。只影响触摸滚动，桌面端不变。 */
.cm-items, .chat-list, .ol-tree, .cm-menu, .als-iv-stage, .air-sessions, .air-list, .air-view, .air-pdfview-body {
  -webkit-overflow-scrolling: touch;
}

/* ---------- Markdown 渲染体（课程正文 / 群聊消息共用） ---------- */
.md-body { font-size: var(--fs-body); line-height: 1.7; word-wrap: break-word; }
.md-body h1 { font-size: var(--fs-h1); }
.md-body h2 { font-size: var(--fs-h2); }
.md-body h3 { font-size: var(--fs-h3); }
.md-body h4 { font-size: var(--fs-h4); }
.md-body p { margin: 0 0 10px; }
.md-body ul, .md-body ol { margin: 0 0 10px; padding-left: 22px; }
.md-body li { margin: 3px 0; }
.md-body code {
  background: var(--c-surface-2); border: 1px solid var(--c-line);
  border-radius: 4px; padding: 2px 6px; font-family: var(--font-mono); font-size: var(--fs-sub);
}
.md-body pre {
  background: var(--c-surface-2); border: 1px solid var(--c-line);
  border-radius: var(--radius-sm); padding: 14px; overflow-x: auto;
}
.md-body pre code { background: none; border: none; padding: 0; font-size: var(--fs-sub); }
.md-body blockquote {
  margin: 0 0 12px; padding: 8px 14px;
  border-left: 3px solid var(--c-line-2); color: var(--c-ink-2);
}
.md-body hr { border: none; border-top: 1px solid var(--c-line); margin: 16px 0; }
.md-body a { color: var(--c-blue); }
.md-body table { border-collapse: collapse; margin: 0 0 12px; width: auto; max-width: 100%; }
.md-body th, .md-body td { border: 1px solid var(--c-line); padding: 9px 12px; font-size: var(--fs-sub); text-align: left; }
.md-body th { background: var(--c-surface-2); font-weight: 600; }

/* ---------- 公式渲染（KaTeX，见 web/assets/js/md.js） ---------- */
/* 块级公式容器；类名不加 .md-body 前缀，便于「课程简介」等行内摘要处也能正确显示。
   具体排版由 KaTeX 自带的 katex.min.css 提供，这里只负责块级占位与居中。 */
.math-display { display: block; text-align: center; margin: 12px 0; overflow-x: auto; overflow-y: hidden; }

/* ---------- AI 输出的 SVG / HTML 预览卡片 ---------- */
.md-body .md-preview {
  border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  margin: 0 0 12px; overflow: hidden; background: var(--c-surface);
}
.md-prev-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--c-surface-2); border-bottom: 1px solid var(--c-line);
}
.md-prev-bar button {
  border: 1px solid var(--c-line-2); background: var(--c-surface); font-family: inherit;
  font-size: var(--fs-sub); color: var(--c-ink-2); cursor: pointer; padding: 5px 12px; border-radius: 6px;
}
.md-prev-bar button:hover { background: var(--c-surface-2); color: var(--c-ink); }
.md-prev-bar button.on { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.md-prev-lang { margin-left: auto; font-size: var(--fs-sub); color: var(--c-ink-3); }
.md-prev-body pre { margin: 0; border: none; border-radius: 0; max-height: 360px; overflow: auto; }
.md-prev-frame iframe { width: 100%; height: 320px; border: 0; display: block; background: #fff; }

/* HTML 全屏预览：与顶栏/卡片一致的浅玻璃工具条，内容区白底承载 AI 生成的页面 */
.als-htmlviewer {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  width: 100vw; height: 100vh; height: 100dvh;
  box-sizing: border-box;
  z-index: 230;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  background: rgba(17, 25, 40, .68);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.als-hv-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 6px 8px 6px 16px;
  border: 1px solid rgba(255,255,255,.76);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,249,255,.78));
  box-shadow: 0 12px 28px -16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.95);
}
.als-hv-title { font-size: 14px; font-weight: 600; color: var(--c-ink); }
.als-hv-bar .btn { margin-left: auto; }
.als-hv-body {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  border-radius: 14px; background: #fff;
  box-shadow: 0 22px 60px -20px rgba(0,0,0,.45);
}
.als-hv-body iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
body.als-htmlfs-open { overflow: hidden; }
@media (max-width: 899px) {
  .als-htmlviewer { padding: 8px; gap: 8px; }
  .als-hv-bar { min-height: 42px; border-radius: 12px; }
  .als-hv-body { border-radius: 12px; }
}

/* ---------- 全屏图片查看器（viewer.js：放大 / 缩小 / 旋转 / 拖动 / 双指缩放） ---------- */
.als-imgviewer {
  position: fixed; left: 0; right: 0; top: 0; bottom: 0;
  z-index: 200; background: rgba(8, 10, 14, .92);
  display: flex; flex-direction: column;
}
.als-iv-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); background: rgba(255, 255, 255, .06); color: #fff;
}
.als-iv-name {
  font-size: var(--fs-sub); color: #e7ebf0; max-width: 40%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.als-iv-spacer { flex: 1 1 auto; }
.als-iv-bar .btn { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff; }
.als-iv-bar .btn:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .6); }
.als-iv-stage {
  flex: 1 1 auto; min-height: 0; position: relative;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  touch-action: none; cursor: grab;
}
.als-iv-stage img {
  max-width: 100%; max-height: 100%;
  transform-origin: center center;
  will-change: transform;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
  display: block;
}

/* ---- 「＋添加附件」统一选择层（AI / 班级大群 / 私聊共用；平板大按钮） ---- */
.attach-choices { display: flex; flex-direction: column; gap: 10px; }
.attach-choice, .attach-space-item {
  width: 100%; min-height: 58px;
  box-sizing: border-box;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.attach-choice:hover, .attach-space-item:hover { border-color: var(--c-blue); background: var(--c-blue-weak); }
.attach-choice:active, .attach-space-item:active { background: var(--c-blue-weak); }
.attach-choice:focus-visible, .attach-space-item:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.attach-choice-ico {
  flex: 0 0 38px; width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--c-blue-weak); color: var(--c-blue);
}
.attach-choice-ico svg { width: 20px; height: 20px; }
.attach-choice-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.attach-choice-title { font-size: var(--fs-body); font-weight: 600; line-height: 1.35; }
.attach-choice-desc { font-size: var(--fs-sub); color: var(--c-ink-3); line-height: 1.4; overflow-wrap: anywhere; }
.attach-choice-arrow { flex: 0 0 auto; color: var(--c-ink-3); font-size: 20px; line-height: 1; }
.attach-space-list { display: flex; flex-direction: column; gap: 8px; max-height: 58vh; overflow: auto; -webkit-overflow-scrolling: touch; }
.attach-space-item { min-height: 52px; padding: 8px 10px; }
.attach-space-item .attach-choice-ico { flex-basis: 34px; width: 34px; height: 34px; }
.attach-empty { padding: 20px 8px; text-align: center; color: var(--c-ink-3); font-size: var(--fs-sub); line-height: 1.7; }
.attach-empty a { color: var(--c-blue); text-decoration: underline; }
/* iOS / 平板：hidden 的 file input 用屏幕外定位，避免 display:none 时 programmatic click 失效 */
.attach-native-input { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }