/* PWA install, update, and connectivity feedback. */
.pwa-notice {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1300;
  width: min(420px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent, #e8423a) 48%, rgba(255,255,255,.18));
  border-radius: 18px;
  background: color-mix(in srgb, var(--card, #16181f) 92%, #000 8%);
  box-shadow: 0 20px 48px rgba(0,0,0,.34);
  color: var(--text, #f8eded);
}

.pwa-notice[hidden] { display: none !important; }

.pwa-notice__body { display: flex; align-items: flex-start; gap: 12px; }
.pwa-notice__icon {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent, #e8423a) 22%, transparent);
  color: var(--accent, #e8423a);
}

.pwa-notice__copy { min-width: 0; }
.pwa-notice__title { margin: 0; font-size: 14px; font-weight: 800; line-height: 1.25; }
.pwa-notice__text { margin: 4px 0 0; color: var(--muted, rgba(248,237,237,.68)); font-size: 13px; line-height: 1.45; }
.pwa-notice__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0 52px; }
.pwa-notice__actions .btn { min-height: 40px; }
.pwa-notice__dismiss { position: absolute; top: 8px; right: 8px; min-width: 36px; min-height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--muted, #9ca3af); cursor: pointer; }
.pwa-notice__dismiss:hover, .pwa-notice__dismiss:focus-visible { background: rgba(255,255,255,.08); color: var(--text, #fff); }
.pwa-notice__dismiss:focus-visible { outline: 2px solid var(--accent, #e8423a); outline-offset: 2px; }

.pwa-network-status {
  position: fixed;
  z-index: 1301;
  top: 14px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid rgba(245,158,11,.42);
  border-radius: 999px;
  background: rgba(57,39,11,.96);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  color: #fde68a;
  font-size: 13px;
  font-weight: 700;
  transform: translate(-50%, -160%);
  transition: transform .2s ease;
}

.pwa-network-status.is-visible { transform: translate(-50%, 0); }

@media (max-width: 600px) {
  .pwa-notice { right: 16px; bottom: 16px; padding: 15px; border-radius: 16px; }
  .pwa-notice__actions { margin-left: 0; }
  .pwa-notice__actions .btn { flex: 1 1 150px; min-height: 44px; }
  .pwa-network-status { top: 10px; width: min(calc(100vw - 32px), 360px); justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-network-status { transition: none; }
}