/* Keep the main tool's notifications centered at the bottom of the viewport. */
body.tk-footer-flow .vtw-toast-overlay {
  top: auto !important;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  inset-inline: 12px;
  display: flex;
  justify-content: center;
  width: auto;
  max-width: none;
  transform: none !important;
  animation: tk-toast-from-bottom .25s ease-out;
}

body.tk-footer-flow .vtw-toast-box {
  box-sizing: border-box;
  min-width: 0;
  max-width: min(100%, 480px);
}

/* Leave the mobile section shortcuts unobstructed when they are visible. */
@media (max-width: 767px) {
  body.tk-footer-flow:has(.tubekey-fixed-section-rail.is-visible) .vtw-toast-overlay {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* At this breakpoint the legacy bottom navigation is still visible. */
@media (767px < width <= 768px) {
  body.tk-footer-flow:has(.vtw-mobile-bottom-nav) .vtw-toast-overlay {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@keyframes tk-toast-from-bottom {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.tk-footer-flow .vtw-toast-overlay { animation: none; }
}