/* --- Initialisation Globale & Reset --- */
  * { 
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body { 
    height: 100vh;
    height: 100dvh; /* Force la hauteur à s'ajuster dynamiquement selon les barres d'outils mobiles */
    overflow: hidden; 
    background-color: var(--bg-color);
    color: var(--text-main);
    transition: background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.5s cubic-bezier(0.16, 1, 0.3, 1); 
  }

  /* --- Correctifs Mobiles Cruciaux (iOS Zoom & Android Keyboard) --- */
  input, textarea, select {
    font-size: 16px !important; /* Empêche le zoom automatique forcé par iOS lors du focus/envoi */
  }

  /* Sécurité pour les barres de navigation natives du bas d'écran */
  .chat-container-footer, 
  form, 
  footer,
  [class*="input"], 
  [class*="footer"] {
    padding-bottom: env(safe-area-inset-bottom); /* Évite que l'input soit masqué par la barre Android/iOS */
  }

  /* --- Moteur CSS pour l'animation Border-Snake --- */
  @property --path-percent {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
  }

  /* --- Design System : Thèmes Premium --- */
  :root, :root[data-theme="light-premium"] {
    --bg-color: #f8f9fa; 
    --text-main: #09090b; 
    --text-muted: #71717a;
    
    /* Mesh Gradients */
    --mesh-1: rgba(37, 99, 235, 0.04); 
    --mesh-2: rgba(139, 92, 246, 0.04);
    
    /* Composants */
    --glass-bg: rgba(255, 255, 255, 0.45); 
    --glass-menu-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(9, 9, 11, 0.05);
    
    /* Éléments de Chat */
    --user-grad: linear-gradient(135deg, #f4f4f5 0%, #e4e4e7 100%);
    --bubble-ai-bg: rgba(255, 255, 255, 0.5);
    
    /* Accents & Glows */
    --neon-color: #2563eb; 
    --glow-color: rgba(37, 99, 235, 0.12);
  }

  :root[data-theme="cyber-fluid"] {
    --bg-color: #080511; 
    --text-main: #f8fafc; 
    --text-muted: #94a3b8; 
    
    /* Mesh Gradients */
    --mesh-1: rgba(0, 240, 255, 0.12); 
    --mesh-2: rgba(168, 85, 247, 0.12);
    
    /* Composants */
    --glass-bg: rgba(17, 12, 34, 0.55); 
    --glass-menu-bg: rgba(10, 7, 22, 0.85);
    --glass-border: rgba(255, 255, 255, 0.08);
    
    /* Éléments de Chat */
    --user-grad: linear-gradient(135deg, rgba(0, 240, 255, 0.15) 0%, rgba(168, 85, 247, 0.1) 100%);
    --bubble-ai-bg: rgba(255, 255, 255, 0.05); 
    
    /* Accents & Glows */
    --neon-color: #00f0ff; 
    --glow-color: rgba(0, 240, 255, 0.25);
  }

  :root[data-theme="neon-aurora"] {
    --bg-color: #030a05; 
    --text-main: #f0fdf4; 
    --text-muted: #94a3b8; 
    
    /* Mesh Gradients */
    --mesh-1: rgba(34, 197, 94, 0.12); 
    --mesh-2: rgba(6, 182, 212, 0.08);
    
    /* Composants */
    --glass-bg: rgba(9, 26, 16, 0.55); 
    --glass-menu-bg: rgba(4, 14, 8, 0.85);
    --glass-border: rgba(34, 197, 94, 0.1);
    
    /* Éléments de Chat */
    --user-grad: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(6, 182, 212, 0.1) 100%);
    --bubble-ai-bg: rgba(255, 255, 255, 0.05); 
    
    /* Accents & Glows */
    --neon-color: #22c55e; 
    --glow-color: rgba(34, 197, 94, 0.25);
  }

  /* --- Décors de Fond --- */
  .bg-mesh {
    background-color: var(--bg-color);
    background-image: 
      radial-gradient(circle at 20% 20%, var(--mesh-1) 0%, transparent 60%),
      radial-gradient(circle at 80% 80%, var(--mesh-2) 0%, transparent 60%);
    position: relative;
  }

  /* --- Interfaces Glassmorphism --- */
  .glass { 
    background: var(--glass-bg); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px); 
    border: 1px solid var(--glass-border); 
  }
  
  .glass-strong { 
    background: var(--glass-bg); 
    backdrop-filter: blur(32px); 
    -webkit-backdrop-filter: blur(32px); 
    border: 1px solid var(--glass-border); 
  }
  
  .glass-menu { 
    background: var(--glass-menu-bg); 
    backdrop-filter: blur(40px); 
    -webkit-backdrop-filter: blur(40px); 
    border-right: 1px solid var(--glass-border); 
  }

  /* --- Effet d'Activation Néon (Premium Border Effect) --- */
  .neon-active { 
    position: relative; 
    border: 1px solid transparent !important; 
    box-shadow: 0 10px 30px -10px var(--glow-color), 0 0 15px 0 var(--glow-color) !important; 
    transition: box-shadow 0.3s ease;
  }



.neon-active::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from calc(var(--path-percent) * 3.6deg),
    var(--neon-color),
    transparent 60%,
    transparent
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: snakeRun 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
  z-index: 5;
  will-change: transform;
}



  @keyframes snakeRun {
    0% { --path-percent: 0; opacity: 1; }
    85% { opacity: 1; }
    100% { --path-percent: 100; opacity: 0; }
  }

  /* --- Navigation & Panels --- */
  .slide-panel { 
    transform: translateX(-100%); 
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); 
  }
  .slide-panel.open { transform: translateX(0); }
  
  .overlay { 
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.4s ease; 
  }
  .overlay.open { opacity: 1; pointer-events: auto; }

  .auth-modal {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .auth-modal.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  .auth-tab-btn.active {
    background: rgba(255,255,255,0.16);
    color: var(--text-main);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
  }

  .auth-status {
    min-height: 1.25rem;
  }

  /* --- Chat Bubbles & Animations --- */
  .msg-enter { 
    animation: liquidFluidity 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
  }
  
  @keyframes liquidFluidity { 
    from { opacity: 0; transform: translateY(16px) scale(0.98); } 
    to { opacity: 1; transform: translateY(0) scale(1); } 
  }

 
 
 
 
 
 .user-bubble { 
  background: var(--user-grad); 
  border-radius: 18px 18px 4px 18px; 
  color: var(--text-main); 
  border: 1px solid var(--glass-border);

  /* Fix overflow */
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
}
 
 
 
  
  .ai-bubble { 
    background: var(--bubble-ai-bg); 
    border-radius: 18px 18px 18px 4px; 
    color: var(--text-main); 
    border: 1px solid var(--glass-border);
  }
  
  /* --- Cursor & Typo --- */
  .cursor-blink::after { 
    content: '│'; 
    display: inline-block; 
    margin-left: 3px; 
    color: var(--neon-color); 
    font-weight: 200;
    animation: blink 1s steps(2, start) infinite; 
  }
  @keyframes blink { to { opacity: 0; } }

  /* --- Scrollbar Custom Épurée --- */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.2); border-radius: 10px; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 128, 0.35); }
  
  
  
  
  
  
  
  
  
  
  
@media (max-width: 768px) {

  /* Base panels mobile */
  #legal-menu {
    right: 12px !important;
    left: auto !important;
    top: auto !important;

    width: calc(100vw - 24px) !important;

    transform: translateY(10px);
  }

  /* Deuxième panel décalé vers la droite + bas */
  #legal-menu {
    top: 190px !important;

    /* léger décalage pour effet stack iOS */
    transform: translateY(10px) translateX(8px);
  }
}

#core-menu button,
#legal-menu button {
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

#core-menu button:hover,
#legal-menu button:hover {
  background: rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  transform: translateX(2px);
}