/*
 * Ispayout — Mobile shell (header + bottom-nav)
 *
 * Affiché uniquement sur écrans étroits (≤ 768px). En desktop tout est masqué
 * pour ne pas perturber l'interface principale.
 *
 * Architecture :
 *   .td-mob-shell-header   → barre supérieure « Bonjour Paul » + KYC pill + bell
 *   .td-mob-discover       → bottom-sheet menu Découverte
 *   .td-mob-bottom-nav     → barre fixe du bas avec 4 onglets et gradient
 *
 * Padding-top et padding-bottom du body sont gérés ici pour que le contenu
 * de la page ne se cache PAS derrière les éléments fixes.
 */

/* ─── Activation conditionnelle ───────────────────────────────────────── */
.td-mob-shell-header,
.td-mob-discover,
.td-mob-discover-backdrop,
.td-mob-bottom-nav { display: none; }

@media (max-width: 768px) {
  /* ────────────────────────────────────────────────────────────────────
     Conservation de l'espace réservé par l'ANCIEN header mobile
     ────────────────────────────────────────────────────────────────────
     L'ancien #td-mob-header poussait le body de 220px (cf. facebook-feed.css).
     On masque l'ancien mais on conserve cette même réservation pour ne PAS
     décaler les blocs en dessous. Le nouveau header (76px) flotte dans cet
     espace, centré horizontalement et collé en haut. Le reste de la zone
     (≈144px) reste visuellement vide mais préserve la mise en page.
  */
  html body {
    padding-top: 220px !important;
    padding-bottom: calc(var(--td-mob-bottom-h, 84px) + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Masquer agressivement l'ancien header mobile et tous ses sous-éléments.
     facebook-feed.css contient des règles "html body #td-mob-header"
     en !important qui rendent l'élément visible : on utilise la même
     spécificité (3 ID/classes + 1 type) pour battre par ordre de cascade,
     puisque td-mobile-shell.css est chargé APRÈS facebook-feed.css. */
  html body #td-mob-header,
  html body .td-mob-search-modal,
  html body .td-mob-cats,
  html body .td-mob-discover-popup {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Sécurité supplémentaire : masquer aussi tous les enfants directs
     (logo, nav avec 6 icônes) au cas où une règle plus spécifique du thème
     les rendrait visibles indépendamment du parent. */
  html body #td-mob-header .td-mob-top,
  html body #td-mob-header .td-mob-nav,
  html body #td-mob-header .td-mob-logo,
  html body #td-mob-header .td-mob-top-right,
  html body #td-mob-header .td-mob-ni,
  html body #td-mob-header .td-mob-discover-btn,
  html body #td-mob-header .td-mob-notif-btn {
    display: none !important;
    visibility: hidden !important;
  }

  /* Masquer aussi le header desktop en mobile */
  html body .td-header { display: none !important; }

  /* Afficher le nouveau header + bottom-nav */
  .td-mob-shell-header,
  .td-mob-bottom-nav { display: flex; }
}

/* ─── HEADER MOBILE ──────────────────────────────────────────────────── */
.td-mob-shell-header {
  /* Centralisation : le header est borné en largeur et centré horizontalement.
     Utilise translateX(-50%) avec left:50% pour rester parfaitement centré
     même si le viewport est large (tablettes en portrait, par exemple). */
  position: fixed; top: 8px;
  left: 50%; transform: translateX(-50%);
  width: calc(100% - 16px); max-width: 560px;
  z-index: 9000;
  height: 60px;
  padding: 8px 14px 8px 8px;
  background: linear-gradient(180deg, rgba(60,60,60,0.92) 0%, rgba(20,20,20,0.92) 100%);
  border-radius: 36px;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.td-mob-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #1a7c4a;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  overflow: hidden;
}
.td-mob-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.td-mob-avatar svg { width: 26px; height: 26px; color: #ffffff; }

.td-mob-greet {
  flex: 1; min-width: 0;
  font-size: 16px; font-weight: 600;
  color: #f3f4f6;
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: transparent; border: none;
  text-align: left;
  font-family: inherit;
  padding: 0;
}
.td-mob-greet b { color: #ffffff; font-weight: 800; }

.td-mob-kyc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
}
.td-mob-kyc-pill svg { width: 16px; height: 16px; flex-shrink: 0; }
.td-mob-kyc-pill.unverified { background: #d4f5dd; color: #15803D; }
.td-mob-kyc-pill.pending    { background: #FEF3C7; color: #92400E; }
.td-mob-kyc-pill.verified   { background: #DBEAFE; color: #1e40af; }

.td-mob-bell {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #DC2626;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
}
.td-mob-bell svg { width: 18px; height: 18px; color: #ffffff; }
.td-mob-bell.has-unread svg {
  animation: tdMobBellShake 1.6s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes tdMobBellShake {
  0%, 70%, 100% { transform: rotate(0); }
  78% { transform: rotate(-12deg); }
  85% { transform: rotate(10deg); }
  92% { transform: rotate(-6deg); }
}
.td-mob-bell-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  background: #ffffff;
  color: #DC2626;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #DC2626;
}

/* Bouton "Paramètres" (engrenage) — ouvre le même menu Découverte que le greeting.
   Couleur blanche avec fond translucide pour rester lisible sur le header sombre. */
.td-mob-settings {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.18);
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  transition: background .15s, transform .15s;
}
.td-mob-settings:active { transform: scale(.92); background: rgba(255,255,255,0.22); }
.td-mob-settings svg { width: 20px; height: 20px; color: #ffffff; }

/* ─── BOTTOM SHEET « Découverte » ────────────────────────────────────── */
.td-mob-discover-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 10000;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.td-mob-discover-backdrop.active { display: block !important; opacity: 1; pointer-events: auto; }

.td-mob-discover {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 10001;
  background: #ffffff;
  border-radius: 22px 22px 0 0;
  padding: 8px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.18);
}
.td-mob-discover.active { display: block !important; transform: translateY(0) !important; }

.td-mob-discover-handle {
  width: 40px; height: 5px; background: #d1d5db;
  border-radius: 3px; margin: 8px auto 14px;
}
.td-mob-discover-title {
  font-size: 17px; font-weight: 800; color: #111;
  text-align: center; margin: 0 0 16px;
  padding: 0 24px;
}
.td-mob-discover-list { list-style: none; padding: 0; margin: 0; }
.td-mob-discover-list a {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px;
  color: #1a1a1a; text-decoration: none;
  font-size: 15px; font-weight: 600;
  border-bottom: 1px solid #f3f4f6;
  transition: background .15s;
}
.td-mob-discover-list a:last-child { border-bottom: none; }
.td-mob-discover-list a:active { background: #f9fafb; }
.td-mob-discover-list a .icon {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #1a7c4a;
}
.td-mob-discover-list a .icon svg { width: 22px; height: 22px; }
.td-mob-discover-list a.danger     { color: #DC2626; }
.td-mob-discover-list a.danger .icon { color: #DC2626; }

/* ─── BOTTOM NAV (4 onglets, fond gradient) ──────────────────────────── */
.td-mob-bottom-nav {
  /* Même logique de centralisation que le header */
  position: fixed;
  left: 50%; transform: translateX(-50%);
  width: calc(100% - 16px); max-width: 560px;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 9000;
  height: 76px;
  border-radius: 24px;
  /* Fond gradient inspiré du visuel uploadé : vert pâle → violet → bleu */
  background: linear-gradient(95deg,
                #8FE3B8 0%,
                #D4D2F7 35%,
                #C4B5FD 65%,
                #8B7BE0 100%);
  padding: 0 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  align-items: stretch;
  justify-content: space-around;
}

.td-mob-tab {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  text-decoration: none;
  color: #ffffff;
  font-size: 12px; font-weight: 700;
  padding: 8px 4px;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s, color .15s;
}
.td-mob-tab:active { transform: scale(.94); }
.td-mob-tab .lbl { line-height: 1; transition: color .15s; }

/* Icônes en SVG inline : la couleur suit `currentColor` du parent .td-mob-tab.
   Pas de double image, layout stable. */
.td-mob-tab .ico { display: inline-flex; align-items: center; justify-content: center; }
.td-mob-tab .ico svg { width: 28px; height: 28px; display: block; color: currentColor; }

/* État ACTIF : couleur verte sur l'icône (via currentColor) et le label. */
.td-mob-tab.is-active { color: #15803D; }
.td-mob-tab.is-active .lbl { color: #15803D; }

/* État INACTIF : tout en blanc. */
.td-mob-tab:not(.is-active) { color: #ffffff; }
.td-mob-tab:not(.is-active) .lbl { color: #ffffff; }

/* État actif : petit point sous l'icône, dans la couleur du label */
.td-mob-tab.is-active::after {
  content: ""; display: block;
  width: 18px; height: 3px; border-radius: 2px;
  background: currentColor;
  margin-top: 2px;
}

/* ─── Bouton settings flottant DESKTOP ───────────────────────────────────
   Affiché uniquement >768px (le shell mobile prend le relais sous mobile).
   Position bottom-right, gradient vert pour attirer l'œil sans dominer.
*/
.td-discover-trigger {
  display: none;
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
  color: #ffffff;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  transition: transform .15s, box-shadow .15s;
  padding: 0;
  font-family: inherit;
}
.td-discover-trigger:hover { transform: scale(1.06); box-shadow: 0 8px 24px rgba(0,0,0,0.24); }
.td-discover-trigger:active { transform: scale(0.96); }
.td-discover-trigger svg { width: 24px; height: 24px; color: #ffffff; }

@media (min-width: 769px) {
  .td-discover-trigger { display: flex; }
}