/* Widget Web & Cie - Assistant IA 1.7.1 - Webandcie */

/* ---------- Tokens and base ---------- */
/*
 * Appearance set in the client space (1.6.0): assistant.js copies the
 * data-couleur / data-texte attributes into these variables (CSSOM, no inline
 * style). The defaults below are the original coral look.
 */
#wcia {
  --wcia-couleur: #bb5c13; /* solid fills: launcher, header, visitor messages (4.51:1 with white) */
  --wcia-texte: #fff; /* text and icons on --wcia-couleur */
  --wcia-accent: #fe9234; /* coral: send button, chip border, input focus */
  --wcia-accent-survol: #e67e22;
  --wcia-ombre: rgba(254, 146, 52, .35);
  --wcia-ombre-forte: rgba(254, 146, 52, .5);
  --wcia-halo: rgba(254, 146, 52, .2);
  --wcia-teinte: rgba(254, 146, 52, .14);
  --wcia-primary: var(--wcia-accent);
  --wcia-primary-dark: var(--wcia-couleur);
  --wcia-primary-hover: var(--wcia-accent-survol);
  --wcia-link: #bb5c13; /* 4.51:1 on white */
  --wcia-ink: #232323;
  --wcia-muted: #717171; /* 4.88:1 on white, 4.52:1 on #f6f6f6 */
  --wcia-bg: #f6f6f6;
  --wcia-surface: #fff;
  --wcia-border: #e6e6e6;
  --wcia-danger: #d93025;
  --wcia-radius: 18px;

  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--wcia-ink);
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
}

/* ---------- Shield against the child theme ---------- */
#wcia *,
#wcia *::before,
#wcia *::after { box-sizing: border-box; }

#wcia button {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  /* Child theme: body:has([href*="listquotation"]) button { ... !important } */
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  gap: 0 !important;
}

#wcia textarea { font: inherit; }
#wcia img { max-width: none; }
#wcia p { margin: 0; }
#wcia time { display: block; }
#wcia svg { display: block; flex-shrink: 0; width: 20px; height: 20px; }

/* Left position (client space setting) */
#wcia.wcia--gauche { right: auto; left: 20px; }

/* A custom colour is applied by the script: the launcher waits for it (no flash of coral) */
#wcia[data-couleur]:not(.is-pret) .wcia__launcher { visibility: hidden; }

/* Native [hidden] must win over the display set on buttons and blocks (SVG icons excluded, see TTS) */
#wcia [hidden]:not(svg) { display: none !important; }

/* Visible focus on every focusable element */
#wcia :focus { outline: none; }
#wcia :focus-visible { outline: 2px solid var(--wcia-primary-dark); outline-offset: 2px; }

/* ---------- Launcher ---------- */
#wcia .wcia__launcher {
  gap: 10px !important;
  padding: 12px 20px 12px 16px !important;
  border-radius: 999px !important;
  /* White on #fe9234 is only 2.24:1, so the launcher uses the 4.51:1 orange */
  background: var(--wcia-couleur) !important;
  color: var(--wcia-texte);
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  box-shadow: 0 8px 24px var(--wcia-ombre) !important;
  transition: transform .2s ease-out, box-shadow .2s ease-out, background-color .2s ease-out;
  animation: wcia-launcher-in .4s ease-out backwards;
}
#wcia .wcia__launcher:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px var(--wcia-ombre-forte) !important;
}
#wcia.is-open .wcia__launcher { display: none !important; }

#wcia .wcia__launcher-icon {
  position: relative;
  color: var(--wcia-texte) !important; /* child theme: [class*="cart"] [class*="icon"] { color: #000 !important } */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#wcia .wcia__launcher-icon svg { width: 22px; height: 22px; }

/* Point vert « en ligne » : anneau blanc et légère ombre (convention Messenger/WhatsApp),
   lisible sur n'importe quelle couleur de bulle, comme la bulle web */
#wcia .wcia__launcher-dot {
  position: absolute !important;
  top: -5px !important;
  right: -6px !important;
  width: 12px !important;
  height: 12px !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35) !important;
}
/* Ondes vertes qui partent du centre du point, derrière l'icône */
#wcia .wcia__launcher-dot::before,
#wcia .wcia__launcher-dot::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(34, 197, 94, .9) 0%, rgba(34, 197, 94, .5) 45%, rgba(34, 197, 94, 0) 70%);
  animation: wcia-onde 2.4s ease-out infinite;
}
#wcia .wcia__launcher-dot::after { animation-delay: 1.2s; }
@keyframes wcia-onde {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(3.4); opacity: 0; }
}

#wcia .wcia__launcher-label { white-space: nowrap; }

/* ---------- Panel ---------- */
#wcia .wcia__panel {
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: calc(100vw - 24px);
  height: 560px;
  max-height: calc(100vh - 40px);
  background: var(--wcia-surface);
  border-radius: var(--wcia-radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .22);
  overflow: hidden;
}
#wcia .wcia__panel[hidden] { display: none; }
#wcia.is-open .wcia__panel { animation: wcia-panel-in .25s ease-out backwards; }

/* ---------- Header ---------- */
#wcia .wcia__header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 14px 12px 14px 16px;
  /* Default: white text stays >= 4.5:1 across the whole gradient (darkening overlay, works with any colour) */
  background-color: var(--wcia-couleur);
  background-image: linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .12));
  color: var(--wcia-texte);
}

#wcia .wcia__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  color: var(--wcia-texte);
  overflow: hidden;
}
#wcia .wcia__avatar svg { width: 20px; height: 20px; }
#wcia .wcia__avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

#wcia .wcia__title {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
#wcia .wcia__name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--wcia-texte);
}
#wcia .wcia__status {
  font-size: 12px;
  line-height: 1.3;
  color: var(--wcia-texte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#wcia .wcia__header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}
#wcia .wcia__header-actions button {
  width: 32px;
  height: 32px;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--wcia-texte);
  transition: background-color .15s ease-out;
}
#wcia .wcia__header-actions button:hover { background: rgba(255, 255, 255, .18) !important; }
#wcia .wcia__header-actions svg { width: 18px; height: 18px; }
#wcia .wcia__header :focus-visible { outline-color: var(--wcia-texte); }

/* TTS icons follow aria-pressed (robust even if the hidden attribute is not toggled on SVG) */
#wcia .wcia__tts .wcia__ico-off { display: block; }
#wcia .wcia__tts .wcia__ico-on { display: none; }
#wcia .wcia__tts[aria-pressed="true"] .wcia__ico-off { display: none; }
#wcia .wcia__tts[aria-pressed="true"] .wcia__ico-on { display: block; }

/* ---------- Messages ---------- */
#wcia .wcia__messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 12px 8px;
  background: var(--wcia-bg);
}

#wcia .wcia__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
}
#wcia .wcia__row--user { justify-content: flex-end; }

#wcia .wcia__avatar--sm {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  background: var(--wcia-teinte);
  color: var(--wcia-link);
}
#wcia .wcia__avatar--sm svg { width: 16px; height: 16px; }

#wcia .wcia__bubble {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 82%;
  min-width: 0;
}
#wcia .wcia__row--user .wcia__bubble { align-items: flex-end; }

#wcia .wcia__msg {
  max-width: 100%;
  padding: 10px 13px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}
#wcia .wcia__msg--model {
  background: var(--wcia-surface);
  color: var(--wcia-ink);
  border: 1px solid var(--wcia-border);
  border-bottom-left-radius: 4px;
}
#wcia .wcia__msg--user {
  background: var(--wcia-couleur);
  color: var(--wcia-texte);
  border-bottom-right-radius: 4px;
}
/* Child theme forces a { color: #fe9234 !important } */
#wcia .wcia__msg a { color: var(--wcia-link) !important; text-decoration: underline; }
#wcia .wcia__msg a:hover { color: var(--wcia-link) !important; }
#wcia .wcia__msg--user a,
#wcia .wcia__msg--user a:hover { color: var(--wcia-texte) !important; }
#wcia .wcia__msg ul,
#wcia .wcia__msg ol { margin: 4px 0; padding-left: 18px; }
#wcia .wcia__msg strong { font-weight: 700; }

#wcia .wcia__msg--error {
  background: #fff5f4;
  border-color: #f3c6c2;
  color: var(--wcia-danger);
}
#wcia .wcia__msg--pending { color: var(--wcia-muted); }

#wcia .wcia__time {
  margin-top: 4px;
  padding: 0 4px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--wcia-muted);
}
#wcia .wcia__row--user .wcia__time { text-align: right; }

/* Typing indicator */
#wcia .wcia__dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 1.45em;
}
#wcia .wcia__dots span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b5b5b5;
  opacity: .7;
  animation: wcia-dot 1.2s infinite ease-in-out;
}
#wcia .wcia__dots span:nth-child(2) { animation-delay: .15s; }
#wcia .wcia__dots span:nth-child(3) { animation-delay: .3s; }

/* Suggestion chips */
#wcia .wcia__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 12px 36px;
}
#wcia .wcia__chip {
  padding: 7px 13px !important;
  border: 1px solid var(--wcia-primary) !important;
  border-radius: 999px !important;
  background: var(--wcia-surface) !important;
  color: var(--wcia-link) !important; /* child theme forces #fff on every button */
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25;
  min-height: 36px; /* zone de clic confortable au doigt */
  box-sizing: border-box;
  max-width: 100%;
  text-align: left;
  white-space: normal; /* un libelle de 40 caracteres passe a la ligne, jamais coupe */
  overflow-wrap: anywhere;
  transition: background-color .15s ease-out, color .15s ease-out;
}
#wcia .wcia__chip:hover {
  background: var(--wcia-couleur) !important; /* default: white text 4.51:1 */
  color: var(--wcia-texte) !important;
}
/* Questions suggerees (1.7.0) : meme puce que les actions, avec une petite bulle devant */
#wcia .wcia__chip--question {
  display: inline-flex;
  align-items: center;
}
#wcia .wcia__chip--question::before {
  content: "";
  flex: 0 0 auto;
  /* ecart entre l'icone et le libelle porte par l'icone : un theme qui remet gap a 0 sur les boutons ne le supprime pas */
  margin-right: 7px !important;
  width: 14px;
  height: 12px;
  background-color: currentColor; /* suit la couleur du texte, y compris au survol */
  /* bulle de dialogue en masque, sans image externe */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M2 0h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7l-3.5 2.5V10H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M2 0h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7l-3.5 2.5V10H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Focus clavier bien visible sur les puces (le fond blanc des puces impose un contour fonce) */
#wcia .wcia__chip:focus-visible {
  outline: 2px solid var(--wcia-primary-dark) !important;
  outline-offset: 2px;
}

/* ---------- Input area ---------- */
#wcia .wcia__form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 12px;
  background: var(--wcia-surface);
  border-top: 1px solid var(--wcia-border);
}

#wcia .wcia__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  max-height: 110px;
  margin: 0;
  padding: 9px 16px;
  resize: none;
  border: 1px solid var(--wcia-border);
  border-radius: 22px;
  background: var(--wcia-surface);
  color: var(--wcia-ink);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: none;
  outline: none;
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
#wcia .wcia__input::placeholder { color: var(--wcia-muted); opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#wcia .wcia__input:focus {
  border-color: var(--wcia-primary);
  box-shadow: 0 0 0 3px var(--wcia-halo);
  outline: none;
}
#wcia.is-busy .wcia__input { background: #fafafa; }

#wcia .wcia__mic,
#wcia .wcia__send {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  transition: transform .15s ease-out, background-color .15s ease-out, opacity .15s ease-out;
}

#wcia .wcia__mic {
  background: #efefef !important;
  color: var(--wcia-muted) !important; /* child theme forces #fff on every button */
}
#wcia .wcia__mic:hover { background: #e4e4e4 !important; color: var(--wcia-ink) !important; }
#wcia.is-recording .wcia__mic {
  background: var(--wcia-danger) !important;
  color: #fff !important;
  animation: wcia-pulse 1s infinite;
}
#wcia .wcia__mic:disabled {
  opacity: .45;
  cursor: default !important;
}

#wcia .wcia__send {
  background: var(--wcia-primary) !important;
  color: var(--wcia-texte);
}
#wcia .wcia__send svg { width: 18px; height: 18px; }
#wcia .wcia__send:hover {
  background: var(--wcia-primary-hover) !important;
  transform: scale(1.06) !important;
}
#wcia .wcia__send:disabled,
#wcia .wcia__send[disabled] {
  opacity: .45;
  cursor: default !important;
  transform: none !important;
  background: var(--wcia-primary) !important;
}

/* ---------- Footer ---------- */
#wcia .wcia__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 0 14px 10px;
  background: var(--wcia-surface);
  text-align: center;
}
#wcia .wcia__disclaimer {
  font-size: 11px;
  line-height: 1.35;
  color: var(--wcia-muted);
}
#wcia .wcia__powered {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--wcia-muted) !important; /* child theme forces a { color: #fe9234 !important } */
  text-decoration: none;
}
#wcia .wcia__powered:hover { color: var(--wcia-ink) !important; text-decoration: underline; }
#wcia .wcia__powered-logo {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  object-fit: contain;
}

/* ---------- Animations ---------- */
@keyframes wcia-launcher-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes wcia-panel-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes wcia-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@keyframes wcia-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 48, 37, .35); }
  50% { box-shadow: 0 0 0 7px rgba(217, 48, 37, .15); }
}

@media (prefers-reduced-motion: reduce) {
  #wcia,
  #wcia *,
  #wcia *::before,
  #wcia *::after {
    animation: none !important;
    transition: none !important;
  }
  #wcia .wcia__launcher:hover,
  #wcia .wcia__send:hover { transform: none !important; }
  /* Pas d'ondes : sans animation elles resteraient figées sur le point */
  #wcia .wcia__launcher-dot::before,
  #wcia .wcia__launcher-dot::after { display: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-height: 700px) and (min-width: 480px) {
  #wcia.is-open { bottom: 12px; }
  #wcia .wcia__panel {
    height: min(560px, calc(100vh - 24px));
    height: min(560px, calc(100dvh - 24px));
    max-height: none;
  }
}

@media (max-width: 479.98px) {
  #wcia { right: 16px; bottom: 16px; }
  #wcia.wcia--gauche { right: auto; left: 16px; }

  #wcia .wcia__launcher {
    width: 56px !important;
    height: 56px !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 50% !important;
  }
  /* Label stays in the accessibility tree as the launcher's name */
  #wcia .wcia__launcher-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* 16 px minimum avoids the iOS zoom on focus */
  #wcia .wcia__input { font-size: 16px; }

  #wcia .wcia__panel {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }
}