/* update.js: the new-release notice, a toast that stays, bottom right, on the
 * toasts' line (above their band on a phone, where it spans the column).
 * Built to be noticed without blocking: the page's own surface with a strong
 * edge and a lifted shadow (stronger than a plain toast's --sv-glass-shadow),
 * ink words a step up from a toast's, and Reload
 * as a filled button.primary (ink on light, inverse in dark) with the sprite's
 * lucide rotate-cw. It rises in once per showing; motion.css stills that
 * under reduced motion. --toast-bottom keeps it above the chat's dock, so it
 * never covers the composer or its controls. */

.toast.update-pill {
  position: fixed;
  right: max(var(--sv-space-4), env(safe-area-inset-right, 0px));
  bottom: max(var(--toast-bottom, 10rem), calc(env(safe-area-inset-bottom, 0px) + var(--sv-space-4)));
  z-index: var(--sv-z-toast);
  max-width: min(calc(100vw - 2 * var(--sv-space-4)), 28rem);
  gap: var(--sv-space-3);
  min-height: 48px;
  padding: var(--sv-space-2) var(--sv-space-2) var(--sv-space-2) var(--sv-space-4);
  background: var(--sv-surface);
  border-color: var(--sv-hairline-strong);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), var(--sv-shadow-lg);
  font-size: var(--ui-text);
  animation: update-rise var(--sv-dur-base) var(--sv-ease-out) both;
}
:root.theme-dark .toast.update-pill {
  background: var(--sv-surface-raised);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.6);
}
.update-pill[hidden] { display: none; }
@keyframes update-rise { from { opacity: 0; transform: translateY(12px); } }

.update-pill-text { min-width: 0; color: var(--sv-ink); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
button.update-reload {
  flex: none;
  min-height: 32px;
  padding: 0 var(--sv-space-3);
  border-radius: calc(var(--sv-radius) * 2);
  font-size: var(--ui-text);
  white-space: nowrap;
}
button.update-reload .icon { opacity: 1; }
.update-pill-dismiss {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--sv-ink-secondary);
  background: none;
  border: 0;
  border-radius: calc(var(--sv-radius) * 2);
}
.update-pill-dismiss:hover { color: var(--sv-ink); background: var(--ws-hover); }

/* A phone: the column's width, above the toasts' band; 44px targets. */
@media (max-width: 760px) {
  .toast.update-pill {
    left: max(var(--sv-space-3), env(safe-area-inset-left, 0px));
    right: max(var(--sv-space-3), env(safe-area-inset-right, 0px));
    max-width: none;
    gap: var(--sv-space-2);
    padding-left: var(--sv-space-3);
    padding-right: var(--sv-space-1);
    bottom: calc(max(var(--toast-bottom, 10rem), calc(env(safe-area-inset-bottom, 0px) + var(--sv-space-4))) + 3.25rem);
  }
  .update-pill-text { flex: 1; }
  button.update-reload { min-height: 44px; }
  .update-pill-dismiss { width: 44px; height: 44px; }
}