/* Reference: owner's Telegram recording + existing ROX Liquid Glass.
   Glass belongs to navigation; content keeps its readable surface. */
.navigation-feedback {
  position:fixed;inset:0 0 auto;z-index:1200;pointer-events:none;
  color:var(--ink);font-family:inherit;font-size:13px;font-weight:500;line-height:1.4;
}
.navigation-feedback[hidden]{display:none}
.navigation-feedback-track{height:3px;overflow:hidden;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.navigation-feedback-track::after{
  content:"";display:block;width:38%;height:100%;border-radius:0 2px 2px 0;
  background:var(--accent);animation:navigation-progress 1.25s ease-in-out infinite;
}
.navigation-feedback-message{
  display:flex;align-items:center;gap:9px;width:max-content;max-width:calc(100vw - 32px);
  box-sizing:border-box;margin:12px auto 0;padding:10px 16px;border-radius:24px;
  background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--glass-border);
  box-shadow:0 5px 22px #17203320,inset 0 1px 0 #ffffff70;
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  opacity:0;transform:translateY(-4px);transition:opacity 120ms ease,transform 160ms ease;
}
.navigation-feedback.is-waiting .navigation-feedback-message{opacity:1;transform:none}
.navigation-feedback-spinner{
  flex:none;width:14px;height:14px;border:2px solid color-mix(in srgb,var(--accent) 20%,transparent);
  border-top-color:var(--accent);border-radius:50%;animation:navigation-spin .8s linear infinite;
}
.navigation-feedback-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes navigation-progress{from{transform:translateX(-110%)}to{transform:translateX(365%)}}
@keyframes navigation-spin{to{transform:rotate(360deg)}}
@media(max-width:880px){
  .navigation-feedback-message{margin-top:calc(62px + env(safe-area-inset-top))}
  body.liquid-platform .mobile-tabbar.has-glass-lens{
    border-radius:32px;background:rgba(255,255,255,.44);
    border-color:rgba(255,255,255,.75);
    box-shadow:0 8px 28px #16203024,inset 0 1px 1px #ffffffd9,inset 0 -1px 1px #ffffff66;
    backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  }
  body.liquid-platform .mobile-tabbar.has-glass-lens::before{
    content:"";position:absolute;left:0;top:5px;bottom:5px;width:var(--nav-lens-width,0px);
    transform:translateX(var(--nav-lens-x,5px));border-radius:27px;pointer-events:none;
    background:linear-gradient(145deg,#ffffffa6,#ffffff2e 55%,#ffffff75);
    border:1px solid #ffffffbf;box-sizing:border-box;
    box-shadow:inset 0 1px 2px #fff,inset 0 -1px 3px #5489b82b,0 2px 7px #263d6521;
    transition:transform 340ms cubic-bezier(.22,.8,.22,1.08),width 240ms ease;
  }
  body.liquid-platform .mobile-tabbar.has-glass-lens .mobile-tabbar-item{
    position:relative;z-index:1;border-radius:26px;color:var(--ink-muted);
  }
  body.liquid-platform .mobile-tabbar.has-glass-lens .mobile-tabbar-item.active{
    background:transparent;box-shadow:none;color:var(--accent);
  }
  body.liquid-platform .mobile-tabbar.has-glass-lens.has-pending-navigation .mobile-tabbar-item.active{color:var(--ink-muted)}
  body.liquid-platform .mobile-tabbar.has-glass-lens .mobile-tabbar-item.is-navigation-target{color:var(--accent)}
  body.liquid-platform .mobile-tabbar.has-glass-lens .mobile-tabbar-item:active{transform:scale(.94)}
  [data-theme=dark] body.liquid-platform .mobile-tabbar.has-glass-lens{background:rgba(40,44,54,.56);border-color:#ffffff38;box-shadow:0 8px 28px #0003,inset 0 1px 1px #ffffff40}
  [data-theme=dark] body.liquid-platform .mobile-tabbar.has-glass-lens::before{
    background:linear-gradient(145deg,#ffffff26,#ffffff0a 55%,#ffffff17);border-color:#ffffff4a;
    box-shadow:inset 0 1px 2px #ffffff4d,inset 0 -1px 2px #ffffff12,0 2px 7px #0003;
  }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body.liquid-platform #mobileTabbar.has-glass-lens,.navigation-feedback-message{background:var(--surface)}
}
@media(prefers-reduced-transparency:reduce){
  body.liquid-platform #mobileTabbar.has-glass-lens,.navigation-feedback-message{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce){
  body.liquid-platform .mobile-tabbar.has-glass-lens::before,.navigation-feedback-message{transition:none;transform:none}
  body.liquid-platform .mobile-tabbar.has-glass-lens::before{transform:translateX(var(--nav-lens-x,5px))}
  .navigation-feedback-track::after{animation:none;transform:none;width:100%;opacity:.65}
  .navigation-feedback-spinner{animation:none}
}