/* ── 底部导航:白色悬浮浮岛(Vital 风格)──
   纯白实底 + 中性柔和阴影,激活态用强调黑胶囊,不用主题色 */
.tab-dock {
  position: fixed;
  left: 16rpx;
  right: 16rpx;
  bottom: calc(28rpx + env(safe-area-inset-bottom) * 0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 56rpx;
  padding: 12rpx 10rpx;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 20rpx 50rpx rgba(27, 27, 32, 0.10);
}

/* ── Tab 项:展开胶囊 ──
   未选中 = 浅灰图标;选中 = 横向展开为黑色胶囊(白图标 + 白文字) */
.tab-pill {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  border-radius: 999rpx;
  padding: 10rpx 16rpx;
  transition:
    background 0.32s cubic-bezier(.34, 1.4, .64, 1),
    padding 0.32s cubic-bezier(.34, 1.4, .64, 1),
    box-shadow 0.32s ease;
}

.tab-pill.active {
  background: #2b2b30;
  padding: 10rpx 26rpx;
  box-shadow: 0 12rpx 26rpx rgba(43, 43, 48, 0.28);
}

.tab-pill:active {
  transform: scale(0.94);
}

/* 文字标签:默认折叠隐藏,选中时从图标右侧平滑展开 */
.tab-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 24rpx;
  font-weight: 600;
  color: transparent;
  line-height: 1;
  opacity: 0;
  margin-left: 0;
  transition:
    max-width 0.32s cubic-bezier(.34, 1.4, .64, 1),
    opacity 0.24s ease,
    margin-left 0.32s cubic-bezier(.34, 1.4, .64, 1);
}

.tab-pill.active .tab-label {
  max-width: 140rpx;
  opacity: 1;
  color: #fff;
  margin-left: 12rpx;
}

/* ── 图标容器 ── */
.icon-wrap {
  width: 66rpx;
  height: 66rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Tab 图标:狗主题线性描边 SVG(base64 蒙版)──
   单色 alpha 蒙版 + background-color 上色,
   选中时浅灰→白平滑过渡,任意尺寸保持清晰 */
.tab-icon {
  width: 52rpx;
  height: 52rpx;
  background-color: #b9bdc6;
  transition: background-color 0.2s;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.tab-pill.active .tab-icon {
  background-color: #fff;
}

/* 广场:狗窝(拱形门 + 门上小骨头) */
.icon-feed {
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMuNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNNi41IDIxLjVWMzZhNS41IDUuNSAwIDAgMCA1LjUgNS41aDI0YTUuNSA1LjUgMCAwIDAgNS41LTUuNVYyMS41Ii8+PHBhdGggZD0iTTQgMTkuNUwyNCA0LjVMNDQgMTkuNSIvPjxwYXRoIGQ9Ik0xNy41IDQxLjV2LTcuNWE2LjUgNi41IDAgMCAxIDEzIDB2Ny41Ii8+PHBhdGggZD0iTTE5LjUgMTUuMmg5IiBzdHJva2Utd2lkdGg9IjQuNiIvPjwvZz48L3N2Zz4=");
}

/* 附近:定位水滴 + 爪印 */
.icon-nearby {
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMuNCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTI0IDQ0QzEzLjUgMzQgOCAyNi44IDggMjBhMTYgMTYgMCAwIDEgMzIgMEM0MCAyNi44IDM0LjUgMzQgMjQgNDRaIi8+PGcgZmlsbD0iIzAwMCI+PGNpcmNsZSBjeD0iMTcuNiIgY3k9IjE1LjQiIHI9IjIuMyIvPjxjaXJjbGUgY3g9IjI0IiBjeT0iMTMiIHI9IjIuNSIvPjxjaXJjbGUgY3g9IjMwLjQiIGN5PSIxNS40IiByPSIyLjMiLz48cGF0aCBkPSJNMjQgMTkuMmMyLjkgMCA1LjIgMS45IDUuMiA0LjNjMCAyLjQtMi4zIDQuMi01LjIgNC4yYy0yLjkgMC01LjItMS44LTUuMi00LjJjMC0yLjQgMi4zLTQuMyA1LjItNC4zWiIvPjwvZz48L3N2Zz4=");
}

/* 汪友:交叉双骨头(前后交叠,交叠处留缝) */
.icon-friends {
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGRlZnM+PG1hc2sgaWQ9Im0iPjxyZWN0IHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0tNC4zNCAtMi42QTQuMiA0LjIgMCAxIDAgLTExLjIgMEE0LjIgNC4yIDAgMSAwIC00LjM0IDIuNkg0LjM0QTQuMiA0LjIgMCAxIDAgMTEuMiAwQTQuMiA0LjIgMCAxIDAgNC4zNCAtMi42WiIgZmlsbD0iIzAwMCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjYuNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQgMjQpIHJvdGF0ZSgtNDUpIHNjYWxlKDEuMykiLz48L21hc2s+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxnIG1hc2s9InVybCgjbSkiPjxwYXRoIGQ9Ik0tNC4zNCAtMi42QTQuMiA0LjIgMCAxIDAgLTExLjIgMEE0LjIgNC4yIDAgMSAwIC00LjM0IDIuNkg0LjM0QTQuMiA0LjIgMCAxIDAgMTEuMiAwQTQuMiA0LjIgMCAxIDAgNC4zNCAtMi42WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQgMjQpIHJvdGF0ZSg0NSkgc2NhbGUoMS4zKSIvPjwvZz48cGF0aCBkPSJNLTQuMzQgLTIuNkE0LjIgNC4yIDAgMSAwIC0xMS4yIDBBNC4yIDQuMiAwIDEgMCAtNC4zNCAyLjZINC4zNEE0LjIgNC4yIDAgMSAwIDExLjIgMEE0LjIgNC4yIDAgMSAwIDQuMzQgLTIuNloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0IDI0KSByb3RhdGUoLTQ1KSBzY2FsZSgxLjMpIi8+PC9nPjwvc3ZnPg==");
}

/* 我的:项圈 + 爱心狗牌 */
.icon-profile {
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjMuNCI+PGNpcmNsZSBjeD0iMjQiIGN5PSIxNy41IiByPSIxMS40Ii8+PGNpcmNsZSBjeD0iMjQiIGN5PSIzNi41IiByPSI2LjQiLz48L2c+PHBhdGggZmlsbD0iIzAwMCIgZD0iTTI0IDQwYy0yLjItMS42LTMuMy0yLjctMy4zLTRhMS45IDEuOSAwIDAgMSAzLjMtMS4yYTEuOSAxLjkgMCAwIDEgMy4zIDEuMmMwIDEuMy0xLjEgMi40LTMuMyA0WiIvPjwvc3ZnPg==");
}

/* ── 发布按钮:黑色圆底 + 白色爪印(CTA 用强调黑) ── */
.tab-fab-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8rpx;
}

.tab-fab {
  position: relative;
  width: 84rpx;
  height: 84rpx;
  border-radius: 50%;
  background: #2b2b30;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10rpx 24rpx rgba(43, 43, 48, 0.30);
  transition: transform 0.2s ease;
}

.tab-fab:active {
  transform: scale(0.9);
}

/* 白色爪印(base64 SVG),任意尺寸保持清晰 */
.fab-paw {
  width: 52rpx;
  height: 52rpx;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGcgZmlsbD0iI2ZmZiI+PGNpcmNsZSBjeD0iMTEuNSIgY3k9IjE4LjUiIHI9IjMuNiIvPjxjaXJjbGUgY3g9IjE5LjUiIGN5PSIxMy41IiByPSIzLjkiLz48Y2lyY2xlIGN4PSIyOC41IiBjeT0iMTMuNSIgcj0iMy45Ii8+PGNpcmNsZSBjeD0iMzYuNSIgY3k9IjE4LjUiIHI9IjMuNiIvPjxwYXRoIGQ9Ik0yNCAyMmM1IDAgOSAzLjQgOSA3LjZjMCA0LjItNCA3LjQtOSA3LjRjLTUgMC05LTMuMi05LTcuNGMwLTQuMiA0LTcuNiA5LTcuNloiLz48L2c+PC9zdmc+");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* ── 未读角标:主色紫 ── */
.badge {
  position: absolute;
  top: -4rpx;
  right: -6rpx;
  min-width: 30rpx;
  height: 30rpx;
  border-radius: 15rpx;
  background: #8b7cf6;
  color: #fff;
  font-size: 18rpx;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6rpx;
  border: 2rpx solid #fff;
}