/**
 * WEVEEEE Components（通用布局骨架）
 * 说明：
 * - `partials/weveeee_shell_start.html` 只输出 DOM 壳，不包含布局 CSS。
 * - 过去这些“骨架样式”零散存在于 `tushengtu-merged.css` 等页面级文件中，
 *   导致像 `modules_intro` 这类页面引入新版壳后出现布局/左侧导航不一致。
 * - 本文件用于沉淀：新壳的通用布局、滚动骨架、旧壳隐藏等。
 */

/* Hide legacy nav/overlay shells (old base layout) */
.app-sidebar,
.sidebar-hover-zone,
.sidebar-overlay,
.mobile-menu-btn,
.top-nav-bar {
  display: none !important;
}

/* merged_ui skeleton: black app background + light main container */
html {
  background: var(--sidebar-bg) !important;
}

body {
  display: flex !important;
  /* 关键：对抗 legacy style.css 的 body{flex-direction:column}，确保侧栏在左、主容器在右 */
  flex-direction: row !important;
  height: 100vh !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--sidebar-bg) !important;
  font-family: var(--ds-font-sans) !important;
}

/* Sidebar participates in layout (override template's fixed positioning) */
#newSidebar.new-nav-sidebar {
  position: relative !important;
  inset: auto !important;
  height: 100vh !important;
  z-index: 9999 !important;
}

/* Main container */
#newMainContainer.new-main-container {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100vh !important;
  background: var(--bg-app) !important;
  border-radius: 40px 0 0 40px !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.30) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  left: auto !important; /* 兼容旧 JS 写入 left 的场景，骨架以 flex 为准 */
}

/* Header in normal flow */
#newHeaderInner.new-nav-header {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 72px !important;
  height: 72px !important;
  border-radius: 40px 0 0 0 !important;
}

/* Content fills remaining space */
.new-content-area {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ========================================================================
   Edge Toggle Buttons（左右折叠按钮）
   说明：按钮 DOM 在 weveeee_shell_start.html 中存在，但样式此前散落在页面级 merged css。
        缺失时可能出现覆盖/不可点/影响 hover，从而让“侧栏无法展开”看起来像失效。
   ======================================================================== */
.edge-toggle-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: rgba(0, 0, 0, 0.55) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.10) !important;
  transition: transform 0.12s ease, background-color 0.18s ease, color 0.18s ease !important;
  user-select: none !important;
}

.edge-toggle-btn:hover {
  color: var(--primary) !important;
  background: rgba(var(--primary-rgb), 0.05) !important;
}

.edge-toggle-btn:active {
  transform: scale(0.96) !important;
}

/* 左侧边缘折叠按钮：注意 left 不用 !important，留给 JS 动态调整 */
#leftEdgeToggle.left-edge-toggle.edge-toggle-btn {
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10010 !important;
  left: 80px;
  transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 右侧边缘折叠按钮（若页面存在） */
#rightEdgeToggle.right-edge-toggle.edge-toggle-btn {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10010 !important;
}

/* Responsive: Tablet (< 1024px) */
@media (max-width: 1023px) {
  #newSidebar.new-nav-sidebar {
    display: none !important;
  }

  #newMainContainer.new-main-container {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* Responsive: Mobile (< 768px) */
@media (max-width: 768px) {
  body {
    overflow: auto !important;
    background: var(--bg-app) !important;
  }

  #newMainContainer.new-main-container {
    border-radius: 0 !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 100vh !important;
  }

  #newHeaderInner.new-nav-header {
    border-radius: 0 !important;
  }

  .new-content-area {
    overflow: visible !important;
  }
}