/* ================================================================
   dock.css — 站点底部 dock 导航
   设计理念：浮空玻璃药丸 · 柔光激活态 · 丝滑交互
   ================================================================ */

/* --- dock 主体 --- */
.site-dock {
  display: none;
  position: fixed;
  left: 50%;
  right: auto;
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 10000;
  width: auto;
  max-width: calc(100vw - var(--space-6));
  box-sizing: border-box;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom));
  border-radius: var(--radius-2xl);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.site-dock::-webkit-scrollbar {
  display: none;
}

/* 启用条件 */
body.dock-mode .site-dock,
body.dock-always .site-dock {
  display: flex;
}

/* --- dock 项 --- */
.site-dock-item {
  flex-shrink: 0;
  min-width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  border-radius: var(--radius);
  color: var(--text-soft);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
}

/* 深色主题：dock 明确用深邃玻璃底 + 浅色文字，保证跟随主题切换。
   提高不透明度，避免半透明玻璃透出背后浅色内容导致视觉上"不变色"。 */
.theme-dark .site-dock {
  background: rgba(13, 20, 38, 0.88) !important;
  border-color: rgba(99, 132, 220, 0.25) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
}

.theme-dark .site-dock-item {
  color: #aebad0;
}

.theme-dark .site-dock-item.active {
  background: var(--brand-grad);
  color: #fff;
}

.theme-dark .dock-theme {
  color: #aebad0;
}

.site-dock-item .ic {
  font-size: 1.125rem;
  line-height: 1;
}

/* dock 内主题切换按钮：重置 button 默认样式，图标随主题切换（浅色月亮 / 深色太阳） */
.dock-theme {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-main);
  color: var(--text-soft);
}
.dock-theme .ic-sun { display: none; }
.dock-theme .ic-moon { display: inline; }
.theme-dark .dock-theme .ic-sun { display: inline; }
.theme-dark .dock-theme .ic-moon { display: none; }
.theme-dark .dock-theme { color: var(--text-soft); }
.dock-theme:active,
.dock-theme:hover {
  background: rgba(var(--brand-rgb), 0.08);
  color: var(--brand);
}

.site-dock-item:active,
.site-dock-item:hover {
  background: rgba(var(--brand-rgb), 0.08);
  color: var(--brand);
}

.site-dock-item:active {
  transform: scale(0.94);
}

.site-dock-item.active {
  background: var(--brand-grad);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(var(--brand-rgb), 0.35);
}

.site-dock-item.active:hover {
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--brand-rgb), 0.45);
}

/* --- 顶部菜单折叠 --- */
body.dock-mode .nav-links,
body.dock-mode .nav-cta,
body.dock-mode .nav-toggle {
  display: none;
}

body.dock-mode {
  padding-bottom: 88px;
}

/* 小屏兜底 */
@media (max-width: 900px) {
  body:not(.dock-always) .nav-links,
  body:not(.dock-always) .nav-cta,
  body:not(.dock-always) .nav-toggle {
    display: none;
  }

  body:not(.dock-always) .site-dock {
    display: flex;
  }

  body:not(.dock-always) {
    padding-bottom: 88px;
  }
}

/* 低配置降级 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .site-dock {
    background: var(--surface);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-dock {
    background: var(--surface);
  }
}

@media (max-width: 480px) {
  .site-dock {
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  }
}

/* --- 后台页 dock 融合 --- */
body.admin-page .site-dock {
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
}

body.admin-page .dock-nav-group,
body.admin-page .dock-module-group {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  /* PC 端：透明继承外层 .site-dock 玻璃底，不形成"框中框" */
  background: transparent;
  border: none;
}

body.admin-page .dock-chevron {
  display: none;
}

@media (max-width: 900px) {
  /* 整个底栏作为一块整体毛玻璃容器：玻璃底 + 模糊 + 圆角 + 阴影
     套用在 .site-dock 上，两组 dock 内部透明排布，避免间隙出现两圈毛玻璃背板 */
  body.admin-page .site-dock {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 4px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    border-radius: var(--radius-xl);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-md);
    overflow: visible;
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  }

  /* 深浅主题下强化玻璃质感
     注意：theme-dark class 挂在 <html> 上，必须用 html:not(.theme-dark) 判断浅色，
     用 body:not(.theme-dark) 会永远为真（body 从不带 theme-dark），导致暗黑下 dock 仍是白底 */
  .theme-dark body.admin-page .site-dock {
    background: rgba(15, 23, 42, 0.6);
  }

  html:not(.theme-dark) body.admin-page .site-dock {
    background: rgba(255, 255, 255, 0.6);
  }

  /* 内部两组 dock：透明，仅负责排列与横向滚动 */
  body.admin-page .dock-nav-group,
  body.admin-page .dock-module-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    box-sizing: border-box;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  /* 不支持 backdrop-filter 时整体降级为实色表面 */
  @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    body.admin-page .site-dock {
      background: var(--surface);
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    body.admin-page .site-dock {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: var(--surface);
    }
  }

  body.admin-page .dock-nav-group {
    width: 100%;
    justify-content: center;
  }

  body.admin-page .dock-nav-group::-webkit-scrollbar,
  body.admin-page .dock-module-group::-webkit-scrollbar {
    display: none;
  }

  /* 模块栏：独立圆角 / 阴影，重叠浮于整体毛玻璃之上，制造层次感 */
  body.admin-page .dock-module-group {
    width: 100%;
    gap: var(--space-1);
    padding: 4px 8px;
    border-radius: var(--radius);
    background: rgba(var(--brand-rgb), 0.06);
    box-shadow: var(--shadow-sm);
  }

  .theme-dark body.admin-page .dock-module-group {
    background: rgba(99, 102, 241, 0.12);
  }

  /* 统一模块项与导航项尺寸（icon / label / padding），保证两组 dock 协调一致 */
  body.admin-page .dock-module-group .admin-nav-item {
    flex: 0 0 auto;
    min-width: 52px;
    padding: 6px 10px;
    gap: 2px;
    border-radius: var(--radius);
    white-space: nowrap;
  }

  body.admin-page .dock-module-group .admin-nav-item .nav-icon {
    font-size: 1.125rem;
    line-height: 1;
  }

  body.admin-page .dock-module-group .admin-nav-item span:not(.nav-icon) {
    font-size: 0.6875rem;
    line-height: 1.1;
  }

  body.admin-page .dock-module-group .admin-nav-item:hover,
  body.admin-page .dock-module-group .admin-nav-item.active {
    transform: translateY(-2px);
  }

  body.admin-page .dock-sep {
    display: none;
  }

  body.admin-page .dock-chevron {
    display: none;
  }
}

/* --- 网关态 --- */
body.admin-page.gateway-open .site-dock {
  z-index: 10000;
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
}

body.gateway-open .dock-sep {
  display: none;
}

body.gateway-open .dock-module-group {
  display: none !important;
}

body.gateway-open .dock-chevron {
  display: none !important;
}

body.gateway-open .admin-gateway {
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}