/* ==========================================================================
   侧边栏外壳 —— 把六页统一到同一导航框架
   设计语言沿用 base.css：米棕褐色系 / 1px 描边 / 圆角 / 宋体标题
   ========================================================================== */

:root {
  --topbar-h: 58px;
  --motif-size: min(86vh, 880px);   /* 左右图案的直径 */
  --motif-gap: 0px;               /* 圆心压在内容区边缘上，所以间距为 0 */
  --sidebar-bg: #F3EADA;
  --sidebar-active: #EADFC9;
}

/* ---------- 布局骨架：顶部导航 + 下方内容 ---------- */
body.shell-body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ==========================================================================
   顶部导航栏
   --------------------------------------------------------------------------
   深棕底、左侧 Logo + 品牌名、中间四个一级大类（hover / 点击展开下拉）、
   右侧搜索框 + 用户头像。原侧栏的 13 个入口全部收进下拉。
   ========================================================================== */
.shell-topbar {
  flex: 0 0 auto;
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--topbar-h);
  padding: 0 20px;
  background: linear-gradient(180deg, #402E1F 0%, #35261A 100%);
  border-bottom: 1px solid #6B4A2B;
  box-shadow: 0 2px 10px rgba(40, 28, 18, 0.22);
  color: #F3EADA;
}

/* 品牌区（顶栏内） */
.shell-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: 0 0 auto;
  padding-right: 18px;
  border-right: 1px solid rgba(243, 234, 218, 0.14);
}
.shell-brand__mark {
  /* 站点 Logo（tools/build-logo.js 产出）。
     顶栏是深棕渐变（#402E1F → #35261A），所以这里用**深色版**：
     透明底 + 暖金笔触 #E6C88F，与顶栏文字 #F7EFE0、金色强调同属一套色。
     最初用的是米色底那一版 —— 那圈米色方块（其实就是页面背景色）
     在深棕顶栏上很跳、与整体割裂；米色底那版留给浅色背景用。 */
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shell-brand__mark img {
  display: block;
  width: 100%;
  height: 100%;
  /* 细笔触在深棕底上略加一点柔光，避免糊成一团 */
  filter: drop-shadow(0 0 6px rgba(230, 200, 143, 0.18));
}
.shell-brand__text { min-width: 0; display: flex; flex-direction: column; }
.shell-brand__title {
  font-family: var(--font-serif);
  font-size: 14.5px;
  letter-spacing: 0.5px;
  color: #F7EFE0;
  line-height: 1.3;
  white-space: nowrap;
}
.shell-brand__sub {
  font-size: 9.5px;
  letter-spacing: 0.4px;
  color: rgba(243, 234, 218, 0.5);
  line-height: 1.3;
  white-space: nowrap;
}

/* ---------- 一级大类 ---------- */
.shell-topnav { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.shell-menu { position: relative; }
.shell-menu__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 15px;
  border: none;
  border-radius: var(--radius-btn);
  background: transparent;
  color: rgba(243, 234, 218, 0.86);
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-base);
  white-space: nowrap;
}
.shell-menu__btn:hover,
.shell-menu.open .shell-menu__btn { background: rgba(243, 234, 218, 0.12); color: #F7EFE0; }
.shell-menu__btn.active { color: var(--accent-soft); }
.shell-menu__caret { font-size: 10px; opacity: 0.7; transition: transform 0.2s ease; }
.shell-menu.open .shell-menu__caret { transform: rotate(180deg); }

/* 下拉面板 */
.shell-dd {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 208px;
  padding: 7px;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.shell-menu.open .shell-dd { opacity: 1; visibility: visible; transform: none; }
.shell-dd__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-btn);
  color: var(--text-secondary);
  font-size: 13.5px;
  text-decoration: none;
  transition: var(--transition-base);
}
.shell-dd__item:hover { background: var(--sidebar-active); color: var(--accent-color); }
.shell-dd__item.active { background: var(--sidebar-active); color: var(--accent-color); font-weight: 600; }
.shell-dd__icon {
  flex: 0 0 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; opacity: 0.9;
}

/* ---------- 右侧：搜索 + 用户 ---------- */
.shell-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

.shell-search {
  position: relative;
  display: flex;
  align-items: center;
}
.shell-search__icon {
  position: absolute;
  left: 11px;
  font-size: 15px;
  color: rgba(243, 234, 218, 0.55);
  pointer-events: none;
}
.shell-search__input {
  width: 208px;
  padding: 8px 12px 8px 32px;
  border: 1px solid rgba(243, 234, 218, 0.22);
  border-radius: 999px;
  background: rgba(243, 234, 218, 0.08);
  color: #F7EFE0;
  font-family: var(--font-sans);
  font-size: 13px;
  transition: var(--transition-base);
}
.shell-search__input::placeholder { color: rgba(243, 234, 218, 0.42); }
.shell-search__input:focus {
  outline: none;
  width: 260px;
  border-color: var(--accent-soft);
  background: rgba(243, 234, 218, 0.14);
}
/* 搜索框自带的清除按钮在深色底上不好看 */
.shell-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* 用户头像 + 展开面板 */
.shell-user { position: relative; }
.shell-user__btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 3px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-base);
}
.shell-user__btn:hover,
.shell-user.open .shell-user__btn { border-color: rgba(243, 234, 218, 0.3); background: rgba(243, 234, 218, 0.1); }
.shell-user__avatar {
  flex: 0 0 30px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: #2A1D13;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1;
}
.shell-user__caret { font-size: 9px; color: rgba(243, 234, 218, 0.6); }
.shell-user__dd {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 186px;
  padding: 7px;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  text-align: left;
}
.shell-user.open .shell-user__dd { opacity: 1; visibility: visible; transform: none; }
.shell-user__hd { padding: 8px 12px 10px; border-bottom: 1px solid var(--border-light); margin-bottom: 5px; }
.shell-user__name { display: block; font-size: 13.5px; color: var(--text-primary); font-family: var(--font-serif); }
.shell-user__sub { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.shell-user__item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: none;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 13.5px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-base);
}
.shell-user__item:hover { background: var(--sidebar-active); color: var(--accent-color); }
.shell-user__item--out:hover { background: #FBEFEC; color: #B4553F; }

/* 后端状态：顶栏里只在沉浸模式的浮出条上显示，普通页面不占位 */
.shell-immersive-bar {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(243, 234, 218, 0.6);
}
.shell-status { display: flex; align-items: center; gap: 6px; }
.shell-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  flex: 0 0 6px;
}
.shell-status__dot.on { background: #8FBF74; }
.shell-status__dot.err { background: #D9705A; }

/* ==========================================================================
   沉浸页（VR 云展厅 / 地理分布）
   --------------------------------------------------------------------------
   规格：进入后顶栏自动隐藏（或悬浮半透明），ESC / 左上角返回按钮退出。
   顶栏默认收上去，鼠标移到窗口顶部 64px 内滑出，2.5s 后自动收起。
   ========================================================================== */
body.shell-immersive .shell-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(40, 28, 18, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transform: translateY(-100%);
  transition: transform 0.28s ease;
}
body.shell-immersive.nav-shown .shell-topbar { transform: none; }
body.shell-immersive .shell-immersive-bar { display: flex; margin-left: 16px; }
/* 内容上沿留出顶栏高度：顶栏虽然是自动隐藏的，但滑出时不该盖住页面自己的标题；
   实测地图页原先标题会被压掉。 */
body.shell-immersive .shell-main { padding-top: var(--topbar-h); }

.shell-immersive-back {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(139, 90, 43, 0.34);
  background: rgba(251, 247, 239, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--accent-color);
  font-family: var(--font-sans);
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(58, 42, 31, 0.14);
  transition: var(--transition-base);
}
.shell-immersive-back:hover { border-color: var(--accent-color); background: #F3EADA; }
/* 顶栏滑出时把返回按钮让到它下面，避免叠在一起 */
body.shell-immersive.nav-shown .shell-immersive-back { top: calc(var(--topbar-h) + 12px); }

/* ---------- 内容区 ---------- */
.shell-main {
  flex: 1;
  min-width: 0;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
}

/* 原 .page 是 100vw/100vh 的全屏骨架，嵌进侧边栏后改为自适应内容区 */
body.shell-body .page {
  width: 100%;
  height: auto;
  min-height: 100vh;
  overflow: visible;
}
/* 首页嵌进侧栏外壳：宽度收敛到内容区，避免 100vw 导致整体右偏、左侧大片空白 */
body.shell-body .home-page { width: 100%; }

/* 内容区内的返回首页按钮由侧边栏取代，隐藏以免重复 */
body.shell-body .back-link { display: none !important; }

/* 无侧边栏时的页头（首页）改为居中 */
body.shell-body .page-head { height: 92px; padding: 0 40px; }

/* 固定视口的页面（地图 / 图谱）由外壳接管
   --------------------------------------------------------------------------
   这里原本写的是 height: 100vh —— 但页面已经在顶栏下方的内容区里，
   再按 100vh 撑高就会向下溢出（顶栏 58px + 内容区上边距 24px = 82px），
   把图谱左下角的图例和右侧详情面板顶出视口。
   改为绝对定位填满内容区，高度跟着可用空间走。
   注：graph.html 的容器是 .graph-page 而不是 .page，两个都要覆盖。 */
body.shell-fixed-body .shell-main { position: relative; overflow: hidden; padding: 0; }
/* 满屏页（地图/图谱）也铺纹样底
   --------------------------------------------------------------------------
   原先这类页面用 `content: none` 刻意不铺图案，题图也被各层不透明底色盖住。
   现按要求改为与其它页面一致：
   ① 去掉图案开关；
   ② 去掉各层不透明底色 —— 图谱的底色在 .graph-page，
      地图的底色在 .map-container.leaflet-container（省界底图只画描边、
      填充是容器底色），.map-stage 也有一层；
   ③ 容器补 z-index:1 —— ::after（右侧图案）在 DOM 里位于内容之后，
      同层级会画在内容**之上**（首页那次「右侧卡片变透明」就是这个问题）。 */
body.shell-fixed-body .page,
body.shell-fixed-body .graph-page,
body.shell-fixed-body .map-page {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  min-height: 0;
  z-index: 1;
}
/* 满屏页（地图/图谱）的底色与图案
   --------------------------------------------------------------------------
   这两页原先用 `content: none` 统一不铺图案。现在按页面分开处理
   （IMMERSIVE = ['ar','map']，而 ar 是独立页不加载 shell.js，
    所以 `.shell-immersive` 实际只命中地理分布页）：

   - 知识图谱：铺图案 + 去掉 .graph-page 底色，纹样透上来。
   - 非遗地理分布：**完全保持原样** —— 不铺图案，且 .map-stage 与
     .map-container.leaflet-container 的底色保持不透明（来自 pages.css，这里不覆盖）。
     原因：省界底图只画描边、填充就是容器底色，一旦透明，拖到省界之外时
     看到的是纹样底而非地图底色，「空白」的观感反而更明显，用户要求改回。

   容器补 z-index:1 是两类页面都要的 —— ::after（右侧图案）在 DOM 里位于内容之后，
   同层级会画在内容**之上**（首页那次「右侧两张卡片变透明」就是这个原因）。 */
body.shell-fixed-body .graph-page { background: transparent; }
body.shell-fixed-body.shell-immersive .shell-main::before,
body.shell-fixed-body.shell-immersive .shell-main::after { content: none; }
/* 地图是沉浸页：内容上沿仍要让出顶栏高度，否则顶栏滑出时会压住页面标题
   （选择器比上面多一个类，确保能覆盖 inset: 0 里的 top） */
body.shell-fixed-body.shell-immersive .shell-main { padding-top: var(--topbar-h); }
body.shell-fixed-body.shell-immersive .page { top: var(--topbar-h); }

/* ---------- 各页面嵌进外壳后的尺寸适配 ---------- */
/* 作品图库 */
body.shell-body .gallery-main { padding: 0 40px 40px; align-items: flex-start; }
body.shell-body .gallery-grid { grid-template-columns: repeat(3, 1fr); }

/* 整页滚动：原先 .gallery-grid 自己 overflow-y:auto，导致卡片区独立滚动、
   左侧筛选栏相对静止。这里让页面容器随内容增高，由 .shell-main 承担滚动。 */
body.shell-body .gallery-page .page,
body.shell-body .gallery-page .gallery-main {
  height: auto;
  min-height: 0;
  overflow: visible;
}
body.shell-body .gallery-page .gallery-grid {
  overflow: visible;
  padding-right: 0;
}

/* 左侧筛选栏浮动：随页面滚动，滚到顶部后停在视口内保持可用。
   注意在 flex 容器中必须 align-self:flex-start，否则 sticky 不生效；
   自身高于视口时允许内部滚动，避免底部被裁掉。 */
body.shell-body .filter-sidebar {
  position: sticky;
  top: 16px;
  align-self: flex-start;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

/* 传承人的风采 */
body.shell-body .inheritor-page { width: 100%; height: auto; min-height: 100vh; }
body.shell-body .inheritor-grid { padding: 0 40px; }

/* AI 智能识别 */
body.shell-body .ai-page { width: 100%; height: auto; min-height: 100vh; }
body.shell-body .ai-inner { max-width: 1100px; padding-bottom: 40px; }

/* 非遗知识图谱（固定视口）
   注意 height 不能再写 100vh —— 页面已在顶栏下方，100vh 会向下溢出，
   把左下角图例顶出视口；高度改由上面 .shell-fixed-body 的绝对定位规则决定。 */
body.shell-body .graph-page { width: 100%; height: auto; }
body.shell-body .graph-head { left: 36px; top: 28px; }
body.shell-body .graph-legend { left: 36px; bottom: 32px; }
/* 详情面板：只改上下留白。
   ① 必须带 height:auto —— pages.css 里是 height:100%，会把 top/bottom 约束顶掉，
      面板于是从 top:88px 再向下撑满一整屏，底部探出视口。
   ② 不能再写 right —— 那会盖掉 .graph-detail{right:-380px} 与 .show{right:0} 的开合，
      面板变成常驻、关闭按钮点了没反应。 */
body.shell-body .graph-detail { top: 88px; bottom: 24px; height: auto; }

/* ---------- 通用内容容器 ---------- */
.shell-content {
  padding: 0 40px 48px;
  max-width: none;
}
.shell-content--narrow { max-width: 940px; }

/* 卡片 + 区块标题（沿用旧版语义，套用新视觉） */
.shell-card {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  padding: 22px 24px;
  margin-bottom: 16px;
}
.shell-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-size: 17px;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.shell-card__desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.75;
}
.shell-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.9;
}

/* 统计块 */
.shell-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.shell-stat {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  padding: 16px 18px;
}
.shell-stat__num {
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--accent-color);
  line-height: 1.2;
}
.shell-stat__label {
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* 表格 */
.shell-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-btn);
}
.shell-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.shell-table th,
.shell-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}
.shell-table th {
  background: #F3EADA;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}
.shell-table tbody tr:last-child td { border-bottom: none; }
.shell-table tbody tr:hover td { background: rgba(139, 90, 43, 0.04); }
.shell-link { color: var(--accent-color); }
.shell-link:hover { text-decoration: underline; }

/* 徽标 */
.shell-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-tag);
  font-size: 12px;
  background: rgba(139, 90, 43, 0.1);
  color: var(--accent-color);
}
.shell-badge--ok { background: rgba(110, 154, 90, 0.14); color: #5C8449; }
.shell-badge--muted { background: #EFE7DA; color: var(--text-muted); }

/* 表单控件（沿用新视觉） */
.shell-input,
.shell-textarea,
.shell-select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-btn);
  background: var(--bg-color);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13.5px;
  transition: var(--transition-base);
}
.shell-input:focus,
.shell-textarea:focus,
.shell-select:focus {
  outline: none;
  border-color: var(--accent-color);
  background: var(--card-bg);
}
.shell-textarea { resize: vertical; }
.shell-label {
  display: block;
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 5px;
}
.shell-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.shell-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

/* ---------- 检索溯源 ---------- */
.shell-search-box {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.shell-search-box .shell-input { flex: 1; }
.shell-result {
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--accent-color);
  border-radius: var(--radius-btn);
  background: var(--card-bg);
  padding: 16px 18px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: var(--transition-base);
}
.shell-result:hover { border-color: var(--accent-color); background: #FDFAF4; }
.shell-result__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.shell-result__name {
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: 0.5px;
}
.shell-result__body {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.75;
}
.shell-result__meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}
.shell-result mark {
  background: rgba(169, 116, 63, 0.22);
  color: var(--accent-color);
  padding: 0 2px;
  border-radius: 2px;
}

/* ---------- AI 问答 ---------- */
.chat-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 200px);
  min-height: 420px;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 4px 2px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-msg {
  max-width: 82%;
  padding: 11px 15px;
  border-radius: var(--radius-card);
  font-size: 13.5px;
  line-height: 1.8;
  white-space: normal;
  word-break: break-word;
}
.chat-msg.ai {
  align-self: flex-start;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
}
.chat-msg.user {
  align-self: flex-end;
  background: var(--accent-color);
  color: #FBF7EF;
  border: 1px solid var(--accent-color);
}
.chat-msg.loading {
  align-self: flex-start;
  background: transparent;
  border: 1px dashed var(--border-dashed);
  color: var(--text-muted);
  font-size: 12.5px;
}
.chat-msg .cite-ref {
  color: var(--accent-color);
  font-weight: 600;
  cursor: help;
}
.chat-msg .cite-list {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-dashed);
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.chat-msg .cite-list a { color: var(--accent-color); }
.chat-msg .cite-list a:hover { text-decoration: underline; }
/* 通道标注：本地知识检索作答时，在回答上方标明来源与原因。
   两条通道（云端智能体 / 本地检索）的产出不混为一谈。 */
.chat-msg .chat-note {
  margin-bottom: 10px;
  padding: 7px 11px;
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--accent-color);
  border-radius: 6px;
  background: var(--sidebar-active);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.chat-msg .chat-note b { color: var(--accent-color); }

/* 通道开关：本地知识检索 / 云端智能体 */
.chat-mode {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.chat-mode__btn {
  padding: 5px 13px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-btn);
  background: var(--card-bg);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: var(--transition-base);
}
.chat-mode__btn:hover { border-color: var(--accent-soft); color: var(--accent-color); }
.chat-mode__btn.is-active {
  border-color: var(--accent-color);
  background: var(--accent-color);
  color: #FBF7EF;
}
.chat-mode__btn.is-disabled,
.chat-mode__btn.is-disabled:hover {
  border-color: var(--border-light);
  background: transparent;
  color: var(--text-muted);
  opacity: .45;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.chat-mode__note {
  font-size: 12px;
  color: var(--text-muted);
}
.chat-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  padding: 10px 12px;
}
.chat-input-bar textarea {
  flex: 1;
  border: none;
  background: transparent;
  resize: none;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text-primary);
  line-height: 1.7;
  max-height: 120px;
  outline: none;
}
.chat-send {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--accent-color);
  background: var(--accent-color);
  color: #fff;
  cursor: pointer;
  transition: var(--transition-base);
}
.chat-send:hover { background: var(--accent-soft); }
.chat-send:disabled { opacity: 0.45; cursor: default; }
.chat-hint {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.chat-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* ---------- 地图页双视图 ---------- */
.map-view-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 40px 12px;
}
.map-view-tabs__actions { display: flex; gap: 8px; margin-right: 48px; }
.map-stage {
  position: relative;
  height: calc(100vh - 210px);
  min-height: 420px;
  margin: 0 40px 32px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--card-bg);
}
.map-stage__pane { position: absolute; inset: 0; }
.map-container {
  width: 100%;
  height: 100%;
}
#mapEcharts { width: 100%; height: 100%; }

/* 浮在舞台上的面板（筛选 / 图例 / 数据提示） */
.map-stage .map-panel {
  position: absolute;
  z-index: 1200;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  background: #FBF7EF;
  
  
}
.map-stage .filter-panel {
  top: 8px;
  left: 10px;
  width: 175px;
  padding: 10px 12px;
  font-size: 12px;
  max-height: calc(100% - 16px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.map-stage .map-legend {
  right: 20px;
  bottom: 20px;
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
  color: var(--text-secondary);
}
.map-stage .point-popup { z-index: 1400; }
.point-popup--wide { width: 320px; max-height: 280px; overflow-y: auto; }
.point-popup__title { font-weight: 600; margin-bottom: 8px; color: var(--text-primary); }
.point-popup__list { display: flex; flex-direction: column; gap: 4px; }
.point-popup__item { padding: 6px 8px; border-radius: 4px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.point-popup__item:hover { background: rgba(139, 90, 43, 0.08); }
.point-popup__item-name { font-size: 13px; }
.point-popup__item-cat { font-size: 11px; color: var(--text-muted); }
/* 同一项目对应多处点位时的角标（如景德镇有御窑厂遗址与中国陶瓷博物馆两处） */
.point-popup__item-count {
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(139, 90, 43, 0.1);
  color: var(--accent-soft);
  font-size: 10.5px;
  white-space: nowrap;
}
.point-popup__item-name { margin-right: auto; }
.map-stage .map-tip {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 1200;
  padding: 7px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-btn);
  background: #FBF7EF;
  font-size: 12.5px;
  color: var(--text-secondary);
}

/* ---------- 视频播放页 ---------- */
.shell-video { padding: 0 40px 48px; }
.shell-video__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.shell-video__title {
  font-family: var(--font-serif);
  font-size: 20px;
  letter-spacing: 0.5px;
}
.shell-video__sub { font-size: 12.5px; color: var(--text-secondary); }
.shell-video__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #241A13;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.shell-video__player iframe,
.shell-video__player video {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.shell-video__list { margin-top: 18px; }
.shell-video__list h3 {
  font-family: var(--font-serif);
  font-size: 15px;
  margin-bottom: 8px;
}
.shell-video__item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-btn);
  background: var(--card-bg);
  font-size: 13px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: var(--transition-base);
}
.shell-video__item:hover { border-color: var(--accent-color); color: var(--accent-color); }
.shell-video__item.active { border-color: var(--accent-color); background: var(--sidebar-active); }
.shell-video__src { color: var(--text-muted); font-size: 12px; }

/* ---------- 详情浮层：套用新视觉 ---------- */
.shell-modal {
  width: min(880px, 92vw);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--card-bg);
}
.shell-modal.show {
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.shell-modal__hero {
  height: 190px;
  background: #EFE6D6 center/cover no-repeat;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 52px;
  color: var(--accent-soft);
}
.shell-modal__body { padding: 22px 26px 26px; }
.shell-modal__title {
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.shell-modal__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.shell-modal__block { margin-bottom: 14px; }
.shell-modal__block h3 {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--accent-color);
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
.shell-modal__block p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.85;
}
.shell-videos { display: flex; flex-direction: column; gap: 6px; }
.shell-videos__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-btn);
  background: var(--bg-color);
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition-base);
  text-align: left;
  width: 100%;
}
.shell-videos__item:hover { border-color: var(--accent-color); color: var(--accent-color); }

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
  .shell-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .shell-brand__text { display: none; }
  .shell-brand { padding-right: 12px; }
  .shell-search__input { width: 132px; }
  .shell-search__input:focus { width: 160px; }
  .shell-content, .map-stage, body.shell-body .map-container { padding-left: 18px; padding-right: 18px; }
  .shell-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  /* 窄屏：品牌名与搜索框收起，一级大类留图标位置 */
  .shell-topbar { gap: 10px; padding: 0 12px; }
  .shell-menu__btn { padding: 8px 10px; font-size: 13px; }
  .shell-search { display: none; }
}

.shell-modal--wide { width: min(960px, 94vw); }
.shell-modal--prov { width: min(460px, 92vw); left: calc(50% + 90px); }


/* ---------- 省份名录抽屉（不遮挡地图） ---------- */
.prov-drawer {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: min(380px, 92vw);
  max-height: 74vh;
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  box-shadow: 0 10px 36px rgba(58, 42, 31, 0.30);
  z-index: 1500;
  padding: 18px 20px 20px;
}
.prov-drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.prov-drawer__head h2 {
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: 0.5px;
  margin: 0 0 6px;
  color: var(--text-primary);
}
.prov-drawer__close {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.prov-drawer__close:hover { color: var(--accent-color); }
.prov-drawer__desc { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.prov-drawer .prov-list { max-height: none; }

/* ===== 全站国风背景装饰（回纹横带 + 网格底纹） ===== */
body.shell-body {
  background-image:
    linear-gradient(rgba(139,90,43,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,90,43,0.06) 1px, transparent 1px);
  background-size: 44px 44px;
}
body.shell-body::before {
  content: '';
  position: fixed; left: 0; right: 0; top: 0; height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='18' viewBox='0 0 48 18'><path d='M3,3 h18 v12 h-12 v-7 h6' fill='none' stroke='%238B5A2B' stroke-width='1.4' opacity='0.55'/><path d='M27,3 h18 v12 h-12 v-7 h6' fill='none' stroke='%238B5A2B' stroke-width='1.4' opacity='0.55'/></svg>") repeat-x;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

.shell-main { position: relative; z-index: 10; padding-top: 24px; padding-bottom: 80px; min-height: 0; }

/* ===== 全站标题牌样式（浅米棕底 + 深棕字 + 菱形角） ===== */
.page-title {
  display: inline-block !important;
  padding: 12px 48px !important;
  background: #F3EADA !important;
  color: #3A2A1F !important;
  font-family: var(--font-serif) !important;
  letter-spacing: 5px !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px #8B5A2B !important;
  position: relative !important;
}
.page-title::before, .page-title::after {
  content: '' !important;
  position: absolute !important; top: 50% !important;
  width: 7px !important; height: 7px !important;
  background: #8B5A2B !important;
  transform: translateY(-50%) rotate(45deg) !important;
}
.page-title::before { left: 16px !important; }
.page-title::after { right: 16px !important; }body.shell-body::after {
  content: '';
  position: fixed; left: 0; right: 0; bottom: 0; height: 18px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='18' viewBox='0 0 48 18'><path d='M3,3 h18 v12 h-12 v-7 h6' fill='none' stroke='%238B5A2B' stroke-width='1.4' opacity='0.55'/><path d='M27,3 h18 v12 h-12 v-7 h6' fill='none' stroke='%238B5A2B' stroke-width='1.4' opacity='0.55'/></svg>") repeat-x;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
/* 顶栏换成深棕后，这条 18px 回纹带改贴在顶栏下沿；
   沉浸页顶栏是隐藏的，对应也把这条带子收掉。 */
body.shell-body::before { top: var(--topbar-h); }
body.shell-immersive::before { display: none; }
.prov-list-panel { position:fixed; right:20px; top:80px; width:560px; max-height:calc(100vh - 120px); overflow-y:auto; background:#FBF7EF; border:1px solid #D9C7B0; border-radius:12px; box-shadow:0 8px 32px rgba(58,42,31,0.2); z-index:1000; font-size:15px; padding:20px; }

.prov-list-panel__header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid #D9C7B0; }
.prov-list-panel__title { font-size:18px; font-weight:bold; color:#3A2A1F; }
.prov-list-panel__close { width:28px; height:28px; border-radius:50%; background:#F0E6D6; border:1px solid #D9C7B0; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; color:#666; }
.prov-list { display:flex; flex-direction:column; gap:10px; }
.prov-card { background:#fff; border:1px solid #D9C7B0; border-radius:8px; overflow:hidden; cursor:pointer; transition:transform 0.2s; }
.prov-card:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(58,42,31,0.15); }
.prov-card__img { width:100%; height:100px; object-fit:cover; background:#E8DCC8; }
.prov-card__body { padding:10px; }
.prov-card__name { font-size:14px; font-weight:bold; color:#3A2A1F; margin-bottom:4px; }
.prov-card__meta { font-size:12px; color:#8B5A2B; }


/* ==========================================================================
   分组底纹（中式圆形纹样）
   --------------------------------------------------------------------------
   图案**不是手绘的**，而是从参考图例里逐格抠出来的位图
   （见 tools/extract-motifs.js，源图 1080x2352 上量出的 9 个外接框）。

   布局按参考图 2 的做法：一个图案一分为二，圆心压在内容区左右边缘上，
   于是每边只露内侧半个 —— 左边半个、右边半个，尺寸取 min(86vh, 880px)。

   四个分组各用一种：
     展厅 exhibition → motif-xiangyun.png  祥云纹
     知识 knowledge  → motif-tangcao.png   唐草纹
     智能 ai         → motif-yunlei.png    云雷纹
     我的 mine       → motif-ruyi.png      如意纹

   几个要点：
   - 用 position:fixed，滚动时图案不动（底纹而非背景图）；
   - z-index:0 且页面容器抬到 1，保证只做底、不压内容；
   - .page 原先是实色背景，会把图案整个盖掉，这里改为透明，
     底色统一交给 .shell-main；
   - map / graph / ar 这类满屏交互页（shell-fixed-body）不铺，避免干扰。
   ========================================================================== */
body.shell-body .shell-main { background-color: var(--bg-color); }
body.shell-body .page,
body.shell-body .home-page,
body.shell-body .ai-page { background: transparent; }
/* 页面容器抬到图案之上。两个细节都踩过：
   ① 必须排除满屏页（:not(.shell-fixed-body)）—— 这条的选择器比 .shell-fixed-body
      那条更具体，不排除的话会把地图/图谱页的 position:absolute 顶回 relative；
   ② 必须把 .home-page / .ai-page 一起写上 —— 首页与智能识别页的外层容器**没有**
      `page` 这个类，只写 `.page` 的话它们不匹配，内容不会被抬起来。
      此时 ::after（右侧图案）在 DOM 里位于内容之后，同层级会画在内容**之上**，
      表现就是「右边两个卡片变透明、左边正常」。 */
body.shell-body:not(.shell-fixed-body) .shell-main > .page,
body.shell-body:not(.shell-fixed-body) .shell-main > .home-page,
body.shell-body:not(.shell-fixed-body) .shell-main > .ai-page { position: relative; z-index: 1; }

/* 左右各一个**完整**图案：整体放在内容区内的左右两侧，不再让圆心压在外沿上
   （那样会被视口裁成半个）。用 position:fixed 让它不随滚动移动，是底纹而非背景图。 */
body.shell-body .shell-main::before,
body.shell-body .shell-main::after {
  content: '';
  position: fixed;
  top: 50%;
  width: var(--motif-size);
  height: var(--motif-size);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
  opacity: 0.1;
}
/* 圆心压在内容区左右边缘上 —— 每边只露内侧半个，左边半圆 + 右边半圆 */
body.shell-body .shell-main::before { left: var(--motif-gap);  transform: translate(-50%, -50%); }
body.shell-body .shell-main::after  { right: var(--motif-gap); transform: translate(50%, -50%); }

/* 满屏交互页（地图/图谱）原先用 content:none 不铺图案，现改为照铺 —— 见上面那段。
   AR 页是独立页面、不加载 shell.js，本来就不受这里影响。 */

/* 四个分组各用一种，纹样从参考图例中抠取（tools/extract-motifs.js） */
body.shell-body[data-group="exhibition"] .shell-main::before,
body.shell-body[data-group="exhibition"] .shell-main::after { background-image: url('../img/motif-xiangyun.png'); }
body.shell-body[data-group="knowledge"] .shell-main::before,
body.shell-body[data-group="knowledge"] .shell-main::after { background-image: url('../img/motif-tangcao.png'); }
body.shell-body[data-group="ai"] .shell-main::before,
body.shell-body[data-group="ai"] .shell-main::after { background-image: url('../img/motif-yunlei.png'); }
body.shell-body[data-group="mine"] .shell-main::before,
body.shell-body[data-group="mine"] .shell-main::after { background-image: url('../img/motif-ruyi.png'); }

/* 窄屏：图案缩小，避免盖满内容 */
@media (max-width: 1100px) {
  :root { --motif-size: 62vh; }
  body.shell-body .shell-main::before,
  body.shell-body .shell-main::after { opacity: 0.08; }
}