/* ════════════════════════════════════════════════════
   CURSA ANTIRACISTA D'OSONA — Chatbot Widget
   ════════════════════════════════════════════════════ */

.chatbot-widget {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .875rem;
  /* El contenidor reserva espai per al panell encara que estigui tancat;
     sense això, la seva caixa invisible intercepta tocs sobre altres
     elements (p. ex. el menú hamburguesa) en pantalles baixes/mòbil. */
  pointer-events: none;
}

/* ── Botó flotant ──────────────────────────────────── */
.chatbot-trigger {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--c-green);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(138,152,48,.5);
  transition: transform var(--ease), background var(--ease), box-shadow var(--ease);
  flex-shrink: 0;
  pointer-events: auto;
}
.chatbot-trigger:hover {
  background: var(--c-green-h);
  transform: scale(1.07);
  box-shadow: 0 6px 28px rgba(138,152,48,.6);
}
.chatbot-trigger:focus-visible { outline: 3px solid var(--c-green); outline-offset: 3px; }

.chatbot-icon { transition: opacity var(--ease), transform var(--ease); }
.chatbot-icon-close { display: none; }

.chatbot-trigger.open .chatbot-icon-open  { display: none; }
.chatbot-trigger.open .chatbot-icon-close { display: block; }

/* ── Panell ────────────────────────────────────────── */
.chatbot-panel {
  width: 360px;
  max-height: 530px;
  background: var(--c-dark);
  border: 1px solid rgba(138,152,48,.22);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 56px rgba(0,0,0,.45);

  /* Animació d'entrada */
  transform: scale(.92) translateY(16px);
  opacity: 0;
  pointer-events: none;
  transform-origin: bottom right;
  transition: transform .28s ease, opacity .28s ease;
}
.chatbot-panel.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}

/* ── Capçalera ─────────────────────────────────────── */
.chatbot-header {
  background: var(--c-dark-3);
  padding: .875rem 1.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(138,152,48,.18);
  flex-shrink: 0;
}
.chatbot-header-info { display: flex; align-items: center; gap: .75rem; }
.chatbot-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: .9rem;
  flex-shrink: 0;
}
.chatbot-title {
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-cream);
  line-height: 1.2;
}
.chatbot-subtitle {
  font-size: .7rem;
  color: var(--c-green);
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-top: .1rem;
}
.chatbot-subtitle::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-green);
  display: block;
}

.chatbot-close-btn {
  background: none;
  border: none;
  color: rgba(242,239,224,.45);
  font-size: 1rem;
  line-height: 1;
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: color var(--ease);
}
.chatbot-close-btn:hover { color: var(--c-cream); }

/* ── Missatges ─────────────────────────────────────── */
.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.125rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
  scroll-behavior: smooth;
}
.chatbot-messages::-webkit-scrollbar { width: 4px; }
.chatbot-messages::-webkit-scrollbar-track { background: transparent; }
.chatbot-messages::-webkit-scrollbar-thumb { background: rgba(138,152,48,.25); border-radius: 2px; }

.chatbot-msg {
  display: flex;
  max-width: 87%;
}
.chatbot-msg.bot  { align-self: flex-start; }
.chatbot-msg.user { align-self: flex-end; }

.chatbot-bubble {
  padding: .6rem .875rem;
  border-radius: 14px;
  font-size: .855rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.chatbot-msg.bot  .chatbot-bubble {
  background: rgba(242,239,224,.07);
  border: 1px solid rgba(242,239,224,.1);
  color: rgba(242,239,224,.85);
  border-radius: 2px 14px 14px 14px;
}
.chatbot-msg.user .chatbot-bubble {
  background: var(--c-green);
  color: #fff;
  border-radius: 14px 2px 14px 14px;
}

/* Typing indicator */
.chatbot-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: .625rem .875rem;
  background: rgba(242,239,224,.07);
  border: 1px solid rgba(242,239,224,.1);
  border-radius: 2px 14px 14px 14px;
  align-self: flex-start;
}
.chatbot-typing span {
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(242,239,224,.45);
  animation: chatDot 1.2s infinite ease-in-out;
}
.chatbot-typing span:nth-child(2) { animation-delay: .2s; }
.chatbot-typing span:nth-child(3) { animation-delay: .4s; }

@keyframes chatDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* ── Peu discret ──────────────────────────────────── */
.chatbot-powered {
  padding: .3rem .875rem;
  font-size: .65rem;
  color: rgba(242,239,224,.2);
  text-align: center;
  background: var(--c-dark);
  border-top: 1px solid rgba(138,152,48,.08);
  flex-shrink: 0;
}
.chatbot-powered a {
  color: rgba(138,152,48,.35);
  text-decoration: none;
  transition: color var(--ease);
}
.chatbot-powered a:hover { color: var(--c-green); }

/* ── Àrea d'entrada ────────────────────────────────── */
.chatbot-input-area {
  padding: .75rem .875rem;
  display: flex;
  gap: .5rem;
  border-top: 1px solid rgba(138,152,48,.15);
  background: var(--c-dark-2);
  flex-shrink: 0;
}
.chatbot-input {
  flex: 1;
  background: rgba(242,239,224,.06);
  border: 1px solid rgba(242,239,224,.12);
  border-radius: 8px;
  padding: .575rem .875rem;
  color: var(--c-cream);
  font-size: .855rem;
  font-family: var(--font-body);
  outline: none;
  transition: border-color var(--ease);
  resize: none;
}
.chatbot-input:focus { border-color: rgba(138,152,48,.5); }
.chatbot-input::placeholder { color: rgba(242,239,224,.28); }

.chatbot-send-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--c-green);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: flex-end;
  transition: background var(--ease);
}
.chatbot-send-btn:hover    { background: var(--c-green-h); }
.chatbot-send-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 480px) {
  .chatbot-widget  { bottom: 1rem; right: 1rem; }
  .chatbot-panel   { width: calc(100vw - 2rem); max-height: 72svh; }
}