/**
 * PWA install dialog — TWO SELECTABLE SKINS over ONE shared DOM.
 *
 *   `.pwi-skin-native` (default) — a visually faithful port of the reference
 *       component, below. Looks like the OS's own install prompt.
 *   `.pwi-skin-tc`               — the same markup restyled on TC design
 *       tokens, so it reads as part of the CRM. Lives at the bottom of this
 *       file; it is a pure reskin, so the templates in chrome/pwa-install.js
 *       never branch on skin.
 *
 * The active skin is a class on `#pwa-install-element`, chosen by
 * `getPwaInstallSkin()` (localStorage `tc-pwa-install-skin`, switchable from
 * Settings › Integrations). Keeping both LIVE rather than commenting one out
 * means prettier, the breakpoint guard and the overflow-policy check all still
 * see the inactive one.
 *
 * ── The native skin ────────────────────────────────────────────────────────
 * A VISUALLY FAITHFUL port of khmyznikov/pwa-install's
 * stylesheets (`_reference/pwa-install-main/src/templates/**\/*.scss`),
 * de-SCSS'd and scoped under `#pwa-install-element` (the reference relied on
 * shadow DOM; a repo-wide check confirmed none of these generic class names
 * exist as bare selectors in the SPA bundle, and the id selector out-specifies
 * anything that might land later).
 *
 * Geometry, palette, radii, easing and durations are the reference's values,
 * NOT TC tokens: the Apple template imitates the native iOS "Add to Home
 * Screen" sheet and the Chromium template imitates Chrome's own Material
 * install dialog — the mimicry is the point. Only the z-index (TC's ladder)
 * and the reduced-motion block are ours.
 *
 * DELIBERATE DEVIATIONS (all documented in Documentation/admin-spa-log.md):
 *  1. Theme follows the APP's toggle (dark base + `.light-mode` overrides),
 *     not `prefers-color-scheme` — the SPA has an explicit theme switch. The
 *     hex values are the reference's, just re-keyed.
 *  2. ONE 768/769px split instead of the reference's 667/548/495/428px set —
 *     scripts/check-spa-breakpoints.mjs allows only the app-wide breakpoint.
 *     ≤768px therefore gets the phone treatment (edge-to-edge iOS sheet), and
 *     the reference's 429–666px "floating sheet" intermediate is not reproduced.
 *  3. Both bottom sheets rest FULLY VISIBLE rather than the reference's
 *     peek-at-85px, because the shared drawer/gestures.js drag engine is
 *     bottom-anchored (`--sheet-rest-offset`). Resting look = the reference's
 *     expanded state.
 *  4. `.aqua` (the iOS-26 liquid-glass skin) is rendered unconditionally —
 *     see chrome/pwa-install.js. `.desktop` (the macOS "Add to Dock" panel) and
 *     the screenshot gallery are both ported; each was absent from the first cut.
 *     No desktop-Safari-specific template beyond `.desktop`.
 */

#pwa-install-element[hidden] {
  display: none;
}

#pwa-install-element {
  user-select: none;
}

/* ── Shared dialog base (styles.scss:4-19) ───────────────────────────────────
   DARK first — the SPA's default; `.light-mode` restores the reference's
   light palette below. */
#pwa-install-element.pwi-skin-native .install-dialog {
  --text-color-normal: #eee;
  --background-color: #1e1e1e;
  --border-bottom-color: #404140;
  --scrollbar-background-color: #424242;

  font-family: 'Roboto', 'Segoe UI', system-ui;

  position: fixed;
  display: inline-block;

  opacity: 0;
  visibility: hidden;

  z-index: var(--z-pwa-install, 1190);
}

/* The dialog takes programmatic focus on open (screen-reader announcement); the
   reference draws no ring around itself, and the SPA's global focus styles
   would otherwise outline the whole sheet. Interactive children keep theirs. */
#pwa-install-element .install-dialog:focus,
#pwa-install-element .install-dialog:focus-visible {
  outline: none;
}

#pwa-install-element.pwi-skin-native .install-dialog.mobile {
  --touch-header-color: #3f403f;
}

[data-theme='light'] #pwa-install-element.pwi-skin-native .install-dialog,
.light-mode #pwa-install-element.pwi-skin-native .install-dialog {
  --text-color-normal: #212121;
  --background-color: #fff;
  --border-bottom-color: #dbdcde;
  --scrollbar-background-color: #fff;
}

[data-theme='light'] #pwa-install-element.pwi-skin-native .install-dialog.mobile,
.light-mode #pwa-install-element.pwi-skin-native .install-dialog.mobile {
  --touch-header-color: #dbdce0;
}

/* ── Chromium: the Material card (styles.scss:20-60) ─────────────────────── */
#pwa-install-element.pwi-skin-native .install-dialog.chrome {
  max-width: 380px;
  width: 90%;
  min-height: 90px;
  margin: 0 auto;
  right: 150px;
  left: auto;

  background-color: var(--background-color);
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));

  font-size: 15px;
  color: var(--text-color-normal);
  border-radius: 8px;

  top: -100px;

  transition:
    top 0.5s ease-in-out,
    opacity 0.8s ease-in-out,
    max-height 0.35s ease-in-out;
}

#pwa-install-element.pwi-skin-native .install-dialog.chrome.available {
  opacity: 1;
  top: 28px;
  visibility: visible;
}

#pwa-install-element.pwi-skin-native .install-dialog.chrome:not(.mobile) .dialog-body {
  display: grid;
  grid-template-columns: 70px 1fr;
}

/* ── Chromium: the Material bottom sheet (styles.scss:63-95) ──────────────
   Deviation 3: bottom-anchored + fully visible at rest (the reference is
   `top: 0` + `translateY(100vh - 85px)`, driven by its own drag controller). */
#pwa-install-element.pwi-skin-native .install-dialog.chrome.mobile {
  top: auto;
  bottom: 0;

  max-width: 414px;
  width: 100%;

  left: 0;
  right: 0;

  transition: transform 0.5s cubic-bezier(0.4, 0, 0, 1);
  transform: translateY(100%);

  border-radius: 0;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;

  padding-bottom: 35px;
}

#pwa-install-element.pwi-skin-native .install-dialog.chrome.mobile.available {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, var(--sheet-rest-offset, 0px), 0);
}

/* ── Chromium shared body (styles-common.scss) ───────────────────────────── */
#pwa-install-element.pwi-skin-native .chrome .dialog-body .icon {
  display: flex;
  align-items: flex-start;
}

#pwa-install-element.pwi-skin-native .chrome .dialog-body .icon .icon-image {
  width: 48px;
  height: 48px;
  margin: 10px auto 0;
  border-radius: 6px;
}

#pwa-install-element.pwi-skin-native .chrome .dialog-body .about {
  display: grid;
  grid-template-rows: 30px auto;
}

#pwa-install-element.pwi-skin-native .chrome .dialog-body .about .name,
#pwa-install-element.pwi-skin-native .chrome .dialog-body .about .hostname {
  padding: 0 5px;
  overflow: hidden;
}

#pwa-install-element.pwi-skin-native .chrome .dialog-body .about .name {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  margin-top: 5px;
  align-items: flex-start;
  display: flex;
}

#pwa-install-element.pwi-skin-native .chrome .dialog-body .about .name label {
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
  overflow: hidden;
}

#pwa-install-element.pwi-skin-native .chrome .dialog-body .about .hostname {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.7;
  line-height: 14px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  text-align: start;
  word-break: break-all;
  white-space: nowrap;
}

#pwa-install-element.pwi-skin-native .chrome .dialog-body .about + hr {
  margin-top: 10px;
}

#pwa-install-element.pwi-skin-native .chrome .dialog-body .description {
  font-weight: 400;
  line-height: 20px;
  grid-column: 1 / 3;
  padding: 0 6px;
  margin: 10px 5px 5px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  max-height: 115px;
  overflow: hidden;
  overflow-y: auto;
  text-overflow: ellipsis;
  text-align: start;
}

#pwa-install-element.pwi-skin-native .chrome .dialog-body .app-description {
  font-size: 13px;
  margin-bottom: 10px;
}

#pwa-install-element.pwi-skin-native .chrome .dialog-body .app-description::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

#pwa-install-element.pwi-skin-native
  .chrome
  .dialog-body
  .app-description::-webkit-scrollbar-thumb {
  background: rgb(146, 146, 146);
  border-radius: 4px;
}

#pwa-install-element.pwi-skin-native
  .chrome
  .dialog-body
  .app-description::-webkit-scrollbar-thumb:hover {
  background: rgb(100, 100, 100);
}

#pwa-install-element.pwi-skin-native
  .chrome
  .dialog-body
  .app-description::-webkit-scrollbar-track {
  background: var(--scrollbar-background-color);
  border-radius: 4px;
}

#pwa-install-element.pwi-skin-native .chrome .dialog-body .install-description {
  font-size: 14px;
}

#pwa-install-element.pwi-skin-native .chrome .dialog-body hr {
  height: 1px;
  width: 100%;
  grid-column: 1 / 3;
  background-color: var(--border-bottom-color);
  border: none;
  margin: 0;
}

#pwa-install-element.pwi-skin-native .chrome .dialog-body .action-buttons {
  display: grid;
  grid-template-columns: 50% auto;
  grid-column-start: 1;
  grid-column-end: 3;
  gap: 10px;
  padding: 10px;
}

#pwa-install-element.pwi-skin-native .chrome .dialog-body .action-buttons .primary {
  grid-column-start: 2;
}

/* Material button + ripple (styles-common.scss:142-256) */
#pwa-install-element.pwi-skin-native .material-button {
  --text-color-primary: #1b222c;
  --text-color-secondary: #a7c7fa;
  --background-color-primary: #a7c7fa;
  --background-color-ripple: #eee;

  position: relative;
  display: inline-block;
  box-sizing: border-box;
  border: none;
  border-radius: 6px;
  padding: 0 16px;
  min-width: 64px;
  height: 36px;
  vertical-align: middle;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;

  box-shadow:
    0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);

  font-family:
    'Roboto',
    'Segoe UI',
    BlinkMacSystemFont,
    system-ui,
    -apple-system;
  font-size: 14px;
  font-weight: 500;
  line-height: 37px;
  overflow: hidden;
  outline: none;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

[data-theme='light'] #pwa-install-element.pwi-skin-native .material-button,
.light-mode #pwa-install-element.pwi-skin-native .material-button {
  --text-color-primary: #eee;
  --text-color-secondary: #374fc6;
  --background-color-primary: #374fc6;
}

#pwa-install-element.pwi-skin-native .material-button.primary {
  color: var(--text-color-primary);
  background-color: var(--background-color-primary);
}

#pwa-install-element.pwi-skin-native .material-button.secondary {
  background-color: transparent;
  color: var(--text-color-secondary);
  box-shadow: none;
}

#pwa-install-element.pwi-skin-native .material-button.secondary::before,
#pwa-install-element.pwi-skin-native .material-button.secondary::after {
  background-color: var(--background-color-primary);
}

#pwa-install-element.pwi-skin-native .material-button.secondary:hover,
#pwa-install-element.pwi-skin-native .material-button.secondary:active {
  box-shadow: none;
}

#pwa-install-element.pwi-skin-native .material-button.secondary.close {
  height: 26px;
  min-width: 26px;
  line-height: 0;
  margin-inline-end: 0;
  margin-inline-start: auto;
  padding: 0;
  border-radius: 50%;
}

#pwa-install-element.pwi-skin-native .material-button.secondary.close svg {
  width: 16px;
  fill: var(--text-color-secondary);
}

#pwa-install-element.pwi-skin-native .material-button.secondary.close::after {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

#pwa-install-element.pwi-skin-native .material-button.secondary.close::before {
  border-radius: 50%;
}

#pwa-install-element.pwi-skin-native .material-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--background-color-ripple);
  opacity: 0;
  transition: opacity 0.2s;
}

#pwa-install-element.pwi-skin-native .material-button::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  padding: 50%;
  width: 32px;
  height: 32px;
  background-color: var(--background-color-ripple);
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  transition:
    opacity 1s,
    transform 0.5s;
}

#pwa-install-element.pwi-skin-native .material-button:active {
  box-shadow:
    0 5px 5px -3px rgba(0, 0, 0, 0.2),
    0 8px 10px 1px rgba(0, 0, 0, 0.14),
    0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

#pwa-install-element.pwi-skin-native .material-button:active::after {
  opacity: 0.32;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0s;
}

/* ── Chromium bottom-sheet internals (styles-bottom-sheet.scss) ──────────── */
#pwa-install-element.pwi-skin-native .chrome.mobile .dialog-body {
  display: block;
}

#pwa-install-element.pwi-skin-native .chrome.mobile .touch-header {
  height: 30px;
  width: 100%;
  padding-top: 10px;
  box-sizing: border-box;
  cursor: grab;
  touch-action: none;
}

#pwa-install-element.pwi-skin-native .chrome.mobile .touch-header:active {
  cursor: grabbing;
}

#pwa-install-element.pwi-skin-native .chrome.mobile .touch-header::before {
  content: '';
  width: 40px;
  height: 5px;
  border-radius: 3px;
  background: var(--touch-header-color);
  margin: 0 auto;
  display: block;
}

#pwa-install-element.pwi-skin-native .chrome.mobile .body-header {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  grid-gap: 15px;
  padding: 0 20px 18px;
  border-bottom: 1px solid var(--border-bottom-color);
}

#pwa-install-element.pwi-skin-native .chrome.mobile .body-header .install {
  text-transform: capitalize;
  height: 40px;
  min-width: 50px;
  padding: 0 23px;
  align-items: center;
  display: inline-flex;
  -webkit-tap-highlight-color: transparent;
  transition:
    min-width 0.2s,
    color 0.2s,
    background-color 0.2s,
    border-color 0.2s;
}

#pwa-install-element.pwi-skin-native .chrome.mobile .body-header .install .button-text,
#pwa-install-element.pwi-skin-native .chrome.mobile .body-header .install svg {
  margin: 0 auto;
}

#pwa-install-element.pwi-skin-native .chrome.mobile .body-header .install .check-icon {
  display: none;
}

#pwa-install-element.pwi-skin-native .chrome.mobile .body-header .about {
  grid-template-rows: auto auto;
  grid-gap: 6px;
}

#pwa-install-element.pwi-skin-native .chrome.mobile .body-header .about .name {
  padding: 0;
  line-height: 20px;
  font-size: 16px;
}

#pwa-install-element.pwi-skin-native .chrome.mobile .body-header .about .hostname {
  font-size: 14px;
  padding: 0;
}

#pwa-install-element.pwi-skin-native .chrome.mobile .body-header .icon .icon-image {
  margin: 0;
  width: 45px;
  height: 45px;
}

#pwa-install-element.pwi-skin-native .chrome.mobile .how-to-body {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  opacity: 0;
}

#pwa-install-element.pwi-skin-native .chrome.mobile .how-to-body .description-step {
  display: flex;
  gap: 15px;
  margin-inline-start: 2.5px;
  align-items: center;
}

#pwa-install-element.pwi-skin-native .chrome.mobile .how-to-body .description-step .svg-wrap {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  width: 40px;
  height: 40px;
  background-color: var(--touch-header-color);
  border-radius: 50%;
}

#pwa-install-element.pwi-skin-native .chrome.mobile .how-to-body .description-step .svg-wrap svg {
  fill: var(--text-color-normal);
  margin: 0 auto;
}

#pwa-install-element.pwi-skin-native
  .chrome.mobile
  .how-to-body
  .description-step
  .svg-wrap.add-icon
  svg {
  padding-right: 1px;
}

#pwa-install-element.pwi-skin-native .chrome.mobile .dialog-body.how-to .description {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  opacity: 0;
}

#pwa-install-element.pwi-skin-native .chrome.mobile .dialog-body.how-to .how-to-body {
  max-height: 600px;
  padding-top: 18px;
  padding-bottom: 18px;
  opacity: 1;
}

#pwa-install-element.pwi-skin-native .chrome.mobile .dialog-body.how-to .install {
  min-width: 40px;
  padding: 0;
  background: transparent;
  color: var(--text-color-normal);
  box-shadow: none;
  border: 1px solid;
}

#pwa-install-element.pwi-skin-native .chrome.mobile .dialog-body.how-to .install .check-icon {
  display: inline;
  fill: var(--text-color-normal);
}

#pwa-install-element.pwi-skin-native .chrome.mobile .dialog-body.how-to .install .button-text {
  display: none;
}

#pwa-install-element.pwi-skin-native .chrome.mobile .dialog-body > .description {
  padding: 15px 20px;
  margin: 0;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  max-height: 150px;
  opacity: 1;
}

#pwa-install-element.pwi-skin-native .chrome.mobile .how-to-body,
#pwa-install-element.pwi-skin-native .chrome.mobile .dialog-body > .description {
  transition:
    max-height 0.2s,
    opacity 0.15s,
    padding 0.2s;
}

#pwa-install-element.pwi-skin-native .chrome.mobile .material-button {
  border-radius: 20px;
}

/* ── Apple: the native "Add to Home Screen" sheet (styles-apple.scss) ─────── */
#pwa-install-element.pwi-skin-native .install-dialog.apple {
  --text-color-normal: #fff;
  --text-color-description: #9e9aa1;
  --background-color: rgb(25 25 25 / 90%);
  --text-color-button: #fff;
  --background-color-button: #353535;
  --background-color-button-active: #454545;
  --border-bottom-color: #353535;

  font-family:
    system-ui,
    -apple-system,
    'HelveticaNeue',
    BlinkMacSystemFont,
    'Roboto',
    'Segoe UI';

  max-width: 380px;
  width: auto;
  margin: 0 auto;

  right: 0;
  left: 0;
  bottom: 0;

  font-size: 15px;
  color: var(--text-color-normal);

  transition:
    transform 0.4s cubic-bezier(0.33, 1, 0.66, 1),
    opacity 0.5s cubic-bezier(1, 0, 1, -2),
    border 0.35s ease-in-out;

  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: visible;
  transform: translateY(100%);
  will-change: opacity, transform;

  display: grid;
  grid-template-columns: 95px 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    'icon description'
    'welcome welcome'
    'how-to how-to'
    'gallery gallery'
    'button button';

  border-radius: 10px;
  border-bottom: 1px solid transparent;

  background-color: var(--background-color);
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

[data-theme='light'] #pwa-install-element.pwi-skin-native .install-dialog.apple,
.light-mode #pwa-install-element.pwi-skin-native .install-dialog.apple {
  --text-color-normal: #333;
  --text-color-description: #333;
  --background-color: rgba(255, 255, 255, 0.8);
  --background-color-button: #fff;
  --background-color-button-active: rgb(181, 181, 187);
  --border-bottom-color: rgba(0, 0, 0, 0.1);
}

#pwa-install-element.pwi-skin-native .apple.available {
  opacity: 1;
  pointer-events: unset;
  transform: translateY(0);
  transition:
    transform 0.5s cubic-bezier(0.33, 1, 0.66, 1),
    border 0.35s ease-in-out;
}

#pwa-install-element.pwi-skin-native .apple .icon {
  display: flex;
  align-items: center;
  grid-area: icon;
  border-bottom: 1px solid var(--border-bottom-color);
}

#pwa-install-element.pwi-skin-native .apple .icon .icon-image {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 6px;
}

#pwa-install-element.pwi-skin-native .apple .close {
  height: 26px;
  min-width: 26px;
  line-height: 0;
  margin-inline-end: 7px;
  margin-top: 7px;
  margin-inline-start: auto;
  padding: 0;
  border-radius: 50%;
  opacity: 0.5;
  outline: none;
  color: var(--text-color-normal);
  border: none;
  background-color: transparent;
  cursor: pointer;
  transition:
    opacity 0.2s ease-in-out,
    background-color 0.2s ease-in-out;
  grid-area: description;
}

#pwa-install-element.pwi-skin-native .apple .close svg {
  fill: var(--text-color-normal);
  width: 18px;
}

#pwa-install-element.pwi-skin-native .apple .close:hover,
#pwa-install-element.pwi-skin-native .apple .close:active {
  opacity: 1;
  background-color: var(--background-color-button);
}

#pwa-install-element.pwi-skin-native .apple .about {
  display: grid;
  grid-template-rows: 35px 60px;
  border-bottom: 1px solid var(--border-bottom-color);
  grid-area: description;
}

#pwa-install-element.pwi-skin-native .apple .about .name,
#pwa-install-element.pwi-skin-native .apple .about .description {
  padding-inline-end: 15px;
  overflow: hidden;
}

#pwa-install-element.pwi-skin-native .apple .about .name {
  font-weight: 600;
  padding-top: 10px;
  padding-inline-end: 10px;
  line-height: 22px;
  align-items: flex-start;
  display: flex;
}

#pwa-install-element.pwi-skin-native .apple .about .description {
  font-size: 12px;
  line-height: 15px;
  padding: 0;
  margin-bottom: 15px;
  overflow-y: auto;
  color: var(--text-color-description);
}

#pwa-install-element.pwi-skin-native .apple .welcome-to-install {
  font-size: 15px;
  grid-area: welcome;
  text-align: start;
  font-weight: 400;
  padding: 15px;
  width: auto;
  border-bottom: 1px solid var(--border-bottom-color);
}

#pwa-install-element.pwi-skin-native .apple .how-to-body {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition:
    opacity ease-in-out 0.5s,
    max-height 0.5s ease-in-out;
  grid-area: how-to;
}

#pwa-install-element.pwi-skin-native .apple.how-to .how-to-body {
  opacity: 1;
  max-height: 400px;
  overflow-y: auto;
  transition:
    opacity 0.3s ease-in-out 0.2s,
    max-height 0.5s ease-in-out;
}

#pwa-install-element.pwi-skin-native .apple .how-to-description {
  display: grid;
  user-select: none;
  grid-auto-columns: 1fr;
  gap: 10px;
  padding: 15px 15px 0;
}

#pwa-install-element.pwi-skin-native .apple .description-step {
  display: inline-flex;
  flex-direction: row;
  gap: 15px;
  align-items: center;
  font-size: 14px;
}

#pwa-install-element.pwi-skin-native .apple .description-step .svg-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  fill: var(--text-color-normal);
  color: var(--text-color-normal);
  width: 50px;
  height: 50px;
  align-items: center;
  border-radius: 6px;
}

#pwa-install-element.pwi-skin-native .apple .description-step .svg-wrap svg {
  margin: 0 auto;
}

#pwa-install-element.pwi-skin-native .apple .description-step .svg-wrap #pwi-share {
  margin-bottom: 4px;
  transform: scale(0.9);
}

#pwa-install-element.pwi-skin-native .apple .description-step .svg-wrap #pwi-add {
  transform: scale(0.9);
}

#pwa-install-element.pwi-skin-native .apple .description-step .svg-wrap #pwi-safari {
  transform: scale(0.92);
}

#pwa-install-element.pwi-skin-native .apple .description-step .step-text {
  font-weight: 600;
  text-align: start;
}

#pwa-install-element.pwi-skin-native .apple .action-buttons {
  grid-area: button;
  grid-column-start: 1;
  grid-column-end: 3;
  margin: 16px;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
}

#pwa-install-element.pwi-skin-native .apple .dialog-button {
  display: grid;
  height: 50px;
  width: 100%;
  line-height: 50px;
  border-radius: 0;
  padding: 0 20px;
  text-align: start;
  font-size: 16px;
  color: var(--text-color-normal);
}

#pwa-install-element.pwi-skin-native .apple .dialog-button.button {
  border: none;
  outline: none;
  font-family:
    system-ui,
    -apple-system,
    'HelveticaNeue',
    BlinkMacSystemFont;
  cursor: pointer;
  user-select: none;
  font-weight: 400;
  background-color: var(--background-color-button);
  -webkit-tap-highlight-color: transparent;
}

#pwa-install-element.pwi-skin-native .apple .dialog-button.button svg {
  fill: var(--text-color-normal);
}

#pwa-install-element.pwi-skin-native .apple .dialog-button.button:active {
  background-color: var(--background-color-button-active);
}

#pwa-install-element.pwi-skin-native .apple .action-buttons .button-text {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 15px;
  justify-content: flex-end;
}

/* `opacity: 0` + the show/hide pair belong to the INSTALL button ALONE
   (styles-apple.scss:262-305). It holds TWO stacked spans that cross-fade, so
   hidden-by-default is the correct resting state. Hoisting it to
   `.action-buttons .button-text` — which this port originally did — also caught
   the gallery button's SINGLE span, which carries no `.show`, so its label
   ("Show Gallery" / "Back") rendered fully transparent: a visible, clickable,
   apparently-blank row. */
#pwa-install-element.pwi-skin-native .apple .action-buttons .install .button-text {
  opacity: 0;
  transition: opacity 0.4s ease-in-out 0.1s;
  overflow: hidden;
}

#pwa-install-element.pwi-skin-native .apple .action-buttons .button-text > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

#pwa-install-element.pwi-skin-native .apple .action-buttons .button-text > svg {
  flex-shrink: 0;
  width: 22px;
}

#pwa-install-element.pwi-skin-native .apple .action-buttons .install .button-text.show {
  opacity: 1;
  visibility: visible;
  width: auto;
  height: auto;
}

#pwa-install-element.pwi-skin-native .apple .action-buttons .install .button-text.hide {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
  visibility: hidden;
}

#pwa-install-element.pwi-skin-native .apple .action-buttons .icon-back {
  width: 23px;
  rotate: 90deg;
}

/* ── Apple `.aqua` — the iOS/iPadOS 26 "liquid glass" skin ────────────────
   (styles-apple.scss:475-636 + the dark overrides at 1006-1021). This is the
   TARGET look and is rendered unconditionally; the reference gates it on a
   `text-wrap: pretty` feature-detect, which is an unreliable proxy.

   The translucency recipe is the reference's: the sheet mixes 20% of
   `--tint-color` (the PAGE's own background colour, set inline per render by
   chrome/pwa-install.js) into a translucent `--base-color`, so the glass reads
   as tinted by whatever sits behind it. DARK first, light below. */
#pwa-install-element.pwi-skin-native .install-dialog.apple.aqua {
  --border-bottom-color: rgb(84 84 88 / 65%);
  --divider-buttons-color: #4e4e51;
  --background-color-button: rgb(54 56 54 / 60%);
  --text-color-normal: #fff;
  --text-color-description: rgb(189 177 175 / 80%);
  --base-color: 50 50 50;
  --tint-color: rgb(var(--base-color));

  border: 1px solid rgb(var(--base-color) / 30%);
  border-radius: 35px;
  grid-template-columns: 100px 1fr;

  background: color-mix(in srgb, var(--tint-color) 20%, rgb(var(--base-color) / 70%) 80%);
  box-shadow:
    inset 1px 1px 1px 0 color-mix(in srgb, var(--tint-color) 20%, rgb(var(--base-color) / 25%) 80%),
    inset 0 0 1px 1px color-mix(in srgb, var(--tint-color) 20%, rgb(var(--base-color) / 50%) 80%);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

[data-theme='light'] #pwa-install-element.pwi-skin-native .install-dialog.apple.aqua,
.light-mode #pwa-install-element.pwi-skin-native .install-dialog.apple.aqua {
  --border-bottom-color: rgb(95 95 95 / 30%);
  --divider-buttons-color: #85858580;
  --background-color-button: rgb(211 211 211 / 60%);
  --text-color-normal: #000;
  --text-color-description: rgba(75, 75, 75, 0.9);
  --base-color: 255 255 255;

  border-color: rgb(var(--base-color) / 50%);
}

#pwa-install-element.pwi-skin-native .apple.aqua .icon {
  margin-left: 26px;
}

#pwa-install-element.pwi-skin-native .apple.aqua .icon .icon-image {
  border-radius: 14px;
  width: 60px;
  height: 60px;
  margin-left: 0;
}

#pwa-install-element.pwi-skin-native .apple.aqua .about {
  margin-right: 26px;
  grid-template-rows: 56px 56px;
}

#pwa-install-element.pwi-skin-native .apple.aqua .about .name {
  align-items: flex-end;
}

#pwa-install-element.pwi-skin-native .apple.aqua .about .name,
#pwa-install-element.pwi-skin-native .apple.aqua .about .description {
  font-size: 14px;
  margin: 0;
  padding: 0;
}

#pwa-install-element.pwi-skin-native .apple.aqua .welcome-to-install {
  padding: 15px 0;
  margin: 0 26px;
}

#pwa-install-element.pwi-skin-native .apple.aqua .close {
  height: 42px;
  min-width: 42px;
  margin-inline-end: 14px;
  margin-top: 14px;
  background-color: rgb(30 30 30 / 80%);
  border: 1px solid rgb(60 60 60 / 90%);
}

[data-theme='light'] #pwa-install-element.pwi-skin-native .apple.aqua .close,
.light-mode #pwa-install-element.pwi-skin-native .apple.aqua .close {
  background-color: rgb(var(--base-color) / 80%);
  border: 1px solid rgb(var(--base-color) / 90%);
}

#pwa-install-element.pwi-skin-native .apple.aqua .close svg {
  width: 28px;
}

#pwa-install-element.pwi-skin-native .apple.aqua .action-buttons {
  border-radius: 26px;
}

#pwa-install-element.pwi-skin-native .apple.aqua .dialog-button {
  transition: height 0.3s ease-in-out;
  height: 48px;
}

/* The hairline BETWEEN the two stacked rows inside the radius-26 group — iOS's
   own grouped-list divider, and the whole reason `--divider-buttons-color`
   exists. It was declared in both themes and never used, so the ported iOS panel
   showed two rows with no separator. The button is `display: grid`, so this
   `::before` takes the first grid row and reads as the row's top border.
   (styles-apple.scss:538-545.) */
#pwa-install-element.pwi-skin-native .apple.aqua .dialog-button.gallery + .install::before {
  content: '';
  display: inline-block;
  width: 100%;
  height: 0;
  border-bottom: 1px solid var(--divider-buttons-color);
}

/* Whenever one of the two rows collapses, the divider has nothing to divide. */
#pwa-install-element.pwi-skin-native
  .apple.aqua.apple-mobile.how-to
  .dialog-button.gallery
  + .install::before,
#pwa-install-element.pwi-skin-native .apple.aqua.apple-mobile.gallery .install::before {
  visibility: hidden;
}

/* macOS drops it entirely — the Dock panel's rows are plain, not a grouped list
   (reference `.desktop .aqua .action-buttons .install::before { content: none }`). */
#pwa-install-element.pwi-skin-native .apple.aqua.desktop .action-buttons .install::before {
  content: none;
}

#pwa-install-element.pwi-skin-native .apple.aqua .action-buttons .dialog-button.gallery {
  margin: 0;
}

/* The single install button is square-cornered INSIDE the radius-26 clipping
   container (reference cascade); `.how-to` restores the top corners. */
#pwa-install-element.pwi-skin-native .apple.aqua.apple-mobile.how-to .install {
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
}

#pwa-install-element.pwi-skin-native .apple.aqua .action-buttons .button-text > svg {
  width: 22px;
}

/* Circular tinted step icons — the most recognisable part of the 26 look. */
#pwa-install-element.pwi-skin-native
  .apple.aqua.apple-mobile
  .how-to-body
  .description-step
  .svg-wrap {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  background-color: color-mix(
    in srgb,
    var(--tint-color) 20%,
    color-mix(in srgb, var(--text-color-normal) 10%, transparent) 50%
  );
}

/* ── Apple `.desktop` — the macOS "Add to Dock" panel ─────────────────────
   (styles-apple.scss:637-868 + the dark overrides at 991-1010). A SIBLING of
   `.apple-mobile`, not a variant of it: smaller (282px), a 65px icon column,
   square 32px step icons instead of the mobile 60px circles, and its own
   palette. It composes WITH `.aqua`, so macOS Safari 17+ gets `apple aqua
   desktop`.

   All of it is written AFTER the `.aqua` block and at equal-or-greater
   specificity, so it wins the geometry the aqua rules set for phones.
   DARK first (the reference's `prefers-color-scheme: dark` values), light below
   (its base values) — deviation 1. */
#pwa-install-element.pwi-skin-native .install-dialog.apple.desktop {
  --text-color-normal: #fff;
  --text-color-description: var(--text-color-normal);
  --icon-how-to-color: #bcb8b6;
  --background-color: rgb(45 45 45 / 90%);
  --border-bottom-color: #5b5b5b;
  --background-color-button: #6d6765;
  --background-color-button-active: linear-gradient(
    0deg,
    rgba(59, 108, 200, 1) 0%,
    rgba(66, 123, 250, 1) 100%
  );

  outline: 1px solid #1c1c1c;
  color-scheme: dark;

  grid-template-columns: 65px 1fr;
  padding: 10px;
  max-width: 282px;
  border: 1px solid var(--border-bottom-color);
}

[data-theme='light'] #pwa-install-element.pwi-skin-native .install-dialog.apple.desktop,
.light-mode #pwa-install-element.pwi-skin-native .install-dialog.apple.desktop {
  --text-color-normal: rgba(0, 0, 0, 0.85);
  --text-color-description: rgba(0, 0, 0, 0.85);
  --icon-how-to-color: rgba(0, 0, 0, 0.5);
  --background-color: rgb(246 246 246 / 85%);
  --border-bottom-color: rgb(185 185 185);
  --background-color-button: #c6c1c6;
  --background-color-button-active: linear-gradient(
    0deg,
    rgba(64, 121, 250, 1) 0%,
    rgba(84, 144, 251, 1) 100%
  );

  color-scheme: light;
}

#pwa-install-element.pwi-skin-native .apple.desktop .icon {
  align-items: flex-start;
  margin-left: 0;
  padding-bottom: 12px;
}

#pwa-install-element.pwi-skin-native .apple.desktop .icon .icon-image {
  width: 52px;
  height: 52px;
  margin-left: 0;
  border-radius: 10px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

#pwa-install-element.pwi-skin-native .apple.desktop .close {
  height: 20px;
  min-width: 20px;
  margin-inline-end: -5px;
  margin-top: -5px;
  border: none;
  background: var(--background-color-button);
}

#pwa-install-element.pwi-skin-native .apple.desktop .close svg {
  width: 14px;
}

/* The mobile sheet's `.about` is a two-row grid; the Dock panel centres a
   free-height stack instead. */
#pwa-install-element.pwi-skin-native .apple.desktop .about {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  margin-right: 0;
  padding-right: 15px;
  padding-bottom: 8px;
}

#pwa-install-element.pwi-skin-native .apple.desktop .about .name {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
}

#pwa-install-element.pwi-skin-native .apple.desktop .about .description {
  margin: 0;
  min-width: 100%;
  border-bottom: none;
}

#pwa-install-element.pwi-skin-native .apple.desktop .about .description,
#pwa-install-element.pwi-skin-native .apple.desktop .welcome-to-install {
  font-size: 11px;
  line-height: 14px;
}

#pwa-install-element.pwi-skin-native .apple.desktop .welcome-to-install {
  margin: 0;
  padding: 12px 0;
}

#pwa-install-element.pwi-skin-native .apple.desktop .how-to-description {
  padding: 12px 3px 0;
  grid-template-rows: 1fr 1fr;
}

#pwa-install-element.pwi-skin-native .apple.desktop .description-step {
  gap: 16px;
  font-size: 12px;
}

/* Square + smaller than the mobile circles, and glyph-coloured rather than
   tinted — the aqua circle rule is `.apple-mobile`-scoped, so it never lands. */
#pwa-install-element.pwi-skin-native .apple.desktop .description-step .svg-wrap {
  width: 32px;
  height: 32px;
  color: var(--icon-how-to-color);
  fill: var(--icon-how-to-color);
}

#pwa-install-element.pwi-skin-native .apple.desktop .description-step .svg-wrap #pwi-share {
  width: 16px;
  margin-bottom: 2px;
  transform: none;
}

#pwa-install-element.pwi-skin-native .apple.desktop .description-step .svg-wrap #pwi-add {
  width: 18px;
  transform: none;
}

#pwa-install-element.pwi-skin-native .apple.desktop .action-buttons {
  margin: 0;
  padding: 8px 0 0;
}

#pwa-install-element.pwi-skin-native .apple.desktop .dialog-button {
  height: unset;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 6px;
  background-color: transparent;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}

#pwa-install-element.pwi-skin-native .apple.desktop .dialog-button.install svg {
  width: 18px;
  transform: none;
}

#pwa-install-element.pwi-skin-native .apple.desktop .action-buttons .button-text {
  gap: 10px;
}

#pwa-install-element.pwi-skin-native .apple.desktop .action-buttons .icon-back {
  width: 14px;
}

#pwa-install-element.pwi-skin-native .apple.desktop .dialog-button.button:active,
#pwa-install-element.pwi-skin-native .apple.desktop .close:active {
  background: var(--background-color-button);
  filter: brightness(105%);
}

#pwa-install-element.pwi-skin-native .apple.desktop .dialog-button.button:active .button-text,
#pwa-install-element.pwi-skin-native .apple.desktop .close:active .button-text {
  filter: brightness(90%);
}

/* macOS + the 26 glass (styles-apple.scss:831-868). */
#pwa-install-element.pwi-skin-native .install-dialog.apple.aqua.desktop {
  --border-bottom-color: rgb(142 142 142 / 65%);

  outline: none;
  padding: 16px;
}

[data-theme='light'] #pwa-install-element.pwi-skin-native .install-dialog.apple.aqua.desktop,
.light-mode #pwa-install-element.pwi-skin-native .install-dialog.apple.aqua.desktop {
  --border-bottom-color: rgb(95 95 95 / 50%);

  /* Restated because of deviation 1: in the reference's flat cascade `.desktop`'s
     `border` shorthand simply follows `.aqua`'s `border-color` and wins, but
     re-keying the light palette onto `[data-theme]` lifts that aqua rule above
     an unprefixed `.desktop`, so the panel would border white instead of gray. */
  border-color: var(--border-bottom-color);
}

#pwa-install-element.pwi-skin-native .apple.aqua.desktop .icon .icon-image {
  border-radius: 14px;
}

#pwa-install-element.pwi-skin-native .apple.aqua.desktop .about {
  padding-bottom: 12px;
}

#pwa-install-element.pwi-skin-native .apple.aqua.desktop .close {
  margin-inline-end: 0;
  margin-top: 0;
  background: none;
  background-color: rgb(var(--base-color) / 80%);
}

#pwa-install-element.pwi-skin-native .apple.aqua.desktop .action-buttons {
  border-radius: unset;
}

#pwa-install-element.pwi-skin-native .apple.aqua.desktop .action-buttons:last-child {
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
}

#pwa-install-element.pwi-skin-native .apple.aqua.desktop .how-to-body .description-step .svg-wrap {
  color: var(--icon-how-to-color);
}

/* ══ Screenshot gallery (gallery/styles-gallery.scss) ══════════════════════
   The reference ships this as its own shadow-DOM custom element, so its class
   names are generic: the inner wrapper is `.gallery` — which would COLLIDE with
   the `.gallery` STATE class this file puts on the dialog — and its arrows are
   `.btn`, which collides with the SPA's button vocabulary. Every class here is
   therefore `pwi-` prefixed; only the theme keys (`default` / `apple_desktop` /
   `apple_mobile`) keep the reference's names, and those are only ever matched as
   `.pwi-gallery-view.<theme>`.

   HOST (`.pwi-gallery`) vs VIEW (`.pwi-gallery-view`): the host is the collapsing
   grid cell each template owns, the view is the scroller. Dark first. */
#pwa-install-element.pwi-skin-native .pwi-gallery-view {
  --scrollbar-background-color: #424242;
  --scrollbar-thumb-color: rgb(146, 146, 146);
  --scrollbar-thumb-hover-color: rgb(100, 100, 100);
  --nav-btn-background-color: #555;
  --nav-btn-fill-color: #fff;

  position: relative;
}

[data-theme='light'] #pwa-install-element.pwi-skin-native .pwi-gallery-view,
.light-mode #pwa-install-element.pwi-skin-native .pwi-gallery-view {
  --scrollbar-background-color: #fff;
  --nav-btn-background-color: #fff;
  --nav-btn-fill-color: #141414;
}

#pwa-install-element.pwi-skin-native .pwi-gallery-scroller {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  padding: 10px 13px;
  margin: 0 10px;
  -webkit-overflow-scrolling: touch;
}

#pwa-install-element.pwi-skin-native .pwi-gallery-track {
  display: flex;
  flex-direction: row;
  /* Not the flex default (`stretch`): that pulls each image up to the row height
     and, with a width cap in play, letterboxes it inside a tall empty box. */
  align-items: center;
  padding-inline-end: 13px;
}

#pwa-install-element.pwi-skin-native .pwi-gallery-track img {
  position: relative;
  border-radius: 6px;
  max-height: min(45vh, 500px);
  box-shadow: 0 3px 10px 0 rgb(0 0 0 / 15%);
  scroll-snap-align: center;
  scroll-snap-stop: always;

  /* DEVIATION: the reference constrains HEIGHT only, so a landscape shot spills
     past the panel and each slide shows as a cropped sliver — fine for the tall
     phone screenshots it assumes, useless for a `wide` one in a 282px macOS
     panel. Capping the width keeps every slide whole, which is the entire point
     of showing it. */
  max-width: 100%;
  height: auto;
}

#pwa-install-element.pwi-skin-native .pwi-gallery-track img + img {
  margin-inline-start: 15px;
}

#pwa-install-element.pwi-skin-native .pwi-gallery-scroller::-webkit-scrollbar {
  width: 4px;
  height: 2px;
}

#pwa-install-element.pwi-skin-native .pwi-gallery-scroller::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  border-radius: 4px;
}

#pwa-install-element.pwi-skin-native .pwi-gallery-scroller::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-color);
}

#pwa-install-element.pwi-skin-native .pwi-gallery-scroller::-webkit-scrollbar-track {
  background: var(--scrollbar-background-color);
  border-radius: 4px;
}

#pwa-install-element.pwi-skin-native .pwi-gallery-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;

  display: flex;
  align-items: center;
  height: 30px;
  width: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--nav-btn-background-color);
  background-repeat: no-repeat;
  box-shadow: rgb(0 0 0 / 30%) 2px 4px 4px 1px;
  opacity: 0.8;
  cursor: pointer;
  user-select: none;
}

#pwa-install-element.pwi-skin-native .pwi-gallery-btn:hover {
  box-shadow: rgb(0 0 0 / 50%) 2px 4px 4px 1px;
  opacity: 1;
}

#pwa-install-element.pwi-skin-native .pwi-gallery-btn svg {
  width: 20px;
  height: 20px;
  margin: 0 auto;
  fill: var(--nav-btn-fill-color);
}

#pwa-install-element.pwi-skin-native .pwi-gallery-btn.prev {
  left: 5px;
}

#pwa-install-element.pwi-skin-native .pwi-gallery-btn.prev svg {
  margin-left: 4px;
}

#pwa-install-element.pwi-skin-native .pwi-gallery-btn.next {
  right: 5px;
}

/* One arrow asset, mirrored — the `next` button `<use>`s the `prev` glyph. */
#pwa-install-element.pwi-skin-native .pwi-gallery-btn.next svg {
  transform: rotate(180deg);
  margin-left: 6px;
}

/* Apple themes: opaque arrows, tighter. */
#pwa-install-element.pwi-skin-native .pwi-gallery-view.apple_desktop .pwi-gallery-btn,
#pwa-install-element.pwi-skin-native .pwi-gallery-view.apple_mobile .pwi-gallery-btn {
  opacity: 1;
}

#pwa-install-element.pwi-skin-native .pwi-gallery-view.apple_mobile .pwi-gallery-btn svg {
  width: 16px;
  height: auto;
}

#pwa-install-element.pwi-skin-native .pwi-gallery-view.apple_mobile .pwi-gallery-btn.prev svg {
  margin-inline-start: 7px;
}

#pwa-install-element.pwi-skin-native .pwi-gallery-view.apple_desktop {
  --scrollbar-thumb-color: var(--nav-btn-fill-color);
  --scrollbar-background-color: var(--nav-btn-background-color);
  --scrollbar-thumb-hover-color: var(--nav-btn-fill-color);
}

[data-theme='light'] #pwa-install-element.pwi-skin-native .pwi-gallery-view.apple_desktop,
.light-mode #pwa-install-element.pwi-skin-native .pwi-gallery-view.apple_desktop {
  --scrollbar-background-color: rgba(0, 0, 0, 0.1);
  --scrollbar-thumb-color: rgb(100, 100, 100);
  --scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.85);
}

#pwa-install-element.pwi-skin-native .pwi-gallery-view.apple_desktop .pwi-gallery-scroller {
  margin: 0;
  padding-top: 15px;
}

#pwa-install-element.pwi-skin-native .pwi-gallery-view.apple_desktop .pwi-gallery-btn {
  height: 26px;
  width: 26px;
  box-shadow: rgba(0, 0, 0, 0.3) 0 2px 2px 1px;
}

#pwa-install-element.pwi-skin-native .pwi-gallery-view.apple_desktop .pwi-gallery-btn:hover {
  box-shadow: rgba(0, 0, 0, 0.3) 0 2px 2px 1px;
}

#pwa-install-element.pwi-skin-native .pwi-gallery-view.apple_desktop .pwi-gallery-btn:active {
  filter: brightness(110%);
}

[data-theme='light']
  #pwa-install-element.pwi-skin-native
  .pwi-gallery-view.apple_desktop
  .pwi-gallery-btn:active,
.light-mode
  #pwa-install-element.pwi-skin-native
  .pwi-gallery-view.apple_desktop
  .pwi-gallery-btn:active {
  filter: brightness(95%);
}

#pwa-install-element.pwi-skin-native .pwi-gallery-view.apple_desktop .pwi-gallery-btn svg {
  width: 12px;
  height: auto;
  opacity: 1;
  margin-inline-start: 7px;
}

/* Touch: the strip is swipeable, so the arrows and the scrollbar are noise. */
@media (hover: none) and (pointer: coarse) {
  #pwa-install-element.pwi-skin-native .pwi-gallery-btn {
    display: none;
  }
  #pwa-install-element.pwi-skin-native .pwi-gallery-scroller::-webkit-scrollbar {
    display: none;
  }
}

/* ── Host: collapsed by default, expanded by `.gallery` on the dialog ────── */
#pwa-install-element.pwi-skin-native .pwi-gallery {
  grid-column: 1 / 3;
  /* The Apple article is a named-areas grid whose rows are all claimed, so an
     unplaced item lands in an IMPLICIT row after `button` — i.e. screenshots
     below the call to action. The reference reserves a `gallery` row for exactly
     this (styles-apple.scss:51); `grid-area` is inert in the Material templates,
     which are not area grids. */
  grid-area: gallery;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    opacity 0.5s ease-in-out,
    max-height 0.5s ease-in-out;
}

#pwa-install-element.pwi-skin-native .install-dialog.gallery .pwi-gallery {
  max-height: 70vh;
  opacity: 1;
  transition:
    opacity 0.3s ease-in-out 0.2s,
    max-height 0.5s ease-in-out;
}

/* The iOS/macOS action row is a column, so a gallery button next to the install
   button needs the flex row restored. */
#pwa-install-element.pwi-skin-native .apple .pwi-gallery + .action-buttons {
  display: flex;
}

/* Apple: the two secondary/primary rows trade places — expanding the gallery
   collapses Install, expanding the how-to collapses Show Gallery, so exactly one
   action is offered at a time (reference styles-apple.scss:596-635). */
#pwa-install-element.pwi-skin-native .apple.gallery .dialog-button.button.install,
#pwa-install-element.pwi-skin-native .apple.how-to .dialog-button.button.gallery {
  height: 0;
  min-height: 0;
  padding: 0;
  opacity: 0;

  /* NOT in the reference, and a real defect there. Height + opacity alone leave
     the row clickable: pressing "Back" animates the sibling from 0 → 48px over
     0.3s directly under the cursor, so a second (or impatient) click lands on the
     row that just grew into place — which read as "Back sometimes opens the
     gallery". `pointer-events` applies for the whole transition, including the
     in-between frames a hit-test would otherwise accept. */
  pointer-events: none;
}

#pwa-install-element.pwi-skin-native .apple .dialog-button.button.gallery {
  display: flex;
  align-items: center;
  min-width: 50px;
}

#pwa-install-element.pwi-skin-native .apple .dialog-button.button.gallery #pwi-gallery-icon {
  width: 23px;
  margin: 0 auto;
}

/* Inside the aqua clipping container the exposed button keeps the round corner. */
#pwa-install-element.pwi-skin-native .apple.aqua.gallery .dialog-button.button.gallery {
  border-bottom-left-radius: 26px;
  border-bottom-right-radius: 26px;
}

#pwa-install-element.pwi-skin-native
  .apple.aqua.desktop
  .dialog-button.button.gallery
  #pwi-gallery-icon {
  width: 18px;
}

/* The Material SHEET does not toggle: its gallery rests open and collapses only
   with the rest of the body in the `.how-to` state (reference
   styles-bottom-sheet.scss:130 + 178), so it ships no More/Less button. */
#pwa-install-element.pwi-skin-native .chrome.mobile .pwi-gallery {
  display: block;
  max-height: 600px;
  padding-bottom: 15px;
  opacity: 1;
  transition:
    max-height 1.5s,
    opacity 0.8s,
    padding 1.5s;
}

#pwa-install-element.pwi-skin-native .chrome.mobile .dialog-body.how-to .pwi-gallery {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden;
}

/* ── Presentation split — the single app-wide breakpoint (deviation 2) ───── */
@media (max-width: 768px) {
  #pwa-install-element.pwi-skin-native .install-dialog.chrome.mobile {
    display: inline-block;
  }
  #pwa-install-element.pwi-skin-native .install-dialog.chrome:not(.mobile) {
    display: none;
  }

  /* Phone treatment (styles-apple.scss:907-946). The `aqua` sheet FLOATS with a
     20px safe-area inset and keeps its 35px corners — the reference explicitly
     excludes aqua from the edge-to-edge `:not(.aqua)` rule, and that floating
     pill IS the iOS-26 look. Inset via left/right (not margin) so it stays
     centred at any width instead of over-constraining against `max-width`. */
  #pwa-install-element.pwi-skin-native .install-dialog.apple {
    left: max(env(safe-area-inset-left), 20px);
    right: max(env(safe-area-inset-right), 20px);
    bottom: calc(20px + env(safe-area-inset-bottom));
    margin: 0 auto;
    filter: drop-shadow(rgba(0, 0, 0, 0.5) 0 0 15px);
  }
  #pwa-install-element.pwi-skin-native .install-dialog.apple.available {
    max-height: calc(88vh - 20px);
    /* The how-to expansion can outgrow the cap on a short phone; the reference
       does the same at its `max-height: 548px` breakpoint so the action button
       is never clipped. */
    overflow-y: auto;
    transform: translateY(0);
  }
  #pwa-install-element.pwi-skin-native .apple .description-step .step-text {
    font-size: 13px;
  }
}

@media (min-width: 769px) {
  #pwa-install-element.pwi-skin-native .install-dialog.chrome.mobile {
    display: none;
  }
  #pwa-install-element.pwi-skin-native .install-dialog.chrome:not(.mobile) {
    display: inline-block;
  }

  /* The iOS sheet becomes a top-right card (styles-apple.scss:875-905). */
  #pwa-install-element.pwi-skin-native .install-dialog.apple {
    top: 0;
    bottom: unset;
    transform: translateY(calc(-100% - 40px));
    right: max(28px, env(safe-area-inset-right, 28px));
    left: auto;
  }
  #pwa-install-element.pwi-skin-native .install-dialog.apple.available {
    top: 28px;
    bottom: auto;
    max-height: calc(95vh - 28px);
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #pwa-install-element .install-dialog,
  #pwa-install-element .how-to-body,
  #pwa-install-element .description,
  #pwa-install-element .button-text,
  #pwa-install-element .material-button,
  #pwa-install-element .dialog-button,
  #pwa-install-element .material-button::before,
  #pwa-install-element .material-button::after {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE TC SKIN — the same DOM, restyled on TC design tokens so the prompt
   reads as part of the CRM instead of as the OS's own dialog. Light/dark come
   free from the tokens, so there is no per-theme block here.

   Structure is deliberately NOT re-plumbed: the iOS article keeps its grid
   (icon | name+description, then hint, steps, action row) and the Material
   card keeps its two-column body — only the skin changes. That is what lets
   chrome/pwa-install.js stay skin-agnostic.
   ══════════════════════════════════════════════════════════════════════════ */

#pwa-install-element.pwi-skin-tc .install-dialog {
  position: fixed;
  z-index: var(--z-pwa-install, 1190);
  opacity: 0;
  visibility: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  box-shadow: var(--elev-xl);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  /* Reset the native skin's glass recipe. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  filter: none;
}

/* The Material sheet is the mobile surface for Chromium; the desktop card and
   the iOS sheet each own their own placement below. */
#pwa-install-element.pwi-skin-tc .install-dialog.available {
  opacity: 1;
  visibility: visible;
}

/* ── Shared content ─────────────────────────────────────────────────────── */
#pwa-install-element.pwi-skin-tc .icon .icon-image {
  width: 48px;
  height: 48px;
  border-radius: var(--ref-radius-md, 11px);
}

#pwa-install-element.pwi-skin-tc .about .name,
#pwa-install-element.pwi-skin-tc .body-header .about .name {
  color: var(--text-heading);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}

#pwa-install-element.pwi-skin-tc .about .description,
#pwa-install-element.pwi-skin-tc .about .hostname {
  color: var(--text-muted);
  font-size: 0.78rem;
  opacity: 1;
}

#pwa-install-element.pwi-skin-tc .close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--ref-radius-pill, 999px);
  background: transparent;
  color: var(--text-muted);
  opacity: 1;
  cursor: pointer;
  box-shadow: none;
}

#pwa-install-element.pwi-skin-tc .close:hover {
  background: var(--surface-card-hover);
  color: var(--text-primary);
}

#pwa-install-element.pwi-skin-tc .close svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

#pwa-install-element.pwi-skin-tc .welcome-to-install,
#pwa-install-element.pwi-skin-tc .install-description {
  color: var(--text-muted);
  font-size: 0.82rem;
  border-bottom-color: var(--border-default);
}

#pwa-install-element.pwi-skin-tc .app-description,
#pwa-install-element.pwi-skin-tc .dialog-body > .description {
  color: var(--text-secondary);
}

#pwa-install-element.pwi-skin-tc hr {
  background-color: var(--border-default);
}

/* Walkthrough steps — outlined token tiles, accent glyphs. */
#pwa-install-element.pwi-skin-tc .description-step .svg-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--ref-radius-md, 11px);
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--accent);
  fill: var(--accent);
}

#pwa-install-element.pwi-skin-tc .description-step .svg-wrap svg {
  fill: var(--accent);
}

#pwa-install-element.pwi-skin-tc .description-step .step-text,
#pwa-install-element.pwi-skin-tc .step-text {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
}

/* ── Buttons: one TC primary recipe for both templates ──────────────────── */
#pwa-install-element.pwi-skin-tc .dialog-button.button,
#pwa-install-element.pwi-skin-tc .material-button.primary {
  background: var(--accent-fill);
  color: #fff;
  border: 0;
  border-radius: var(--ref-radius-md, 11px);
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: none;
  box-shadow: none;
}

#pwa-install-element.pwi-skin-tc .dialog-button.button:hover,
#pwa-install-element.pwi-skin-tc .material-button.primary:hover {
  background: var(--accent-fill-hover);
}

#pwa-install-element.pwi-skin-tc .dialog-button.button svg,
#pwa-install-element.pwi-skin-tc .material-button.primary svg {
  fill: #fff;
}

#pwa-install-element.pwi-skin-tc .material-button.secondary {
  color: var(--text-muted);
  background: transparent;
  box-shadow: none;
}

#pwa-install-element.pwi-skin-tc .material-button.secondary svg {
  fill: currentColor;
}

/* The reference's Material ripple is not a TC idiom. */
#pwa-install-element.pwi-skin-tc .material-button::before,
#pwa-install-element.pwi-skin-tc .material-button::after {
  content: none;
}

/* ── iOS article: keep the grid, drop the glass ─────────────────────────── */
#pwa-install-element.pwi-skin-tc .install-dialog.apple {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0;
  border-radius: var(--ref-radius-xl, 22px);
  background: var(--surface-card);
  box-shadow: var(--elev-xl);
  overflow: hidden;
  pointer-events: none;
}

#pwa-install-element.pwi-skin-tc .install-dialog.apple.available {
  pointer-events: auto;
}

#pwa-install-element.pwi-skin-tc .apple .icon,
#pwa-install-element.pwi-skin-tc .apple .about {
  border-bottom: 1px solid var(--border-default);
}

#pwa-install-element.pwi-skin-tc .apple .about {
  grid-template-rows: auto auto;
  align-content: center;
  gap: 2px;
  padding-block: 0.75rem;
}

#pwa-install-element.pwi-skin-tc .apple .about .description {
  margin-bottom: 0;
  line-height: 1.35;
}

#pwa-install-element.pwi-skin-tc .apple .action-buttons {
  margin: 0.85rem;
  border-radius: var(--ref-radius-md, 11px);
}

#pwa-install-element.pwi-skin-tc .apple .dialog-button {
  height: 44px;
  line-height: 44px;
  padding: 0 1rem;
}

/* ── Placement ──────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  #pwa-install-element.pwi-skin-tc .install-dialog.apple,
  #pwa-install-element.pwi-skin-tc .install-dialog.chrome:not(.mobile) {
    top: 28px;
    right: 28px;
    left: auto;
    bottom: auto;
    width: min(380px, calc(100vw - 56px));
    max-width: none;
    margin: 0;
    border-radius: var(--ref-radius-xl, 22px);
    transform: translateY(calc(-100% - 40px));
    transition:
      transform 0.45s var(--ease-cinematic),
      opacity 0.35s ease-in-out;
  }
  #pwa-install-element.pwi-skin-tc .install-dialog.apple.available,
  #pwa-install-element.pwi-skin-tc .install-dialog.chrome:not(.mobile).available {
    top: 28px;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  #pwa-install-element.pwi-skin-tc .install-dialog.apple,
  #pwa-install-element.pwi-skin-tc .install-dialog.chrome.mobile {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-bottom: env(safe-area-inset-bottom);
    border-bottom: 0;
    border-radius: var(--ref-radius-2xl) var(--ref-radius-2xl) 0 0;
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.33, 1, 0.66, 1);
  }
  #pwa-install-element.pwi-skin-tc .install-dialog.apple.available {
    max-height: 88vh;
    overflow-y: auto;
    transform: translateY(0);
  }
  #pwa-install-element.pwi-skin-tc .install-dialog.chrome.mobile.available {
    transform: translate3d(0, var(--sheet-rest-offset, 0px), 0);
  }
  #pwa-install-element.pwi-skin-tc .chrome.mobile .touch-header::before {
    background: var(--border-medium);
  }
}