/*
 * AI Chat N8N — styles du widget frontend.
 * Toutes les règles sont préfixées #ai-chat-n8n-widget ou .ai-chat-n8n
 * pour éviter tout conflit avec les styles du thème WordPress.
 * Les resets explicites sur chaque élément empêchent le thème d'interférer.
 */

/* =====================================================
   CSS CUSTOM PROPERTIES (fallbacks)
   ===================================================== */
#ai-chat-n8n-widget {
  --acn-primary:     #007cba;
  --acn-bg:          #ffffff;
  --acn-text:        #1a1a1a;
  --acn-border:      #e2e8f0;
  --acn-bot-bg:      #f1f5f9;
  --acn-bot-text:    #1a1a1a;
  --acn-shadow:      0 8px 32px rgba(0,0,0,0.16);
  --acn-radius:      14px;
  --acn-z:           9999;
  --acn-toggle-size: 60px;
  --acn-offset:      24px;
  --acn-win-width:   360px;
  --acn-win-height:  490px;
}

/* =====================================================
   CONTENEUR PRINCIPAL
   ===================================================== */
#ai-chat-n8n-widget {
  all: initial;
  position:    fixed !important;
  bottom:      var(--acn-offset) !important;
  z-index:     var(--acn-z) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
  font-size:   15px !important;
  line-height: 1.5 !important;
  box-sizing:  border-box !important;
  display:     block !important;
}

#ai-chat-n8n-widget.ai-chat-n8n--bottom-right { right: var(--acn-offset) !important; }
#ai-chat-n8n-widget.ai-chat-n8n--bottom-left  { left:  var(--acn-offset) !important; }

/* Reset box-sizing pour tous les enfants */
#ai-chat-n8n-widget *,
#ai-chat-n8n-widget *::before,
#ai-chat-n8n-widget *::after {
  box-sizing: border-box !important;
  font-family: inherit !important;
}

/* =====================================================
   BOUTON FLOTTANT (TOGGLE)
   Reset complet pour neutraliser n'importe quel style de thème
   ===================================================== */
#ai-chat-n8n-toggle {
  /* Reset absolu */
  all: unset !important;
  /* Notre style */
  display:          flex !important;
  align-items:      center !important;
  justify-content:  center !important;
  position:         relative !important;
  width:            var(--acn-toggle-size) !important;
  height:           var(--acn-toggle-size) !important;
  border-radius:    50% !important;
  background-color: var(--acn-primary) !important;
  background-image: none !important;
  border:           none !important;
  outline:          none !important;
  box-shadow:       var(--acn-shadow) !important;
  cursor:           pointer !important;
  color:            #ffffff !important;
  padding:          0 !important;
  margin:           0 !important;
  overflow:         hidden !important;
  transition:       filter 0.2s ease, transform 0.2s ease !important;
  box-sizing:       border-box !important;
  text-decoration:  none !important;
  -webkit-appearance: none !important;
  appearance:       none !important;
}

#ai-chat-n8n-toggle:hover {
  filter:    brightness(0.88) !important;
  transform: scale(1.07) !important;
  background-color: var(--acn-primary) !important;
  border:    none !important;
}

#ai-chat-n8n-toggle:focus {
  outline: none !important;
  border:  none !important;
  box-shadow: var(--acn-shadow) !important;
}

#ai-chat-n8n-toggle:focus-visible {
  box-shadow: 0 0 0 3px var(--acn-primary), 0 0 0 5px #ffffff !important;
}

/* Icônes chat / fermer dans le toggle */
#ai-chat-n8n-widget .ai-chat-n8n__icon {
  position:        absolute !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  transition:      opacity 0.2s ease, transform 0.2s ease !important;
  pointer-events:  none !important;
}

#ai-chat-n8n-widget .ai-chat-n8n__icon--chat {
  opacity:   1 !important;
  transform: rotate(0deg) scale(1) !important;
  width:     calc(var(--acn-toggle-size) * 0.44) !important;
  height:    calc(var(--acn-toggle-size) * 0.44) !important;
}

#ai-chat-n8n-widget .ai-chat-n8n__icon--chat svg,
#ai-chat-n8n-widget .ai-chat-n8n__icon--chat .ai-chat-n8n__custom-icon {
  width:      100% !important;
  height:     100% !important;
  object-fit: contain !important;
  display:    block !important;
}

#ai-chat-n8n-widget .ai-chat-n8n__icon--close {
  opacity:   0 !important;
  transform: rotate(-90deg) scale(0.7) !important;
  width:     calc(var(--acn-toggle-size) * 0.38) !important;
  height:    calc(var(--acn-toggle-size) * 0.38) !important;
}

#ai-chat-n8n-widget .ai-chat-n8n__icon--close svg {
  width:   100% !important;
  height:  100% !important;
  display: block !important;
}

#ai-chat-n8n-toggle.ai-chat-n8n__toggle--open .ai-chat-n8n__icon--chat  {
  opacity:   0 !important;
  transform: rotate(90deg) scale(0.7) !important;
}
#ai-chat-n8n-toggle.ai-chat-n8n__toggle--open .ai-chat-n8n__icon--close {
  opacity:   1 !important;
  transform: rotate(0deg) scale(1) !important;
}

/* =====================================================
   FENÊTRE DE CHAT
   ===================================================== */
#ai-chat-n8n-window {
  position:        absolute !important;
  bottom:          calc(var(--acn-toggle-size) + 14px) !important;
  width:           var(--acn-win-width) !important;
  height:          var(--acn-win-height) !important;
  background:      var(--acn-bg) !important;
  border-radius:   var(--acn-radius) !important;
  box-shadow:      var(--acn-shadow) !important;
  display:         flex !important;
  flex-direction:  column !important;
  overflow:        hidden !important;
  border:          1px solid var(--acn-border) !important;
  opacity:         0 !important;
  pointer-events:  none !important;
  transform:       translateY(10px) scale(0.97) !important;
  transform-origin: bottom center !important;
  transition:      opacity 0.22s ease, transform 0.22s ease !important;
  margin:          0 !important;
  padding:         0 !important;
}

#ai-chat-n8n-widget.ai-chat-n8n--bottom-right #ai-chat-n8n-window { right: 0 !important; }
#ai-chat-n8n-widget.ai-chat-n8n--bottom-left  #ai-chat-n8n-window { left:  0 !important; }

#ai-chat-n8n-window.ai-chat-n8n__window--open {
  opacity:        1 !important;
  pointer-events: all !important;
  transform:      translateY(0) scale(1) !important;
}

/* =====================================================
   EN-TÊTE
   ===================================================== */
#ai-chat-n8n-widget .ai-chat-n8n__header {
  background-color: var(--acn-primary) !important;
  color:            #ffffff !important;
  padding:          13px 16px !important;
  font-weight:      600 !important;
  font-size:        14px !important;
  line-height:      1.4 !important;
  display:          flex !important;
  align-items:      center !important;
  gap:              8px !important;
  flex-shrink:      0 !important;
  letter-spacing:   0.01em !important;
  margin:           0 !important;
  border:           none !important;
  box-shadow:       none !important;
}

#ai-chat-n8n-widget .ai-chat-n8n__header-icon {
  width:         18px !important;
  height:        18px !important;
  object-fit:    contain !important;
  border-radius: 3px !important;
  flex-shrink:   0 !important;
  display:       block !important;
}

#ai-chat-n8n-widget .ai-chat-n8n__header-icon-default {
  display:     flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  opacity:     0.9 !important;
}

#ai-chat-n8n-widget .ai-chat-n8n__header-icon-default svg {
  width:   18px !important;
  height:  18px !important;
  display: block !important;
}

#ai-chat-n8n-widget .ai-chat-n8n__header-title {
  flex:          1 !important;
  white-space:   nowrap !important;
  overflow:      hidden !important;
  text-overflow: ellipsis !important;
  font-size:     14px !important;
  font-weight:   600 !important;
  color:         #ffffff !important;
}

/* =====================================================
   ZONE DE MESSAGES
   ===================================================== */
#ai-chat-n8n-messages {
  flex:            1 !important;
  overflow-y:      auto !important;
  padding:         16px 14px !important;
  display:         flex !important;
  flex-direction:  column !important;
  gap:             8px !important;
  scroll-behavior: smooth !important;
  background:      var(--acn-bg) !important;
  margin:          0 !important;
  border:          none !important;
  list-style:      none !important;
}

#ai-chat-n8n-messages::-webkit-scrollbar       { width: 4px; }
#ai-chat-n8n-messages::-webkit-scrollbar-track  { background: transparent; }
#ai-chat-n8n-messages::-webkit-scrollbar-thumb  { background: var(--acn-border); border-radius: 4px; }

/* =====================================================
   BULLES DE MESSAGES
   ===================================================== */
#ai-chat-n8n-widget .ai-chat-n8n__message {
  display:   flex !important;
  max-width: 82% !important;
  margin:    0 !important;
  padding:   0 !important;
  border:    none !important;
  background: none !important;
}

#ai-chat-n8n-widget .ai-chat-n8n__message--user { align-self: flex-end !important; }
#ai-chat-n8n-widget .ai-chat-n8n__message--bot  { align-self: flex-start !important; }

#ai-chat-n8n-widget .ai-chat-n8n__bubble {
  padding:       10px 14px !important;
  border-radius: var(--acn-radius) !important;
  font-size:     14px !important;
  line-height:   1.55 !important;
  word-break:    break-word !important;
  white-space:   pre-wrap !important;
  margin:        0 !important;
  border:        none !important;
}

#ai-chat-n8n-widget .ai-chat-n8n__message--user .ai-chat-n8n__bubble {
  background-color:           var(--acn-primary) !important;
  color:                      #ffffff !important;
  border-bottom-right-radius: 3px !important;
}

#ai-chat-n8n-widget .ai-chat-n8n__message--bot .ai-chat-n8n__bubble {
  background-color:          var(--acn-bot-bg) !important;
  color:                     var(--acn-bot-text) !important;
  border-bottom-left-radius: 3px !important;
}

/* =====================================================
   INDICATEUR DE FRAPPE
   ===================================================== */
#ai-chat-n8n-widget .ai-chat-n8n__bubble--typing {
  display:     flex !important;
  align-items: center !important;
  gap:         5px !important;
  padding:     12px 16px !important;
}

#ai-chat-n8n-widget .ai-chat-n8n__dot {
  display:       inline-block !important;
  width:         7px !important;
  height:        7px !important;
  border-radius: 50% !important;
  background:    #94a3b8 !important;
  animation:     acnBounce 1.3s ease-in-out infinite !important;
  border:        none !important;
  padding:       0 !important;
  margin:        0 !important;
}

#ai-chat-n8n-widget .ai-chat-n8n__dot:nth-child(2) { animation-delay: 0.18s !important; }
#ai-chat-n8n-widget .ai-chat-n8n__dot:nth-child(3) { animation-delay: 0.36s !important; }

@keyframes acnBounce {
  0%, 70%, 100% { transform: translateY(0); }
  35%           { transform: translateY(-7px); }
}

/* =====================================================
   FORMULAIRE DE SAISIE
   ===================================================== */
#ai-chat-n8n-form {
  display:     flex !important;
  align-items: center !important;
  gap:         8px !important;
  padding:     10px 12px !important;
  border-top:  1px solid var(--acn-border) !important;
  flex-shrink: 0 !important;
  background:  var(--acn-bg) !important;
  margin:      0 !important;
  box-shadow:  none !important;
}

/* Champ texte */
#ai-chat-n8n-input {
  all:           unset !important;
  flex:          1 !important;
  min-width:     0 !important;
  border:        1px solid var(--acn-border) !important;
  border-radius: 20px !important;
  padding:       9px 14px !important;
  font-size:     14px !important;
  font-family:   inherit !important;
  line-height:   1.4 !important;
  color:         var(--acn-text) !important;
  background:    var(--acn-bg) !important;
  outline:       none !important;
  transition:    border-color 0.18s ease !important;
  box-sizing:    border-box !important;
  display:       block !important;
  -webkit-appearance: none !important;
  appearance:    none !important;
}

#ai-chat-n8n-input::placeholder {
  color:   #94a3b8 !important;
  opacity: 1 !important;
}

#ai-chat-n8n-input:focus {
  border-color: var(--acn-primary) !important;
  outline:      none !important;
  box-shadow:   none !important;
}

#ai-chat-n8n-input:disabled {
  opacity: 0.55 !important;
  cursor:  not-allowed !important;
}

/* Bouton Envoyer — reset complet comme le toggle */
#ai-chat-n8n-form button[type="submit"] {
  all:              unset !important;
  display:          flex !important;
  align-items:      center !important;
  justify-content:  center !important;
  flex-shrink:      0 !important;
  width:            38px !important;
  height:           38px !important;
  border-radius:    50% !important;
  background-color: var(--acn-primary) !important;
  background-image: none !important;
  border:           none !important;
  outline:          none !important;
  color:            #ffffff !important;
  cursor:           pointer !important;
  padding:          0 !important;
  margin:           0 !important;
  transition:       filter 0.18s ease !important;
  box-sizing:       border-box !important;
  -webkit-appearance: none !important;
  appearance:       none !important;
}

#ai-chat-n8n-form button[type="submit"]:hover {
  filter:           brightness(0.88) !important;
  background-color: var(--acn-primary) !important;
  border:           none !important;
}

#ai-chat-n8n-form button[type="submit"]:focus {
  outline:    none !important;
  border:     none !important;
  box-shadow: none !important;
}

#ai-chat-n8n-form button[type="submit"]:focus-visible {
  box-shadow: 0 0 0 3px var(--acn-primary), 0 0 0 5px #ffffff !important;
}

#ai-chat-n8n-form button[type="submit"]:disabled {
  opacity: 0.5 !important;
  cursor:  not-allowed !important;
}

#ai-chat-n8n-form button[type="submit"] svg,
#ai-chat-n8n-form button[type="submit"] .ai-chat-n8n__custom-icon {
  width:      18px !important;
  height:     18px !important;
  object-fit: contain !important;
  display:    block !important;
  flex-shrink: 0 !important;
  color:      #ffffff !important;
  fill:       #ffffff !important;
}

/* =====================================================
   ACCESSIBILITÉ — screen-reader-text
   ===================================================== */
#ai-chat-n8n-widget .screen-reader-text {
  border:    0 !important;
  clip:      rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  height:    1px !important;
  margin:    -1px !important;
  overflow:  hidden !important;
  padding:   0 !important;
  position:  absolute !important;
  width:     1px !important;
  word-wrap: normal !important;
}

/* =====================================================
   BOUTONS DE NAVIGATION DANS LES RÉPONSES BOT
   ===================================================== */
#ai-chat-n8n-widget .ai-chat-n8n__buttons {
  display:        flex !important;
  flex-direction: column !important;
  align-items:    stretch !important;
  gap:            6px !important;
  margin-top:     0 !important;
  padding:        0 !important;
}

#ai-chat-n8n-widget .ai-chat-n8n__bubble + .ai-chat-n8n__buttons {
  margin-top: 10px !important;
}

#ai-chat-n8n-widget .ai-chat-n8n__button {
  all:             unset !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: space-between !important;
  width:           100% !important;
  background:      color-mix(in srgb, var(--acn-primary) 10%, transparent) !important;
  color:           var(--acn-primary) !important;
  border:          none !important;
  border-radius:   8px !important;
  padding:         8px 14px !important;
  font-size:       13px !important;
  font-family:     inherit !important;
  font-weight:     500 !important;
  cursor:          pointer !important;
  transition:      background-color 0.18s ease, color 0.18s ease !important;
  text-align:      left !important;
  box-sizing:      border-box !important;
}

#ai-chat-n8n-widget .ai-chat-n8n__button:hover,
#ai-chat-n8n-widget .ai-chat-n8n__button:focus-visible {
  background-color: var(--acn-primary) !important;
  color:            #ffffff !important;
  outline:          none !important;
}

/* =====================================================
   RESPONSIVE MOBILE
   ===================================================== */
@media (max-width: 420px) {
  #ai-chat-n8n-widget {
    --acn-win-width:  calc(100vw - var(--acn-offset) * 2);
    --acn-win-height: 72vh;
  }
}