/* KIT Motors CI — assistant de discussion (bulle flottante).
   Reprend la charte du thème : monochrome, Barlow Condensed, angles droits, accent = couleur du véhicule. */
.kmc {
  --kmc-accent: var(--accent, #E08A2B);
  --kmc-on-accent: var(--on-accent, #181818);
  --kmc-bg: #ffffff;
  --kmc-fg: #181818;
  --kmc-muted: #7d7d7d;
  --kmc-line: #e6e6e6;
  --kmc-bot: #f5f5f5;
  --kmc-font: var(--font, "Barlow Condensed", "Arial Narrow", system-ui, sans-serif);
  --kmc-wa: #25d366;
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 9990; font-family: var(--kmc-font); letter-spacing: .02em;
}
[data-theme="dark"] .kmc { --kmc-bg: #181818; --kmc-fg: #f2f2f2; --kmc-muted: #969696; --kmc-line: #2e2e2e; --kmc-bot: #232323; }

/* Bulle : photo ronde + point « en ligne » */
.kmc__bubble {
  position: relative; width: 64px; height: 64px; padding: 0; border: 2px solid #fff; border-radius: 50%;
  background: #202020 center / cover no-repeat; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08); transition: transform 300ms cubic-bezier(.2,.7,.2,1);
}
.kmc__bubble:hover { transform: scale(1.06); }
.kmc__bubble:focus-visible { outline: 2px solid var(--kmc-accent); outline-offset: 3px; }
.kmc__bubble img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.kmc__dot { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--kmc-wa); border: 2px solid #fff; }
.kmc__dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--kmc-wa); animation: kmc-ping 2.4s ease-out infinite; }
@keyframes kmc-ping { 0% { transform: scale(1); opacity: .8; } 80%, 100% { transform: scale(2.2); opacity: 0; } }

/* Étiquette « Prêt à discuter ? » */
.kmc__hello {
  position: absolute; right: 76px; bottom: 12px; white-space: nowrap; padding: 10px 14px;
  background: var(--kmc-bg); color: var(--kmc-fg); border: 1px solid var(--kmc-line);
  font-size: 13px; text-transform: uppercase; cursor: pointer;
  opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity 400ms, transform 400ms;
}
.kmc__hello.is-on { opacity: 1; transform: none; pointer-events: auto; }
.kmc__hello b { font-weight: 400; color: var(--kmc-muted); display: block; font-size: 11px; }

/* Panneau */
.kmc__panel {
  position: absolute; right: 0; bottom: 80px; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column; background: var(--kmc-bg); color: var(--kmc-fg); border: 1px solid var(--kmc-line);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 260ms, transform 260ms;
}
.kmc.is-open .kmc__panel { opacity: 1; transform: none; pointer-events: auto; }
.kmc.is-open .kmc__hello { opacity: 0; pointer-events: none; }
.kmc__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #202020; color: #fff; }
.kmc__head img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.kmc__title { font-size: 17px; text-transform: uppercase; line-height: 1.1; }
.kmc__status { font-size: 11px; text-transform: uppercase; color: #b8b8b8; display: flex; align-items: center; gap: 6px; }
.kmc__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--kmc-wa); }
.kmc__close { margin-left: auto; background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 4px; }

.kmc__log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.kmc__msg { max-width: 86%; padding: 10px 13px; font-size: 15px; line-height: 1.4; white-space: pre-line; text-transform: none; animation: kmc-in 260ms ease-out both; }
.kmc__msg--bot { align-self: flex-start; background: var(--kmc-bot); }
.kmc__msg--me { align-self: flex-end; background: var(--kmc-accent); color: var(--kmc-on-accent); }
@keyframes kmc-in { from { opacity: 0; transform: translateY(6px); } }
.kmc__typing { align-self: flex-start; background: var(--kmc-bot); padding: 12px 14px; display: flex; gap: 4px; }
.kmc__typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--kmc-muted); animation: kmc-dot 1s infinite; }
.kmc__typing i:nth-child(2) { animation-delay: .15s; } .kmc__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes kmc-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.kmc__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.kmc__chip { border: 1px solid var(--kmc-line); background: none; color: var(--kmc-fg); font: inherit; font-size: 12px; text-transform: uppercase; padding: 7px 10px; cursor: pointer; }
.kmc__chip:hover { border-color: var(--kmc-fg); }

/* Carte de transfert WhatsApp */
.kmc__wa { align-self: stretch; border: 1px solid var(--kmc-line); padding: 14px; display: grid; gap: 10px; animation: kmc-in 260ms ease-out both; }
.kmc__wa p { margin: 0; font-size: 13px; color: var(--kmc-muted); text-transform: none; }
.kmc__wabtn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 16px; background: var(--kmc-wa); color: #0b3d1e; text-decoration: none; text-transform: uppercase; font-size: 14px; }
.kmc__wabtn svg { width: 20px; height: 20px; }
.kmc__cancel { background: none; border: 0; color: var(--kmc-muted); font: inherit; font-size: 12px; text-transform: uppercase; cursor: pointer; justify-self: center; }

.kmc__form { display: flex; border-top: 1px solid var(--kmc-line); }
.kmc__input { flex: 1; min-width: 0; border: 0; padding: 14px 16px; font: inherit; font-size: 15px; background: transparent; color: var(--kmc-fg); text-transform: none; outline: none; }
.kmc__send { border: 0; background: var(--kmc-accent); color: var(--kmc-on-accent); padding: 0 18px; cursor: pointer; font: inherit; text-transform: uppercase; font-size: 13px; }
.kmc__send:disabled { opacity: .4; cursor: default; }
.kmc__foot { display: flex; justify-content: space-between; gap: 8px; padding: 8px 16px; font-size: 11px; color: var(--kmc-muted); text-transform: uppercase; border-top: 1px solid var(--kmc-line); }
.kmc__foot a { color: inherit; }

@media (max-width: 520px) {
  .kmc { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .kmc__bubble { width: 52px; height: 52px; }
  .kmc__dot { width: 12px; height: 12px; right: 1px; bottom: 1px; }
  .kmc__panel { position: fixed; inset: auto 0 0 0; width: 100%; height: min(80vh, 640px); border-width: 1px 0 0; }
  .kmc.is-open .kmc__bubble { opacity: 0; pointer-events: none; }
  .kmc__hello { display: none; }
}
@media (prefers-reduced-motion: reduce) { .kmc *, .kmc *::after { animation: none !important; transition: none !important; } }
@media print { .kmc { display: none; } }