/* =============================================================
   Liquid Glass Tabbar · 液态玻璃底部导航栏
   主页 / 聊天 / 设置  ——  毛玻璃容器 + 果冻挤压物理 + 液态指示器
   配合 tabbar-liquid.js 使用
   ============================================================= */

/* ---------- 玻璃容器 ---------- */
.custom-tabbar {
  position: fixed !important;
  left: 10px !important;
  right: 10px !important;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  height: 62px !important;
  padding: 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  border: none !important;
  border-radius: 34px !important;
  background: transparent !important;
  -webkit-backdrop-filter: blur(30px) saturate(210%) brightness(1.12) !important;
  backdrop-filter: blur(30px) saturate(210%) brightness(1.12) !important;
  box-shadow: inset 0 1.3px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1.3px 0 rgba(255, 255, 255, 0.32),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.6),
    0 16px 38px -12px rgba(0, 0, 0, 0.18),
    0 6px 16px -8px rgba(0, 0, 0, 0.12) !important;
  overflow: visible !important;
  isolation: isolate;
  will-change: transform;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 液态层（goo 滤镜） ---------- */
.lq-goo {
  position: absolute;
  inset: -10px;
  z-index: 1;
  pointer-events: none;
  filter: url(#lq-liquid);
  -webkit-filter: url(#lq-liquid);
}

/* 激活态液态胶囊 */
.lq-blob {
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: 40px;
  border-radius: 999px;
  transform-origin: 50% 50%;
  opacity: 0;
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0.55) 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.98),
    inset 0 -3px 8px rgba(0, 0, 0, 0.12);
  transition: opacity 0.3s ease;
}
.lq-goo.lq-ready .lq-blob {
  opacity: 1;
}

/* 按下瞬间的液滴，会和胶囊融合 */
.lq-press {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 999px;
  opacity: 0;
  transform-origin: 50% 50%;
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.35) 100%);
}

/* 松手飞溅的小液珠 */
.lq-drop {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  will-change: transform, opacity;
}

/* ---------- 玻璃高光 / 手指反光 ---------- */
.lq-gloss {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.14) 30%,
    rgba(255, 255, 255, 0) 58%
  );
}

.lq-streak {
  position: absolute;
  top: -60%;
  left: -40%;
  width: 30%;
  height: 220%;
  opacity: 0;
  filter: blur(7px);
  transform: skewX(-20deg);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

.lq-touch {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 132px;
  height: 132px;
  opacity: 0;
  pointer-events: none;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
  mix-blend-mode: plus-lighter;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.22) 42%,
    rgba(255, 255, 255, 0) 70%
  );
}

/* ---------- 导航项 ---------- */
.custom-tabbar .tab-item {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  margin: 0 2px !important;
  padding: 3px 2px !important;
  border-radius: 20px !important;
  position: relative !important;
  z-index: 3 !important;
  opacity: 1 !important;
  transform-origin: 50% 50%;
  will-change: transform;
  cursor: pointer;
  transition: none !important;
  -webkit-tap-highlight-color: transparent;
}

.custom-tabbar .tab-item:active {
  opacity: 1 !important;
}

.custom-tabbar .tab-item.disabled {
  opacity: 0.42 !important;
  cursor: not-allowed;
}

.custom-tabbar .tab-item svg {
  position: relative;
  z-index: 4;
  width: 25px !important;
  height: 25px !important;
  transform-origin: 50% 50%;
  will-change: transform;
  transition: none !important;
  filter: drop-shadow(0 1px 1.5px rgba(20, 40, 80, 0.16));
}

.custom-tabbar .tab-item svg path {
  fill: #98a1b0 !important;
  transition: fill 0.3s ease;
}

.custom-tabbar .tab-item.active svg path {
  fill: #1a1a1a !important;
}

.custom-tabbar .tab-item.active svg {
  filter: drop-shadow(0 1px 2.5px rgba(255, 255, 255, 0.6));
}

.custom-tabbar .tab-item.disabled svg path {
  fill: #c3c9d2 !important;
}

.custom-tabbar .tab-item .tab-text {
  position: relative;
  z-index: 4;
  margin-top: 1px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  line-height: 1.2 !important;
  color: #8d95a4 !important;
  text-shadow: 0 1px 1.5px rgba(255, 255, 255, 0.55);
  transition: color 0.3s ease, text-shadow 0.3s ease;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
    "Microsoft YaHei", Arial, sans-serif !important;
}

.custom-tabbar .tab-item.active .tab-text {
  color: #1a1a1a !important;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5);
}

.custom-tabbar .tab-item .tab-badge {
  position: absolute !important;
  top: 2px !important;
  right: calc(50% - 17px) !important;
  transform: none !important;
  z-index: 6;
}

/* SVG 滤镜定义挂载点（必须存在于文档中） */
.lq-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 不支持 goo 滤镜时的降级：选中态仍有基础高亮 */
.custom-tabbar.lq-off .tab-item.active {
  background-color: rgba(255, 255, 255, 0.6) !important;
}
.custom-tabbar.lq-off .tab-item.active svg path {
  fill: #1a1a1a !important;
}
.custom-tabbar.lq-off .tab-item.active .tab-text {
  color: #1a1a1a !important;
  font-weight: 700 !important;
}