/* t1034u — nav icons + compact pill collapse (transform/opacity only) */
:root{
  --nav-collapse: 0;
  --nav-spring: cubic-bezier(.22,1.15,.36,1);
}

.tabs{ transition: none; will-change: transform; }
/* Expand → compact icons-only capsule (~48px tall, ~62% width) */
.tabs nav{
  transform:
    translate3d(0, calc(var(--nav-collapse) * 22px), 0)
    scale(calc(1 - var(--nav-collapse) * 0.38), calc(1 - var(--nav-collapse) * 0.28));
  transform-origin: bottom center;
  transition: none;
  will-change: transform;
}
.tabs.nav-snap nav{
  transition: transform .42s var(--nav-spring);
}
.tabs nav button .lab{
  opacity: calc(1 - var(--nav-collapse));
  transform: translate3d(0, calc(var(--nav-collapse) * 8px), 0) scale(calc(1 - var(--nav-collapse) * 0.15));
  transition: none;
  max-height: none;
  pointer-events: none;
}
.tabs.nav-snap nav button .lab{
  transition: opacity .28s ease, transform .42s var(--nav-spring);
}
.tabs nav button .ico, .tabs nav button .ico svg{
  width: 24px; height: 24px; display:block; margin: 0 auto;
  transition: transform .28s var(--nav-spring), opacity .2s;
}
.tabs nav button{
  min-width: 48px; min-height: 48px;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
}
.tabs nav button .ico svg{ overflow: visible; }

/* Thymeline — thin editorial stroke */
.phone.thy-skin .tabs nav button .ico svg{
  stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.phone.thy-skin .tabs nav button .ico svg .fillish{ fill: currentColor; stroke: none; opacity: 0;
  transition: opacity .28s ease; }
.phone.thy-skin .tabs nav button.on .ico svg .fillish{ opacity: .22; }
.phone.thy-skin .tabs nav button.on .ico{ transform: translateY(-1px) scale(1.06); }
.phone.thy-skin .tabs nav button.on .ico svg{ stroke-width: 1.85; }
.phone.thy-skin .large-title{
  transform: scale(calc(1 - var(--nav-collapse) * 0.28));
  transform-origin: left top;
  opacity: calc(1 - var(--nav-collapse) * 0.15);
}
.phone.thy-skin .sticky-chips, .phone.thy-skin .smart-greet{
  opacity: calc(1 - var(--nav-collapse));
  transform: translate3d(0, calc(var(--nav-collapse) * -8px), 0);
  pointer-events: auto;
}
.phone.thy-skin .sticky-chips{ transition: none; }
/* Editorial pill: slightly more scaleY for magazine feel */
.phone.thy-skin .tabs nav{
  transform:
    translate3d(0, calc(var(--nav-collapse) * 20px), 0)
    scale(calc(1 - var(--nav-collapse) * 0.36), calc(1 - var(--nav-collapse) * 0.30));
  transform-origin: bottom center;
}

/* Pulsepath — bold geometric + neon active */
.phone.pul-skin .tabs nav button .ico svg{
  stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.phone.pul-skin .tabs nav button .ico svg .fillish{ fill: currentColor; stroke: none; opacity: 0; transition: opacity .22s; }
.phone.pul-skin .tabs nav button.on .ico svg .fillish{ opacity: .35; }
.phone.pul-skin .tabs nav button.on .ico{
  transform: translateY(-2px) scale(1.1);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 70%, transparent));
}
.phone.pul-skin .tabs nav button.on .ico svg{ stroke-width: 2.25; }
.phone.pul-skin .large-title{
  transform: scale(calc(1 - var(--nav-collapse) * 0.32));
  transform-origin: left top;
  opacity: calc(1 - var(--nav-collapse) * 0.2);
}
.phone.pul-skin .sticky-chips, .phone.pul-skin .smart-greet{
  opacity: calc(1 - var(--nav-collapse));
  transform: translate3d(0, calc(var(--nav-collapse) * -6px), 0);
}
/* Dock + START shrink together into compact capsule */
.phone.pul-skin .tabs nav{
  transform:
    translate3d(0, calc(var(--nav-collapse) * 26px), 0)
    scale(calc(1 - var(--nav-collapse) * 0.40), calc(1 - var(--nav-collapse) * 0.32));
  transform-origin: bottom center;
}
.phone.pul-skin .tabs nav button.nav-start .ico svg{ stroke: #04140C; }
.phone.pul-skin .tabs nav button.nav-start{
  transform:
    translateY(calc(-18px + var(--nav-collapse) * 14px))
    scale(calc(1 - var(--nav-collapse) * 0.28));
  transform-origin: center bottom;
}
.phone.pul-skin .tabs nav button.nav-start .lab{
  opacity: calc(1 - var(--nav-collapse)) !important;
}

@media (prefers-reduced-motion: reduce){
  .tabs nav, .tabs nav button .lab, .tabs nav button .ico, .large-title, .sticky-chips, .smart-greet{
    transition:none!important;
  }
}

/* collapse-aware label overrides (beat skin .on rules) */
.tabs nav button .lab, .tabs nav button.on .lab{
  opacity: calc(1 - var(--nav-collapse, 0)) !important;
  transform: translate3d(0, calc(var(--nav-collapse,0) * 8px), 0);
}
.phone.thy-skin .tabs nav button.on .lab{
  max-width: calc((1 - var(--nav-collapse,0)) * 72px) !important;
  overflow:hidden;
}

/* t1042u — higher-quality icons + glass menu */
.tabs nav{
  backdrop-filter: blur(18px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
}
.tabs nav button .ico svg{
  stroke-linecap:round; stroke-linejoin:round;
}
.tabs nav button .ico svg .fillish{
  transition: opacity .28s cubic-bezier(.22,1.15,.36,1), transform .28s cubic-bezier(.22,1.15,.36,1);
  transform-origin:center; transform: scale(.86);
}
.tabs nav button.on .ico svg .fillish{
  transform: scale(1);
}
.tabs nav button:active .ico{ transform: scale(.92); }
.phone.thy-skin .tabs nav, .phone.pul-skin .tabs nav{
  box-shadow:
    0 14px 36px rgba(20,48,31,.14),
    inset 0 1px 0 rgba(255,255,255,.65),
    0 0 0 1px rgba(255,255,255,.25) !important;
}

/* t1042u — spring-sliding active indicator (both apps) */
.tabs nav{
  position: relative !important;
  --nav-ind-x: 0px;
  --nav-ind-w: 56px;
}
.tabs nav .nav-ind{
  position:absolute; left:0; bottom:6px; height:3px; width:var(--nav-ind-w);
  border-radius:999px; pointer-events:none; z-index:1;
  background: var(--accent, #C8F24A);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent,#C8F24A) 55%, transparent);
  transform: translate3d(var(--nav-ind-x), 0, 0);
  transition: transform .42s cubic-bezier(.22,1.2,.36,1), width .42s cubic-bezier(.22,1.2,.36,1);
  will-change: transform, width;
}
.phone.pul-skin .tabs nav .nav-ind{
  height:4px; bottom:5px;
  background:#C8F24A;
  box-shadow:0 0 16px rgba(200,242,74,.55);
}
.phone.thy-skin .tabs nav .nav-ind{
  height:2px; opacity:.9;
}
.tabs nav button{
  position:relative; z-index:2;
  transition: color .28s cubic-bezier(.22,1.15,.36,1), background .28s ease, transform .18s cubic-bezier(.22,1.15,.36,1);
}
.tabs nav button:active{ transform: scale(.94); }
.tabs nav button .ico svg .fillish{
  transition: opacity .32s cubic-bezier(.22,1.2,.36,1), transform .32s cubic-bezier(.22,1.2,.36,1) !important;
}
.tabs nav button.on .ico svg .fillish{ opacity:.4 !important; transform:scale(1) !important; }
.tabs nav button:not(.on) .ico svg .fillish{ opacity:0 !important; transform:scale(.84) !important; }
@media (prefers-reduced-motion: reduce){
  .tabs nav .nav-ind{ transition:none !important; }
}