/* Bottom sheet discret, adaptatif, non bloquant */
.mb-pwa-hidden { display: none !important; }

.mb-pwa-sheet, .mb-pwa-btn { pointer-events: auto; }
.mb-pwa-btn { -webkit-tap-highlight-color: rgba(0,0,0,0.1); touch-action: manipulation; }

.mb-pwa-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 2147483000;
  width: 100%;
  height: auto;
  min-height: 130px;
  background: #fff; color: #111;
  border-top-left-radius: 16px; border-top-right-radius: 16px;
  box-shadow: 0 -10px 30px rgba(0,0,0,.15);
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateY(120%);
  transition: transform .35s ease-out;
}

.mb-pwa-sheet.mb-pwa-in { transform: translateY(0); }

.mb-pwa-sheet__icon {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px;
  background: #f4f6ff; display: grid; place-items: center; font-size: 22px;
}

.mb-pwa-sheet__content { flex: 1 1 auto; min-width: 0; }
.mb-pwa-sheet__title   { font-weight: 700; font-size: 16px; margin: 0 0 6px; }
.mb-pwa-instructions   { font-size: 14px; line-height: 1.35; opacity: .95; }
.mb-pwa-instructions .mb-pwa-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mb-pwa-instructions .mb-pwa-details { font-size: 13px; line-height: 1.35; margin-top: 6px; opacity: .9; }
.mb-pwa-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: #2563eb; text-decoration: underline; cursor: pointer; }

.mb-pwa-sheet__actions { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; margin-left: 8px; }
.mb-pwa-btn { appearance: none; border: 0; cursor: pointer; border-radius: 10px; padding: 10px 14px; font-weight: 600; font-size: 14px; }
.mb-pwa-btn--install { background: #2563eb; color: #fff; }
.mb-pwa-btn--close   { background: #edf2ff; color: #111; }

@media (max-width: 820px) {
  .mb-pwa-sheet { padding: 12px; gap: 10px; }
  .mb-pwa-sheet__icon { display: none; }
  .mb-pwa-sheet__title { font-size: 15px; }
  .mb-pwa-instructions { font-size: 13.5px; }
  .mb-pwa-instructions .mb-pwa-details { font-size: 12.5px; }
  .mb-pwa-sheet__actions { flex-direction: column-reverse; align-items: stretch; gap: 6px; margin-left: 0; }
  .mb-pwa-btn { width: 100%; text-align: center; padding: 10px 12px; }
}