/* ============================================================================
   Kantoo — Conseiller produit (widget de chat). Charte Kantoo.
   ============================================================================ */
.kadv { position: fixed; z-index: 900; }
.kadv__launch {
  position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 901;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 20px 13px 16px; border-radius: 999px;
  background: var(--k-grad, linear-gradient(100deg,#2F6BFF,#2A2FBF)); color: #fff;
  font-family: var(--font-head, "Poppins", sans-serif); font-weight: 600; font-size: .96rem;
  box-shadow: 0 14px 34px rgba(47,107,255,.42), 0 3px 10px rgba(11,22,56,.2);
  cursor: pointer; transition: transform .16s ease, box-shadow .16s ease;
}
.kadv__launch svg { width: 20px; height: 20px; }
.kadv__launch:hover { transform: translateY(-2px); box-shadow: 0 20px 44px rgba(47,107,255,.5); }
.kadv__launch.is-open { transform: scale(.9); opacity: 0; pointer-events: none; }
@media (max-width: 560px) { .kadv__launch { padding: 13px; } .kadv__launch span { display: none; } }

.kadv__panel {
  position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 902;
  width: min(384px, calc(100vw - 32px)); height: min(580px, calc(100vh - 44px));
  background: #fff; border-radius: 22px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 30px 70px rgba(11,22,56,.28), 0 8px 20px rgba(11,22,56,.14);
  border: 1px solid var(--k-line, #E4EAF4);
  opacity: 0; transform: translateY(16px) scale(.98); transform-origin: bottom right;
  transition: opacity .2s ease, transform .22s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;   /* closed panel must never intercept taps (full-screen on mobile) */
}
.kadv__panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
/* display:flex above overrides the [hidden] attribute's default display:none, so
   restore it explicitly — otherwise the closed panel stays laid out and, on mobile
   where it is inset:0 (full-screen), it covers the whole page and swallows every tap. */
.kadv__panel[hidden] { display: none; }
@media (max-width: 560px) {
  .kadv__panel { inset: 0; width: 100vw; height: 100dvh; border-radius: 0; }
}

.kadv__head {
  display: flex; align-items: center; gap: 11px; padding: 14px 15px;
  background: var(--k-grad, linear-gradient(100deg,#2F6BFF,#2A2FBF)); color: #fff;
}
.kadv__ava { width: 38px; height: 38px; border-radius: 11px; background: #fff; flex: none;
  display: grid; place-items: center; box-shadow: 0 4px 12px rgba(6,14,40,.28); }
.kadv__ava svg { width: 26px; height: 26px; }
.kadv__id { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.kadv__id b { font-family: var(--font-head, "Poppins", sans-serif); font-weight: 700; font-size: 1rem; }
.kadv__id span { font-size: .76rem; opacity: .88; }
.kadv__x { margin-inline-start: auto; width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; background: rgba(255,255,255,.16); color: #fff; border: none; cursor: pointer; }
.kadv__x svg { width: 18px; height: 18px; }

.kadv__log { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 14px 6px;
  background: var(--k-bg-soft, #F4F8FF); display: flex; flex-direction: column; gap: 10px; }
.kadv__msg { display: flex; }
.kadv__msg--user { justify-content: flex-end; }
.kadv__bubble { max-width: 84%; padding: 11px 14px; border-radius: 15px; font-size: .92rem; line-height: 1.5;
  box-shadow: 0 1px 2px rgba(11,22,56,.06); word-wrap: break-word; white-space: pre-wrap; }
.kadv__msg--bot .kadv__bubble { white-space: normal; }
.kadv__bubble p { margin: 0 0 9px; }
.kadv__bubble p:last-child { margin-bottom: 0; }
.kadv__bubble ul { margin: 4px 0 9px; padding-inline-start: 18px; }
.kadv__bubble ul:last-child { margin-bottom: 0; }
.kadv__bubble li { margin: 3px 0; }
.kadv__bubble strong { font-weight: 700; }
.kadv__msg--bot .kadv__bubble { background: #fff; color: var(--k-ink, #0E1A33); border-top-left-radius: 5px; border: 1px solid var(--k-line, #E4EAF4); }
.kadv__msg--user .kadv__bubble { background: var(--k-grad, linear-gradient(100deg,#2F6BFF,#2A2FBF)); color: #fff; border-top-right-radius: 5px; }
[dir="rtl"] .kadv__msg--bot .kadv__bubble { border-top-left-radius: 15px; border-top-right-radius: 5px; }
[dir="rtl"] .kadv__msg--user .kadv__bubble { border-top-right-radius: 15px; border-top-left-radius: 5px; }

.kadv__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kadv__cta a { font-family: var(--font-head, "Poppins", sans-serif); font-weight: 600; font-size: .82rem;
  padding: 8px 12px; border-radius: 10px; background: var(--k-blue-tint, #EAF1FF); color: var(--k-blue-700, #1740C4); }
.kadv__cta a:first-child { background: var(--k-grad, linear-gradient(100deg,#2F6BFF,#2A2FBF)); color: #fff; }

.kadv__typing .kadv__bubble { display: inline-flex; gap: 4px; padding: 13px 14px; }
.kadv__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--k-slate-2, #7C8AA3); animation: kadvblink 1.2s infinite ease-in-out; }
.kadv__typing i:nth-child(2) { animation-delay: .2s; } .kadv__typing i:nth-child(3) { animation-delay: .4s; }
@keyframes kadvblink { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.kadv__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 8px; background: var(--k-bg-soft, #F4F8FF); }
.kadv__chip { font-size: .82rem; font-weight: 600; padding: 8px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--k-line, #E4EAF4); color: var(--k-blue-700, #1740C4); cursor: pointer; transition: .15s; }
.kadv__chip:hover { border-color: var(--k-blue, #2F6BFF); background: var(--k-blue-tint, #EAF1FF); }

.kadv__bar { display: flex; align-items: center; gap: 8px; padding: 11px 12px; background: #fff; border-top: 1px solid var(--k-line, #E4EAF4); }
.kadv__input { flex: 1; border: 1px solid var(--k-line, #E4EAF4); border-radius: 12px; padding: 11px 13px;
  font: inherit; font-size: .92rem; color: var(--k-ink, #0E1A33); outline: none; background: var(--k-bg-soft, #F4F8FF); }
.kadv__input:focus { border-color: var(--k-blue, #2F6BFF); background: #fff; }
.kadv__send { width: 42px; height: 42px; flex: none; border-radius: 12px; border: none; cursor: pointer;
  background: var(--k-grad, linear-gradient(100deg,#2F6BFF,#2A2FBF)); color: #fff; display: grid; place-items: center; }
.kadv__send svg { width: 19px; height: 19px; }
[dir="rtl"] .kadv__send svg { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) { .kadv__panel, .kadv__launch { transition: none; } .kadv__typing i { animation: none; } }