/* The "konfetti as an app" card from pwa.js. Colors, lines and corners come from the theme in ui.css;
   the buttons are ui.css's own. On a wide screen it is a small note at the foot of the world, beside the
   panel; on a phone a card just above the quick buttons, so it moves with the sheet. */
.pwa { position: fixed; z-index: 2; right: calc(var(--panel-w) + 36px); bottom: 16px; box-sizing: border-box; max-width: min(400px, calc(100% - var(--panel-w) - 52px));
       display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; color: var(--ink);
       background: var(--panel); border: var(--panel-line); border-radius: min(var(--panel-radius), 18px); box-shadow: var(--btn-shadow); }
.pwa-icon { flex: none; width: 32px; height: 32px; border-radius: 8px; }
.pwa-text { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.3; }
.pwa-text strong { display: block; }
.pwa-text span { color: var(--soft); }
.pwa-text b { color: var(--ink); white-space: nowrap; }
.pwa-share { width: 1em; height: 1.2em; vertical-align: -.25em; color: var(--ink); }
.pwa button { flex: none; }
.pwa-x { min-width: 32px; }
/* The debugger's dock has the foot of the window; the offer waits. */
.debugging .pwa { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .pwa { animation: pwa-in .35s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes pwa-in { from { opacity: 0; translate: 0 16px; } }
}

/* Phone upright: centred above the quick buttons (60px tall, 10px over the sheet). Hidden while the sheet
   is full or dragged, when there is no room above it. */
@media (max-width: 700px), (max-height: 500px) {
  .pwa { left: calc(8px + env(safe-area-inset-left)); right: calc(8px + env(safe-area-inset-right)); bottom: calc(var(--sheet) + 82px); max-width: none;
         margin-inline: auto; width: min(420px, calc(100% - 16px - env(safe-area-inset-left) - env(safe-area-inset-right))); padding: 10px 10px 10px 12px; }
  .pwa-icon { width: 40px; height: 40px; border-radius: 10px; }
  .pwa-text { font-size: 14px; }
  [data-sheet="full"] .pwa, [data-sheet="drag"] .pwa { visibility: hidden; }
}
/* Phone on its side: the sheet and the quick buttons are on the right, so the card sits bottom left. */
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  .pwa { right: auto; bottom: calc(8px + env(safe-area-inset-bottom)); margin: 0; width: min(400px, calc(100% - min(380px, 46vw) - 110px)); }
  [data-sheet="full"] .pwa { visibility: visible; }
}