/* ==========================================================================
   PASA MUSIK — PASA, l'assistant conversationnel
   --------------------------------------------------------------------------
   Widget autonome (aucune dépendance). Il s'injecte sur toutes les pages via
   pasa-chat.js et reprend l'identité chromatique du logo :
       teal #047391 · rouge-orangé #EF4424 · or #F3AF20
   Tout est préfixé .pmc- pour ne jamais entrer en conflit avec le thème.

   Sommaire
     00. Jetons
     01. Conteneur & bouton flottant
     02. Visage abstrait animé
     03. Panneau
     04. En-tête
     05. Fil de conversation
     06. Suggestions (puces)
     07. Zone de saisie
     08. Responsive
     09. prefers-reduced-motion
   ========================================================================== */

/* ===========================  00. JETONS  ================================= */
#pasa-chat{
  --pmc-teal:       #047391;
  --pmc-teal-dark:  #03596f;
  --pmc-red:        #EF4424;
  --pmc-gold:       #F3AF20;

  --pmc-ink:        #0b2530;
  --pmc-ink-2:      #445c67;
  --pmc-ink-3:      #7b8d95;
  --pmc-line:       #e6eef1;
  --pmc-surface:    #ffffff;
  --pmc-surface-2:  #f5fafb;

  --pmc-radius:     22px;
  --pmc-radius-sm:  14px;
  --pmc-ease:       cubic-bezier(.22, .61, .36, 1);

  --pmc-shadow:     0 16px 44px -14px rgba(4, 37, 48, .30);

  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 99990;
  font-family: "Comfortaa", ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#pasa-chat *, #pasa-chat *::before, #pasa-chat *::after{ box-sizing: border-box; }

/* --- Bouclier contre le thème -------------------------------------------
   Le thème du site habille tous les <button> en gros boutons rouges, en
   majuscules et pleine largeur. Ces règles remettent à zéro ce qui vient de
   l'extérieur. Elles sont sélectionnées par l'identifiant #pasa-chat, donc
   elles l'emportent ; et les règles de classe plus bas (.pmc__chip, …)
   l'emportent à leur tour sur celles-ci, puisqu'une classe bat un type. */
#pasa-chat button,
#pasa-chat textarea,
#pasa-chat input{
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  text-align: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  box-shadow: none;
  text-shadow: none;
  float: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
#pasa-chat button::before,
#pasa-chat button::after{ content: none; }
#pasa-chat textarea, #pasa-chat input{ cursor: auto; }
#pasa-chat p,
#pasa-chat ul,
#pasa-chat li,
#pasa-chat svg,
#pasa-chat div,
#pasa-chat span{
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
  max-width: none;
  float: none;
}
#pasa-chat ul{ list-style: disc; }
#pasa-chat li{ list-style: inherit; }
#pasa-chat a{ text-decoration: none; background: none; }
#pasa-chat svg{ display: block; max-width: none; height: auto; }

/* ==============  01. CONTENEUR & BOUTON FLOTTANT  ======================== */
#pasa-chat .pmc__fab{
  position: relative;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  padding: 0;
  border-radius: 50%;
  background: var(--pmc-surface);
  box-shadow: 0 6px 20px -6px rgba(4, 37, 48, .28);
  transition: transform .3s var(--pmc-ease), box-shadow .3s var(--pmc-ease);
}
#pasa-chat .pmc__fab:hover{ transform: translateY(-2px); }
#pasa-chat .pmc__fab:active{ transform: translateY(0); }
#pasa-chat .pmc__fab .pmc-face{ width: 48px; height: 48px; }

/* Pastille d'invitation, une seule fois par visite */
#pasa-chat .pmc__nudge{
  position: absolute;
  right: 76px;
  bottom: 13px;
  /* .pmc fait la largeur du bouton : sans `width`, la pastille se réduirait
     à une colonne d'une lettre. `max-content` la laisse prendre sa place. */
  width: max-content;
  max-width: min(236px, calc(100vw - 112px));
  padding: 11px 14px;
  border-radius: 14px;
  background: var(--pmc-surface);
  color: var(--pmc-ink);
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: -.1px;
  box-shadow: var(--pmc-shadow);
  opacity: 0;
  transform: translateX(10px) scale(.96);
  transform-origin: 100% 100%;
  pointer-events: none;
  transition: opacity .4s var(--pmc-ease), transform .4s var(--pmc-ease);
}
#pasa-chat .pmc__nudge.is-on{ opacity: 1; transform: none; pointer-events: auto; }
#pasa-chat .pmc__nudge b{ font-weight: 700; color: var(--pmc-teal); }
#pasa-chat .pmc__nudge-x{
  position: absolute; top: -9px; right: -9px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pmc-ink); color: #fff; font-size: 11px; line-height: 1;
  box-shadow: 0 2px 6px rgba(4, 37, 48, .3);
}

/* État ouvert : le bouton s'efface sous le panneau */
#pasa-chat.is-open .pmc__fab{ opacity: 0; transform: scale(.7); pointer-events: none; }
#pasa-chat.is-open .pmc__nudge{ display: none; }

/* ==================  02. VISAGE ABSTRAIT ANIMÉ  ========================== */
#pasa-chat .pmc-face{ display: block; overflow: visible; }
#pasa-chat .pmc-face__disc{ transform-origin: 60px 60px; animation: pmc-breathe 5.2s ease-in-out infinite; }
#pasa-chat .pmc-face__aura{ transform-origin: 60px 60px; animation: pmc-spin 22s linear infinite; }
#pasa-chat .pmc-face__b1{ transform-origin: 60px 60px; animation: pmc-drift-a 9s ease-in-out infinite; }
#pasa-chat .pmc-face__b2{ transform-origin: 60px 60px; animation: pmc-drift-b 11s ease-in-out infinite; }
#pasa-chat .pmc-face__b3{ transform-origin: 60px 60px; animation: pmc-drift-c 13s ease-in-out infinite; }

#pasa-chat .pmc-face__eye{
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: pmc-blink 7.5s ease-in-out infinite;
}
#pasa-chat .pmc-face__eye--r{ animation-delay: .08s; }
#pasa-chat .pmc-face__mouth{
  transform-box: fill-box;
  transform-origin: 50% 20%;
  transition: d .4s var(--pmc-ease);
}

@keyframes pmc-breathe{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.035); }
}
@keyframes pmc-spin{ to{ transform: rotate(360deg); } }
@keyframes pmc-drift-a{
  0%, 100%{ transform: translate(0, 0)    scale(1); }
  50%{ transform: translate(5px, -4px) scale(1.1); }
}
@keyframes pmc-drift-b{
  0%, 100%{ transform: translate(0, 0)     scale(1.05); }
  50%{ transform: translate(-6px, 4px) scale(.94); }
}
@keyframes pmc-drift-c{
  0%, 100%{ transform: translate(0, 0)     scale(.98); }
  50%{ transform: translate(3px, 5px) scale(1.12); }
}
@keyframes pmc-blink{
  0%, 88%, 100%{ transform: scaleY(1); }
  92%{ transform: scaleY(.08); }
  96%{ transform: scaleY(1); }
}

/* --- Réflexion : l'aura s'emballe, le regard se plisse ------------------- */
#pasa-chat.is-thinking .pmc-face__aura{ animation-duration: 4.5s; }
#pasa-chat.is-thinking .pmc-face__disc{ animation-duration: 1.9s; }
#pasa-chat.is-thinking .pmc-face__eye{ animation: pmc-think-eye 1.5s ease-in-out infinite; }
#pasa-chat.is-thinking .pmc-face__eye--r{ animation-delay: .18s; }
@keyframes pmc-think-eye{
  0%, 100%{ transform: scaleY(.9)  translateY(0); }
  50%{ transform: scaleY(.42) translateY(1px); }
}

/* --- Parole : la bouche vibre ------------------------------------------- */
#pasa-chat.is-speaking .pmc-face__mouth{ animation: pmc-talk .62s ease-in-out infinite; }
@keyframes pmc-talk{
  0%, 100%{ transform: scaleY(1)   scaleX(1); }
  35%{ transform: scaleY(2.1) scaleX(.9); }
  70%{ transform: scaleY(.7)  scaleX(1.05); }
}

/* =========================  03. PANNEAU  ================================= */
#pasa-chat .pmc__panel{
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 396px;
  height: min(624px, calc(100vh - 128px));
  border-radius: var(--pmc-radius);
  background: var(--pmc-surface);
  box-shadow: var(--pmc-shadow);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px) scale(.97);
  transform-origin: 100% 100%;
  pointer-events: none;
  transition: opacity .3s var(--pmc-ease), transform .36s var(--pmc-ease);
}
#pasa-chat.is-open .pmc__panel{ opacity: 1; transform: none; pointer-events: auto; }

/* =========================  04. EN-TÊTE  ================================= */
#pasa-chat .pmc__head{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding: 15px 16px;
  background: var(--pmc-surface);
  border-bottom: 1px solid var(--pmc-line);
}
#pasa-chat .pmc__avatar{ flex: 0 0 auto; width: 42px; height: 42px; }
#pasa-chat .pmc__avatar .pmc-face{ width: 42px; height: 42px; }
#pasa-chat .pmc__id{ min-width: 0; flex: 1 1 auto; }
#pasa-chat .pmc__name{
  display: flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 700; letter-spacing: .2px;
  color: var(--pmc-ink); line-height: 1.2;
}
#pasa-chat .pmc__dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: #35c07a; box-shadow: 0 0 0 3px rgba(53, 192, 122, .18);
}
#pasa-chat .pmc__role{
  margin-top: 2px;
  font-size: 11.5px; letter-spacing: .1px;
  color: var(--pmc-ink-3); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#pasa-chat .pmc__x{
  flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--pmc-ink-2);
  transition: background .2s var(--pmc-ease), color .2s var(--pmc-ease), transform .2s var(--pmc-ease);
}
#pasa-chat .pmc__x:hover{ background: var(--pmc-surface-2); color: var(--pmc-ink); transform: rotate(90deg); }
#pasa-chat .pmc__x svg{ width: 15px; height: 15px; }

/* ====================  05. FIL DE CONVERSATION  ========================== */
#pasa-chat .pmc__log{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 16px 6px;
  background: var(--pmc-surface);
  scrollbar-width: thin;
  scrollbar-color: #d7e3e8 transparent;
}
#pasa-chat .pmc__log::-webkit-scrollbar{ width: 6px; }
#pasa-chat .pmc__log::-webkit-scrollbar-track{ background: transparent; }
#pasa-chat .pmc__log::-webkit-scrollbar-thumb{ background: #dde7eb; border-radius: 99px; }

#pasa-chat .pmc__msg{
  max-width: 84%;
  margin-bottom: 10px;
  padding: 11px 14px;
  font-size: 13.5px;
  line-height: 1.58;
  letter-spacing: -.1px;
  animation: pmc-pop .34s var(--pmc-ease) both;
}
#pasa-chat .pmc__msg--bot{
  margin-right: auto;
  border-radius: 16px 16px 16px 5px;
  background: var(--pmc-surface-2);
  color: var(--pmc-ink);
  border: 1px solid var(--pmc-line);
}
#pasa-chat .pmc__msg--me{
  margin-left: auto;
  border-radius: 16px 16px 5px 16px;
  background: var(--pmc-teal);
  color: #fff;
  border: 1px solid var(--pmc-teal);
}
#pasa-chat .pmc__msg p{ margin: 0 0 .62em; }
#pasa-chat .pmc__msg p:last-child{ margin-bottom: 0; }
#pasa-chat .pmc__msg strong{ font-weight: 700; }
#pasa-chat .pmc__msg ul{ margin: .3em 0 .62em; padding-left: 1.15em; }
#pasa-chat .pmc__msg li{ margin-bottom: .3em; }
#pasa-chat .pmc__msg a{
  color: var(--pmc-teal);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(4, 115, 145, .3);
  transition: border-color .2s var(--pmc-ease);
}
#pasa-chat .pmc__msg a:hover{ border-bottom-color: var(--pmc-teal); }
#pasa-chat .pmc__msg--me a{ color: #fff; border-bottom-color: rgba(255, 255, 255, .5); }

@keyframes pmc-pop{
  from{ opacity: 0; transform: translateY(8px) scale(.985); }
  to{ opacity: 1; transform: none; }
}

/* Trois points de réflexion */
#pasa-chat .pmc__typing{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 0;
}
#pasa-chat .pmc__typing i{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pmc-teal); opacity: .35;
  animation: pmc-bounce 1.25s ease-in-out infinite;
}
#pasa-chat .pmc__typing i:nth-child(2){ background: var(--pmc-gold); animation-delay: .16s; }
#pasa-chat .pmc__typing i:nth-child(3){ background: var(--pmc-red);  animation-delay: .32s; }
@keyframes pmc-bounce{
  0%, 60%, 100%{ transform: translateY(0);    opacity: .3; }
  30%{ transform: translateY(-5px); opacity: 1; }
}

/* ==================  06. SUGGESTIONS (PUCES)  ============================ */
#pasa-chat .pmc__sugg{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 2px 0 14px;
  animation: pmc-pop .4s var(--pmc-ease) both;
}
#pasa-chat .pmc__chip{
  padding: 8px 13px;
  border-radius: 99px;
  border: 1px solid var(--pmc-line);
  background: var(--pmc-surface);
  color: var(--pmc-teal);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.1px;
  line-height: 1.35;
  text-align: left;
  transition: border-color .2s var(--pmc-ease), background .2s var(--pmc-ease);
}
#pasa-chat .pmc__chip:hover{
  border-color: rgba(4, 115, 145, .4);
  background: var(--pmc-surface-2);
}

#pasa-chat .pmc__hint{
  padding: 0 0 12px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--pmc-ink-3);
}

/* =====================  07. ZONE DE SAISIE  ============================== */
#pasa-chat .pmc__foot{
  flex: 0 0 auto;
  padding: 11px 13px calc(11px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--pmc-line);
  background: var(--pmc-surface);
}
#pasa-chat .pmc__form{
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 5px 5px 5px 14px;
  border: 1px solid var(--pmc-line);
  border-radius: 20px;
  background: var(--pmc-surface-2);
  transition: border-color .22s var(--pmc-ease), box-shadow .22s var(--pmc-ease), background .22s var(--pmc-ease);
}
#pasa-chat .pmc__form:focus-within{
  border-color: rgba(4, 115, 145, .45);
  background: var(--pmc-surface);
  box-shadow: 0 0 0 3px rgba(4, 115, 145, .1);
}
#pasa-chat .pmc__input{
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  max-height: 96px;
  padding: 7px 0;
  border: 0;
  background: none;
  resize: none;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  letter-spacing: -.1px;
  color: var(--pmc-ink);
  outline: none;
  overflow-y: auto;
  scrollbar-width: none;
}
#pasa-chat .pmc__input::-webkit-scrollbar{ display: none; }
#pasa-chat .pmc__input::placeholder{ color: var(--pmc-ink-3); }
#pasa-chat .pmc__send{
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--pmc-teal);
  color: #fff;
  transition: background .2s var(--pmc-ease), opacity .2s var(--pmc-ease);
}
#pasa-chat .pmc__send svg{ width: 15px; height: 15px; margin-left: -1px; }
#pasa-chat .pmc__send:hover{ background: var(--pmc-teal-dark); }
#pasa-chat .pmc__send:disabled{ opacity: .28; cursor: default; }

#pasa-chat .pmc__sign{
  margin: 9px 2px 0;
  font-size: 10px;
  letter-spacing: .2px;
  text-align: center;
  color: var(--pmc-ink-3);
}
#pasa-chat .pmc__sign a{ color: var(--pmc-ink-3); text-decoration: underline; }

#pasa-chat .pmc__sr{
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

#pasa-chat button:focus-visible,  #pasa-chat [tabindex]:focus-visible,  #pasa-chat textarea:focus-visible{
  outline: 2px solid var(--pmc-teal);
  outline-offset: 2px;
}

/* =========================  08. RESPONSIVE  ============================== */
/* La bannière de cookies occupe le bas de l'écran : on remonte le bouton. */
#pasa-chat.is-lifted{ bottom: calc(22px + var(--pmc-lift, 0px)); }

@media (max-width: 560px){
  #pasa-chat{ right: 14px; bottom: 14px; }
  #pasa-chat.is-lifted{ bottom: calc(14px + var(--pmc-lift, 0px)); }
  #pasa-chat .pmc__fab{ width: 56px; height: 56px; }
  #pasa-chat .pmc__fab .pmc-face{ width: 42px; height: 42px; }
  #pasa-chat .pmc__nudge{ right: 68px; max-width: min(224px, calc(100vw - 100px)); }

  #pasa-chat.is-open{ right: 0; bottom: 0; left: 0; top: 0; }
  #pasa-chat .pmc__panel{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
  #pasa-chat .pmc__msg{ max-width: 88%; font-size: 14px; }
}

@media (max-width: 560px) and (display-mode: browser){
  #pasa-chat .pmc__panel{ height: 100dvh; }
}

/* ==================  09. MOUVEMENT RÉDUIT  =============================== */
@media (prefers-reduced-motion: reduce){
  #pasa-chat *, #pasa-chat *::before, #pasa-chat *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  #pasa-chat .pmc__fab::after{ opacity: .25; }
  #pasa-chat .pmc-face__eye{ transform: none !important; }
}