/* ============================
   移动端 CSS 变量定义
   ============================ */
:root {
  /* ===== 基础尺寸常量 ===== */
  --mobile-base-unit: 8px;

  /* AppBar 组件高度 */
  --mobile-appbar-toolbar-height: 56px;        /* MUI Toolbar 默认高度 */
  --mobile-appbar-search-height: 56px;         /* 搜索栏区域高度 */

  /* BottomNavigation 高度 */
  --mobile-bottom-nav-height: 56px;            /* MUI BottomNavigation 默认高度 */

  /* 悬浮按钮和提示的间距 */
  --mobile-fab-spacing: 16px;

  /* ===== 页面特定高度 ===== */

  /* MobileHome 页面 */
  --mobile-home-appbar-total: calc(var(--mobile-appbar-toolbar-height) + var(--mobile-appbar-search-height)); /* 112px */

  /* SpaceDetail 页面（包含 Toolbar + 空间信息 + Tab切换器，约 120px，可通过 style 属性动态覆盖） */
  --mobile-space-detail-appbar-total: 120px;

  /* ImageDetail 页面顶部工具栏 */
  --mobile-image-detail-top-bar: 56px;

  /* ===== 安全区域组合计算 ===== */

  /* MobileHome TabPanel 顶部偏移 */
  --mobile-home-tab-top: calc(var(--mobile-home-appbar-total) + env(safe-area-inset-top, 0px));

  /* MobileHome TabPanel 底部偏移（包含底部安全区域） */
  --mobile-home-tab-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px));

  /* SpaceDetail 主内容顶部偏移 */
  --mobile-space-detail-content-top: calc(var(--mobile-space-detail-appbar-total) + env(safe-area-inset-top, 0px));

  /* 悬浮按钮底部位置（BottomNav + 安全区 + 间距） */
  --mobile-fab-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + var(--mobile-fab-spacing));

  /* ===== 对话框相关变量 ===== */

  /* 对话框颜色 */
  --mobile-dialog-bg: #f5f5f5;
  --mobile-dialog-appbar-bg: #fff;
  --mobile-dialog-appbar-border: #e0e0e0;
  --mobile-dialog-footer-bg: #fff;
  --mobile-dialog-footer-border: #e0e0e0;

  /* 对话框间距 */
  --mobile-dialog-content-padding: 16px;
  --mobile-dialog-footer-padding: 16px;
}

/* ============================
   全局移动端视口约束
   ============================ */
   @media (max-width: 768px),
   ((min-width: 769px) and (max-width: 1024px) and (pointer: coarse)) {
   
     html,
     body {
       /* ✅ 让页面能自然展开，不要固定死高 */
       height: auto;
       min-height: -webkit-fill-available;
       /* Safari <16 fallback */
       min-height: 100vh;
       /* 通用回退 */
       min-height: 100dvh;
       /* 动态视口（浏览器模式） */
   
       /* ✅ 滚动/交互优化 */
       overflow-x: hidden;
       overflow-y: clip;
       /* 阻止外层滚动 */
       overscroll-behavior: none;
       -webkit-overflow-scrolling: touch;
       transform: translateZ(0);
     }
   
     #root {
       flex: 1 1;
       /* 占满可用空间但允许内部滚动 */
       display: flex;
       flex-direction: column;
       overflow: hidden;
       /* 外层不滚动，内部滚动容器自己控 */
     }
   }
   
   /* ============================
   PWA 独立窗口修正 - 使用 class 选择器
   ============================ */
   html.is-standalone,
   html.is-standalone body {
     height: auto;
     /* ✅ 不再固定死高，使用渐进增强顺序 */
     min-height: -webkit-fill-available;
     min-height: 100vh;
     min-height: 100lvh;
     /* PWA 模式用 lvh 最稳 */
   }

   html.is-standalone #root {
     flex: 1 1;
     height: auto;
   }
   
/* ============================
主容器
============================ */
.mobile-page-container {
  min-height: -webkit-fill-available;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* MobileHome 特定容器 */
.mobile-home-container {
  min-height: -webkit-fill-available;  /* Safari 旧版本回退 */
  min-height: 100vh;                   /* 基础回退 */
  min-height: 100dvh;                  /* 动态视口（浏览器模式，考虑地址栏） */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* PWA 独立窗口修正 - 使用 class 选择器 */
html.is-standalone .mobile-page-container {
  min-height: 100lvh;  /* PWA 模式用大视口，固定高度 */
}

html.is-standalone .mobile-home-container {
  min-height: 100lvh;  /* PWA 模式用大视口，固定高度 */
}

/* iOS 特定修复（如需要） */
html.is-ios.is-standalone .mobile-home-container {
  /* iOS PWA 特定样式 */
  min-height: 100lvh;
}

/* Android 特定修复（如需要） */
html.is-android.is-standalone .mobile-home-container {
  /* Android PWA 特定样式 */
  min-height: 100lvh;
}

/* ============================
   移动端通用样式类
   ============================ */

/* AppBar 固定定位基础样式 */
.mobile-appbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  padding-top: env(safe-area-inset-top, 0px);
}

/* AppBar Toolbar 高度 */
.mobile-appbar-toolbar {
  min-height: 56px;
  min-height: var(--mobile-appbar-toolbar-height);
}

/* 注意：不要强制覆盖 MUI Toolbar 的响应式高度，让其保持原生行为
   通过 JS ResizeObserver 动态测量实际高度并更新 CSS 变量 */

/* AppBar 搜索栏高度 */
.mobile-appbar-search {
  height: calc(56px - 16px);
  height: calc(var(--mobile-appbar-search-height) - 16px); /* 减去上下 padding */
}

/* MobileHome 特定 AppBar（包含搜索栏） */
.mobile-appbar--home {
  /* 继承基础 AppBar 样式 */
}

/* SpaceDetail 特定 AppBar（动态高度，通过内联样式覆盖） */
.mobile-appbar--space-detail {
  /* 可通过 style={{ '--mobile-space-detail-appbar-total': `${height}px` }} 动态设置 */
}

/* BottomNavigation 容器 - 处理安全区域和背景延伸 */
.mobile-bottom-nav-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 底部工具栏（类似 SpaceDetail） */
.mobile-bottom-toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* TabPanel 定位 - MobileHome 使用 */
.mobile-tab-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  bottom: var(--mobile-home-tab-bottom);
  overflow: hidden;

  /* 顶部 padding：AppBar高度 + 安全区 */
  padding-top: calc(calc(56px + 56px) + env(safe-area-inset-top, 0px));
  padding-top: var(--mobile-home-tab-top);

  /* bottom 属性已包含安全区域，无需额外 padding-bottom */
}

/* 我的页面的 TabPanel（没有 AppBar 搜索栏） */
.mobile-tab-panel--no-appbar {
  padding-top: calc(24px + env(safe-area-inset-top, 0px));
}

/* SpaceDetail 页面专用 - 主滚动内容区域 */
.mobile-space-detail-scroll-content {
  position: absolute;
  /* top 和 bottom 由 JS 动态设置（通过 sx prop），响应横竖屏和动态内容变化 */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-bottom: 16px;
}

/* 悬浮按钮定位 */
.mobile-fab {
  position: fixed;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 16px);
  bottom: var(--mobile-fab-bottom);
  right: 16px;
  right: var(--mobile-fab-spacing);
  z-index: 1001;
}

/* 安全区域背景延伸辅助类 - 顶部 */
.mobile-safe-area-bg-top::before {
  content: "";
  position: absolute;
  top: calc(-1 * env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background-color: inherit;
  z-index: -1;
}

/* 安全区域背景延伸辅助类 - 底部 */
.mobile-safe-area-bg-bottom::after {
  content: "";
  position: absolute;
  bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  height: env(safe-area-inset-bottom, 0px);
  background-color: inherit;
  z-index: -1;
}

/* ============================
   全屏对话框样式
   ============================ */

/* 全屏对话框基础样式 - 应用到 Dialog 组件 */
.mobile-dialog-fullscreen .MuiDialog-paper {
  display: flex;
  flex-direction: column;
  /* height: 100dvh; */
  min-height: -webkit-fill-available;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  max-width: 100%;
  border-radius: 0;
  background-color: #f5f5f5;
  background-color: var(--mobile-dialog-bg);
  overflow: hidden;
}

/* PWA 模式特殊处理 */
html.is-standalone .mobile-dialog-fullscreen .MuiDialog-paper {
  height: 100lvh;
  min-height: 100lvh;
}

/* iOS PWA 特殊处理 */
html.is-ios.is-standalone .mobile-dialog-fullscreen .MuiDialog-paper {
  height: 100lvh;
  min-height: 100lvh;
}

/* 对话框头部 AppBar */
.mobile-dialog-appbar {
  position: static !important;
  background-color: #fff !important;
  background-color: var(--mobile-dialog-appbar-bg) !important;
  color: #000 !important;
  border-bottom: 1px solid #e0e0e0;
  border-bottom: 1px solid var(--mobile-dialog-appbar-border);
  flex-shrink: 0;
}

/* 对话框头部 Toolbar */
.mobile-dialog-appbar-toolbar {
  padding-top: env(safe-area-inset-top, 0px);
  min-height: 56px;
  min-height: var(--mobile-appbar-toolbar-height);
}

/* 对话框内容区 */
.mobile-dialog-content {
  flex: 1 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* 带内边距的内容区 */
.mobile-dialog-content--with-padding {
  padding: 16px;
  padding: var(--mobile-dialog-content-padding);
}

/* 对话框底部操作区 */
.mobile-dialog-footer {
  background-color: #fff;
  background-color: var(--mobile-dialog-footer-bg);
  border-top: 1px solid #e0e0e0;
  border-top: 1px solid var(--mobile-dialog-footer-border);
  padding: 16px;
  padding: var(--mobile-dialog-footer-padding);
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  padding-bottom: calc(var(--mobile-dialog-footer-padding) + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
}

/* 无边框的底部操作区 */
.mobile-dialog-footer--no-border {
  border-top: none;
}

/* 透明背景的底部操作区 */
.mobile-dialog-footer--transparent {
  background-color: transparent;
  border-top: none;
}

/* ============================
   全屏抽屉样式（支持下拉关闭）
   ============================ */

/* 全屏抽屉基础样式 - 应用到 SwipeableDrawer 组件 */
.mobile-drawer-fullscreen .MuiDrawer-paper {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: -webkit-fill-available;
  min-height: 100vh;
  min-height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  max-width: 100%;
  border-radius: 0;
  background-color: #f5f5f5;
  background-color: var(--mobile-dialog-bg);
  overflow: hidden;
}

/* PWA 模式特殊处理 */
html.is-standalone .mobile-drawer-fullscreen .MuiDrawer-paper {
  height: 100lvh;
  min-height: 100lvh;
  max-height: 100lvh;
}

/* iOS PWA 特殊处理 */
html.is-ios.is-standalone .mobile-drawer-fullscreen .MuiDrawer-paper {
  height: 100lvh;
  min-height: 100lvh;
  max-height: 100lvh;
}

/* 注意：Drawer 复用 Dialog 的 AppBar、Content、Footer 样式类 */
/* 即 mobile-dialog-appbar, mobile-dialog-content, mobile-dialog-footer 等 */

/* ============================
   全屏Portal覆盖层样式
   ============================ */

/* 全屏Portal容器 - 用于createPortal渲染的全屏视图（如图片缩放查看器） */
.mobile-fullscreen-portal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  min-height: -webkit-fill-available;
  min-height: 100vh;
  /* padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px); */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1400; /* 高于Dialog的1300 */
}

/* PWA模式优化 */
html.is-standalone .mobile-fullscreen-portal {
  height: 100lvh;
  min-height: 100lvh;
}

/* ============================
   安全区域定位辅助类
   用于在全屏覆盖层中定位按钮和元素，自动避开安全区域
   ============================ */

/* 顶部左侧定位 - 考虑安全区域 */
.mobile-positioned--top-left-safe {
  position: absolute !important;
  top: calc(20px + env(safe-area-inset-top, 0px)) !important;
  left: 20px !important;
  right: auto !important;
  z-index: 10;
}

/* 顶部右侧定位 - 考虑安全区域 */
.mobile-positioned--top-right-safe {
  position: absolute !important;
  top: calc(20px + env(safe-area-inset-top, 0px)) !important;
  left: auto !important;
  right: 20px !important;
  z-index: 10;
}

/* 顶部居中定位 - 考虑安全区域 */
.mobile-positioned--top-center-safe {
  position: absolute !important;
  top: calc(20px + env(safe-area-inset-top, 0px)) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 10;
}

/* 底部居中定位 - 考虑安全区域 */
.mobile-positioned--bottom-center-safe {
  position: absolute !important;
  top: auto !important;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 10;
}

/* 底部左侧定位 - 考虑安全区域 */
.mobile-positioned--bottom-left-safe {
  position: absolute !important;
  top: auto !important;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  left: 20px !important;
  right: auto !important;
  z-index: 10;
}

/* 底部右侧定位 - 考虑安全区域 */
.mobile-positioned--bottom-right-safe {
  position: absolute !important;
  top: auto !important;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  left: auto !important;
  right: 20px !important;
  z-index: 10;
}

/* ============================
   通用滚动内容区样式
   用于页面级的主内容滚动容器
   ============================ */

/* 通用滚动内容区 - 基础样式 */
.mobile-scrollable-content {
  flex: 1 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* 滚动内容区 - 带 AppBar 偏移（标准 AppBar 高度约 64px + 安全区） */
.mobile-scrollable-content--with-appbar {
  padding-top: calc(64px + env(safe-area-inset-top, 0px));
}

/* 滚动内容区 - 带底部安全区域 */
.mobile-scrollable-content--with-bottom-safe {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
}

/* ============================
   GlobalSearch 页面专用样式
   ============================ */

/* GlobalSearch 页面变量 */
:root {
  --mobile-global-search-appbar-height: 56px;
  --mobile-global-search-filter-max-height: 400px;
}

/* GlobalSearch 页面容器 */
.mobile-global-search-container {
  height: 100dvh;
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

/* GlobalSearch AppBar - 固定在顶部（颜色通过 sx 设置） */
.mobile-global-search-appbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  padding-top: env(safe-area-inset-top, 0px);
}

/* AppBar 背景延伸到安全区域 */
.mobile-global-search-appbar::before {
  content: "";
  position: absolute;
  top: calc(-1 * env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background-color: #ffffff;
  z-index: -1;
}

/* GlobalSearch 筛选面板外层容器（用于 Collapse） */
.mobile-global-search-filters-wrapper {
  position: relative;
  z-index: 1099;
}

/* GlobalSearch 筛选面板内容（Paper） */
.mobile-global-search-filters {
  position: fixed;
  top: calc(56px + env(safe-area-inset-top, 0px));
  top: calc(var(--mobile-global-search-appbar-height) + env(safe-area-inset-top, 0px));
  left: 8px;
  right: 8px;
  margin-top: 4px;
  border-radius: 8px;
  background-color: #f7f7f7;
  border: 1px solid #e5e5e5;
  overflow: hidden;
  max-height: 400px;
  max-height: var(--mobile-global-search-filter-max-height);
  overflow-y: auto;
}

/* GlobalSearch 主内容区域 */
.mobile-global-search-content {
  flex: 1 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-top: calc(56px + env(safe-area-inset-top, 0px));
  padding-top: calc(var(--mobile-global-search-appbar-height) + env(safe-area-inset-top, 0px));
}

/* 搜索历史容器 */
.mobile-search-history {
  padding: 16px;
}

/* 搜索历史标题 */
.mobile-search-history-title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 8px;
}

/* 搜索历史芯片容器 */
.mobile-search-history-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 空状态容器（无结果、搜索中） */
.mobile-search-empty-state {
  text-align: center;
  padding: 32px 16px;
}

/* 搜索结果容器 */
.mobile-search-results {
  padding: 8px 8px 8px 8px;
}

/* ============================
   ImageDetail 专用样式
   ============================ */

/* ImageDetail 主 Drawer */
.mobile-image-detail-drawer {
  /* 继承 Dialog 样式，但针对 ImageDetail 特殊需求优化 */
}

.mobile-image-detail-drawer .MuiPaper-root {
  min-height: -webkit-fill-available;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #fff;
  border-radius: 0;
}

/* PWA 模式优化 */
html.is-standalone .mobile-image-detail-drawer .MuiPaper-root {
  height: 100lvh;
  min-height: 100lvh;
}

/* ImageDetail 全屏容器 */
.mobile-image-detail-container {
  min-height: -webkit-fill-available;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100vw;
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

/* PWA 模式 */
html.is-standalone .mobile-image-detail-container {
  min-height: 100lvh;
}

/* ImageDetail 顶部控制栏 */
.mobile-image-detail-top-bar {
  position: relative;
  z-index: 10;
  background-color: white;
  border-bottom: 1px solid #e0e0e0;
  padding: 8px 16px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
}

/* ImageDetail 主内容区域（拍立得展示区） */
.mobile-image-detail-content {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background-color: #f8f8f8;
}

/* ImageDetail 底部控制栏 */
.mobile-image-detail-bottom-bar {
  position: relative;
  z-index: 10;
  background-color: #fafafa;
  border-top: 1px solid #e8e8e8;
  padding: 20px 16px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ImageDetail 信息侧滑面板 - 最大 80% 高度，不是全屏 */
.mobile-image-detail-info-drawer .MuiPaper-root {
  max-height: 80vh !important;
  height: 80% !important;
  background-color: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* 动态视口支持 */
@supports (height: 80dvh) {
  .mobile-image-detail-info-drawer .MuiPaper-root {
    max-height: 80dvh !important;
  }
}

/* ImageDetail 更多操作 Drawer - 自适应高度，不全屏 */
.mobile-image-detail-more-drawer .MuiPaper-root {
  height: auto !important;
  max-height: 70vh !important;
  background-color: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* ImageDetail Magic 主菜单 Drawer - 自适应高度，不全屏 */
.mobile-image-detail-magic-drawer .MuiPaper-root {
  height: auto !important;
  max-height: 75vh !important;
  background-color: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* ImageDetail Magic 子菜单 Drawer - 最大 70% 高度 */
.mobile-image-detail-magic-submenu-drawer .MuiPaper-root {
  height: auto !important;
  max-height: 70vh !important;
  background-color: #fff;
  border-radius: 20px 20px 0 0;
}

/* 动态视口支持 - Magic 菜单 */
@supports (height: 75dvh) {
  .mobile-image-detail-magic-drawer .MuiPaper-root {
    max-height: 75dvh !important;
  }

  .mobile-image-detail-magic-submenu-drawer .MuiPaper-root {
    max-height: 70dvh !important;
  }

  .mobile-image-detail-more-drawer .MuiPaper-root {
    max-height: 70dvh !important;
  }
}

/* ImageDetail 结果展示 Drawer（手办/增强结果）- 较大高度以展示生成结果 */
.mobile-image-detail-result-drawer .MuiPaper-root {
  height: 90vh !important;
  max-height: 90vh !important;
  background-color: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

/* 动态视口支持 */
@supports (height: 90dvh) {
  .mobile-image-detail-result-drawer .MuiPaper-root {
    height: 90dvh !important;
    max-height: 90dvh !important;
  }
}