/* ============================================================
   nav-layout.css —— 导航形态（抽屉 / 浮动按钮）
   全部使用 theme-base.css 的主题变量，切换主题自动跟随
   ============================================================ */

/* ---------- 抽屉遮罩 ---------- */
.nav-drawer-mask{
  position:fixed;inset:0;z-index:1200;
  background:rgba(10,12,16,.42);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .26s var(--premium-ease);
}
.nav-drawer-mask.show{opacity:1}

/* ---------- 抽屉本体 ---------- */
.nav-drawer{
  position:fixed;top:0;left:0;bottom:0;z-index:1201;
  width:min(84vw,340px);
  display:flex;flex-direction:column;
  background:var(--theme-card-bg);
  border-right:1px solid var(--theme-card-line);
  box-shadow:0 12px 48px rgba(12,14,20,.22);
  transform:translateX(-102%);
  transition:transform .28s var(--premium-ease);
  overscroll-behavior:contain;
}
.nav-drawer.open{transform:translateX(0)}

.nav-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:20px 18px 16px;
  border-bottom:1px solid var(--theme-card-line);
}
.nav-drawer-brand{display:flex;flex-direction:column;gap:2px;line-height:1.2}
.nav-drawer-brand strong{font-size:17px;color:var(--theme-ink);letter-spacing:.4px}
.nav-drawer-brand small{
  font-size:10px;letter-spacing:2.4px;color:var(--theme-ink-soft);opacity:.75;
}
.nav-drawer-close{
  width:34px;height:34px;flex:0 0 34px;
  display:grid;place-items:center;
  border:none;border-radius:11px;cursor:pointer;
  background:transparent;color:var(--theme-ink-soft);
  transition:background .18s var(--premium-ease),color .18s var(--premium-ease);
}
.nav-drawer-close:hover{background:var(--theme-accent-soft);color:var(--theme-ink)}
.nav-drawer-close svg{width:17px;height:17px}

/* ---------- 抽屉菜单列表 ---------- */
.nav-drawer-list{
  flex:1;min-height:0;overflow-y:auto;
  padding:12px 12px 20px;
  -webkit-overflow-scrolling:touch;
}
.nav-drawer-item{
  display:flex;align-items:center;gap:13px;
  padding:13px 12px;margin-bottom:6px;
  border-radius:14px;text-decoration:none;
  color:var(--theme-ink);
  font-size:15px;font-weight:500;
  transition:background .18s var(--premium-ease),transform .18s var(--premium-ease);
}
.nav-drawer-item:hover{background:var(--theme-accent-soft)}
.nav-drawer-item:active{transform:scale(.985)}
.nav-drawer-item.on{
  background:var(--theme-accent-soft);
  box-shadow:inset 0 0 0 1px var(--theme-accent-soft);
}
.nav-drawer-item.on .nav-drawer-text{font-weight:700;color:var(--brand)}

.nav-drawer-icon{
  width:36px;height:36px;flex:0 0 36px;
  display:grid;place-items:center;
  border-radius:11px;
  background:var(--theme-accent-soft);
  color:var(--theme-accent-2);
  transition:background .18s var(--premium-ease),color .18s var(--premium-ease);
}
.nav-drawer-icon svg{width:19px;height:19px}
.nav-drawer-item.on .nav-drawer-icon{
  background:linear-gradient(135deg,var(--brand),var(--theme-accent-2));
  color:#fff;
}
.nav-drawer-text{flex:1;min-width:0}
.nav-drawer-badge{
  min-width:19px;height:19px;padding:0 5px;
  display:inline-grid;place-items:center;
  border-radius:999px;font-size:11px;font-weight:700;line-height:1;
  background:var(--brand);color:#fff;
}

/* ---------- 抽屉底部 ---------- */
.nav-drawer-foot{
  padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--theme-card-line);
}
.nav-drawer-user{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--theme-ink);
  font-size:14px;font-weight:600;
}
.nav-drawer-avatar{
  width:34px;height:34px;flex:0 0 34px;
  display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--theme-accent-2));
  color:#fff;font-size:15px;font-weight:700;
}
.nav-drawer-login{
  display:block;text-align:center;text-decoration:none;
  padding:12px;border-radius:13px;
  background:linear-gradient(135deg,var(--brand),var(--theme-accent-2));
  color:#fff;font-size:15px;font-weight:700;
  box-shadow:0 4px 14px var(--theme-btn-shadow);
}

/* ---------- 抽屉打开时锁滚动 ---------- */
body.nav-drawer-locked{overflow:hidden}

/* ---------- 浮动按钮（抽屉入口）---------- */
.nav-fab{
  position:fixed;z-index:1100;
  right:20px;bottom:calc(88px + env(safe-area-inset-bottom,0px));
  width:52px;height:52px;
  display:grid;place-items:center;
  border:none;border-radius:16px;cursor:pointer;
  background:linear-gradient(135deg,var(--brand),var(--theme-accent-2));
  color:#fff;
  box-shadow:0 8px 26px var(--theme-btn-shadow),0 2px 8px rgba(12,14,20,.14),
             0 0 0 3px rgba(255,255,255,.55);
  transition:transform .2s var(--premium-ease),box-shadow .2s var(--premium-ease),filter .2s;
  -webkit-tap-highlight-color:transparent;
}
.nav-fab:hover{filter:brightness(1.06);box-shadow:0 12px 32px var(--theme-btn-shadow)}
.nav-fab:active{transform:scale(.94)}
.nav-fab svg{width:22px;height:22px}

/* ---------- 回到顶部按钮 ---------- */
.backtop-fab{
  position:fixed;z-index:1100;
  right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));
  width:46px;height:46px;
  display:grid;place-items:center;
  border:1px solid var(--theme-card-line);border-radius:50%;cursor:pointer;
  background:var(--theme-topbar-bg);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:var(--theme-ink);
  box-shadow:0 6px 20px rgba(12,14,20,.12);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .24s var(--premium-ease),transform .24s var(--premium-ease),
             visibility .24s var(--premium-ease),background .18s;
}
.backtop-fab.show{opacity:1;visibility:visible;transform:translateY(0)}
.backtop-fab:hover{background:var(--theme-card-bg)}
.backtop-fab svg{width:19px;height:19px}

/* ---------- 仅顶部导航条模式：隐藏底部 tabbar ---------- */
body.nav-layout-topbar_only .tabbar{display:none !important}
body.nav-layout-topbar_only .wrap{padding-bottom:32px}

/* 关键：app.css 在 <=820px 把 .topbar .nav 默认隐藏（靠 tabbar 导航）。
   topbar_only 模式没有 tabbar，必须把顶部横排导航强制显示，否则移动端无导航入口。 */
@media (max-width:820px){
  body.nav-layout-topbar_only .topbar .nav{
    display:flex !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:0 12px 8px;
    gap:6px;
  }
  body.nav-layout-topbar_only .topbar{
    position:sticky;top:0;z-index:200;
  }
  /* 顶部导航条模式下，浮动按钮上移，避免与内容重叠 */
  body.nav-layout-topbar_only .backtop-fab{
    bottom:calc(24px + env(safe-area-inset-bottom,0px));
  }
}

/* ---------- 抽屉模式：隐藏底部 tabbar，顶部导航条收起 ---------- */
body.nav-layout-drawer .tabbar{display:none !important}
body.nav-layout-drawer .topbar .nav{display:none !important}
body.nav-layout-drawer .wrap{padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}

/* 桌面端抽屉模式的浮动按钮位置抬高，避开可能存在的底部元素 */
@media (min-width:900px){
  .nav-fab{bottom:28px;right:28px}
  .backtop-fab{bottom:28px;right:28px}
}

/* ---------- 移动端安全区适配 ---------- */
@media (max-width:640px){
  .nav-fab{
    width:48px;height:48px;border-radius:15px;
    right:20px;bottom:calc(84px + env(safe-area-inset-bottom,0px));
  }
  .nav-fab svg{width:20px;height:20px}
}

/* ---------- 尊重减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  .nav-drawer,.nav-drawer-mask,.nav-fab,.backtop-fab,
  .nav-drawer-item,.nav-drawer-icon{
    transition:none !important;
  }
}