/**
 * Planète Parcs — ChatWidget (Bloc 1)
 * css/chat-widget.css
 *
 * CSS maison autonome (pas de dépendance Tailwind — non chargé
 * globalement sur pnk.next). Scaffold de test, cf. js/ChatWidget.js.
 */

.cw-bubble {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: #FF6B00;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}
.cw-bubble:hover { transform: scale(1.06); }

.cw-panel {
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 9999;
  width: 340px;
  max-width: calc(100vw - 32px);
  height: 480px;
  max-height: calc(100vh - 140px);
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Open Sans', sans-serif;
}

.cw-header {
  background: #FF6B00;
  color: #fff;
  padding: 12px 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cw-close {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
}

.cw-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #F7F7F8;
}

.cw-msg {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
}
.cw-msg-user {
  align-self: flex-end;
  background: #FF6B00;
  color: #fff;
  border-bottom-right-radius: 2px;
}
.cw-msg-model {
  align-self: flex-start;
  background: #fff;
  color: #222;
  border: 1px solid #E5E5E5;
  border-bottom-left-radius: 2px;
}
.cw-msg-system {
  align-self: center;
  background: #EFEFEF;
  color: #555;
  font-style: italic;
  text-align: center;
}

.cw-msg-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
}
.cw-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #999;
  animation: cw-typing-bounce 1.2s infinite ease-in-out;
}
.cw-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.cw-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes cw-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.cw-notice {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  background: #F0F6FF;
  color: #2B3A55;
  font-size: 12px;
  line-height: 1.4;
  padding: 8px 12px;
  border-bottom: 1px solid #D6E4FF;
}
.cw-notice-text {
  flex: 1;
}
.cw-notice-close {
  background: none;
  border: none;
  color: #2B3A55;
  opacity: 0.65;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}
.cw-notice-close:hover {
  opacity: 1;
}

.cw-banner {
  background: #FFF3E0;
  color: #B45309;
  font-size: 12px;
  padding: 6px 12px;
  border-top: 1px solid #FCD9A6;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Bouton "Réessayer" sur erreur transitoire (bug réel 2026-09-08, cf.
   HANDOVER) -- rejoue le dernier message envoyé sans repasser par la
   saisie, pour éviter qu'un client reformule et introduise une ambiguïté
   (ex. "9 enfants" retapé en "9 ans" après une erreur de service). */
.cw-retry {
  border: 1.5px solid #B45309;
  border-radius: 12px;
  background: #fff;
  color: #B45309;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.cw-retry:hover:not(:disabled) { background: #B45309; color: #fff; }
.cw-retry:disabled { opacity: 0.5; cursor: not-allowed; }

.cw-inputrow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border-top: 1px solid #E5E5E5;
}
.cw-input {
  flex: 1;
  border: 1px solid #DDD;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 14px;
  outline: none;
}
.cw-input:focus { border-color: #FF6B00; }
.cw-send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #FF6B00;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cw-send:disabled, .cw-input:disabled { opacity: 0.5; cursor: not-allowed; }

/* Mention "Propulsé par Ahdarli" (2026-10-30) : volontairement discrète */
.cw-poweredby {
  padding: 0 10px 6px;
  margin-top: -4px;
  text-align: center;
  font-size: 10.5px;
  line-height: 1.2;
  color: #A3A3A3;
}
.cw-poweredby a {
  color: #A3A3A3;
  text-decoration: none;
  font-weight: 600;
}
.cw-poweredby a:hover { color: #FF6B00; text-decoration: underline; }

/* Liens enrichis dans les réponses de l'agent (§7 blueprint, 2026-08-26) */
.cw-link {
  color: #FF6B00;
  font-weight: 600;
  text-decoration: underline;
}
.cw-link:hover { text-decoration: none; }

/* Boutons quick-reply <choice> (§9.1 blueprint, 2026-09-06) — label/payload */
.cw-choice {
  display: inline-block;
  margin: 2px 2px;
  padding: 5px 10px;
  border: 1.5px solid #FF6B00;
  border-radius: 14px;
  background: #fff;
  color: #FF6B00;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.cw-choice:hover:not(:disabled) { background: #FF6B00; color: #fff; }
.cw-choice:disabled {
  border-color: #DDD;
  color: #AAA;
  cursor: not-allowed;
}

/* Pattern PII Form Vault (§11 blueprint, 2026-09-06) — formulaire natif */
.cw-piiform {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 260px;
}
.cw-piiform-summary {
  font-size: 12px;
  font-weight: 600;
  color: #444;
}
.cw-piiform-price {
  font-size: 12px;
  color: #444;
  margin-bottom: 4px;
}
.cw-piiform-input {
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
}
.cw-piiform-submit {
  margin-top: 4px;
  padding: 8px;
  border: none;
  border-radius: 6px;
  background: #FF6B00;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.cw-piiform-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.cw-piiform-error { color: #c0392b; font-size: 12px; }
.cw-piiform-done { font-size: 13px; color: #444; }