/* ═══════════════════════════════════════════════════════════════════════════════
   MPConnect – mobile-pwa.css
   Corrections mobiles PWA : espace haut/bas, safe-area, viewport, touch
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Viewport dynamique (corrige iOS Safari bottom bar) ─────────────────── */
html {
  /* overflow-x: clip ne bloque pas le scroll vertical contrairement à overflow:hidden */
  overflow-x: clip;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
}

body {
  /* IMPORTANT: NE JAMAIS mettre overflow:hidden sur body → bloque le scroll vertical */
  overflow-x: clip;
  /* overscroll-behavior-x uniquement, pour ne pas bloquer le scroll vertical iOS */
  overscroll-behavior-x: none;
  /* padding-top géré par le header directement via safe-area */
}

/* ─── 2. App Container – espacement bas correct ─────────────────────────────── */
.app-container {
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  /* Espace pour la bottom nav + zone safe (notch bas sur iPhone) */
  padding-bottom: calc(var(--bottom-nav-height, 72px) + env(safe-area-inset-bottom, 0px) + 8px);
}

/* ─── 3. Header – compact sur mobile avec bannière ───────────────────────────── */
@media (max-width: 639px) {

  /* Bannière compacte sur mobile */
  .mp-banner-wrap {
    display: block !important;
    max-height: 64px !important;
    margin: 0 0 8px 0 !important;
    border-radius: 14px !important;
  }

  .mp-banner-wrap img {
    height: 64px !important;
    object-position: center 25% !important;
  }

  /* Header plus compact */
  .mp-header {
    padding: env(safe-area-inset-top, 8px) 10px 8px !important;
    padding-top: max(env(safe-area-inset-top, 0px), 8px) !important;
  }

  .mp-header-card {
    padding: 10px 12px !important;
    border-radius: 18px !important;
    gap: 10px !important;
  }

  .mp-header-logo {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
  }

  .mp-header-logo img {
    width: 34px !important;
    height: 34px !important;
  }

  .mp-header-title {
    font-size: 14px !important;
  }

  .mp-header-subtitle {
    font-size: 10px !important;
  }

  .mp-header-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
  }

  .mp-profile-chip {
    padding: 4px 8px 4px 4px !important;
    border-radius: 12px !important;
    max-width: 120px !important;
  }

  .mp-profile-avatar {
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }
}

/* ─── 4. Bottom Nav – safe-area bas + espacement correct ────────────────────── */
.mp-bottom-nav-wrap {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

.mp-bottom-nav {
  /* Réduction du padding vertical pour gagner de l'espace */
  padding: 8px 10px !important;
  margin: 0 8px !important;
}

@media (max-width: 390px) {
  .mp-bottom-nav {
    margin: 0 4px !important;
    gap: 4px !important;
    padding: 6px 6px !important;
  }

  .mp-nav-item {
    padding: 6px 2px !important;
    gap: 3px !important;
  }

  .mp-nav-icon svg {
    width: 20px !important;
    height: 20px !important;
  }

  .mp-nav-label {
    font-size: 8px !important;
  }
}

/* Spacer dynamique = hauteur nav + safe-area */
.mp-bottom-nav-spacer {
  height: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ─── 5. Login page – ajustements mobiles ───────────────────────────────────── */
.login-shell {
  /* dvh au lieu de vh pour éviter l'espace fantôme iOS */
  min-height: 100dvh !important;
  min-height: -webkit-fill-available !important;
  /* Safe-area haut/bas */
  padding-top: max(env(safe-area-inset-top, 0px), 16px) !important;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px) !important;
  /* Centrage vertical parfait même avec clavier ouvert */
  align-items: flex-start;
  overflow-y: auto;
}

@media (max-width: 639px) {
  .login-shell {
    padding: max(env(safe-area-inset-top, 0px), 12px) 12px max(env(safe-area-inset-bottom, 0px), 12px) !important;
    align-items: flex-start !important;
  }

  .login-wrap {
    width: 100% !important;
    padding-bottom: 16px;
  }

  /* Masque le panneau brand sur très petits écrans pour gagner de la place */
  .login-brand {
    min-height: auto !important;
    padding: 18px !important;
  }

  /* Réduit la hauteur du logo brand */
  .login-logo {
    width: 60px !important;
    height: 60px !important;
    border-radius: 18px !important;
    margin-bottom: 12px !important;
  }
}

/* ─── 6. Touch et interaction mobile ────────────────────────────────────────── */
a, button, .mp-nav-item, .mp-header-btn, .mp-profile-chip {
  /* Zone de tap minimum Apple HIG (44px) */
  min-height: 44px;
  /* Évite le délai 300ms sur mobile */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Exception pour les petits éléments nav */
.mp-nav-item {
  min-height: 52px;
}

/* ─── 7. Inputs – évite le zoom iOS sur focus ───────────────────────────────── */
input, select, textarea {
  font-size: 16px !important; /* iOS zoom si < 16px */
}

@media (min-width: 640px) {
  /* Rétablit la taille normale sur desktop */
  input, select, textarea {
    font-size: inherit !important;
  }
}

/* ─── 8. Scrolling fluide sur iOS ───────────────────────────────────────────── */
.app-container,
.app-main,
.messages-list,
.chat-messages,
[class*="scroll"] {
  -webkit-overflow-scrolling: touch;
}

/* ─── 9. PWA standalone – masque les éléments web inutiles ─────────────────── */
@media (display-mode: standalone) {
  /* En mode app installée, le header n'a pas besoin d'autant d'espace */
  .mp-header {
    padding-top: max(env(safe-area-inset-top, 0px), 10px) !important;
  }

  /* Masque le bouton "Installer l'app" si déjà installée */
  #pwa-install-btn {
    display: none !important;
  }
}

/* ─── 10. Bouton d'installation PWA ─────────────────────────────────────────── */
#pwa-install-banner {
  position: fixed;
  bottom: calc(var(--bottom-nav-height, 72px) + env(safe-area-inset-bottom, 0px) + 12px);
  left: 12px;
  right: 12px;
  z-index: 1200;
  background: linear-gradient(135deg, rgba(8,145,178,.97), rgba(14,165,233,.95));
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 28px rgba(8,145,178,.35);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  transform: translateY(120%);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  backdrop-filter: blur(14px);
}

#pwa-install-banner.visible {
  transform: translateY(0);
}

#pwa-install-banner .pwa-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

#pwa-install-banner .pwa-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

#pwa-install-banner .pwa-text {
  flex: 1;
  min-width: 0;
}

#pwa-install-banner .pwa-title {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 2px;
}

#pwa-install-banner .pwa-sub {
  font-size: 11px;
  opacity: .85;
}

#pwa-install-banner .pwa-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

#pwa-install-banner button {
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  padding: 8px 14px;
  min-height: 36px;
  touch-action: manipulation;
}

#pwa-install-btn {
  background: #fff;
  color: #0891B2;
}

#pwa-dismiss-btn {
  background: rgba(255,255,255,.18);
  color: #fff;
}