/* css/pwaStyle.css
   Install-nudge banner (js/pwaShell.js). Built on shared.css's existing
   tokens, same convention as focusLaneStyle.css. Fixed to the bottom of
   the viewport, with safe-area padding for the iOS home-indicator area
   since this only ever shows on iOS.
*/

.pwa-install-banner-mount {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
}

.pwa-install-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--accent-deep);
  color: var(--surface);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 16px oklch(0% 0 0 / 0.18);
}

.pwa-install-banner-text {
  flex: 1;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}
.pwa-install-banner-text strong {
  font-weight: 700;
}

.pwa-install-banner-dismiss {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: none;
  background: oklch(100% 0 0 / 0.15);
  color: var(--surface);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.pwa-install-banner-dismiss:hover {
  background: oklch(100% 0 0 / 0.25);
}