/* =========================================================================
   CHATBOT KAT'IA — charte L'Expertise E-commerce
   Bulle or · panneau violet · Cormorant pour le nom · Inter pour le texte.
   ========================================================================= */

.katia {
  --k-violet:       #471546;
  --k-violet-fonce: #2D0D2B;
  --k-or:           #D6B27A;
  --k-or-clair:     #E4CBA1;
  --k-blanc:        #F8F5F1;
  --k-radius:       18px;
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  z-index: 99990;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ----------------------------- BULLE ----------------------------- */
.katia__bubble {
  width: 62px; height: 62px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, var(--k-or) 0%, var(--k-or-clair) 100%);
  color: var(--k-violet-fonce);
  box-shadow: 0 14px 32px -10px rgba(214, 178, 122, .8), 0 4px 12px rgba(20,20,20,.2);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s;
  margin-left: auto;
}
.katia__bubble:hover { transform: translateY(-3px) scale(1.04); }
.katia__bubble:focus-visible { outline: 3px solid var(--k-violet); outline-offset: 3px; }
.katia__bubble svg { width: 28px; height: 28px; }
.katia__bubble-close { display: none; }
.katia[data-open="true"] .katia__bubble-icon { display: none; }
.katia[data-open="true"] .katia__bubble-close { display: block; }

/* Pastille « 1 » d'appel à l'action (pulse discret). */
.katia__bubble::after {
  content: "1";
  position: absolute; top: -3px; right: -3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--k-violet); color: var(--k-blanc);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--k-blanc);
}
.katia[data-open="true"] .katia__bubble::after { display: none; }

/* ----------------------------- PANNEAU ----------------------------- */
.katia__panel {
  position: absolute;
  bottom: 78px; right: 0;
  width: min(380px, calc(100vw - 28px));
  height: min(560px, calc(100vh - 120px));
  background: var(--k-blanc);
  border-radius: var(--k-radius);
  box-shadow: 0 30px 80px -24px rgba(45,13,43,.6);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  animation: katia-in .28s cubic-bezier(.22,.61,.36,1);
}
@keyframes katia-in {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header violet. */
.katia__header {
  background: linear-gradient(135deg, var(--k-violet) 0%, var(--k-violet-fonce) 100%);
  color: var(--k-blanc);
  padding: 16px 18px;
  display: flex; align-items: center; gap: 12px;
}
.katia__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  overflow: hidden; flex: 0 0 auto;
  border: 2px solid rgba(214,178,122,.6);
  background: var(--k-or);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.katia__avatar img { width: 100%; height: 100%; object-fit: cover; }
.katia__avatar-letter {
  display: none;
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: 22px; color: var(--k-violet-fonce);
}
.katia__avatar--fallback .katia__avatar-letter { display: block; }
.katia__name {
  font-family: 'Cormorant Garamond', serif; font-weight: 600;
  font-size: 20px; margin: 0; line-height: 1.1; color: var(--k-blanc);
}
.katia__role { margin: 2px 0 0; font-size: 12px; opacity: .85; }
.katia__id { flex: 1 1 auto; }
.katia__min {
  background: transparent; border: none; color: var(--k-blanc);
  cursor: pointer; opacity: .8; padding: 4px;
}
.katia__min svg { width: 22px; height: 22px; }
.katia__min:hover { opacity: 1; }

/* Journal des messages. */
.katia__log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--k-blanc);
}
.katia__msg { max-width: 84%; padding: 11px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
.katia__msg--bot {
  background: #fff; color: #2B2B31;
  border: 1px solid #E6E3DF;
  border-bottom-left-radius: 4px; align-self: flex-start;
}
.katia__msg--user {
  background: var(--k-violet); color: var(--k-blanc);
  border-bottom-right-radius: 4px; align-self: flex-end;
}
.katia__msg a { color: var(--k-violet); font-weight: 600; text-decoration: underline; }
.katia__msg--user a { color: var(--k-or-clair); }

/* Indicateur de saisie. */
.katia__typing { display: inline-flex; gap: 4px; align-items: center; }
.katia__typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--k-or);
  animation: katia-bounce 1.2s infinite ease-in-out;
}
.katia__typing span:nth-child(2) { animation-delay: .15s; }
.katia__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes katia-bounce { 0%,80%,100%{transform:scale(.6);opacity:.5} 40%{transform:scale(1);opacity:1} }

/* Chips de réponses rapides. */
.katia__chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 18px 10px;
}
.katia__chip {
  font-family: inherit; font-size: 13px; font-weight: 500;
  padding: 8px 13px; border-radius: 999px;
  background: rgba(214,178,122,.12);
  border: 1px solid rgba(214,178,122,.5);
  color: var(--k-violet); cursor: pointer;
  transition: background .2s, transform .2s;
}
.katia__chip:hover { background: var(--k-or); color: var(--k-violet-fonce); transform: translateY(-1px); }

/* Formulaire de saisie. */
.katia__form {
  display: flex; gap: 8px; align-items: center;
  padding: 12px 14px; border-top: 1px solid #E6E3DF; background: #fff;
}
.katia__input {
  flex: 1 1 auto; border: 1px solid #E6E3DF; border-radius: 999px;
  padding: 11px 16px; font-family: inherit; font-size: 14px; color: #141414;
  background: var(--k-blanc);
}
.katia__input:focus-visible { outline: 2px solid var(--k-or); border-color: var(--k-or); }
.katia__send {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  border: none; cursor: pointer; background: var(--k-or); color: var(--k-violet-fonce);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s;
}
.katia__send:hover { background: var(--k-or-clair); transform: scale(1.05); }
.katia__send svg { width: 19px; height: 19px; }
.katia__legal { font-size: 11px; color: #6B6B73; text-align: center; margin: 0; padding: 0 14px 10px; background:#fff; }

/* Champ email injecté dynamiquement. */
.katia__email-row { display: flex; gap: 8px; padding: 0 18px 12px; }
.katia__email-row input { flex:1; border:1px solid var(--k-or); border-radius: 999px; padding: 10px 14px; font-size: 14px; }
.katia__email-row button { border:none; background: var(--k-violet); color:#fff; border-radius:999px; padding: 0 16px; font-weight:600; cursor:pointer; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .katia__panel, .katia__typing span, .katia__bubble { animation: none !important; transition: none !important; }
}

@media (max-width: 480px) {
  .katia__panel { height: min(70vh, calc(100vh - 100px)); }
}