/* Route 客户端体验 — 轻量调试与场景联动 */
.route-load-mode-badge {
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 1200;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 10px;
  opacity: 0.72;
  pointer-events: none;
  font-weight: 500;
}
.route-load-mode-badge.pkg {
  background: rgba(5, 150, 105, 0.85);
  color: #fff;
}
.route-load-mode-badge.route {
  background: rgba(217, 119, 6, 0.85);
  color: #fff;
}

.route-toast {
  position: fixed;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 41, 59, 0.92);
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  z-index: 1300;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}
.route-toast.show { opacity: 1; }

/* node_guide 内嵌侧滑：在 .page 内从右逐步覆盖 route，底图不卸载 */
.node-guide-overlay {
  position: absolute;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
  overflow: hidden;
}

.node-guide-overlay.open {
  pointer-events: auto;
}

.node-guide-overlay iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #f4f4f5;
  box-shadow: -6px 0 20px rgba(0, 0, 0, 0.18);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
}

.node-guide-overlay.open iframe {
  transform: translateX(0);
}

.scene-flow-row-selected {
  background: rgba(0, 0, 0, 0.36) !important;
  outline: none !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.scene-flow-sub-bind { font-size: 11px; line-height: 1.35; opacity: 0.88; }
.scene-flow-sub-bind.has-cards { color: #86efac; }
.scene-flow-sub-bind.no-cards { color: rgba(255, 255, 255, 0.55); }

.scene-flow-row.has-cards { cursor: pointer; }

/* 视频模式：仅 CSS 隐藏，不走 inline style */
body.video-mode #sceneDrawerPanel,
body.video-mode #sceneDrawerHandle {
  display: none !important;
}

/* 抽屉打开时隐藏底部拉手，避免双箭头 */
.scene-drawer-panel.open ~ .scene-drawer-handle,
.scene-drawer-panel.open ~ #sceneDrawerHandle,
.map-wrapper:has(.scene-drawer-panel.open) .scene-drawer-handle,
.map-wrapper:has(.scene-drawer-panel.open) #sceneDrawerHandle {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 关闭态：panel 完全藏底，header 三角不可见 */
#sceneDrawerPanel.scene-drawer-panel:not(.open) {
  transform: translateY(100%) !important;
  pointer-events: none !important;
}

#sceneDrawerPanel.scene-drawer-panel.open {
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* 禁止 handle 容器自身变成 CSS 三角（只允许内部 .scene-drawer-arrow） */
.scene-drawer-handle,
#sceneDrawerHandle,
.scene-drawer-bottom-handle {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  background: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* 清理遗留动态按钮（若脚本未跑到 reset） */
#drawerOpenButton,
#sceneDrawerCloseBar {
  display: none !important;
  pointer-events: none !important;
}

/* =========================================================
   P0 · 场景抽屉毛玻璃 v2.1
   场景条 = 天气条色；缝隙浅毛玻璃；选中更深；仅 route-client.css
   ========================================================= */

/* 抽屉底板：缝隙区浅色毛玻璃，可透出地图 */
#sceneDrawerPanel.scene-drawer-panel {
  background: rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.30) !important;
  border-radius: 16px 16px 0 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-bottom: none !important;
  overflow: hidden !important;
}

/* Header：色调更浅 */
#sceneDrawerPanel .scene-drawer-header {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 10px 12px !important;
}

#sceneDrawerPanel .scene-drawer-header-left,
#sceneDrawerPanel .scene-drawer-header-right {
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-shadow: none !important;
}

/* 折叠胶囊：底座加宽，三角向下 ▼ */
#sceneDrawerPanel .scene-drawer-header-center {
  width: auto !important;
  flex: 0 0 auto !important;
}

#sceneDrawerPanel .scene-drawer-header-button {
  width: 136px !important;
  min-width: 136px !important;
  height: 32px !important;
  border-radius: 16px !important;
  background: rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#sceneDrawerPanel .scene-drawer-header-button .scene-drawer-header-arrow,
#sceneDrawerPanel .scene-drawer-header-arrow {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-left: 10px solid transparent !important;
  border-right: 10px solid transparent !important;
  border-top: 10px solid #ffffff !important;
  border-bottom: 0 !important;
  transform: none !important;
  background: none !important;
}

/* 底部上拉拉手：更宽底座，▲ 向上 */
.scene-drawer-handle {
  position: absolute !important;
  left: 50% !important;
  bottom: 60px !important;
  transform: translateX(-50%) !important;
  z-index: 840 !important;
  cursor: pointer !important;
}

.scene-drawer-handle .scene-drawer-button {
  cursor: pointer !important;
}

.scene-drawer-handle--active .scene-drawer-arrow,
.scene-drawer-handle--has-selection .scene-drawer-arrow {
  border-bottom-color: #d32f2f !important;
}

.scene-drawer-handle .scene-drawer-button {
  width: 136px !important;
  min-width: 136px !important;
  height: 32px !important;
  border-radius: 16px !important;
  background: rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.scene-drawer-handle .scene-drawer-arrow {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-style: solid !important;
  border-left: 10px solid transparent !important;
  border-right: 10px solid transparent !important;
  border-bottom: 10px solid #ffffff !important;
  border-top: 0 !important;
  background: none !important;
}

/* 列表区：透明，缝隙露出底板浅毛玻璃 */
#sceneDrawerPanel .drawer-inner,
#sceneDrawerPanel .legacy-drawer-inner,
#sceneDrawerPanel #dynamicDrawerContent,
#sceneDrawerPanel .scene-flow {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#sceneDrawerPanel .drawer-inner,
#sceneDrawerPanel .legacy-drawer-inner {
  padding: 8px 0 12px 0 !important;
}

#sceneDrawerPanel .scene-flow {
  padding: 0 !important;
}

#sceneDrawerPanel .scene-flow-table {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  overflow: visible !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
}

/* 场景条 = 天气条 .elev-weather-text 同色 */
#sceneDrawerPanel .scene-flow-table .scene-flow-row {
  background: rgba(0, 0, 0, 0.18) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
}

#sceneDrawerPanel .scene-flow-table .scene-flow-row:nth-child(even),
#sceneDrawerPanel .scene-flow-table .scene-flow-row:nth-child(odd) {
  background: rgba(0, 0, 0, 0.18) !important;
}

/* 点中 / 当前：更深一点 */
#sceneDrawerPanel .scene-flow-table .scene-flow-row.scene-flow-row-current,
#sceneDrawerPanel .scene-flow-table .scene-flow-row.scene-flow-row-selected {
  background: rgba(0, 0, 0, 0.36) !important;
  outline: none !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}

#sceneDrawerPanel .scene-flow-table .scene-flow-row.scene-flow-row-current .scene-flow-title,
#sceneDrawerPanel .scene-flow-title {
  color: #ffffff !important;
  text-shadow: none !important;
}

#sceneDrawerPanel .scene-flow-sub {
  color: rgba(255, 255, 255, 0.72) !important;
  text-shadow: none !important;
}

#sceneDrawerPanel .scene-flow-sub-bind.has-cards {
  color: rgba(134, 239, 172, 0.95) !important;
}

/* 参数行容器：预留 2–3 行（地形 / 路面 / 天气） */
#sceneDrawerPanel .scene-flow-params {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
  min-height: 0;
}

#sceneDrawerPanel .scene-flow-sub-param {
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72) !important;
}

#sceneDrawerPanel .scene-flow-sub-param.scene-flow-sub-bind.has-cards {
  color: rgba(134, 239, 172, 0.95) !important;
}

/* 距离标签：Apple 系统绿 #34C759 */
#sceneDrawerPanel .scene-flow-distance,
#sceneDrawerPanel .scene-flow-distance.scene-flow-distance-green {
  background: #34C759 !important;
  background-color: #34C759 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 4px rgba(52, 199, 89, 0.35) !important;
}

#sceneDrawerPanel .scene-flow-bar-fill {
  background: #34C759 !important;
  background-color: #34C759 !important;
}