/* Responsive */
@media (max-width: 640px) {
  #chat-widget { right: 12px; left: 12px; width: auto; max-height: 72vh; bottom: 84px; }
}
/* ===== Palette ===== */
:root {
  --rouge: #e60000;
  --noir: #000000;
  --gris: #f0f0f0;
  --blanc: #ffffff;
  --gris-foncé: #333333;
}

/* ===== Reset & Base ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #FFFFFF;
  color: #111111;
}

/* ===== Chat Widget ===== */
#chat-widget {
  position: fixed;
  bottom: 88px;
  right: 20px;
  width: 360px;
  max-height: 66vh;
  background: linear-gradient(180deg, #fbfbfb, #f3f4f6);
  border: none;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.9) inset;
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 1000;
}

#chat-header {
  background: linear-gradient(180deg, #ffffff, #f5f6f8);
  color: #111111;
  padding: 14px 16px;
  text-align: center;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .2px;
}

#chat-body {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  background-color: #ffffff;
}

#chat-body div {
  margin-bottom: 10px;
  font-size: 1rem;
  background: #f7f8fb;
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.06) inset;
}

/* Typing indicator */
.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.typing-indicator .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #9ca3af;
  opacity: 0.6;
  animation: blink 1.2s infinite ease-in-out;
}
.typing-indicator .dot:nth-child(2) { animation-delay: .2s; }
.typing-indicator .dot:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .2; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

#chat-input {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: none;
  background: linear-gradient(180deg, #fbfbfb, #f3f4f6);
  box-shadow: 0 -1px 0 rgba(0,0,0,.06) inset;
}

#chat-input input {
  flex: 1;
  height: 42px;
  padding: 0 12px;
  border: none;
  outline: none;
  font-size: 1rem;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(0,0,0,.06) inset, 0 4px 14px rgba(0,0,0,.06);
}

#chat-input button {
  background-color: #111111;
  color: #ffffff;
  border: none;
  padding: 0;
  cursor: pointer;
  font-weight: 700;
  transition: 0.2s ease;
  border-radius: 12px;
  height: 42px;
  width: 46px;
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
}
#chat-input button:hover { background-color: #1f2328; }
/* SVG send icon sizing */
.send-icon { display: block; margin: 0 auto; }

/* ===== Toggle Button ===== */
#toggleChat {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: var(--rouge);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
  transition: transform 0.2s ease;
  z-index: 999;
}
#toggleChat:hover { transform: scale(1.06); background-color: #cc0000; }



/* ===== Boule énergétique (effet animé) ===== */
#energy-ball {
  position: fixed;
  bottom: 47px;
  right: 47px;
  width: 0px;
  height: 0px;
  background: radial-gradient(circle, #a1a1aa, #d4d4d8);
  border-radius: 50%;
  z-index: 1500;
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}

@keyframes energy-charge {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  40% {
    opacity: 1;
    transform: scale(1.2);
    box-shadow: 0 0 15px #a1a1aa, 0 0 30px #a1a1aa;
  }
  80% {
    transform: scale(1.5);
    opacity: 1;
    box-shadow: 0 0 30px #a1a1aa, 0 0 60px #d4d4d8;
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}