:root {
  --beige: #fceede;
  --orange: #f89c5e;
  --marron: #5a3d2f;
  --marron-dark: #3a1a0c;
  --white: #ffffff;
  --radius: 14px;
  --font: "Inter", sans-serif;
}

body {
  font-family: var(--font);
}

/* === CONTAINER === */
.chatbot-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

/* === TOGGLE BUTTON === */
.chatbot-toggle {
  background: #401201;
  color: white;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.chatbot-toggle:hover {
  transform: scale(1.1);
}

/* === CHAT BOX === */
.chatbot-box {
  display: none;
  flex-direction: column;
  width: 320px;
  height: 440px;
  background: var(--beige);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  animation: fadeIn 0.3s ease;
}

.chatbot-box.visible {
  display: flex;
}

/* === HEADER === */
.chatbot-header {
  background: var(--marron-dark);
  color: white;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chatbot-title {
  font-weight: bold;
}

#closeChat {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

#closeChat:hover {
  transform: rotate(90deg);
}

/* === MESSAGES === */
.chatbot-messages {
  flex: 1;
  padding: 16px;
  background: var(--white);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

.message {
  padding: 10px 14px;
  border-radius: var(--radius);
  max-width: 80%;
  word-wrap: break-word;
  animation: slideIn 0.25s ease-in-out;
}

.message.user {
  align-self: flex-end;
  background: var(--orange);
  color: white;
  border-bottom-right-radius: 0;
}

.message.bot {
  align-self: flex-start;
  background: var(--beige);
  color: var(--marron-dark);
  border-bottom-left-radius: 0;
}

/* === INPUT === */
.chatbot-input {
  display: flex;
  border-top: 1px solid #ccc;
  background: var(--white);
}

.chatbot-input input {
  flex: 1;
  padding: 12px;
  border: none;
  font-size: 14px;
  outline: none;
  border-bottom-left-radius: var(--radius);
}

.chatbot-input button {
  background: var(--marron-dark);
  color: white;
  border: none;
  padding: 0 20px;
  cursor: pointer;
  border-bottom-right-radius: var(--radius);
  transition: background 0.3s ease;
}

.chatbot-input button:hover {
  background: #2a1408;
}

/* === ANIMATIONS === */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === CACHE LE BOUTON QUAND OUVERT === */
.chatbot-box.visible + .chatbot-toggle {
  display: none;
}