/**
 * 数据地图频道（/tools/map）—— 全屏工作台式，复用首页地图组件 index-map.js。
 * home-map-* / hm-* / map-scope-btn 基础样式与首页一致（首页那份在 index.css；
 * 待首页地图迁出后，index.css 那份删除，本文件成为地图样式唯一归属）。
 */
/* 真全屏：让出固定吸顶头部(.searchbox 60px)，填满整屏（与数据分析工作台 --ghs-nav-h:60px 同口径） */
.map-channel { margin-top: 60px; height: calc(100vh - 60px); padding: 0; }
.map-channel-card {
  height: 100%;
  background: #fff;
  border: none;
  border-radius: 0;
  padding: 0;
}
.map-channel-empty {
  padding: 80px 24px;
  text-align: center;
  color: #97a1ad;
  font-size: 14px;
}

/* —— 地图组件基础样式（与首页 index.css 同口径）—— */
/* 区域范围分段控件（与排行榜单视图切换 .ex-views 同款：白底带框、分隔线、激活仅浅蓝底） */
.home-map-scope {
  display: inline-flex;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  overflow: hidden;
}
.map-scope-btn,
.map-view-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  font-size: 13px;
  color: var(--text-muted);
  background: none;
  border: none;
  border-left: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.12s ease;
}
.map-scope-btn:first-child, .map-view-btn:first-child { border-left: none; }
.map-scope-btn:hover, .map-view-btn:hover { color: var(--text-dark); background: var(--bg-light); }
.map-scope-btn.active, .map-view-btn.active { background: rgba(26, 79, 190, 0.08); }
.map-scope-btn:disabled {
  color: #b9c0cb;
  cursor: not-allowed;
  background: none;
}

/* 抽屉内 AI 助手入口（与首页 index-ai-btn 同款：蓝框浅蓝底，块级占满，hover 轻微加深） */
.map-ai-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin-bottom: 14px;
  padding: 8px 12px;
  border: 1px solid var(--primary-color);
  border-radius: var(--border-radius-md);
  background: none;
  color: var(--primary-color);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.map-ai-btn:hover { background: #f0f4fb; }
.map-ai-spark { font-size: 13px; }
.home-map-indicator {
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 13px;
  color: #333;
  background: #fff;
  cursor: pointer;
  outline: none;
}
.home-map-body {
  height: 100%;
  padding: 0;
  position: relative;   /* 地图铺底、左侧面板与读数面板绝对定位悬浮其上（面板不挤压地图） */
}
/* 地图全屏铺底（面板浮于其上、不占地图宽度） */
.map-stage { position: absolute; inset: 0; }
/* 左侧单一面板（与数据分析/图表工作台同款一栏切换）：悬浮在地图上、不挤压地图；
   控件态窄、AI 态加宽；内容在控件↔对话间走 display 切换，宽度仅在两定值间过渡（widen，不挤压） */
.map-side {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 6;
  width: 210px;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-right: 1px solid #eef1f5;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.07);
  transition: width 0.2s ease;
}
.map-channel-card.map-ai-on .map-side { width: 480px; }
@media (max-width: 1100px) { .map-channel-card.map-ai-on .map-side { width: 420px; } }
.map-side-head { flex: none; display: flex; align-items: center; gap: 4px; padding: 12px 14px; border-bottom: 1px solid #f0f2f5; }
/* 保存图片：头部次级动作，压到常规灰、不与 AI 主入口抢眼 */
.map-save-btn {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 10px;
  border: none; border-radius: var(--border-radius-md);
  background: none; color: var(--text-muted); cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.map-save-btn:hover { background: #f4f6f9; color: var(--text-dark, #333); }
.map-save-btn .iconfont { font-size: 15px; }
/* 无边框（规范：克制、按钮不抢数据）：品牌色文字 + hover 浅蓝底 */
.map-mode-btn {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 12px;
  border: none; border-radius: var(--border-radius-md);
  background: none; color: var(--primary-color); font-size: 13px; cursor: pointer;
  transition: background-color 0.15s ease;
}
.map-mode-btn:hover { background: #f0f4fb; }
.map-mode-btn .iconfont { font-size: 13px; }
.map-side-body { flex: 1; padding: 14px; overflow-y: auto; min-height: 0; }
.map-side-ai { flex: 1; min-height: 0; display: none; flex-direction: column; }
.map-channel-card.map-ai-on .map-side-body { display: none; }
.map-channel-card.map-ai-on .map-side-ai { display: flex; }
.map-side-ai > .gha-modal { flex: 1; min-height: 0; }   /* 内嵌对话面板填满左栏 */

/* —— 左侧可伸缩抽屉：浮在地图上、不挤压地图 —— */
/* 抽屉容器：定位在地图内容左缘、overflow 裁剪滑出的面板（不裁地图/tooltip）；本身不挡鼠标 */
.map-drawer {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  overflow: hidden;
  z-index: 6;
  pointer-events: none;
}
.map-drawer-panel {
  pointer-events: auto;
  box-sizing: border-box;
  width: 220px;
  margin: 12px 0 0 36px; /* 让位左缘把手 */
  padding: 14px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transform: translateX(0);
  transition: transform 0.25s ease;
}
.map-drawer.collapsed .map-drawer-panel { transform: translateX(-130%); } /* 滑出左侧，被抽屉 overflow 裁掉，无残留 */
.map-drawer-group { margin-bottom: 14px; }
.map-drawer-group:last-child { margin-bottom: 0; }
.map-drawer-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.map-drawer-panel .home-map-scope { display: inline-flex; }
.map-drawer-panel .home-map-indicator { width: 100%; }
/* 样式二级面板（默认收起，渐进式）：折叠头 + 配色/分级/开关 */
.map-style-fold { margin-top: 14px; border-top: 1px solid #eef1f5; padding-top: 12px; }
.map-style-fold > summary {
  font-size: 12px; color: var(--text-muted); cursor: pointer; list-style: none; user-select: none;
}
.map-style-fold > summary::-webkit-details-marker { display: none; }
.map-style-fold > summary::after { content: '▾'; float: right; color: #b6bcc6; }
.map-style-fold[open] > summary::after { content: '▴'; }
.map-style-body { margin-top: 10px; }
.map-style-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.map-style-row > span { font-size: 12px; color: var(--text-muted); flex: none; }
.map-style-row .home-map-indicator { width: auto; flex: 1; }
.map-style-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dark, #333); margin-bottom: 6px; cursor: pointer; }
/* 把手：固定在地图内容左缘，独立于面板，始终可见 */
.map-drawer-toggle {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 7;
  width: 22px;
  height: 48px;
  border: 1px solid var(--border-color);
  border-left: none;
  border-radius: 0 6px 6px 0;
  background: #fff;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.05);
}
.map-drawer-toggle .iconfont { font-size: 13px; transition: transform 0.2s ease; transform: rotate(180deg); } /* 展开态把手指向左=收起 */
.map-drawer.collapsed ~ .map-drawer-toggle .iconfont { transform: rotate(0deg); } /* 收起态指向右=展开 */
/* 地图全屏铺底 */
.home-map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.home-map-canvas .hm-loading,
.home-map-canvas .hm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #aaa;
  font-size: 13px;
  text-align: center;
  line-height: 2;
}
/* 付费榜未购买：原地购买按钮（rank 弹窗）+ 兜底榜页链接 */
.map-buy-btn {
  display: inline-block; margin-top: 6px;
  padding: 6px 20px;
  border: none; border-radius: var(--border-radius-md);
  background: var(--primary-color); color: #fff; font-size: 13px; cursor: pointer;
  transition: background-color 0.15s ease;
}
.map-buy-btn:hover { background: #1240A0; }
.hm-buy-alt { color: var(--text-muted); font-size: 12px; text-decoration: none; }
.hm-buy-alt:hover { color: var(--primary-color); }
/* 读数面板：浮于地图右上角的卡片（不占地图宽度） */
.home-map-panel {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 260px;
  max-height: calc(100% - 28px);
  overflow-y: auto;
  z-index: 6;
  padding: 18px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.home-map-panel-empty { color: #aaa; font-size: 13px; }
.home-map-panel .hm-region {
  font-size: 16px;
  font-weight: 600;
  color: #1A202C;
  margin-bottom: 4px;
}
.home-map-panel .hm-metric { font-size: 12px; color: #888; margin-bottom: 12px; }
.home-map-panel .hm-value {
  font-size: 22px;
  font-weight: 600;
  color: #1A4FBE;
  line-height: 1.2;
}
.home-map-panel .hm-year { font-size: 12px; color: #999; margin-top: 4px; }
.home-map-panel .hm-hint {
  margin-top: 16px;
  font-size: 12px;
  color: #b0b6c0;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .home-map-panel { width: 200px; }
  .map-drawer-panel { width: 200px; }
}