/* ==========================================================================
   NOWA WERSJA APKI (update.js, krok 3c, 4.10.2026). Przedrostek upd-.
   Ramka i ikona --sys (komunikat systemu), przycisk w --accent (jak FAB).
   Warstwa 2050: nad gornym paskiem (2000), pod panelem znajomych (2100)
   i oknami (ustawienia 2500).
   ========================================================================== */
.upd {
  position: fixed; z-index: 2050; display: none; align-items: center; gap: 12px;
  /* PC: pod gornym paskiem, na jego srodku — --upd-x / --upd-y mierzy update.js */
  top: var(--upd-y, 120px); left: var(--upd-x, 50%); transform: translateX(-50%);
  max-width: calc(100vw - 32px); box-sizing: border-box;
  padding: 10px 12px 10px 16px; border-radius: 12px;
  background: rgba(10, 10, 14, .96);
  border: 1px solid color-mix(in srgb, var(--sys) 45%, transparent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .7), 0 0 18px color-mix(in srgb, var(--sys) 18%, transparent);
  color: #fff; font-family: var(--font, inherit);
}
.upd.on { display: flex; animation: upd-in .3s ease-out; }
@keyframes upd-in {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.upd-ico { color: var(--sys); font-size: .95rem; flex-shrink: 0; }
.upd-tx { font-size: .8rem; font-weight: 700; letter-spacing: .3px; min-width: 0; }
.upd-go {
  flex-shrink: 0; cursor: pointer; border: none; border-radius: 8px; padding: 8px 14px;
  font: inherit; font-size: .62rem; font-weight: 800; letter-spacing: 1.2px; color: #001014;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent));
}
.upd-x {
  flex-shrink: 0; cursor: pointer; background: none; border: none; padding: 4px;
  color: #5b6270; font-size: .85rem;
}
.upd-x:hover { color: #fff; }

/* Telefon: na dole, nad rzedem przyciskow (+, strzalka, menu: 16 px + 48 px) */
@media (max-width: 768px) {
  .upd {
    top: auto; bottom: 80px; left: 12px; right: 12px; transform: none; max-width: none;
  }
  .upd.on { animation-name: upd-in-m; }
  .upd-tx { font-size: .72rem; }
}
@keyframes upd-in-m {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}