/*
 * HETO ChatBot — Widget CSS v1.4.0
 * Tout est scopé sous #aichat-widget-root pour battre WoodMart/Divi/Elementor
 * Les CSS vars sont injectées par PHP (wp_add_inline_style) depuis le builder
 */

/* ── Defaults (écrasées par PHP inline style) ───────────────────────────── */
#aichat-widget-root {
  --ac-bubble:        #6366f1;
  --ac-primary:       #6366f1;
  --ac-width:         380px;
  --ac-height:        520px;
  --ac-radius:        16px;
  --ac-header-bg:     #6366f1;
  --ac-header-text:   #ffffff;
  --ac-header-height: 64px;
  --ac-title-size:    14px;
  --ac-subtitle-size: 11px;
  --ac-msgs-bg:       #f1f5f9;
  --ac-msgs-padding:  12px;
  --ac-bot-bg:        #ffffff;
  --ac-bot-text:      #1e293b;
  --ac-user-bg:       #6366f1;
  --ac-user-text:     #ffffff;
  --ac-bubble-r:      12px;
  --ac-font-size:     13px;
  --ac-avatar-size:   38px;
  --ac-avatar-msg:    28px;
  --ac-input-bg:      #ffffff;
  --ac-input-border:  #e2e8f0;
  --ac-ta-bg:         #f8fafc;
  --ac-ta-radius:     10px;
  --ac-ta-border:     #e2e8f0;
  --ac-ta-fontsize:   13px;
  --ac-send-bg:       #6366f1;
  --ac-send-radius:   10px;

  /* Positionnement */
  all: initial; /* reset TOUT héritage du thème */
  display: block;
  position: fixed !important;
  z-index: 2147483647 !important; /* max z-index possible */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}

/* Re-apply box-sizing after all:initial */
#aichat-widget-root *, #aichat-widget-root *::before, #aichat-widget-root *::after {
  box-sizing: border-box !important;
}

/* ── Positions ──────────────────────────────────────────────────────────── */
#aichat-widget-root.aichat-bottom-right { right: 24px !important; bottom: 24px !important; }
#aichat-widget-root.aichat-bottom-left  { left:  24px !important; bottom: 24px !important; }
#aichat-widget-root.aichat-top-right    { right: 24px !important; top:    80px !important; }
#aichat-widget-root.aichat-top-left     { left:  24px !important; top:    80px !important; }

/* ── Fenêtre de chat ────────────────────────────────────────────────────── */
#aichat-widget-root .aichat-window {
  position: absolute !important;
  width: var(--ac-width) !important;
  max-height: var(--ac-height) !important;
  background: #ffffff !important;
  border-radius: var(--ac-radius) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.25) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#aichat-widget-root.aichat-bottom-right .aichat-window,
#aichat-widget-root.aichat-bottom-left  .aichat-window { bottom: 70px !important; }
#aichat-widget-root.aichat-top-right    .aichat-window,
#aichat-widget-root.aichat-top-left     .aichat-window { top: 70px !important; }
#aichat-widget-root.aichat-bottom-right .aichat-window,
#aichat-widget-root.aichat-top-right    .aichat-window { right: 0 !important; }
#aichat-widget-root.aichat-bottom-left  .aichat-window,
#aichat-widget-root.aichat-top-left     .aichat-window { left: 0 !important; }

/* ── Animations ─────────────────────────────────────────────────────────── */
#aichat-widget-root.aichat-bottom-right .aichat-window,
#aichat-widget-root.aichat-bottom-left  .aichat-window { transform-origin: bottom center; }
#aichat-widget-root.aichat-top-right    .aichat-window,
#aichat-widget-root.aichat-top-left     .aichat-window { transform-origin: top center; }

#aichat-widget-root.aichat-anim-slide .aichat-window             { animation: ac-slide-in  .28s cubic-bezier(.34,1.2,.64,1); }
#aichat-widget-root.aichat-anim-slide .aichat-window.aichat-closing { animation: ac-slide-out .22s ease forwards; }
#aichat-widget-root.aichat-anim-fade  .aichat-window             { animation: ac-fade-in .2s ease; }
#aichat-widget-root.aichat-anim-zoom  .aichat-window             { animation: ac-zoom-in .25s cubic-bezier(.34,1.56,.64,1); }

@keyframes ac-slide-in  { from{opacity:0;transform:translateY(18px) scale(.97)} to{opacity:1;transform:none} }
@keyframes ac-slide-out { from{opacity:1;transform:none} to{opacity:0;transform:translateY(18px) scale(.97)} }
@keyframes ac-fade-in   { from{opacity:0} to{opacity:1} }
@keyframes ac-zoom-in   { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }
@keyframes ac-msg-in    { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
@keyframes ac-bounce    { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-6px)} }
@keyframes ac-pulse     { 0%{opacity:.6;transform:scale(1)} 70%,100%{opacity:0;transform:scale(1.4)} }

/* ── Launcher ───────────────────────────────────────────────────────────── */
#aichat-widget-root .aichat-launcher {
  all: unset !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: var(--ac-bubble) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.22) !important;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s !important;
  position: relative !important;
}
#aichat-widget-root .aichat-launcher:hover  { transform: scale(1.1) !important; box-shadow: 0 10px 36px rgba(0,0,0,.28) !important; }
#aichat-widget-root .aichat-launcher:active { transform: scale(.94) !important; }

#aichat-widget-root .aichat-launcher.aichat-pulse::before {
  content: '' !important;
  position: absolute !important;
  inset: -6px !important;
  border-radius: 50% !important;
  border: 2px solid var(--ac-bubble) !important;
  animation: ac-pulse 2s ease infinite !important;
}

/* Icônes launcher — forcer stroke blanc contre WoodMart */
#aichat-widget-root .aichat-launcher svg {
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  overflow: visible !important;
}
#aichat-widget-root .aichat-launcher svg *[stroke] { stroke: #ffffff !important; }
#aichat-widget-root .aichat-launcher svg *[fill]:not([fill="none"]) { fill: #ffffff !important; }

/* ── Header ─────────────────────────────────────────────────────────────── */
#aichat-widget-root .aichat-header {
  background: var(--ac-header-bg) !important;
  height: var(--ac-header-height) !important;
  min-height: var(--ac-header-height) !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
#aichat-widget-root .aichat-header-avatar-wrap {
  width: var(--ac-avatar-size) !important;
  height: var(--ac-avatar-size) !important;
  min-width: var(--ac-avatar-size) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  color: #fff !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}
#aichat-widget-root .aichat-header-info { flex: 1 !important; min-width: 0 !important; }
#aichat-widget-root .aichat-header-title {
  color: var(--ac-header-text) !important;
  font-size: var(--ac-title-size) !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}
#aichat-widget-root .aichat-header-sub {
  color: var(--ac-header-text) !important;
  opacity: .8 !important;
  font-size: var(--ac-subtitle-size) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
}
#aichat-widget-root .aichat-status-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #22d3a0 !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
#aichat-widget-root .aichat-header-btns {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
}

/* Boutons header — all:unset pour vraiment repartir à zéro */
#aichat-widget-root .aichat-hbtn {
  all: unset !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,.2) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background .15s !important;
}
#aichat-widget-root .aichat-hbtn:hover { background: rgba(255,255,255,.38) !important; }

/* SVG dans les boutons header — forcer blanc */
#aichat-widget-root .aichat-hbtn svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  overflow: visible !important;
  pointer-events: none !important;
}
#aichat-widget-root .aichat-hbtn svg line,
#aichat-widget-root .aichat-hbtn svg path,
#aichat-widget-root .aichat-hbtn svg polyline,
#aichat-widget-root .aichat-hbtn svg circle,
#aichat-widget-root .aichat-hbtn svg rect {
  stroke: #ffffff !important;
  fill: none !important;
}

/* ── Messages ───────────────────────────────────────────────────────────── */
#aichat-widget-root .aichat-messages {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: var(--ac-msgs-padding) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: var(--ac-msgs-bg) !important;
  scrollbar-width: thin !important;
  scrollbar-color: #cbd5e1 transparent !important;
  margin: 0 !important;
}
#aichat-widget-root .aichat-msg {
  display: flex !important;
  gap: 8px !important;
  max-width: 86% !important;
  animation: ac-msg-in .2s ease !important;
  margin: 0 !important;
  padding: 0 !important;
}
#aichat-widget-root .aichat-msg.aichat-no-anim { animation: none !important; }
#aichat-widget-root .aichat-bot   { align-self: flex-start !important; }
#aichat-widget-root .aichat-user  { align-self: flex-end !important; flex-direction: row-reverse !important; }
#aichat-widget-root .aichat-agent { align-self: flex-start !important; }

#aichat-widget-root .aichat-msg-avatar {
  width: var(--ac-avatar-msg) !important;
  height: var(--ac-avatar-msg) !important;
  min-width: var(--ac-avatar-msg) !important;
  border-radius: 50% !important;
  background: var(--ac-header-bg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  color: #fff !important;
  font-size: 11px !important;
  flex-shrink: 0 !important;
  align-self: flex-end !important;
  overflow: hidden !important;
}
#aichat-widget-root .aichat-msg-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
#aichat-widget-root .aichat-msg-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}
#aichat-widget-root .aichat-msg-bubble {
  padding: 9px 13px !important;
  font-size: var(--ac-font-size) !important;
  line-height: 1.55 !important;
  word-break: break-word !important;
  margin: 0 !important;
}
#aichat-widget-root .aichat-bot .aichat-msg-bubble {
  background: var(--ac-bot-bg) !important;
  color: var(--ac-bot-text) !important;
  border-radius: var(--ac-bubble-r) !important;
  border-bottom-left-radius: 3px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.07) !important;
}
#aichat-widget-root .aichat-user .aichat-msg-bubble {
  background: var(--ac-user-bg) !important;
  color: var(--ac-user-text) !important;
  border-radius: var(--ac-bubble-r) !important;
  border-bottom-right-radius: 3px !important;
}
#aichat-widget-root .aichat-agent .aichat-msg-bubble {
  background: #fef3c7 !important;
  color: #92400e !important;
  border-radius: var(--ac-bubble-r) !important;
  border-bottom-left-radius: 3px !important;
  border: 1px solid #fde68a !important;
}
#aichat-widget-root .aichat-msg-time {
  font-size: 10px !important;
  color: #94a3b8 !important;
  padding: 0 4px !important;
}
#aichat-widget-root .aichat-user .aichat-msg-time { text-align: right !important; }

/* Typing */
#aichat-widget-root .aichat-typing {
  display: flex !important;
  gap: 5px !important;
  align-items: center !important;
  padding: 11px 14px !important;
}
#aichat-widget-root .aichat-typing span {
  width: 7px !important; height: 7px !important;
  border-radius: 50% !important;
  background: #94a3b8 !important;
  animation: ac-bounce .9s ease infinite !important;
  display: block !important;
}
#aichat-widget-root .aichat-typing span:nth-child(2) { animation-delay: .15s !important; }
#aichat-widget-root .aichat-typing span:nth-child(3) { animation-delay: .30s !important; }

/* ── Zone de saisie ─────────────────────────────────────────────────────── */
#aichat-widget-root .aichat-input-area {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  background: var(--ac-input-bg) !important;
  border-top: 1px solid var(--ac-input-border) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* Textarea — all:unset puis reconstruction propre */
#aichat-widget-root .aichat-textarea {
  all: unset !important;
  display: block !important;
  flex: 1 !important;
  background: var(--ac-ta-bg) !important;
  border: 1px solid var(--ac-ta-border) !important;
  border-radius: var(--ac-ta-radius) !important;
  padding: 8px 12px !important;
  font-size: var(--ac-ta-fontsize) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: #334155 !important;
  resize: none !important;
  line-height: 1.5 !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 120px !important;
  overflow-y: hidden !important;
  box-sizing: border-box !important;
  outline: none !important;
  width: auto !important;
}
#aichat-widget-root .aichat-textarea:focus { border-color: var(--ac-primary) !important; }
#aichat-widget-root .aichat-textarea::placeholder { color: #94a3b8 !important; }

/* Bouton envoi */
#aichat-widget-root .aichat-send-btn {
  all: unset !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  background: var(--ac-send-bg) !important;
  border-radius: var(--ac-send-radius) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity .15s, transform .1s !important;
}
#aichat-widget-root .aichat-send-btn:hover   { opacity: .9 !important; transform: scale(1.05) !important; }
#aichat-widget-root .aichat-send-btn:active  { transform: scale(.93) !important; }
#aichat-widget-root .aichat-send-btn:disabled{ opacity: .4 !important; cursor: default !important; transform: none !important; }

/* SVG bouton envoi */
#aichat-widget-root .aichat-send-btn svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  overflow: visible !important;
  pointer-events: none !important;
}
#aichat-widget-root .aichat-send-btn svg line,
#aichat-widget-root .aichat-send-btn svg path { stroke: #ffffff !important; }
#aichat-widget-root .aichat-send-btn svg polygon { fill: #ffffff !important; stroke: none !important; }

/* ── Powered by ─────────────────────────────────────────────────────────── */
#aichat-widget-root .aichat-powered {
  text-align: center !important;
  padding: 6px !important;
  font-size: 10px !important;
  color: #94a3b8 !important;
  background: #fff !important;
  border-top: 1px solid #f1f5f9 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
#aichat-widget-root .aichat-powered a {
  color: var(--ac-primary) !important;
  text-decoration: none !important;
}

/* ── Pre-chat form ──────────────────────────────────────────────────────── */
#aichat-widget-root .aichat-prechat {
  padding: 24px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  flex: 1 !important;
  background: #f8fafc !important;
}
#aichat-widget-root .aichat-pc-input {
  all: unset !important;
  display: block !important;
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  color: #334155 !important;
  background: #fff !important;
  box-sizing: border-box !important;
}
#aichat-widget-root .aichat-pc-btn {
  all: unset !important;
  display: block !important;
  width: 100% !important;
  padding: 11px !important;
  background: var(--ac-primary) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 440px) {
  #aichat-widget-root .aichat-window {
    width: calc(100vw - 20px) !important;
    right: 10px !important;
    left: 10px !important;
  }
}