/* ================================================================
   nav.css —— 全局导航的样式（桌面顶栏 / 手机底部 tab）
   ----------------------------------------------------------------
   和 nav.js 配套。分两部分：
     · 通用部分：两个视口都成立的排版、配色、交互态
     · 媒体查询：≥ 900px 显示顶栏、< 900px 显示底部 tab

   配色：沿用 styles.css 的变量（--bg / --ink / --accent / --line），
   所以明暗主题只要在那套变量上覆盖，导航自动跟着走。
   ⚠️ 修图页是**暗色**的，它的 theme 变量跟主站不是一套（见 studio.css）。
   那里用 `.studio-page` 前缀覆盖几个关键变量即可，不要复制整段样式 ——
   复制就意味着以后改一处要改两处。

   ⚠️ 底部 tab 与沉浸态：
   大图查看器（#viewer）和幻灯片（#show）的底栏本来就在屏幕底部，
   再叠一层底部 tab 会互相压住。所以约定一个 body 类：
       body.nav-immersive  → 底部 tab 隐藏
   由页面在打开/关闭沉浸态时调用 window.AlbumNav.immersive(true/false)。
   ================================================================ */

:root {
  /* 顶栏高度。sticky 元素靠它定位，别在各页面写魔数。 */
  --nav-h: 56px;
  --nav-bottom-h: 56px;
}

/* ---------------- 通用 ---------------- */
.nav-top,
.nav-bottom {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 50;
  font-size: 13px;
  /* ⚠️ 用系统字体栈，和主站一致；不引外部字体（离线也要能用） */
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
}

.nav-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 9px;
  color: var(--ink-2, #7d726a);
  text-decoration: none;
  white-space: nowrap;
  /* 触控目标够大：手机上单个 tab 至少 44px 高（苹果的人机指南） */
  min-height: 44px;
  box-sizing: border-box;
  transition: background-color .15s, color .15s;
}
.nav-tab:hover { color: var(--ink, #2b2320); background: rgba(128, 128, 128, .10); }
.nav-tab.on {
  color: var(--accent, #b08d6a);
  background: rgba(176, 141, 106, .14);
  font-weight: 600;
}
/* 高亮态除了颜色还给一个底部短横线：色弱用户也能看出"我在哪" */
.nav-tab.on .nav-tab-label { position: relative; }
.nav-tab-icon { font-size: 15px; line-height: 1; opacity: .95; }

.nav-seg {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  text-decoration: none;
  /* ⚠️ 品牌名在窄屏要能收缩，否则会把 tab 挤出去 */
  min-width: 0;
}
.nav-brand-mark { display: block; flex: none; border-radius: 6px; }
.nav-brand-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* 右侧"页面动作"插槽：上传、导出这类按钮由各页面自己塞 */
.nav-slot { display: flex; align-items: center; gap: 6px; }

/* 页面动作按钮。⚠️ 文案在窄屏收起（只留图标），
   否则"上传 + 导出 + ⋯"会把 tab 挤出去。 */
.nav-act {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--line, rgba(43, 35, 32, .12));
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.nav-act:hover { background: rgba(128, 128, 128, .12); }
.nav-act.primary {
  border-color: transparent;
  background: var(--accent, #b08d6a);
  color: #fff;
  font-weight: 600;
}
.nav-act.primary:hover { filter: brightness(1.05); }
.nav-act:disabled { opacity: .4; cursor: not-allowed; }
.nav-act-icon { font-size: 15px; line-height: 1; }
@media (max-width: 1080px) {
  .nav-act-label { display: none; }
  .nav-act { padding: 0 9px; }
}

.nav-more {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 0;
  background: none;
  /* 用 em 相对字号，暗色主题下靠变量覆盖就够 */
  color: inherit;
  opacity: .75;
  font: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.nav-more:hover { opacity: 1; background: rgba(128, 128, 128, .14); }

/* ---------------- 桌面顶栏 ---------------- */
.nav-top {
  top: 0;
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(var(--nav-h));
  box-sizing: content-box;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--line, rgba(43, 35, 32, .08));
  /* 毛玻璃：滚动时下面的内容不会硬切 */
  backdrop-filter: saturate(1.2) blur(8px);
}
.nav-top-inner {
  max-width: 1200px;
  height: var(--nav-h);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* ⚠️ 牌子占左、tab 紧跟其后、动作区推到最右：
   用 margin-left:auto 而不是给 tab 加 flex:1 —— 后者会把 tab 拉得很宽，
   点击热区变得很奇怪。 */
.nav-slot { margin-left: auto; }

/* 页面主体要给顶栏让位。⚠️ 两种姿势都支持：
   · 页面自己有 padding → 用 var(--nav-h)
   · 页面是 flex/100dvh 布局 → 自己处理（修图页就是）
   这里只做"默认让位"，避免每个页面都写一遍。 */
/* ================================================================
   给导航让位
   ----------------------------------------------------------------
   两套页面布局，两种让位方式，**都靠这一个类**（body.has-nav）：
     · 普通文档流（index 的照片流）：给 body 加上方内边距
     · flex 柱状 + height:100dvh（studio / album 编辑器 / 阅读器）：
       dvh 本身就要减掉导航高度，所以覆盖那些页面的 height
   ⚠️ 为什么写在这里而不是去改 studio.css / album.css：
   那几个文件是**各页面自己的**样式，导航的让位规则属于导航层。
   写在这里以后加页面就不用再想"要给导航留多少"。
   ⚠️ padding 与 height 都要算上 env(safe-area-inset-*)，否则
   刘海屏/小白条机型上会差一条 —— 那些页面自己也加了 safe-area，
   所以这里必须和它们口径一致。
   ================================================================ */
body.has-nav > .app { padding-top: var(--nav-h); }

/* ⚠️⚠️ 页面自己的 sticky 顶栏必须**避开**导航顶栏。
   `.topbar`（照片流 / 相册列表）与 `.edit-bar`（相册编辑器）都是
   `position:sticky; top:0` —— 它们会粘在视口顶端，而导航顶栏也固定在
   顶端且 z-index 更高（50 > 30）→ 滚起来时页面顶栏会**滑到导航底下**
   被压住，看着像"顶栏消失了"。
   所以把它们的 top 挪到导航下面。只动 top，不动别的属性 ——
   改动面最小，也不用碰各页面自己的 CSS。
   ⚠️ 只在 ≥900px 生效：手机上没有顶栏导航（它是底部 tab）。 */
@media (min-width: 900px) {
  body.has-nav .topbar,
  body.has-nav .edit-bar { top: calc(var(--nav-h) - 1px); }
}

/* flex 柱状布局：dvh 减掉导航高度，让内部 flex:1 自己收缩 */
@media (min-width: 900px) {
  body.has-nav.studio-page { height: calc(100dvh - var(--nav-h)); }
  body.has-nav .edit-view { height: calc(100dvh - var(--nav-h)); }
  body.has-nav .read-view { height: calc(100dvh - var(--nav-h)); }
}
/* 手机上顶栏不显示，只有底部 tab：改减底部高度 */
@media (max-width: 899px) {
  body.has-nav.studio-page {
    height: calc(100dvh - var(--nav-bottom-h) - env(safe-area-inset-bottom, 0px));
  }
  body.has-nav .edit-view,
  body.has-nav .read-view {
    height: calc(100dvh - var(--nav-bottom-h) - env(safe-area-inset-bottom, 0px));
  }
}

/* ---------------- 手机底部 tab ---------------- */
.nav-bottom {
  bottom: 0;
  display: none;
  height: var(--nav-bottom-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface, #fff);
  border-top: 1px solid var(--line, rgba(43, 35, 32, .08));
}
.nav-bottom-inner {
  height: var(--nav-bottom-h);
  display: flex;
  align-items: stretch;
  /* 三个 tab 平分宽度 */
}
.nav-bottom .nav-tab {
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 0;
  font-size: 11px;
}
.nav-bottom .nav-tab .nav-tab-icon { font-size: 17px; }
.nav-bottom .nav-tab.on { background: none; }

/* 沉浸态：大图/幻灯片时藏掉底部 tab（它们的底栏在同一个位置） */
body.nav-immersive .nav-bottom { display: none !important; }

/* 登录页把整层导航藏起来（nav.js 在启动时判断） */
body.nav-hidden .nav-top,
body.nav-hidden .nav-bottom { display: none !important; }

/* brand / none 模式：没有 tab，所以不该占底部空间。
   ⚠️ brand 模式没有底部 tab（nav.js 根本不渲染它），
   但 body.has-nav 仍会加上底部内边距，所以这里要抵消掉。 */
body.nav-mode-brand,
body.nav-mode-none { padding-bottom: 0 !important; }
/* brand 模式下顶栏只有品牌位，居中或靠左都行，这里保持靠左 */
body.nav-mode-brand .nav-top-inner { justify-content: flex-start; }

/* ---------------- 媒体查询 ---------------- */
@media (max-width: 899px) {
  .nav-top { display: none; }
  .nav-bottom { display: block; }
  /* 底部 tab 占位：给页面底部留出空间，否则最后一行会被压住 */
  body.has-nav { padding-bottom: calc(var(--nav-bottom-h) + env(safe-area-inset-bottom, 0px)); }
}

/* 窄屏顶栏（>=900 但很挤）：收起品牌名，只留图标 */
@media (min-width: 900px) and (max-width: 1080px) {
  .nav-brand-name { display: none; }
}

/* ---------------- 设置弹出层 ---------------- */
.nav-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.nav-sheet-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .32);
}
/* 从大图查看器（z-index 90）里弹出来的面板要盖过它，见 app.js openAddToAlbum */
.nav-sheet.on-top { z-index: 91; }
.nav-sheet-body {
  position: relative;
  width: min(420px, 92vw);
  margin-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  padding: 8px;
  border-radius: 14px;
  background: var(--surface, #fff);
  color: var(--ink, #2b2320);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
}
.nav-sheet-title {
  padding: 10px 12px 6px;
  font-size: 12px;
  color: var(--ink-2, #7d726a);
  letter-spacing: .05em;
}
.nav-sheet-item {
  display: block;
  width: 100%;
  padding: 13px 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.nav-sheet-item:hover { background: rgba(128, 128, 128, .12); }
.nav-sheet-item.danger { color: var(--danger, #c0563f); }

/* ---------------- 修图页（暗色） ----------------
   ⚠️ 只覆盖变量，不复制上面的规则。studio.css 里 --sbg/--sink 是那套
   暗色变量名，这里把它们映射到 nav 用的通用名上。 */
.studio-page {
  --surface: #1c1c20;
  --ink: #f0eeec;
  --ink-2: #a8a29c;
  --line: rgba(255, 255, 255, .10);
  --accent: #d8b48c;
}
.studio-page .nav-top {
  backdrop-filter: none;
  background: #17171a;
  border-bottom-color: rgba(255, 255, 255, .08);
}