/* 归浦AI · 底部导航「液态胶囊」指示器
   —— 胶囊色块随 Tab 切换像水滴一样流过去：前沿先到、后沿慢半拍，
      中途拉长、高度略扁，最后带轻微回弹停稳（约 400ms）。
   transform 由 tabpill.js 的弹簧驱动，此处只负责外观。 */

/* 移除原来的静态小胶囊（只会瞬间出现/消失，不会流动） */
.tabbar__item.is-active:before { content: none !important; }

.guipu-tabpill {
  position: absolute;
  left: 0;
  top: 6px;
  bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  width: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 999px;
  background: var(--brand-50);
  border: 1px solid color-mix(in srgb, var(--brand-500) 20%, transparent);
  will-change: transform;
  transform: translateX(0);
}

/* 新选中的图标：先缩小再弹回 */
@keyframes guipuTabPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(.62); }
  66%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}
.tabbar__item .ico.guipu-pop {
  animation: guipuTabPop .36s cubic-bezier(.34, 1.56, .64, 1);
}

/* 页面内容沿点击方向轻推淡入。
   挂在稳定的 .app-main 上而不是内容节点本身：React 切换视图时会重建内容节点，
   挂在其上的动画会随之丢失；由祖先驱动则新节点一挂载就自然播一次。 */
@keyframes guipuPushR {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes guipuPushL {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* 注意：class 加在 <html> 上（不是 .app-main）——.app-main 是 React 受控节点，
   React 重渲染会把我们加的 class 抹掉，导致动画不播放。 */
/* 内容区在不同视图下类名不同：对话是 .workspace，任务/发现/我是 .view-pane，两者都要覆盖。 */
html.guipu-push-r .workspace, html.guipu-push-r .view-pane { animation: guipuPushR .34s cubic-bezier(.22, .61, .36, 1); }
html.guipu-push-l .workspace, html.guipu-push-l .view-pane { animation: guipuPushL .34s cubic-bezier(.22, .61, .36, 1); }