/* Bottom Navigation Bar - Style TikTok flottant et translucide */
/* Mobile-first, fixe en bas de l'écran sur toutes les pages */

:root {
  --bottom-nav-height: 60px;
  --bottom-nav-bg: rgba(255, 255, 255, 0.15);
  --bottom-nav-border: rgba(255, 255, 255, 0.15);
  --bottom-nav-active: #6366f1;
  --bottom-nav-inactive: #6b7280;
  --bottom-nav-badge: #ef4444;
  --bottom-nav-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}

/* Container principal - glassmorphism gris foncé translucide */
.bottom-nav {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  height: var(--bottom-nav-height);
  background: rgba(31, 41, 55, 0.3);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-radius: 28px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
  box-shadow: 0 10px 60px rgba(0, 0, 0, 0.8);
  /* Support pour les encoches iPhone */
  margin-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: slideUp 0.3s ease-out;
}

/* Canvas overlay pour effet RGB sur mobile */
.bottom-nav.has-canvas-overlay {
  overflow: hidden; /* Clip le canvas aux bords arrondis */
}

.mobile-glass-canvas {
  /* Styles définis en JS */
}

/* Mode SVG filters - Effet glassmorphism avancé avec distorsions chromatiques */
.bottom-nav.glass-effect--svg {
  background: rgba(20, 25, 35, 0.6);
  backdrop-filter: var(--glass-filter-id) saturate(145%) brightness(0.92);
  -webkit-backdrop-filter: saturate(145%) brightness(0.92);
  box-shadow:
    /* Aberration chromatique renforcée */
    0 0 0 1px rgba(99, 102, 241, 0.18) inset,
    0 0 20px 3px rgba(99, 102, 241, 0.12) inset,
    0 0 15px 2px rgba(239, 68, 68, 0.08) inset,
    /* Glow RGB externe */
    0 0 30px rgba(99, 102, 241, 0.3),
    0 0 20px rgba(139, 92, 246, 0.2),
    0 0 15px rgba(239, 68, 68, 0.15),
    /* Shadows standard */
    0 10px 60px rgba(0, 0, 0, 0.95);
}

/* Mode fallback - Glassmorphism CSS amélioré (Safari, Firefox) */
.bottom-nav.glass-effect--fallback {
  background: rgba(31, 41, 55, 0.3);  /* ⬆️ Retour au glassmorphism translucide d'origine */
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: none;
  box-shadow: 0 10px 60px rgba(0, 0, 0, 0.8);
}

/* Effet hover - glassmorphism + glow intensifié */
.bottom-nav:hover {
  transform: translateY(-2px);
  /* L'animation de couleur continue automatiquement */
}

/* Items de navigation */
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 0;
  text-decoration: none;
  color: var(--bottom-nav-inactive);
  transition: all 0.2s ease;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto !important;
  z-index: 10;
}

/* Item actif - avec glow subtil */
.bottom-nav-item.active {
  color: var(--bottom-nav-active);
  filter: drop-shadow(0 0 6px rgba(102, 126, 234, 0.5));
}

/* Icône SVG */
.bottom-nav-item svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  transition: transform 0.2s ease;
  pointer-events: none;
}

/* Item central (Dashboard) - Pas d'effet loupe */
.bottom-nav-item.center {
  position: relative;
}

/* Label */
.bottom-nav-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
}

/* Badge de notification */
.bottom-nav-badge {
  position: absolute;
  top: 4px;
  right: 50%;
  transform: translateX(50%);
  background: var(--bottom-nav-badge);
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--bottom-nav-bg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

/* Cacher le badge si 0 */
.bottom-nav-badge[data-count="0"] {
  display: none;
}

/* Animation au tap */
.bottom-nav-item:active {
  transform: scale(0.95);
}

/* Animation de l'icône au survol/actif */
.bottom-nav-item.active svg {
  transform: scale(1.1);
}

/* Espacement pour le contenu de la page - plus d'espace pour la nav flottante */
body {
  padding-bottom: calc(var(--bottom-nav-height) + 32px + env(safe-area-inset-bottom));
}

/* Fix pour messages.html - empêcher le header de cacher le contenu */
body.messages-page .chat-area {
  margin-top: 0;
  padding-top: 0;
}

/* Remonter la sphère Ped'IA au-dessus de la bottom nav flottante */
#pedia-floating-container,
.pedia-floating-container {
  bottom: calc(var(--bottom-nav-height, 60px) + 36px) !important;
  z-index: 999 !important;
}

/* Dark mode support - ultra translucide aussi */
@media (prefers-color-scheme: dark) {
  :root {
    --bottom-nav-bg: rgba(31, 41, 55, 0.15);
    --bottom-nav-border: rgba(55, 65, 81, 0.15);
    --bottom-nav-inactive: #9ca3af;
    --bottom-nav-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
  }

  .bottom-nav:hover {
    background: rgba(31, 41, 55, 0.25);
  }

  /* Mode fallback dark */
  .bottom-nav.glass-effect--fallback {
    background: rgba(31, 41, 55, 0.25);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
  }
}

/* Cacher la bottom nav sur la page "Parler avec Ped'IA" */
body.ped-ia-chat-active .bottom-nav {
  display: none !important;
}

body.ped-ia-chat-active {
  padding-bottom: 0 !important;
}

/* Cacher complètement la bottom nav sur messages.html */
body.messages-page .bottom-nav {
  display: none !important;
}

body.messages-page {
  padding-bottom: 0 !important;
}

body.messages-page #pedia-floating-container,
body.messages-page .pedia-floating-container {
  bottom: 20px !important;
}

/* Ajustement de la position en mode PWA (standalone) */
@media all and (display-mode: standalone) {
  .bottom-nav {
    bottom: 8px; /* Légèrement remonté en mode PWA */
    margin-bottom: env(safe-area-inset-bottom); /* Garder le safe-area pour les encoches */
    left: 8px;
    right: 8px;
    border-radius: 24px; /* Arrondir tous les coins */
  }

  body {
    padding-bottom: calc(var(--bottom-nav-height) + 24px + env(safe-area-inset-bottom));
  }

  #pedia-floating-container,
  .pedia-floating-container {
    bottom: calc(var(--bottom-nav-height, 60px) + 28px) !important;
  }
}

/* Fallback pour iOS en mode standalone (détection alternative) */
@media all and (-webkit-touch-callout: none) and (hover: none) {
  html.standalone .bottom-nav {
    bottom: 8px;
    margin-bottom: env(safe-area-inset-bottom);
    left: 8px;
    right: 8px;
    border-radius: 24px;
  }

  html.standalone body {
    padding-bottom: calc(var(--bottom-nav-height) + 24px + env(safe-area-inset-bottom));
  }

  html.standalone #pedia-floating-container,
  html.standalone .pedia-floating-container {
    bottom: calc(var(--bottom-nav-height, 60px) + 28px + env(safe-area-inset-bottom)) !important;
  }
}

/* Fix spécifique pour iOS Safari PWA - Ajuster la hauteur de la sphère */
@supports (-webkit-touch-callout: none) {
  @media all and (display-mode: standalone) {
    #pedia-floating-container,
    .pedia-floating-container {
      bottom: calc(var(--bottom-nav-height, 60px) + 36px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* Cacher la bottom nav quand le menu hamburger est ouvert */
#main-nav.open ~ * .bottom-nav,
body:has(#main-nav.open) .bottom-nav {
  opacity: 0;
  pointer-events: none;
  transform: translateY(100px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Réafficher la bottom nav quand le menu hamburger est fermé */
body .bottom-nav {
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Desktop - garder la nav visible mais centrée avec une largeur maximale v2 */
@media (min-width: 1024px) {
  .bottom-nav {
    max-width: 950px !important;
    min-width: 600px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
  }

  body {
    padding-bottom: calc(var(--bottom-nav-height) + 32px);
  }

  #pedia-floating-container,
  .pedia-floating-container {
    bottom: calc(var(--bottom-nav-height, 60px) + 36px) !important;
  }
}

/* Animation d'entrée */
@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Animation d'entrée déjà appliquée dans le sélecteur principal .bottom-nav */

/* Ripple effect au tap (optionnel) */
.bottom-nav-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease;
}

.bottom-nav-item:active::before {
  width: 50px;
  height: 50px;
}