/* ==========================================================
   EVO GENESIS — Thème Cosmique Dark
   Intégration parfaite avec la landing page spatiale
   Styles globaux Voiceflow (classes .vfrc-*)
   
   IMPORTANT: Après modification de ce fichier, incrémenter 
   le paramètre cache-busting dans client/index.html :
   stylesheet: `${protocol}//${host}/voiceflow-custom.css?v=YYYYMMDD`
   
   Note: Le header visible dans la modale est notre header React
   personnalisé (VoiceflowChatbot.tsx), pas le header Voiceflow natif
   qui est masqué par les règles ci-dessous.
   ========================================================== */

/* ========== 0. FORCER LE CHAT À REMPLIR TOUTE LA HAUTEUR ========== */

/* Conteneur principal doit remplir toute sa hauteur */
#voiceflow-chat-container {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: visible !important;
}

/* Widget et éléments racine doivent s'étirer */
.vfrc-widget,
.vfrc-chat,
.vfrc-chat-dialog,
.vfrc-chat--dialog {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 100% !important;
  flex: 1 !important;
  overflow: visible !important;
}

/* FIX CRITIQUE: Forcer le conteneur interne à utiliser flexbox au lieu de position absolute */
.vfrc-chat-dialog__container {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  flex: 1 !important;
  overflow: visible !important;
  inset: auto !important;
}

/* Corps du chat (zone de messages) doit prendre tout l'espace disponible */
.vfrc-chat-body,
.vfrc-chat-dialog__content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-bottom: 0 !important;
}

/* ========== 1. MASQUER LE HEADER COMPLÈTEMENT ========== */
.vfrc-header,
.vfrc-assistant-info,
.vf-header {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ========== 2. FOND TRANSPARENT (voir background modale) ========== */
.vfrc-chat,
.vfrc-chat-dialog,
.vfrc-chat--dialog,
.vfrc-widget {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
}

/* Zone de conversation transparente */
.vfrc-chat-dialog__content,
.vfrc-chat-body {
  background: transparent !important;
}

/* ========== 3. BULLES DE CHAT - STYLE DARK SPATIAL ========== */

/* Bulles système (Evo) - Style dark avec glow orange */
.vfrc-system-response .vfrc-message:not([class*="extension"]) {
  display: inline-block !important;
  background: rgba(20, 20, 30, 0.85) !important;
  color: #E5E5E5 !important;
  border: 1px solid rgba(240, 131, 0, 0.3) !important;
  border-radius: 16px !important;
  padding: 14px 18px !important;
  max-width: 85%;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(240, 131, 0, 0.15) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s ease;
}

/* Hover sur bulles système */
.vfrc-system-response .vfrc-message:not([class*="extension"]):hover {
  border-color: rgba(240, 131, 0, 0.5) !important;
  box-shadow: 
    0 6px 16px rgba(0, 0, 0, 0.6),
    0 0 25px rgba(240, 131, 0, 0.25) !important;
}

/* Texte dans les bulles système */
.vfrc-system-response .vfrc-message:not([class*="extension"]) * {
  color: #E5E5E5 !important;
}

/* Bulles utilisateur - Style orange avec glow */
.vfrc-user-response > div,
.vfrc-user-response .vfrc-message {
  display: inline-block !important;
  background: linear-gradient(135deg, #F08300 0%, #D67000 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 165, 0, 0.4) !important;
  border-radius: 16px !important;
  padding: 12px 16px !important;
  max-width: 85%;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 
    0 4px 12px rgba(240, 131, 0, 0.4),
    0 0 20px rgba(240, 131, 0, 0.3) !important;
  transition: all 0.3s ease;
}

.vfrc-user-response > div *,
.vfrc-user-response .vfrc-message * {
  color: #FFFFFF !important;
  font-weight: 500;
}

/* Espacement des messages */
.vfrc-message:not([class*="extension"]) { 
  margin: 16px 0 !important; 
}

/* ========== 4. INPUT ZONE - STYLE DARK ========== */

/* Conteneur de l'input (footer) - padding réduit pour éviter bande noire */
.vfrc-chat-input,
.vfrc-footer,
.vfrc-chat--footer,
.vf-footer {
  background: rgba(20, 20, 30, 0.9) !important;
  border-top: 2px solid rgba(240, 131, 0, 0.3) !important;
  padding: 16px 12px !important;
  backdrop-filter: blur(15px) !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5) !important;
  min-height: 0 !important;
  max-height: none !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 10 !important;
}

/* FIX: Wrappers internes qui créent la bande noire - éliminer padding/gap/min-height */
.vfrc-chat-input__inner,
.vfrc-chat-input__form,
.vfrc-chat-input__status,
.vfrc-chat-input__footer-wrapper {
  padding: 0 !important;
  gap: 0 !important;
  min-height: auto !important;
  max-height: fit-content !important;
}

/* FIX: Conteneur principal input - flexbox horizontal avec gap */
.vfrc-input-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Conteneur interne de l'input */
.vfrc-chat-input__container-inner {
  flex: 1 !important;
  min-width: 0 !important;
}

/* Zone d'actions (bouton send) */
.vfrc-chat-input__actions {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

/* Masquer uniquement les éléments de status */
.vfrc-chat-input__status,
.vfrc-chat-input__secondary {
  display: none !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Input text field */
.vfrc-chat-input__input,
.vfrc-input,
.vfrc-chat-input textarea,
.vfrc-input input[type="text"],
input[type="text"].vfrc-input,
textarea.vfrc-input {
  background: rgba(30, 30, 40, 0.8) !important;
  color: #E5E5E5 !important;
  border: 1px solid rgba(240, 131, 0, 0.4) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  transition: all 0.3s ease;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Input focus */
.vfrc-chat-input__input:focus,
.vfrc-input:focus,
.vfrc-chat-input textarea:focus,
input[type="text"].vfrc-input:focus,
textarea.vfrc-input:focus {
  border-color: #F08300 !important;
  outline: none !important;
  box-shadow: 
    inset 0 2px 8px rgba(0, 0, 0, 0.4),
    0 0 0 3px rgba(240, 131, 0, 0.2) !important;
}

/* Placeholder text */
.vfrc-chat-input__input::placeholder,
.vfrc-input::placeholder,
.vfrc-chat-input textarea::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(229, 229, 229, 0.4) !important;
}

/* ========== 5. BOUTON ENVOYER - STYLE FLAMME ========== */

/* Tous les sélecteurs possibles pour le bouton send */
.vfrc-chat-input--button,
.vfrc-chat-input__button,
.vfrc-chat-input__send,
#vfrc-send-message,
button[type="submit"].vfrc-chat-input--button,
.vfrc-footer button[type="submit"],
.vfrc-chat-input__actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(40, 40, 50, 0.6) !important;
  border: 1px solid rgba(240, 131, 0, 0.2) !important;
  border-radius: 50% !important;
  padding: 10px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  line-height: 1 !important;
  color: rgba(240, 131, 0, 0.4) !important;
  transition: all 0.3s ease;
  cursor: not-allowed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  flex-shrink: 0 !important;
}

/* Style de l'icône SVG */
.vfrc-chat-input--button svg,
.vfrc-chat-input__button svg,
.vfrc-chat-input__send svg,
#vfrc-send-message svg,
.vfrc-footer button[type="submit"] svg,
.vfrc-chat-input__actions button svg {
  width: 20px !important;
  height: 20px !important;
  color: inherit !important;
}

/* État actif : glow orange + hover */
.vfrc-chat-input--button:not([disabled]),
.vfrc-chat-input__button:not([disabled]),
.vfrc-chat-input__send:not([disabled]),
#vfrc-send-message:not([disabled]),
.vfrc-footer button[type="submit"]:not([disabled]),
.vfrc-chat-input__actions button:not([disabled]) {
  background: linear-gradient(135deg, #F08300 0%, #FF9500 100%) !important;
  border-color: rgba(255, 165, 0, 0.6) !important;
  color: #FFFFFF !important;
  cursor: pointer;
  box-shadow: 
    0 4px 12px rgba(240, 131, 0, 0.5),
    0 0 20px rgba(240, 131, 0, 0.3) !important;
}

/* SVG dans bouton actif */
.vfrc-chat-input--button:not([disabled]) svg,
.vfrc-chat-input__button:not([disabled]) svg,
.vfrc-chat-input__send:not([disabled]) svg,
#vfrc-send-message:not([disabled]) svg,
.vfrc-footer button[type="submit"]:not([disabled]) svg,
.vfrc-chat-input__actions button:not([disabled]) svg {
  color: #FFFFFF !important;
}

/* Hover actif - effet flamme */
.vfrc-chat-input--button:not([disabled]):hover,
.vfrc-chat-input__button:not([disabled]):hover,
.vfrc-chat-input__send:not([disabled]):hover,
#vfrc-send-message:not([disabled]):hover,
.vfrc-footer button[type="submit"]:not([disabled]):hover,
.vfrc-chat-input__actions button:not([disabled]):hover {
  transform: translateY(-2px);
  box-shadow: 
    0 6px 16px rgba(240, 131, 0, 0.6),
    0 0 30px rgba(240, 131, 0, 0.5) !important;
  border-color: #FFB800 !important;
}

/* Active (clic) */
.vfrc-chat-input--button:not([disabled]):active,
.vfrc-chat-input__button:not([disabled]):active,
.vfrc-chat-input__send:not([disabled]):active,
#vfrc-send-message:not([disabled]):active,
.vfrc-footer button[type="submit"]:not([disabled]):active,
.vfrc-chat-input__actions button:not([disabled]):active {
  transform: translateY(0);
}

/* ========== 6. BOUTONS (Choices) - STYLE SPATIAL ========== */

/* Boutons de choix */
.vfrc-button,
.vfrc-choice-button,
button[class*="choice"],
.vfrc-message button {
  background: rgba(30, 30, 40, 0.7) !important;
  color: #F08300 !important;
  border: 1px solid rgba(240, 131, 0, 0.4) !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 0 10px rgba(240, 131, 0, 0.1) !important;
  backdrop-filter: blur(5px);
}

/* Hover boutons */
.vfrc-button:hover,
.vfrc-choice-button:hover,
button[class*="choice"]:hover,
.vfrc-message button:hover {
  background: rgba(240, 131, 0, 0.2) !important;
  border-color: #F08300 !important;
  color: #FFB800 !important;
  transform: translateY(-2px);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(240, 131, 0, 0.3) !important;
}

/* ========== 7. SCROLLBAR - ORANGE GLOW ========== */

.vfrc-chat--dialog,
.vfrc-chat-dialog,
.vfrc-chat-dialog__container {
  scrollbar-width: thin;
  scrollbar-color: #F08300 transparent;
}

.vfrc-chat--dialog::-webkit-scrollbar,
.vfrc-chat-dialog::-webkit-scrollbar,
.vfrc-chat-dialog__container::-webkit-scrollbar {
  width: 8px;
}

.vfrc-chat--dialog::-webkit-scrollbar-thumb,
.vfrc-chat-dialog::-webkit-scrollbar-thumb,
.vfrc-chat-dialog__container::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #F08300 0%, #D67000 100%);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(240, 131, 0, 0.5);
}

.vfrc-chat--dialog::-webkit-scrollbar-track,
.vfrc-chat-dialog::-webkit-scrollbar-track,
.vfrc-chat-dialog__container::-webkit-scrollbar-track {
  background: transparent;
}

/* ========== 8. ANIMATIONS SUBTILES ========== */

/* Animation d'apparition des messages */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vfrc-message {
  animation: fadeInUp 0.4s ease-out;
}

/* Pulse subtil pour les nouveaux messages */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.5),
      0 0 20px rgba(240, 131, 0, 0.15);
  }
  50% {
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.5),
      0 0 25px rgba(240, 131, 0, 0.25);
  }
}

.vfrc-system-response .vfrc-message:not([class*="extension"]):last-child {
  animation: fadeInUp 0.4s ease-out, pulseGlow 2s ease-in-out;
}

/* ========== 9. PROTECTION DES EXTENSIONS ========== */

.vfrc-message[class*="extension"] {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ========== 10. RESPONSIVE MOBILE ========== */

@media (max-width: 768px) {
  .vfrc-system-response .vfrc-message:not([class*="extension"]),
  .vfrc-user-response .vfrc-message {
    max-width: 90% !important;
    padding: 12px 14px !important;
  }
  
  .vfrc-chat-input__input,
  .vfrc-chat-input textarea,
  .vfrc-input {
    font-size: 16px !important; /* Évite le zoom auto sur iOS */
  }
}

/* ========== 11. TOUCHES FINALES - EFFET SPATIAL ========== */

/* Effet particules/étoiles subtil */
.vfrc-chat-dialog::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(240, 131, 0, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(240, 131, 0, 0.03) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* Effet glow sur la zone de chat entière */
.vfrc-chat {
  box-shadow: 0 0 40px rgba(240, 131, 0, 0.1) !important;
}

/* ========== 12. WATERMARK & FOOTER BLANC - MASQUER COMPLÈTEMENT ========== */

/* Tous les footers et watermarks possibles - AUCUN espace vertical */
.vfrc-footer--watermark,
.vf-footer--watermark,
.vfrc-watermark,
.vfrc-powered-by,
.vfrc-branding,
.vfrc-attribution,
[class*="watermark"],
[class*="powered"],
[class*="branding"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

/* Force le background dark sur TOUS les éléments Voiceflow */
.vfrc-widget,
.vfrc-widget *,
.vfrc-chat,
.vfrc-chat *,
[class^="vfrc-"],
[class*="vfrc-"] {
  background-color: transparent !important;
}

/* Conteneur principal : background dark absolu */
.vfrc-widget,
.vfrc-chat-container,
.vfrc-root {
  background: rgba(10, 10, 10, 0.95) !important;
}

/* Zone blanche du footer : forcer dark et compacter */
.vfrc-footer,
.vfrc-chat--footer,
.vf-footer,
.vfrc-chat-footer,
[class*="footer"]:not([class*="watermark"]) {
  background: rgba(20, 20, 30, 0.9) !important;
  color: #E5E5E5 !important;
  padding-bottom: 12px !important;
  min-height: 0 !important;
}

/* Tout texte dans le footer doit être clair */
.vfrc-footer *,
.vfrc-chat--footer *,
.vf-footer * {
  color: #E5E5E5 !important;
  background: transparent !important;
}

/* Éléments sous l'input qui créent de l'espace vide */
.vfrc-footer > div:empty,
.vfrc-footer > span:empty,
.vfrc-chat--footer > div:empty,
.vfrc-chat--footer > span:empty {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}