/* ================================================================

   Trésor Public IA — Frontend Chat Widget v1.1.0

   ================================================================ */



:root {

  --tpai-primary:   #006633;

  --tpai-secondary: #FFCC00;

  --tpai-bg:        #ffffff;

  --tpai-surface:   #f8f9fa;

  --tpai-border:    #e2e8f0;

  --tpai-text:      #1a202c;

  --tpai-text-muted:#64748b;

  --tpai-user-bg:   var(--tpai-primary);

  --tpai-user-text: #ffffff;

  --tpai-bot-bg:    #f1f5f9;

  --tpai-bot-text:  #1a202c;

  --tpai-shadow:    0 4px 24px rgba(0,0,0,.14);

  --tpai-radius:    16px;

  --tpai-z:         99999;

  --tpai-font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --tpai-btn-size:  60px;

  --tpai-margin:    20px;

  --tpai-pos-x:     0px;

  --tpai-pos-y:     0px;

  --tpai-window-x:  0px;

  --tpai-window-y:  0px;

  --tpai-window-width: 380px;



  /* Contour du bouton */

  --tpai-outline-width: 0px;

  --tpai-outline-color: rgba(0,102,51,0.5);

}



[data-tpai-theme="dark"] {

  --tpai-bg:      #1e2533;

  --tpai-surface: #262d3d;

  --tpai-border:  #374151;

  --tpai-text:    #f1f5f9;

  --tpai-text-muted:#94a3b8;

  --tpai-bot-bg:  #2d3748;

  --tpai-bot-text:#f1f5f9;

}



/* ================================================================

   BOUTON FLOTTANT

   ================================================================

   RÈGLES DE BASE : pas de overflow:hidden, pas de transition sur

   transform — ces deux propriétés bloquent les animations et le contour.

   ================================================================ */



#tpai-root { font-family: var(--tpai-font); }



/*

 * Le wrapper externe porte la POSITION et le CONTOUR.

 * Le bouton interne porte l'IMAGE et l'ANIMATION.

 * Cette séparation est la clé — le contour ne "touche" jamais l'image.

 */

.tpai-trigger-wrap {

  position: fixed;

  z-index: var(--tpai-z);

  bottom: calc(var(--tpai-margin) + var(--tpai-pos-y));

  right:  calc(var(--tpai-margin) + var(--tpai-pos-x));

  width:  var(--tpai-btn-size);

  height: var(--tpai-btn-size);

  /* Le contour est sur le wrapper — pas affecté par l'image */

  outline: var(--tpai-outline-width) solid var(--tpai-outline-color);

  outline-offset: 4px;

  border-radius: 50%;

}

.tpai-trigger-wrap--left   { right: auto; left:  calc(var(--tpai-margin) + var(--tpai-pos-x)); }

.tpai-trigger-wrap--center { right: auto; left:  calc(50% + var(--tpai-pos-x)); transform: translateX(-50%); }

.tpai-trigger-wrap--rounded { border-radius: var(--tpai-intro-radius, 14px); }

.tpai-trigger-wrap--square  { border-radius: 4px; }



.tpai-trigger {

  position: relative;

  width:  100%;

  height: 100%;

  border-radius: inherit;

  background: var(--tpai-primary);

  color: #fff;

  border: none;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  /* PAS de overflow:hidden — bloque l'image absolute */

  /* PAS de transition sur transform — interfère avec animation */

  box-shadow: 0 4px 20px rgba(0,102,51,.4);

  transition: box-shadow .2s;

  /* will-change pour GPU acceleration des animations */

  will-change: transform;

}



/* SVG intégré */

.tpai-trigger svg {

  width: 52%;

  height: 52%;

  pointer-events: none;

  flex-shrink: 0;

}



/* Image custom — couvre TOUT le bouton */

.tpai-trigger--custom-img {

  background: transparent !important;

  background-color: transparent !important;

  box-shadow: none !important;

  overflow: hidden; /* ici c'est ok car pas d'animation sur l'img elle-même */

  padding: 0;

}

.tpai-trigger--custom-img img {

  position: absolute;

  inset: 0;

  width: 100% !important;

  height: 100% !important;

  object-fit: cover;

  display: block;

  border-radius: inherit;

  pointer-events: none;

}

/* Quand image custom ET animation — le wrapper est animé, pas le bouton */

.tpai-trigger-wrap--animated .tpai-trigger--custom-img {

  overflow: visible;

}



/* Badge notification */

.tpai-trigger__badge {

  position: absolute;

  top: -2px; right: -2px;

  width: 14px; height: 14px;

  border-radius: 50%;

  background: #ef4444;

  border: 2px solid #fff;

  display: none;

  z-index: 1;

}

.tpai-trigger--has-notif .tpai-trigger__badge { display: block; }



/* Hover — SEULEMENT quand pas animé (pour ne pas casser l'animation) */

.tpai-trigger-wrap:not(.tpai-trigger-wrap--animated) .tpai-trigger:hover {

  transform: scale(1.1);

  box-shadow: 0 8px 28px rgba(0,102,51,.5);

}



/* Tooltip */

.tpai-tooltip {

  position: fixed;

  z-index: calc(var(--tpai-z) - 1);

  background: #1a202c;

  color: #fff;

  padding: 6px 12px;

  border-radius: 6px;

  font-size: 13px;

  white-space: nowrap;

  opacity: 0;

  pointer-events: none;

  transition: opacity .2s;

}

.tpai-trigger-wrap:hover + .tpai-tooltip { opacity: 1; }



/* ================================================================

   ANIMATIONS — appliquées sur .tpai-trigger-wrap (le wrapper)

   L'image à l'intérieur suit naturellement le mouvement du wrapper.

   ================================================================ */



/* Pulsation */

@keyframes tpai-kf-pulse {

  0%,100% { transform: scale(1); }

  50%     { transform: scale(1.14); }

}

/* Rebond */

@keyframes tpai-kf-bounce {

  0%,100% { transform: translateY(0); }

  40%     { transform: translateY(-16px); }

  60%     { transform: translateY(-8px); }

}

/* Vibration */

@keyframes tpai-kf-shake {

  0%,100% { transform: translateX(0) rotate(0); }

  15%     { transform: translateX(-7px) rotate(-4deg); }

  30%     { transform: translateX(7px) rotate(4deg); }

  45%     { transform: translateX(-5px) rotate(-2deg); }

  60%     { transform: translateX(5px) rotate(2deg); }

  75%     { transform: translateX(-3px); }

}

/* Rotation continue */

@keyframes tpai-kf-rotate {

  from { transform: rotate(0deg); }

  to   { transform: rotate(360deg); }

}

/* Balancement */

@keyframes tpai-kf-swing {

  0%,100% { transform: rotate(0deg); }

  25%     { transform: rotate(15deg); }

  75%     { transform: rotate(-10deg); }

}

/* Flip X — sans effet miroir */

@keyframes tpai-kf-flip-x {

  0%   { transform: perspective(400px) rotateX(0deg); }

  25%  { transform: perspective(400px) rotateX(90deg); }

  50%  { transform: perspective(400px) rotateX(0deg); }

  75%  { transform: perspective(400px) rotateX(-90deg); }

  100% { transform: perspective(400px) rotateX(0deg); }

}

/* Flip Y — sans effet miroir */

@keyframes tpai-kf-flip-y {

  0%   { transform: perspective(400px) rotateY(0deg); }

  25%  { transform: perspective(400px) rotateY(90deg); }

  50%  { transform: perspective(400px) rotateY(0deg); }

  75%  { transform: perspective(400px) rotateY(-90deg); }

  100% { transform: perspective(400px) rotateY(0deg); }

}

/* Tada */

@keyframes tpai-kf-tada {

  0%,100%            { transform: scale(1) rotate(0); }

  10%,20%            { transform: scale(.95) rotate(-6deg); }

  30%,50%,70%,90%    { transform: scale(1.1) rotate(6deg); }

  40%,60%,80%        { transform: scale(1.1) rotate(-6deg); }

}

/* Flottement */

@keyframes tpai-kf-float {

  0%,100% { transform: translateY(0); }

  50%     { transform: translateY(-12px); }

}

/* Rotation au survol */

@keyframes tpai-kf-rotate-once {

  from { transform: rotate(0deg); }

  to   { transform: rotate(360deg); }

}



/* Les animations sont appliquées sur .tpai-trigger-wrap */

.tpai-trigger-wrap--anim-pulse    { animation: tpai-kf-pulse  var(--tpai-anim-dur,1.5s) ease-in-out var(--tpai-anim-iter,infinite); }

.tpai-trigger-wrap--anim-bounce   { animation: tpai-kf-bounce var(--tpai-anim-dur,1.5s) ease         var(--tpai-anim-iter,infinite); }

.tpai-trigger-wrap--anim-shake    { animation: tpai-kf-shake  var(--tpai-anim-dur,1.5s) ease-in-out var(--tpai-anim-iter,infinite); }

.tpai-trigger-wrap--anim-rotate   { animation: tpai-kf-rotate var(--tpai-anim-dur,1.5s) linear      var(--tpai-anim-iter,infinite); }

.tpai-trigger-wrap--anim-swing    { animation: tpai-kf-swing  var(--tpai-anim-dur,1.5s) ease-in-out var(--tpai-anim-iter,infinite); }

.tpai-trigger-wrap--anim-flip-x   { animation: tpai-kf-flip-x var(--tpai-anim-dur,1.5s) ease-in-out var(--tpai-anim-iter,infinite); }

.tpai-trigger-wrap--anim-flip-y   { animation: tpai-kf-flip-y var(--tpai-anim-dur,1.5s) ease-in-out var(--tpai-anim-iter,infinite); }

.tpai-trigger-wrap--anim-tada     { animation: tpai-kf-tada   var(--tpai-anim-dur,1.5s) ease-in-out var(--tpai-anim-iter,infinite); }

.tpai-trigger-wrap--anim-float    { animation: tpai-kf-float  var(--tpai-anim-dur,1.5s) ease-in-out var(--tpai-anim-iter,infinite); }

.tpai-trigger-wrap--anim-rotate-once:hover { animation: tpai-kf-rotate-once .5s ease forwards; }

.tpai-trigger-wrap--anim-zoom:hover .tpai-trigger { transform: scale(1.2); transition: transform .2s cubic-bezier(.34,1.56,.64,1); }



/* ================================================================

   FENÊTRE CHAT

   ================================================================ */

.tpai-window {

  position: fixed;

  z-index: var(--tpai-z);

  bottom: calc(var(--tpai-btn-size) + var(--tpai-margin) + 12px + var(--tpai-window-y));

  right: calc(var(--tpai-margin) + var(--tpai-window-x));

  width: var(--tpai-window-width);

  max-height: 560px;

  display: flex;

  flex-direction: column;

  background: var(--tpai-bg);

  border-radius: var(--tpai-radius);

  box-shadow: var(--tpai-shadow);

  border: 1px solid var(--tpai-border);

  overflow: hidden;

  transform: scale(.92) translateY(16px);

  opacity: 0;

  pointer-events: none;

  transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .2s;

  transform-origin: bottom right;

}

.tpai-window--left   { right: auto; left: calc(var(--tpai-margin) + var(--tpai-window-x)); transform-origin: bottom left; }

.tpai-window--center { right: auto; left: calc(50% + var(--tpai-window-x)); margin-left: calc(var(--tpai-window-width) / -2); transform-origin: bottom center; }

.tpai-window--open   { transform: scale(1) translateY(0); opacity: 1; pointer-events: all; }

@media (max-width: 480px) {

  .tpai-window { width: 100vw; max-height: 90vh; bottom: 0; right: 0; left: 0; border-radius: var(--tpai-radius) var(--tpai-radius) 0 0; }

}



/* Header */

.tpai-header {

  background: var(--tpai-primary);

  color: #fff;

  padding: 14px 16px;

  display: flex;

  align-items: center;

  gap: 12px;

  flex-shrink: 0;

}

.tpai-header__avatar { width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0; }

.tpai-header__info   { flex:1;min-width:0; }

.tpai-header__name   { font-weight:700;font-size:15px; }

.tpai-header__status { font-size:11px;opacity:.8;display:flex;align-items:center;gap:4px; }

.tpai-header__status::before { content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#4ade80; }

.tpai-header__close {

  background: rgba(0,0,0,.30);

  border: 1.5px solid rgba(255,255,255,.5);

  color: #ffffff;

  cursor: pointer;

  padding: 4px;

  border-radius: 6px;

  line-height: 1;

  font-size: 18px;

  width: 28px;

  height: 28px;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  transition: background .2s;

}

.tpai-header__close:hover { background: rgba(0,0,0,.55); }

.tpai-header__close svg {

  width: 18px !important;

  height: 18px !important;

  fill: #ffffff !important;

  color: #ffffff !important;

  display: block;

  flex-shrink: 0;

}

.tpai-header__close:hover { color:#fff; }

.tpai-header__accent { height:3px;background:var(--tpai-secondary);flex-shrink:0; }



/* Search */

.tpai-search-bar { padding:10px 12px;background:var(--tpai-surface);border-bottom:1px solid var(--tpai-border);flex-shrink:0;position:relative; }

.tpai-search-bar input { width:100%;box-sizing:border-box;border:1px solid var(--tpai-border);border-radius:8px;padding:8px 36px 8px 12px;font-size:13px;background:var(--tpai-bg);color:var(--tpai-text);outline:none;transition:border-color .2s; }

.tpai-search-bar input:focus { border-color:var(--tpai-primary); }

.tpai-search-bar__icon { position:absolute;right:22px;top:50%;transform:translateY(-50%);color:var(--tpai-text-muted);pointer-events:none; }

.tpai-search-results { background:var(--tpai-bg);border:1px solid var(--tpai-border);border-radius:8px;margin-top:4px;max-height:180px;overflow-y:auto;display:none; }

.tpai-search-results.visible { display:block; }

.tpai-search-result { padding:9px 12px;border-bottom:1px solid var(--tpai-border);cursor:pointer;font-size:13px;transition:background .15s; }

.tpai-search-result:last-child { border-bottom:none; }

.tpai-search-result:hover { background:var(--tpai-surface); }

.tpai-search-result__title { font-weight:600;color:var(--tpai-text); }

.tpai-search-result__snippet { color:var(--tpai-text-muted);font-size:11.5px;margin-top:2px; }



/* Consent */

.tpai-consent { padding:12px 14px;background:#fffbeb;border-bottom:1px solid #fde68a;font-size:12px;color:#78350f;display:flex;align-items:flex-start;gap:10px;flex-shrink:0; }

.tpai-consent button { flex-shrink:0;background:var(--tpai-primary);color:#fff;border:none;border-radius:5px;padding:4px 10px;font-size:12px;cursor:pointer; }



/* Messages */

.tpai-messages { flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth; }

.tpai-messages::-webkit-scrollbar { width:4px; }

.tpai-messages::-webkit-scrollbar-thumb { background:var(--tpai-border);border-radius:4px; }

.tpai-msg { display:flex;gap:8px;max-width:92%;animation:tpai-msg-in .25s ease; }

@keyframes tpai-msg-in { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

.tpai-msg--bot  { align-self:flex-start; }

.tpai-msg--user { align-self:flex-end;flex-direction:row-reverse; }

.tpai-msg__avatar { width:28px;height:28px;border-radius:50%;background:var(--tpai-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;margin-top:2px; }

.tpai-msg__bubble { padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.55; }

.tpai-msg--bot  .tpai-msg__bubble { background:var(--tpai-bot-bg);color:var(--tpai-bot-text);border-bottom-left-radius:4px; }

.tpai-msg--user .tpai-msg__bubble { background:var(--tpai-user-bg);color:var(--tpai-user-text);border-bottom-right-radius:4px; }

.tpai-msg__bubble h3 { margin:.5em 0 .2em;font-size:14px;font-weight:700; }

.tpai-msg__bubble h4 { margin:.5em 0 .2em;font-size:13px;font-weight:700; }

.tpai-msg__bubble ul  { margin:.3em 0;padding-left:1.2em; }

.tpai-msg__bubble code { background:rgba(0,0,0,.07);border-radius:3px;padding:1px 4px;font-size:12px; }

.tpai-msg__source { font-size:11px;color:var(--tpai-text-muted);margin-top:5px;display:flex;align-items:center;gap:4px; }

.tpai-msg__source::before { content:'📎'; }

.tpai-msg__actions { display:flex;gap:6px;margin-top:6px; }

.tpai-msg__action-btn { background:none;border:1px solid var(--tpai-border);color:var(--tpai-text-muted);border-radius:5px;padding:3px 8px;font-size:12px;cursor:pointer;transition:all .15s; }

.tpai-msg__action-btn:hover { background:var(--tpai-surface);color:var(--tpai-text); }

.tpai-msg__action-btn.active { background:var(--tpai-primary);color:#fff;border-color:var(--tpai-primary); }



/* Typing */

.tpai-typing { display:flex;gap:5px;align-items:center;padding:12px 14px;background:var(--tpai-bot-bg);border-radius:16px;border-bottom-left-radius:4px;width:fit-content; }

.tpai-typing span { width:7px;height:7px;border-radius:50%;background:var(--tpai-text-muted);animation:tpai-bounce .9s infinite; }

.tpai-typing span:nth-child(2) { animation-delay:.15s; }

.tpai-typing span:nth-child(3) { animation-delay:.30s; }

@keyframes tpai-bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }



/* Feedback */

.tpai-feedback { display:flex;gap:6px;margin-top:6px; }

.tpai-feedback__btn { background:none;border:1px solid var(--tpai-border);border-radius:5px;padding:3px 8px;cursor:pointer;font-size:13px;transition:all .15s; }

.tpai-feedback__btn:hover { transform:scale(1.15); }

.tpai-feedback__btn--up.active   { background:#d1fae5;border-color:#6ee7b7; }

.tpai-feedback__btn--down.active { background:#fee2e2;border-color:#fca5a5; }

.tpai-feedback__thanks { font-size:11.5px;color:var(--tpai-text-muted);align-self:center; }



/* Input */

.tpai-input-area { padding:12px 14px;border-top:1px solid var(--tpai-border);background:var(--tpai-bg);flex-shrink:0; }

.tpai-input-row  { display:flex;gap:8px;align-items:flex-end; }

.tpai-input-wrap { flex:1;background:var(--tpai-surface);border:1px solid var(--tpai-border);border-radius:12px;padding:8px 12px;transition:border-color .2s; }

.tpai-input-wrap:focus-within { border-color:var(--tpai-primary); }

.tpai-input-wrap textarea { width:100%;border:none;background:none;font-family:var(--tpai-font);font-size:14px;color:var(--tpai-text);resize:none;outline:none;max-height:100px;line-height:1.5;display:block; }

.tpai-input-wrap textarea::placeholder { color:var(--tpai-text-muted); }

.tpai-input-controls { display:flex;gap:4px;margin-top:4px; }

.tpai-icon-btn { background:none;border:none;cursor:pointer;color:var(--tpai-text-muted);padding:4px;border-radius:5px;display:flex;align-items:center;transition:color .15s,background .15s;font-size:16px; }

.tpai-icon-btn:hover { background:var(--tpai-border);color:var(--tpai-text); }

.tpai-icon-btn--mic.recording { color:#ef4444;animation:tpai-pulse-mic 1s infinite; }

@keyframes tpai-pulse-mic { 0%,100%{opacity:1} 50%{opacity:.5} }

.tpai-send-btn { width:40px;height:40px;border-radius:50%;background:var(--tpai-primary);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .2s,background .2s; }

.tpai-send-btn:hover { transform:scale(1.08);background:#005229; }

.tpai-send-btn:disabled { background:var(--tpai-border);cursor:not-allowed;transform:none; }

.tpai-footer-text { text-align:center;font-size:10.5px;color:var(--tpai-text-muted);margin-top:8px; }



/* Listening overlay */

.tpai-listening-overlay { position:absolute;inset:0;background:rgba(0,102,51,.95);color:#fff;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;border-radius:var(--tpai-radius);z-index:10; }

.tpai-listening-overlay.active { display:flex; }

.tpai-listening-overlay__waves { display:flex;gap:5px;align-items:center;height:40px; }

.tpai-listening-overlay__waves span { width:6px;border-radius:3px;background:var(--tpai-secondary);animation:tpai-wave 1s infinite ease-in-out; }

.tpai-listening-overlay__waves span:nth-child(1){animation-delay:0s}

.tpai-listening-overlay__waves span:nth-child(2){animation-delay:.1s}

.tpai-listening-overlay__waves span:nth-child(3){animation-delay:.2s}

.tpai-listening-overlay__waves span:nth-child(4){animation-delay:.1s}

.tpai-listening-overlay__waves span:nth-child(5){animation-delay:0s}

@keyframes tpai-wave { 0%,100%{height:10px} 50%{height:36px} }

.tpai-listening-overlay button { background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:8px 20px;cursor:pointer;font-size:14px; }





/* Pour les flip : au lieu de montrer le verso, on cache simplement */

.tpai-trigger-wrap--anim-flip-x,

.tpai-trigger-wrap--anim-flip-y {

  perspective: 800px;

}

.tpai-trigger-wrap--anim-flip-x .tpai-trigger,

.tpai-trigger-wrap--anim-flip-y .tpai-trigger {

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

}



/* Bulle d'accroche affichée une fois par session */

.tpai-intro-bubble {

  position: fixed;

  z-index: calc(var(--tpai-z) - 1);

  max-width: min(260px, calc(100vw - 110px));

  padding: 10px 14px;

  border-radius: var(--tpai-intro-radius, 14px);

  background: var(--tpai-intro-bg, var(--tpai-bg));

  color: var(--tpai-intro-text, var(--tpai-text));

  border: var(--tpai-intro-border-width, 1px) solid var(--tpai-intro-border, var(--tpai-border));

  box-shadow: var(--tpai-intro-shadow, 0 10px 28px rgba(0,0,0,.14));

  font-size: 14px;

  line-height: 1.35;

  opacity: 0;

  transform: translateY(6px);

  pointer-events: none;

  transition: opacity .25s ease, transform .25s ease;

}

.tpai-intro-bubble.visible { opacity: 1; transform: translateY(0); }

.tpai-intro-bubble::after {

  content: '';

  position: absolute;

  top: 50%;

  width: 10px;

  height: 10px;

  background: var(--tpai-intro-bg, var(--tpai-bg));

  border-top: var(--tpai-intro-border-width, 1px) solid var(--tpai-intro-border, var(--tpai-border));

  border-right: var(--tpai-intro-border-width, 1px) solid var(--tpai-intro-border, var(--tpai-border));

}

.tpai-intro-bubble--right::after { right: -6px; transform: translateY(-50%) rotate(45deg); }

.tpai-intro-bubble--left::after { left: -6px; transform: translateY(-50%) rotate(225deg); }


/* ================================================================
   v1.3.5 — Prise de contact, accessibilité
   ================================================================ */

.tpai-lead__form { max-width: 100%; }

.tpai-lead__channels {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.tpai-lead__channel {
  flex: 1 1 auto;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  color: var(--tpai-text);
  background: var(--tpai-bg);
  border: 1px solid var(--tpai-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.tpai-lead__channel:hover { background: var(--tpai-surface); }

.tpai-lead__channel.is-active {
  color: #fff;
  background: var(--tpai-primary);
  border-color: var(--tpai-primary);
}

.tpai-lead__input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--tpai-text);
  background: var(--tpai-bg);
  border: 1px solid var(--tpai-border);
  border-radius: 10px;
  box-sizing: border-box;
}

.tpai-lead__input:focus {
  outline: 2px solid var(--tpai-primary);
  outline-offset: 1px;
  border-color: var(--tpai-primary);
}

.tpai-lead__consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 10px 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--tpai-text-muted);
  cursor: pointer;
}

.tpai-lead__consent input { margin-top: 2px; flex-shrink: 0; }

.tpai-lead__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.tpai-lead__btn {
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  color: var(--tpai-text);
  background: var(--tpai-bg);
  border: 1px solid var(--tpai-border);
  border-radius: 8px;
  cursor: pointer;
  transition: opacity .15s, background .15s;
}

.tpai-lead__btn:hover { background: var(--tpai-surface); }

.tpai-lead__btn--primary {
  color: #fff;
  background: var(--tpai-primary);
  border-color: var(--tpai-primary);
}

.tpai-lead__btn--primary:hover { opacity: .9; background: var(--tpai-primary); }

.tpai-lead__btn:disabled { opacity: .45; cursor: not-allowed; }

.tpai-lead__status {
  min-height: 16px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--tpai-text-muted);
}

.tpai-lead__status--error { color: #dc2626; }

/* Accessibilité : le focus doit rester visible partout */
.tpai-trigger:focus-visible,
.tpai-send-btn:focus-visible,
.tpai-icon-btn:focus-visible,
.tpai-header__close:focus-visible,
.tpai-lead__btn:focus-visible,
.tpai-lead__channel:focus-visible,
.tpai-feedback__btn:focus-visible {
  outline: 3px solid var(--tpai-secondary);
  outline-offset: 2px;
}

/* Zone de saisie — le focus est porté par le conteneur, jamais par le textarea.
   Un contour sur le textarea dessinait un second cadre à l'intérieur du
   premier : deux rectangles imbriqués, visuellement disgracieux. */
.tpai-input-wrap textarea,
.tpai-input-wrap textarea:focus,
.tpai-input-wrap textarea:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.tpai-input-wrap {
  transition: border-color .18s ease, box-shadow .18s ease;
}

.tpai-input-wrap:focus-within {
  border-color: var(--tpai-primary);
  /* Halo diffus plutôt qu'un trait : le repère reste visible pour la
     navigation au clavier sans créer de cadre supplémentaire. */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tpai-primary) 22%, transparent);
}

/* Repli pour les navigateurs sans color-mix() */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .tpai-input-wrap:focus-within {
    box-shadow: 0 0 0 3px rgba(0, 102, 51, .18);
  }
}

/* Respect des préférences système de réduction du mouvement */
@media (prefers-reduced-motion: reduce) {
  .tpai-trigger-wrap--animated,
  .tpai-trigger-wrap--animated * {
    animation: none !important;
  }
  .tpai-window { transition: none !important; }
}

/* ================================================================
   v1.3.6 — Réglages d'apparence rendus effectifs
   ================================================================ */

/* ── Bouton « Envoyer » ───────────────────────────────────────────
   Les dimensions et les couleurs étaient écrites en dur : les quatre
   réglages de l'onglet Apparence n'avaient aucun effet.              */

.tpai-send-btn {
  width:  var(--tpai-send-size, 40px);
  height: var(--tpai-send-size, 40px);
  background: var(--tpai-send-bg, var(--tpai-primary));
  color:      var(--tpai-send-icon, #fff);
}

.tpai-send-btn:hover:not(:disabled) {
  transform: scale(1.08);
  /* Sans couleur de survol définie, on assombrit la couleur normale. */
  background: var(--tpai-send-bg-hover, var(--tpai-send-bg, var(--tpai-primary)));
  filter: var(--tpai-send-hover-filter, brightness(.88));
}

/* L'icône suit la taille du bouton au lieu de rester figée. */
.tpai-send-btn svg {
  width:  calc(var(--tpai-send-size, 40px) * .45);
  height: calc(var(--tpai-send-size, 40px) * .45);
  fill: currentColor;
}

.tpai-send-btn img {
  width:  calc(var(--tpai-send-size, 40px) * .58);
  height: calc(var(--tpai-send-size, 40px) * .58);
  object-fit: contain;
  display: block;
}

.tpai-send-btn:disabled {
  background: var(--tpai-border);
  filter: none;
}

/* ── Animations du bouton flottant ───────────────────────────────
   Les règles s'appuient sur --tpai-anim-dur et --tpai-anim-iter, que
   le script ne renseignait pas : vitesse et répétition étaient donc
   toujours celles par défaut.                                       */

.tpai-trigger-wrap--animated[data-pause-hover="1"]:hover {
  animation-play-state: paused;
}

/* Une animation non répétée doit conserver son état final. */
.tpai-trigger-wrap--animated {
  animation-fill-mode: both;
}

/* ── Icône du widget ─────────────────────────────────────────────── */

.tpai-trigger svg {
  width:  calc(var(--tpai-btn-size, 60px) * .45);
  height: calc(var(--tpai-btn-size, 60px) * .45);
}

.tpai-header__avatar img,
.tpai-msg__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ================================================================
   v1.3.8 — Commandes vocales et barre d'actions des réponses
   ================================================================ */

/* ── Structure d'un message ──────────────────────────────────────
   La barre d'actions était ajoutée comme troisième enfant du
   conteneur flex horizontal .tpai-msg : elle devenait une colonne
   à droite de la bulle, étirée sur toute sa hauteur. Elle est
   désormais placée sous la bulle, dans une colonne dédiée.         */

.tpai-msg__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.tpai-msg--user .tpai-msg__body { align-items: flex-end; }
.tpai-msg__body > .tpai-msg__bubble { max-width: 100%; }

#tpai-root .tpai-msg__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0 0 2px;
  padding: 0;
  width: auto;
  height: auto;
}

#tpai-root .tpai-feedback {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}

/* ── Boutons d'action (écouter, utile, pas utile) ─────────────────
   Les icônes SVG n'avaient aucune dimension : réduites à 0 px par le
   conteneur flex, elles étaient invisibles. Les styles « button » du
   thème (padding, largeur minimale, fond…) sont neutralisés.       */

#tpai-root .tpai-msg__action-btn,
#tpai-root .tpai-feedback__btn {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--tpai-border);
  border-radius: 8px;
  background: var(--tpai-bg);
  color: var(--tpai-text-muted);
  font: inherit;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}

#tpai-root .tpai-msg__action-btn svg,
#tpai-root .tpai-feedback__btn svg {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: currentColor;
  pointer-events: none;
}

#tpai-root .tpai-msg__action-btn:hover,
#tpai-root .tpai-feedback__btn:hover {
  background: var(--tpai-surface);
  color: var(--tpai-primary);
  border-color: var(--tpai-primary);
  transform: none;
}

#tpai-root .tpai-msg__action-btn.active {
  background: var(--tpai-primary);
  border-color: var(--tpai-primary);
  color: #fff;
}

#tpai-root .tpai-msg__action-btn:focus-visible {
  outline: 3px solid var(--tpai-secondary);
  outline-offset: 2px;
}

#tpai-root .tpai-feedback__thanks {
  font-size: 11.5px;
  color: var(--tpai-text-muted);
  margin-left: 4px;
}

/* ── Bouton micro ─────────────────────────────────────────────────
   Même défaut : icône sans dimension, donc bouton invisible à côté
   du bouton « Envoyer ».                                           */

#tpai-root .tpai-input-controls {
  align-items: center;
  gap: 6px;
  margin-top: 0;
}

#tpai-root .tpai-icon-btn {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--tpai-text-muted);
  box-shadow: none;
  cursor: pointer;
}

#tpai-root .tpai-icon-btn svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
  pointer-events: none;
}

#tpai-root .tpai-icon-btn:hover {
  background: var(--tpai-surface);
  color: var(--tpai-primary);
}

#tpai-root .tpai-icon-btn--mic.recording { color: #ef4444; }
#tpai-root .tpai-icon-btn--mic.busy { opacity: .55; cursor: progress; animation: tpai-pulse-mic 1s infinite; }

/* ── Surcouche d'écoute ───────────────────────────────────────────
   Couleur alignée sur la couleur principale (elle était figée en vert)
   et bouton « Terminer » pour arrêter l'enregistrement.            */

.tpai-listening-overlay {
  background: var(--tpai-primary);
  background: color-mix(in srgb, var(--tpai-primary) 95%, transparent);
  text-align: center;
  padding: 24px;
}

.tpai-listening-overlay__label { font-size: 15px; font-weight: 600; }
.tpai-listening-overlay__hint  { font-size: 12px; opacity: .85; max-width: 260px; }

#tpai-root .tpai-listening-overlay button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  min-width: 0;
  box-shadow: none;
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
}

#tpai-root .tpai-listening-overlay button:hover { background: rgba(255,255,255,.28); }
#tpai-root .tpai-listening-overlay button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.tpai-listening-overlay.processing .tpai-listening-overlay__waves span { animation-duration: 1.8s; opacity: .6; }

/* Protection contre les styles « button » génériques des thèmes
   (largeur minimale, marges intérieures, majuscules…). */
#tpai-root .tpai-send-btn,
#tpai-root .tpai-header__close,
#tpai-root .tpai-trigger {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1;
}
#tpai-root .tpai-send-btn { border-radius: 50%; }
.tpai-msg__bubble > p:last-of-type { margin-bottom: 0; }
#tpai-root .tpai-listening-overlay button { text-transform: none; letter-spacing: normal; min-height: 0; }