/* The header leaves the reading area without animating layout on every frame. */
.topbar {
  transform: translateY(0);
  transition: transform 280ms cubic-bezier(.32, .72, 0, 1);
}

body.is-navigation-hidden .topbar {
  transform: translateY(calc(-100% - env(safe-area-inset-top, 0px) - 2px));
  pointer-events: none;
  transition-duration: 240ms;
}

/* Summary band follows the topbar out with a physics-like spring curve.
   Slightly delayed relative to topbar for a cascaded, layered feel. */
.summary-band {
  transform: translateY(0);
  opacity: 1;
  transition: transform 380ms cubic-bezier(.32, .72, 0, 1),
              opacity 320ms cubic-bezier(.4, 0, .2, 1);
  will-change: transform, opacity;
}

body.is-navigation-hidden .summary-band {
  transform: translateY(-32px);
  opacity: 0;
  pointer-events: none;
  transition: transform 440ms cubic-bezier(.32, .72, 0, 1),
              opacity 380ms cubic-bezier(.4, 0, .6, 1);
}

/* The composer stays anchored while the message area gains the header space. */
body.is-ai-view.is-navigation-hidden .topbar {
  margin-bottom: calc(-1 * var(--navigation-height, 64px));
}

@media (prefers-reduced-motion: reduce) {
  .topbar,
  .summary-band { transition: none !important; }
}