/* static/css/pwa.css — install prompt UI (iOS + Android/Chrome)
 *
 * Matches AICUEVANA's dark neon aesthetic: glass panel, gradient hairline
 * border, springy entrance, cyan install pill. Self-contained so it works on
 * every page (base.html and standalone templates alike).
 *
 * Design notes:
 *  - Always a single centered row (icon · copy · install · close); never wraps
 *    into a tall two-row block, so it reads like a lightweight toast even over
 *    the full-screen feed.
 *  - Copy text is clamped so height stays compact on small screens.
 */
/* Site-wide canvas floor: EVERY template (base.html and standalone heads)
   includes this stylesheet render-blocking via partials/pwa_head.html, so the
   document canvas is the brand dark before any paint in every engine.
   Standalone templates (profile, messages, onboarding, ...) have no other
   early background — without this, their commit->first-paint window is the
   browser-default white: the "flash when navigating to profile". */
html{background:#0a0810;color-scheme:dark}

/* Cross-document View Transitions (progressive enhancement).
   Chrome/Edge 126+, Safari 18.2+: same-origin navigations cross-fade old->new
   instead of hard-cutting, which also masks any commit->first-paint gap.
   Firefox: no support yet -> falls back to normal navigation (dark canvas +
   paint holding already handle it). Pages opt in by loading this stylesheet. */
@view-transition { navigation: auto; }

.pwa-prompt,
.pwa-prompt *,
.pwa-prompt *::before,
.pwa-prompt *::after { box-sizing: border-box; }

.pwa-prompt {
  --pwa-cyan: #22d3ee;
  --pwa-violet: #a855f7;
  --pwa-pink: #ec4899;
  --pwa-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 2147483000;
  width: auto;
  min-width: min(600px, calc(100vw - 24px));
  max-width: min(600px, calc(100vw - 24px));
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 12px 14px;
  border-radius: 22px;
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(168, 85, 247, 0.18), transparent 55%),
    radial-gradient(120% 160% at 100% 100%, rgba(34, 211, 238, 0.14), transparent 55%),
    linear-gradient(160deg, rgba(29, 22, 54, 0.94), rgba(13, 10, 24, 0.97));
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 42px rgba(168, 85, 247, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: pwa-rise 0.5s var(--pwa-spring) both;
}

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

/* Gradient hairline border (masked ring, same technique as the app's glass UI) */
.pwa-prompt::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(34, 211, 238, 0.9),
    rgba(168, 85, 247, 0.7) 45%,
    rgba(236, 72, 153, 0.8)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.75;
  pointer-events: none;
}

/* On the TikTok-style feed, keep the prompt above the fixed bottom nav. */
.pwa-prompt--feed {
  bottom: calc(80px + env(safe-area-inset-bottom));
}

@keyframes pwa-rise {
  from { opacity: 0; transform: translate(-50%, 18px) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* ── Icon ─────────────────────────────────────────────────────────────────── */
.pwa-prompt__icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #22d3ee, #a855f7 55%, #ec4899);
  box-shadow:
    0 8px 24px rgba(34, 211, 238, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.pwa-prompt__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 120% at 30% 18%, rgba(255, 255, 255, 0.35), transparent 48%);
  pointer-events: none;
}
.pwa-prompt__icon svg {
  width: 24px;
  height: 24px;
  position: relative;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* ── Copy ─────────────────────────────────────────────────────────────────── */
.pwa-prompt__body {
  flex: 1 1 auto;
  min-width: 0;
  order: 1;
}
.pwa-prompt__title {
  display: block;
  font-family: "Poppins", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pwa-prompt__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.62);
}

/* ── Install button ───────────────────────────────────────────────────────── */
.pwa-install-btn {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #04121a;
  background: linear-gradient(135deg, #22d3ee, #06b6d4);
  padding: 11px 18px;
  border-radius: 999px;
  white-space: nowrap;
  order: 2;
  flex: 0 0 auto;
  box-shadow:
    0 6px 18px rgba(34, 211, 238, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition:
    transform 0.25s var(--pwa-spring),
    box-shadow 0.25s ease;
}
.pwa-install-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 26px rgba(34, 211, 238, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.pwa-install-btn:active { transform: scale(0.96); }
.pwa-install-btn[hidden] { display: none !important; }

/* ── Close button ─────────────────────────────────────────────────────────── */
.pwa-close {
  appearance: none;
  -webkit-appearance: none;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.06);
  font-size: 14px;
  line-height: 1;
  order: 3;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.3s var(--pwa-spring);
}
.pwa-close svg {
  width: 14px;
  height: 14px;
  display: block;
}
.pwa-close:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  transform: rotate(90deg);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .pwa-prompt {
    max-width: calc(100vw - 20px);
    gap: 12px;
    padding: 11px 11px 11px 13px;
    border-radius: 20px;
  }
  .pwa-prompt__icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 13px;
    order: 0;
  }
  .pwa-prompt__icon svg { width: 22px; height: 22px; }
  .pwa-prompt__body { order: 1; }
  .pwa-prompt__title { font-size: 13.5px; }
  .pwa-prompt__text { font-size: 11.5px; }
  .pwa-install-btn { order: 2; padding: 10px 16px; font-size: 12.5px; }
  .pwa-close { order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-prompt { animation: none; }
  .pwa-install-btn,
  .pwa-close { transition: none; }
}