/* Кнопка «Оновити» (js/update-prompt.js). Токени з variables.css.
   База — десктоп: низ-право, над слотом тостів (#toast-container: bottom/right 20px).
   Мобільний — по центру, над нижнім рядом кнопок (a11y, кошик). */

.update-pill {
  position: fixed;
  right: 20px;
  bottom: calc(var(--consent-h, 0px) + 76px);
  z-index: var(--z-update);
  display: flex;
  align-items: stretch;
  min-height: 44px;
  background: var(--accent-fill-safe);
  color: #fff;
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease, bottom var(--tr);
}
.update-pill.shown { opacity: 1; transform: none; }

.update-pill button {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.update-pill-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 6px 0 16px;
  border-radius: 22px 0 0 22px;
  text-align: left;
  line-height: 1.2;
}
.update-pill-main svg,
.update-pill-close svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}
.update-pill-label { font-weight: 600; }
.update-pill-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  border-radius: 0 22px 22px 0;
  opacity: .85;
}
.update-pill-close:hover { opacity: 1; }
.update-pill button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -5px;
}

/* Після натиску: піль лишається видимим до вивантаження сторінки, тож
   показуємо, що оновлення йде — спінер, «Оновлення…», кнопки заблоковані. */
.update-pill.busy .update-pill-close { display: none; }
.update-pill.busy .update-pill-main {
  border-radius: 22px;
  padding-right: 16px;
  cursor: progress;
}
.update-pill.busy .update-pill-main svg {
  animation: update-pill-spin 0.9s linear infinite;
}
@keyframes update-pill-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .update-pill { transition: none; transform: none; }
  /* Без обертання: про процес повідомляє сам текст «Оновлення…». */
  .update-pill.busy .update-pill-main svg { animation: none; }
}

/* Мобільний: умова з двох частин, як у решті проєкту (components.css,
   layout.css, filters.css, render-table.js (matchMedia), app.js (matchMedia), тут). Міняти скрізь (grep -rn "max-height: 500px" css js).
   Ширина кнопки a11y залежить від мови й підпису (не 44px), тому піль не
   затискаємо між кнопками, а піднімаємо над нижнім рядом: 84px = понад верх
   кошика (72px) з запасом 12px. Відкрита панель a11y (z 950 проти 350)
   перекриває піль — це прийнятно. */
@media (max-width: 768px),
       (orientation: landscape) and (max-height: 500px) and (max-width: 1024px) {
  .update-pill {
    left: 0;
    right: 0;
    margin-inline: auto;
    width: max-content;
    max-width: calc(100vw - 24px);
    bottom: calc(var(--consent-h, 0px) + 84px);
  }
}