/* =========================================================
   SCRIPTNIGHT // NOVA PWA
   Install, update, and offline presentation
   ========================================================= */

.pwa-notice {
  position: fixed;
  top: calc(var(--header-height) + env(safe-area-inset-top) + 14px);
  right: max(18px, env(safe-area-inset-right));
  z-index: 450;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 11px;
  width: min(390px, calc(100vw - 36px));
  min-height: 58px;
  padding: 11px 12px 11px 15px;
  border: 1px solid rgba(0, 255, 157, 0.3);
  border-radius: 10px;
  background: rgba(0, 10, 8, 0.97);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.56), 0 0 26px rgba(0, 255, 157, 0.07);
  backdrop-filter: blur(16px);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}

.pwa-notice[hidden],
body:not(.nova-awake) .pwa-notice {
  display: none !important;
}

.pwa-notice[data-kind="offline"] {
  border-color: rgba(220, 255, 244, 0.2);
}

.pwa-notice[data-kind="install"] {
  border-color: rgba(0, 255, 249, 0.32);
}

.pwa-notice-signal {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 11px rgba(0, 255, 157, 0.8);
}

.pwa-notice[data-kind="offline"] .pwa-notice-signal {
  background: rgba(220, 255, 244, 0.34);
  box-shadow: none;
}

.pwa-notice[data-kind="install"] .pwa-notice-signal {
  background: var(--cyan);
  box-shadow: 0 0 11px rgba(0, 255, 249, 0.7);
}

.pwa-notice p {
  margin: 0;
  color: rgba(220, 255, 244, 0.76);
  font-size: 0.61rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.pwa-notice-action,
.pwa-notice-close {
  border: 1px solid rgba(0, 255, 157, 0.22);
  background: rgba(0, 255, 157, 0.04);
  color: var(--green-soft);
  cursor: pointer;
}

.pwa-notice-action {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.pwa-notice-close {
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 1.15rem;
  line-height: 1;
}

.pwa-notice-action:hover,
.pwa-notice-action:focus-visible,
.pwa-notice-close:hover,
.pwa-notice-close:focus-visible {
  border-color: rgba(0, 255, 249, 0.48);
  color: var(--cyan);
}

html.pwa-standalone .site-footer #installNova {
  display: none !important;
}

body.is-offline [data-channel-entry][data-state="offline"] {
  opacity: 0.68;
}

body.is-offline .header-channel[data-state="offline"] .header-channel-dot,
body.is-offline .channel-launcher[data-state="offline"] .channel-launcher-core i,
body.is-offline .channel-presence[data-state="offline"] span {
  background: rgba(220, 255, 244, 0.3);
  box-shadow: none;
}

body.is-offline .channel-launcher[data-state="offline"] .channel-halo,
body.is-offline .channel-launcher[data-state="offline"] .channel-halo::after {
  animation: none;
  border-color: rgba(220, 255, 244, 0.12);
}

@media (max-width: 660px) {
  .pwa-notice {
    top: calc(var(--header-height) + env(safe-area-inset-top) + 10px);
    right: max(16px, env(safe-area-inset-right));
    left: max(16px, env(safe-area-inset-left));
    width: auto;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .pwa-notice-action {
    grid-column: 2 / 3;
    justify-self: start;
  }

  .pwa-notice-close {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

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