/* --------------------------------------------------- */
/*                UPDATE AVAILABLE BANNER               */
/* --------------------------------------------------- */
/* Driven by shared/scripts/threads.js's version-check thread. Sits higher
   (bottom: 70px) than the bottom-20px toasts elsewhere (.bookmark-export-
   toast, .backup-saved-toast, .limit-reached-banner) so the rare case of one
   showing at the same time doesn't have them overlapping — this one alone
   stays up until dismissed rather than auto-clearing in a couple seconds, so
   it's the one worth reserving its own vertical slot for. Entrance is
   deliberately bigger/more noticeable than those toasts' own small nudge,
   too — this is an unprompted "you should act on this" notice rather than a
   passive one, so it gets the same kind of unmissable slide-in .search-panel
   itself uses (search.js: translateX(200%) -> 0 over 500ms) — here a full
   rise from below plus a slight scale overshoot instead, since a
   bottom-anchored banner reads more naturally sliding up than in
   sideways. */
.update-available-banner {
  position: fixed;
  left: 50%;
  bottom: 70px;
  z-index: 9999;
  transform: translate(-50%, 120px) scale(0.85);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 90vw;
  padding: 10px 14px;
  /* Starts on the accent color itself, not the banner's own resting
     background — settling into it right alongside the slide/scale below
     reads as one single "look here" flash instead of a static box that
     merely appears. */
  background-color: var(--secondary-color);
  border-radius: 8px;
  border: 1px solid var(--secondary-color);
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.5);
  color: var(--font-color-clear);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 400ms ease,
    transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 600ms ease;
}
.update-available-banner.visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  background-color: var(--main-theme-lighter);
  pointer-events: auto;
  /* Keeps the banner visibly moving the whole time it's up, not just on
     entrance — a static "you should act on this" notice is too easy to
     tune out once it's been sitting there a few seconds. animation-delay
     matches the slide-up transition above so the bounce only takes over
     once that's finished settling into this same resting transform,
     instead of the two fighting over the property from frame one. */
  animation: update-banner-bounce 2.2s ease-in-out 400ms infinite;
}
@keyframes update-banner-bounce {
  0%,
  100% {
    transform: translate(-50%, 0) scale(1);
  }
  50% {
    transform: translate(-50%, -8px) scale(1.03);
  }
}
.update-available-banner > i.fa-arrows-rotate {
  color: var(--secondary-color);
  font-size: 16px;
  flex: none;
}
.update-available-text {
  white-space: nowrap;
}
.update-available-action {
  flex: none;
  border: none;
  border-left: 2px solid var(--secondary-color);
  border-right: 2px solid var(--secondary-color);
  border-radius: 10px;
  background-color: var(--main-theme-darker);
  color: var(--font-color);
  padding: 5px 12px;
  font-size: 12px;
  cursor: var(--cursor-pointer, pointer);
  user-select: none;
}
.update-available-action:hover {
  color: var(--highlight);
}
.update-available-dismiss {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: var(--font-color);
  cursor: var(--cursor-pointer, pointer);
}
.update-available-dismiss:hover {
  color: var(--highlight);
}
@media (max-width: 600px) {
  .update-available-banner {
    flex-wrap: wrap;
    justify-content: center;
  }
  .update-available-text {
    white-space: normal;
    text-align: center;
  }
}