/* ===================================================================
   液态玻璃底部 Tab 栏（前后台共用）
   视觉参数对齐 LiquidBottomTabs：
     面板 64dp 胶囊 / rgba(250,250,250,.4) / 模糊 8dp
     指示器 56dp 胶囊 / 叠 10% 黑
     按压：面板微放大 + 高光 + 跟随指尖光斑
   强调色默认跟随各端主题色 --brand
   =================================================================== */

.lqbar{
  --bar-inset:26px;
  --bar-height:78px;
  --panel-height:64px;
  --panel-radius:32px;
  --indicator-height:56px;
  --indicator-radius:28px;
  --panel-tint:rgba(250,250,250,.42);
  --indicator-tint:rgba(0,0,0,.10);
  --blur:8px;
  --lq-accent:var(--brand,#0088FF);
  --lq-content:#1a1a1a;

  position:fixed;
  left:0;right:0;bottom:0;
  z-index:70;
  display:flex;align-items:center;
  height:calc(var(--bar-height) + env(safe-area-inset-bottom));
  margin:0 var(--bar-inset);
  padding-bottom:env(safe-area-inset-bottom);
  pointer-events:none;
}

.lqbar__panel{
  position:relative;
  display:flex;align-items:stretch;
  width:100%;height:var(--panel-height);
  padding:4px;
  border-radius:var(--panel-radius);
  background:var(--panel-tint);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(180%) brightness(1.03);
  backdrop-filter:blur(var(--blur)) saturate(180%) brightness(1.03);
  box-shadow:
    0 4px 24px rgba(0,0,0,.10),
    inset 0 0 0 .5px rgba(255,255,255,.65),
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 6px rgba(255,255,255,.25);
  transform-origin:center;
  will-change:transform;
  pointer-events:auto;
}

/* 按压时的整体高光 */
.lqbar__sheen{
  position:absolute;inset:0;z-index:0;
  border-radius:inherit;
  background:rgba(255,255,255,.08);
  opacity:0;pointer-events:none;
}
/* 跟随指尖的柔光斑 */
.lqbar__spot{
  position:absolute;top:0;left:0;z-index:0;
  width:192px;height:192px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.15) 0%,rgba(255,255,255,0) 70%);
  transform:translate(-50%,-50%);
  opacity:0;pointer-events:none;
}
/* 滑动指示器 */
.lqbar__indicator{
  position:absolute;top:4px;left:4px;z-index:0;
  width:0;height:var(--indicator-height);
  border-radius:var(--indicator-radius);
  background:var(--indicator-tint);
  transform-origin:center;
  will-change:transform;
  pointer-events:none;
  box-shadow:none;
}

.lqbar__tab{
  position:relative;z-index:1;
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;
  margin:0;padding:0;border:0;background:none;
  appearance:none;font:inherit;cursor:pointer;
  color:var(--lq-content);
  -webkit-tap-highlight-color:transparent;
  transition:color .2s ease;
}
.lqbar__tab.is-active{color:var(--lq-accent)}

.lqbar__icon{
  display:block;width:25px;height:25px;
  background-color:currentColor;
  -webkit-mask-image:var(--icon);mask-image:var(--icon);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.lqbar__label{
  font-size:11.5px;line-height:1;
  white-space:nowrap;
  font-weight:500;
}
.lqbar__tab.is-active .lqbar__label{font-weight:700}

/* 角标（后台待审评论数） */
.lqbar__badge{
  position:absolute;top:2px;left:50%;
  margin-left:6px;
  min-width:16px;height:16px;
  padding:0 4px;
  border-radius:999px;
  background:#ef4444;color:#fff;
  font-size:10px;line-height:16px;font-weight:700;
  box-shadow:0 2px 6px rgba(239,68,68,.4);
  pointer-events:none;
}

/* 极窄屏：缩小边距，给内容更多宽度 */
@media(max-width:360px){
  .lqbar{--bar-inset:14px}
  .lqbar__label{font-size:10.5px}
  .lqbar__icon{width:23px;height:23px}
}

/* 桌面端默认不显示（后台由 media query 控制，前台始终显示） */
.lqbar--desktop-hidden{display:none}

@media (prefers-reduced-motion:reduce){
  .lqbar__panel,.lqbar__indicator{transition:none}
}