@import "https://cdn.jsdelivr.net/npm/tailwindcss@3.4.1/dist/tailwind.min.css";

/* Ajout de styles personnalisés */
body {
  background-color: #050505;
  color: #f5f5f5;
  font-family: 'Inter', sans-serif;
}

/* Effet lumineux doux pour éléments interactifs */
.glow {
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}

.text-gradient {
  background: linear-gradient(90deg, #00ffff, #1e90ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeIn 0.4s ease forwards;
}

/* Boîte de chat */
#chat-box {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,255,255,0.3) transparent;
}

#chat-box::-webkit-scrollbar {
  width: 6px;
}

#chat-box::-webkit-scrollbar-thumb {
  background: rgba(0,255,255,0.3);
  border-radius: 10px;
}

#chat-box::-webkit-scrollbar-track {
  background: transparent;
}

/* Effet de glow léger au survol */
.glow:hover {
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

/* Animation subtile de halo */
@keyframes cyanGlow {
  0% { box-shadow: 0 0 10px rgba(0,255,255,0.1); }
  50% { box-shadow: 0 0 25px rgba(0,255,255,0.2); }
  100% { box-shadow: 0 0 10px rgba(0,255,255,0.1); }
}

.glow {
  animation: cyanGlow 3s infinite ease-in-out;
}
/* Empêche les éléments décoratifs (fond, canvas, halo) de bloquer les clics */
#particles,
#hero::before,
#hero::after,
.absolute,
.bg-cyan-500\/20 {
  pointer-events: none !important;
}
/* ====== IAbouMoussa Chat — Style Neon Flow ====== */

#chat-box {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,255,255,0.3) transparent;
}
#chat-box::-webkit-scrollbar {
  width: 6px;
}
#chat-box::-webkit-scrollbar-thumb {
  background: rgba(0,255,255,0.3);
  border-radius: 10px;
}

/* Animation d'apparition des bulles */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeIn 0.3s ease forwards;
}

/* Halo animé autour des boutons */
@keyframes cyanGlow {
  0% { box-shadow: 0 0 8px rgba(0,255,255,0.1); }
  50% { box-shadow: 0 0 20px rgba(0,255,255,0.25); }
  100% { box-shadow: 0 0 8px rgba(0,255,255,0.1); }
}
.glow {
  animation: cyanGlow 3s infinite ease-in-out;
}

/* Effet glassmorphism global */
#demo .bg-white\/5 {
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  background-color: rgba(255, 255, 255, 0.05);
}

/* Messages utilisateur et IA */
#chat-box .ml-auto {
  background: linear-gradient(135deg, #00ffff 0%, #1e90ff 100%);
  color: #000;
  font-weight: 500;
}
#chat-box .text-gray-200 {
  background-color: rgba(10, 10, 10, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
#features .group:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 255, 255, 0.08);
}
#integrations .group:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0, 255, 255, 0.1);
}
#integrations img {
  filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.2));
}
/* ===== Icônes argentées semi-transparentes — version stable ===== */
.icon-silver {
  width: 55px;
  height: 55px;
  opacity: 0.85;
  transition: all 0.4s ease;
  /* on neutralise totalement les couleurs internes */
  filter: grayscale(100%) brightness(3.2) contrast(1.6) saturate(0) invert(1);
  /* rend l’argent fondu dans le fond noir */
  mix-blend-mode: overlay;
}

/* survol : reflets argent + halo cyan doux */
.group:hover .icon-silver {
  filter: grayscale(100%) brightness(4.2) contrast(1.8) saturate(0)
          invert(1) drop-shadow(0 0 10px rgba(0,255,255,0.35));
  transform: scale(1.07);
  opacity: 1;
}