/* NOOKI Contact Widget v2 — Frontend CSS
   !important sur les propriétés critiques pour résister aux thèmes */

#ncw-root {
  --ncw-color:        #2c2e5d;
  --ncw-text-color:   #ffffff;
  --ncw-panel-radius: 16px;
  --ncw-btn-radius:   50%;
  --ncw-font:         inherit;
  --ncw-shadow:       0 8px 32px rgba(0,0,0,0.18);
  --ncw-width:        360px;
  position: fixed !important;
  bottom: 24px !important;
  left: 24px !important;
  z-index: 9999 !important;
  font-family: var(--ncw-font) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
  /* Pas de 'all:initial' — ça casse les CSS custom properties */
}

#ncw-root *, #ncw-root *::before, #ncw-root *::after {
  box-sizing: border-box !important;
}

#ncw-root[data-position="right"] { left: auto !important; right: 24px !important; }
#ncw-root[data-position="right"] #ncw-panel { left: auto !important; right: 0 !important; transform-origin: bottom right !important; }

/* ============================
   BOUTON FLOTTANT
   ============================ */
#ncw-toggle {
  border-radius: var(--ncw-btn-radius) !important; /* !important pour écraser le thème */
  background: var(--ncw-color) !important;
  color: var(--ncw-text-color) !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22) !important;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease !important;
  position: relative !important;
  padding: 0 !important;
  overflow: hidden !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Tailles */
#ncw-root[data-btn-size="sm"] #ncw-toggle { width: 44px !important; height: 44px !important; }
#ncw-root[data-btn-size="md"] #ncw-toggle { width: 56px !important; height: 56px !important; }
#ncw-root[data-btn-size="lg"] #ncw-toggle { width: 68px !important; height: 68px !important; }

#ncw-toggle:hover  { transform: scale(1.1) !important; box-shadow: 0 6px 24px rgba(0,0,0,0.28) !important; }
#ncw-toggle:active { transform: scale(0.96) !important; }
#ncw-toggle:focus  { outline: none !important; }

#ncw-toggle svg {
  width: 26px !important;
  height: 26px !important;
  transition: opacity 0.2s, transform 0.2s !important;
  position: absolute !important;
  fill: currentColor !important;
  display: block !important;
}

#ncw-toggle .ncw-icon-chat  { opacity: 1 !important;  transform: scale(1) rotate(0deg) !important; }
#ncw-toggle .ncw-icon-close { opacity: 0 !important;  transform: scale(0.5) rotate(-90deg) !important; }
#ncw-root.ncw-open #ncw-toggle .ncw-icon-chat  { opacity: 0 !important;  transform: scale(0.5) rotate(90deg) !important; }
#ncw-root.ncw-open #ncw-toggle .ncw-icon-close { opacity: 1 !important;  transform: scale(1) rotate(0deg) !important; }

/* Badge notification */
#ncw-toggle::after {
  content: '' !important;
  position: absolute !important;
  top: 3px !important; right: 3px !important;
  width: 12px !important; height: 12px !important;
  background: #ff5a3c !important;
  border-radius: 50% !important;
  border: 2px solid #fff !important;
  transition: transform 0.3s ease, opacity 0.3s ease !important;
}
#ncw-root.ncw-open #ncw-toggle::after { transform: scale(0) !important; opacity: 0 !important; }

/* ============================
   PANNEAU
   ============================ */
#ncw-panel {
  position: absolute !important;
  bottom: 68px !important;
  left: 0 !important;
  width: var(--ncw-width) !important;
  background: #fff !important;
  border-radius: var(--ncw-panel-radius) !important;
  box-shadow: var(--ncw-shadow) !important;
  overflow: hidden !important;
  transform: scale(0.85) translateY(20px) !important;
  transform-origin: bottom left !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1) !important;
  pointer-events: none !important;
  font-family: var(--ncw-font) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #222 !important;
}

#ncw-panel:not([hidden]) {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
  pointer-events: all !important;
}

/* ============================
   EN-TÊTE
   ============================ */
.ncw-header {
  background: var(--ncw-color) !important;
  color: #fff !important;
  padding: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.ncw-header-avatar { width: 48px !important; height: 48px !important; flex-shrink: 0 !important; }
.ncw-header-avatar svg { width: 48px !important; height: 48px !important; display: block !important; }
.ncw-header-img {
  width: 48px !important; height: 48px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(255,255,255,0.4) !important;
  display: block !important;
}

.ncw-header-text { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.ncw-header-title { font-weight: 700 !important; font-size: 16px !important; line-height: 1.2 !important; color: #fff !important; display: block !important; }
.ncw-header-sub   { font-size: 13px !important; opacity: 0.82 !important; line-height: 1.4 !important; color: #fff !important; display: block !important; }

/* ============================
   CORPS
   ============================ */
.ncw-body { padding: 20px !important; max-height: 70vh !important; overflow-y: auto !important; }

/* ============================
   CHAMPS
   ============================ */
.ncw-field { margin-bottom: 14px !important; }
.ncw-field label {
  display: block !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #444 !important;
  margin-bottom: 5px !important;
}

.ncw-field input:not([type="checkbox"]),
.ncw-field textarea {
  display: block !important;
  width: 100% !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-family: var(--ncw-font) !important;
  color: #222 !important;
  background: #fafafa !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  outline: none !important;
  resize: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  max-width: 100% !important;
}

.ncw-field input:not([type="checkbox"]):focus,
.ncw-field textarea:focus {
  border-color: var(--ncw-color) !important;
  box-shadow: 0 0 0 3px rgba(44,46,93,0.1) !important;
  background: #fff !important;
}

.ncw-field textarea { min-height: 90px !important; }

/* RGPD */
.ncw-field-rgpd .ncw-checkbox-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
  cursor: pointer !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  color: #555 !important;
}

.ncw-checkbox-label input[type="checkbox"] {
  width: auto !important;
  flex-shrink: 0 !important;
  margin-top: 3px !important;
}

.ncw-checkbox-label a { color: var(--ncw-color) !important; text-decoration: underline !important; }

/* ============================
   ERREUR
   ============================ */
.ncw-error {
  display: none !important;
  background: #fff0ee !important;
  color: #c0392b !important;
  border: 1px solid #f5c6c2 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  margin-bottom: 14px !important;
  line-height: 1.4 !important;
}

.ncw-error:not([hidden]) {
  display: block !important;
}

/* ============================
   BOUTON SUBMIT
   ============================ */
#ncw-submit {
  display: flex !important;
  width: 100% !important;
  background: var(--ncw-color) !important;
  color: var(--ncw-text-color) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 20px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: var(--ncw-font) !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: opacity 0.2s, transform 0.2s !important;
  margin-top: 4px !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  text-decoration: none !important;
}

#ncw-submit:hover    { opacity: 0.88 !important; }
#ncw-submit:active   { transform: scale(0.98) !important; }
#ncw-submit:disabled { opacity: 0.6 !important; cursor: not-allowed !important; }
#ncw-submit:focus    { outline: none !important; }

/* Spinner */
.ncw-btn-spinner { width: 18px !important; height: 18px !important; display: none !important; flex-shrink: 0 !important; }
.ncw-btn-spinner.ncw-spinning { display: inline-block !important; animation: ncw-spin 0.75s linear infinite !important; }

@keyframes ncw-spin { to { transform: rotate(360deg); } }

/* ============================
   SUCCÈS
   ============================ */
#ncw-success {
  text-align: center !important;
  padding: 20px 10px 10px !important;
}

#ncw-success svg {
  width: 48px !important; height: 48px !important;
  margin: 0 auto 12px !important;
  display: block !important;
  stroke: #27ae60 !important;
  fill: none !important;
}

#ncw-success-msg {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #333 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* ============================
   PIED
   ============================ */
.ncw-footer {
  text-align: center !important;
  padding: 10px !important;
  font-size: 11px !important;
  color: #aaa !important;
  border-top: 1px solid #f0f0f0 !important;
}

.ncw-footer a {
  color: var(--ncw-color) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

/* Croix fermeture dans l'en-tête — mobile only */
.ncw-close-btn {
  display: none !important;
  margin-left: auto !important;
  background: rgba(255,255,255,0.2) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  color: #fff !important;
  transition: background 0.2s !important;
}

.ncw-close-btn svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  fill: currentColor !important;
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
}

.ncw-close-btn:hover { background: rgba(255,255,255,0.35) !important; }

@media (max-width: 420px) {
  /* Bouton flottant masqué quand le panneau est ouvert */
  #ncw-root.ncw-open #ncw-toggle {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.7) !important;
  }

  /* Croix visible sur mobile */
  .ncw-close-btn {
    display: flex !important;
  }

  /* Position mobile par défaut : hérite du desktop */
  #ncw-root {
    bottom: 16px !important;
    left: 16px !important;
    --ncw-width: calc(100vw - 32px);
  }

  /* Mobile gauche */
  #ncw-root[data-position-mobile="left"] {
    left: 16px !important;
    right: auto !important;
  }

  /* Mobile droite */
  #ncw-root[data-position-mobile="right"] {
    left: auto !important;
    right: 16px !important;
  }

  /* Panneau collé en bas, pleine largeur */
  #ncw-panel {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    border-radius: var(--ncw-panel-radius) var(--ncw-panel-radius) 0 0 !important;
    transform: translateY(100%) !important;
    transform-origin: bottom center !important;
    opacity: 1 !important;
  }

  #ncw-panel:not([hidden]) {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }

  /* Neutralise les transform-origin spécifiques à la position sur mobile */
  #ncw-root[data-position-mobile="left"] #ncw-panel,
  #ncw-root[data-position-mobile="right"] #ncw-panel {
    left: 0 !important;
    right: 0 !important;
    transform-origin: bottom center !important;
  }
}