.app {
  position: fixed;
  inset: 0;
  max-width: var(--app-max);
  margin: 0 auto;
  /* hidden 仍可被 scrollIntoView 滚动，会把移出去的底部栏带回来 */
  overflow: clip;
  contain: layout paint;
}

/* ---------- 页面层 ---------- */

.views {
  position: absolute;
  inset: 0;
  transition: transform var(--dur) var(--ease);
}

.view {
  position: absolute;
  inset: 0;
  background: var(--bg);
}

.view--grouped {
  background: var(--bg);
}

/* 每个页面唯一的滚动区，上下留出栏的位置，内容可以滚到玻璃栏后面 */
.view__body {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--safe-top) + var(--navbar-h)) 0 var(--tabbar-space);
}

/* 顶栏+搜索固定，仅列表滚（避免 iOS 下拉露出 padding 白条） */
.view__body--stack {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* 底栏留白放在 scroll 内，列表可滚到玻璃底栏后面（同动态页） */
  padding-bottom: 0;
}

.view__body--stack .view__head {
  flex: none;
}

.view__body--stack .view__scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--tabbar-space);
}

/* ---------- 顶部栏 ---------- */

.navbar {
  height: calc(var(--safe-top) + var(--navbar-h));
  padding: var(--safe-top) 4px 0;
  display: grid;
  grid-template-columns: 88px 1fr 88px;
  align-items: center;
  background: var(--bar-bg);
}

.view > .navbar {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
}

.navbar__title {
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 17px;
  font-weight: 500;
}

.navbar__side {
  display: flex;
  align-items: center;
}

.navbar__side:last-child {
  justify-content: flex-end;
}

.navbar__btn {
  min-width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}

/* ---------- 底部栏 ---------- */

.tabbar {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: var(--tabbar-bottom);
  width: min(440px, calc(100% - 28px));
  height: var(--tabbar-h);
  margin: 0 auto;
  border-radius: calc(var(--tabbar-h) / 2);
  --tabbar-edge: 6px;
  --lens-shrink: -4px;
  --lens-idle-h: 56px;
  --lens-travel: 12px; /* 按压跟手可超出轨道左右各一段，tabbar.js 读取 */
  overflow: visible;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transform-origin: center bottom;
  transition: transform 0.16s var(--ease-glass);
}

.tabbar.is-pressed {
  transform: scale(1.01);
}

/* 内层轨道：左右留白，让选中块与外壳弧边同心 */
.tabbar__track {
  position: relative;
  height: 100%;
  margin-inline: var(--tabbar-edge);
  display: grid;
  grid-template-columns: repeat(var(--n, 5), 1fr);
  overflow: visible;
}

/* 选中块：静默时是栏内灰块，按压时鼓成浮起的玻璃并跟手，松手后收回并吸附 */
.tabbar__lens {
  --lens-w: 76px; /* 按压宽度，tabbar.js 也会读取它来限制跟手范围 */
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: calc(100% / var(--n, 5) - var(--lens-shrink));
  height: var(--lens-idle-h);
  border-radius: calc(var(--lens-idle-h) / 2);
  transform: translate(-50%, -50%);
  background: var(--lens-idle);
  pointer-events: none;
}

/* 首帧定位不要动画；静默态带 left 过渡，松手才能平滑吸附 */
.tabbar.is-ready .tabbar__lens {
  transition:
    left 0.16s var(--ease-glass),
    width 0.12s var(--ease-glass),
    height 0.12s var(--ease-glass),
    border-radius 0.12s var(--ease-glass),
    background-color 0.12s var(--ease-glass),
    box-shadow 0.12s var(--ease-glass),
    transform 0.12s var(--ease-glass),
    backdrop-filter 0.12s var(--ease-glass),
    -webkit-backdrop-filter 0.12s var(--ease-glass);
}

/* 按压态不过渡 left，选中块直接跟手；与上一条不能合并 */
.tabbar.is-pressed .tabbar__lens {
  width: var(--lens-w);
  height: calc(var(--tabbar-h) - 6px);
  border-radius: calc(var(--tabbar-h) / 2 - 5px);
  transform: translate(-50%, -51%);
  background: var(--lens-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow:
    inset 2px -2px 1px -1px var(--lens-hi),
    inset -2px 2px 1px -1px var(--lens-hi),
    inset 6px -6px 1px -6px var(--lens-hi-soft),
    inset -6px 6px 1px -6px var(--lens-hi-soft),
    inset 0 0 2px var(--lens-edge),
    0 6px 14px var(--lens-shadow);
}

.tabbar.is-ready.is-pressed .tabbar__lens {
  transition:
    width 0.16s var(--ease-glass),
    height 0.16s var(--ease-glass),
    border-radius 0.16s var(--ease-glass),
    background-color 0.16s var(--ease-glass),
    box-shadow 0.16s var(--ease-glass),
    transform 0.16s var(--ease-glass),
    backdrop-filter 0.16s var(--ease-glass),
    -webkit-backdrop-filter 0.16s var(--ease-glass);
}

/* 轻点切换：保持按压玻璃态，选中块滑到目标 Tab */
.tabbar.is-ready.is-pressed.is-gliding .tabbar__lens {
  transition:
    left 0.16s var(--ease-glass),
    width 0.16s var(--ease-glass),
    height 0.16s var(--ease-glass),
    border-radius 0.16s var(--ease-glass),
    background-color 0.16s var(--ease-glass),
    box-shadow 0.16s var(--ease-glass),
    transform 0.16s var(--ease-glass),
    backdrop-filter 0.16s var(--ease-glass),
    -webkit-backdrop-filter 0.16s var(--ease-glass);
}

.tabbar__item {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  padding: 0 2px;
  max-width: 62px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text);
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  -webkit-touch-callout: none;
  transition: color 0.18s ease;
}

.tabbar__item .icon {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.tabbar__item.is-active {
  color: var(--tab-active);
}

/* ---------- 二级页 ---------- */

.sub {
  position: absolute;
  z-index: 20;
  inset: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease), visibility 0s var(--dur);
}

.sub__page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--chat-bg);
}

body.is-sub .sub {
  visibility: visible;
  transform: none;
  transition: transform var(--dur) var(--ease), visibility 0s;
}

body.is-sub .views {
  transform: translateX(-30%);
}

body.is-sub .tabbar {
  transform: translateY(calc(100% + var(--tabbar-bottom) + 24px));
  pointer-events: none;
}

/* 二级页完全盖住后隐藏底层，避免底层的模糊层继续参与合成 */
body.is-covered .views {
  visibility: hidden;
}