/* ==========================================================================
   CARAVELLI — CONCIERGE V9232 · la matière du panneau

   Intention : le concierge d'une maison de restauration ne doit pas ressembler
   à une messagerie. On retire les bulles, on pose de la nuit satinée, un filet
   d'un cheveu bronze, une ombre basse et profonde, et une apparition lente.
   Le concierge parle dans la pièce ; il ne poste pas des messages.

   Toutes les règles sont portées par #aiw.cv-ai-9232 — la classe n'est posée
   que si le script a bien pris la main. Si le script échoue, la feuille reste
   inerte et l'habillage d'origine subsiste : aucune dégradation.

   Aucune famille de police n'est introduite : on ne se sert que des variables
   déjà en place (Bodoni pour le titre, Inter pour les libellés, la fonte de
   lecture pour le fil). Plancher typographique respecté : rien sous 11 px.

   La double classe (.ai-pn.ai-pn) sert uniquement à passer devant les règles
   « html.lux #aiw … » de olympe-system.css, sans les modifier.
   ========================================================================== */

#aiw.cv-ai-9232 {
  --cv-nuit:   oklch(.2161 calc(var(--ol-c-body)*.637) var(--ol-h));
  --cv-satin:  oklch(.2817 calc(var(--ol-c-body)*.796) var(--ol-h));
  --cv-carrare:oklch(.966 calc(var(--ol-c-body)*.07) var(--ol-h-pap));
  --cv-argent: oklch(.7724 calc(var(--ol-c-body)*.438) var(--ol-h));
  --cv-bronze: oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat));
  --cv-cheveu: oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .28);   /* le filet d'un cheveu */
  --cv-lent:   cubic-bezier(.19, 1, .22, 1);
}

/* -------------------------------------------------------------- 1. LE PANNEAU
   Profondeur de champ : deux couches de nuit, un halo bronze très bas, une
   ombre portée large et basse. Le verre dépoli laisse deviner la page. */
html #aiw.cv-ai-9232 .ai-pn.ai-pn {
  width: min(392px, calc(100vw - 28px));
  height: min(568px, calc(100svh - 118px));
  background:
    radial-gradient(620px 240px at 82% -12%, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .10), transparent 66%),
    linear-gradient(168deg, oklch(.2456 calc(var(--ol-c-body)*.718) var(--ol-h)) 0%, var(--cv-nuit) 46%, oklch(.1664 calc(var(--ol-c-body)*.439) var(--ol-h)) 100%);
  border: 1px solid var(--cv-cheveu);
  border-radius: 2px;
  color: var(--cv-carrare);
  box-shadow:
    0 42px 120px oklch(.1264 calc(var(--ol-c-body)*.339) var(--ol-h) / .58),
    0 6px 22px oklch(.1264 calc(var(--ol-c-body)*.339) var(--ol-h) / .34),
    inset 0 1px 0 oklch(.9687 calc(var(--ol-c-body)*.058) var(--ol-h-pap) / .07);
  backdrop-filter: blur(16px) saturate(1.06);
  -webkit-backdrop-filter: blur(16px) saturate(1.06);
  /* apparition lente : la Maison n'ouvre pas une porte d'un coup */
  transition:
    opacity .72s var(--cv-lent),
    visibility .72s var(--cv-lent),
    transform .72s var(--cv-lent);
  transform: translateY(22px) scale(.986);
}
html #aiw.cv-ai-9232 .ai-pn.ai-pn.open { transform: none; }

/* Le filet de lumière qui court sur l'arête haute — un seul cheveu. */
html #aiw.cv-ai-9232 .ai-pn.ai-pn::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .62), transparent);
}

/* ---------------------------------------------------------------- 2. L'EN-TÊTE */
html #aiw.cv-ai-9232 .ai-ph.ai-ph {
  padding: 26px 96px 20px 24px;
  background: linear-gradient(180deg, oklch(.2817 calc(var(--ol-c-body)*.796) var(--ol-h) / .52), oklch(.2161 calc(var(--ol-c-body)*.637) var(--ol-h) / 0));
  border-bottom: 1px solid oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .18);
}
#aiw.cv-ai-9232 .ai-pt {
  margin: 0;
  font-family: var(--font-display, "Bodoni Moda", Georgia, serif);
  font-size: 21px;
  line-height: 1.18;
  letter-spacing: .012em;
  color: var(--cv-carrare);
}
#aiw.cv-ai-9232 .ai-ps {
  margin: 7px 0 0;
  font-family: var(--font-l, Inter, sans-serif);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .82);
}

/* La fermeture : un trait, pas un bouton d'application. */
html #aiw.cv-ai-9232 .ai-cl.ai-cl {
  top: 16px; right: 16px;
  width: 30px; height: 30px;
  border: 1px solid oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .30);
  border-radius: 50%;
  background: transparent;
  color: var(--cv-argent);
  font-size: 17px;
  line-height: 1;
  opacity: .9;
  transition: color .45s var(--cv-lent), border-color .45s var(--cv-lent), background-color .45s var(--cv-lent);
}
html #aiw.cv-ai-9232 .ai-cl.ai-cl:hover,
html #aiw.cv-ai-9232 .ai-cl.ai-cl:focus-visible {
  color: var(--cv-carrare);
  border-color: var(--cv-bronze);
  background: oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .12);
}

/* L'effacement de l'échange : discret, mais réel — la discrétion se prouve. */
#aiw.cv-ai-9232 .cv-ai-oubli {
  position: absolute;
  top: 21px; right: 56px;
  z-index: 3;
  padding: 3px 2px;
  border: 0;
  border-bottom: 1px solid oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .34);
  background: transparent;
  color: oklch(.7724 calc(var(--ol-c-body)*.438) var(--ol-h) / .84);
  font-family: var(--font-l, Inter, sans-serif);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .45s var(--cv-lent), border-color .45s var(--cv-lent);
}
#aiw.cv-ai-9232 .cv-ai-oubli:hover,
#aiw.cv-ai-9232 .cv-ai-oubli:focus-visible { color: var(--cv-carrare); border-color: var(--cv-bronze); }

/* ------------------------------------------------------------------ 3. LE FIL */
html #aiw.cv-ai-9232 .ai-msgs.ai-msgs {
  padding: 22px 24px 8px;
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .34) transparent;
  overscroll-behavior: contain;
}
#aiw.cv-ai-9232 .ai-msgs::-webkit-scrollbar { width: 4px; }
#aiw.cv-ai-9232 .ai-msgs::-webkit-scrollbar-thumb { background: oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .34); }
#aiw.cv-ai-9232 .ai-msgs:focus-visible { outline: 1px solid var(--cv-bronze); outline-offset: -3px; }

/* Un message n'est pas une bulle : c'est une parole tenue dans la pièce. */
html #aiw.cv-ai-9232 .ai-m.ai-m {
  position: relative;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 0 0 0 15px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-reading, var(--font-b), Inter, sans-serif);
  font-size: 15px;
  line-height: 1.62;
  color: oklch(.9687 calc(var(--ol-c-body)*.058) var(--ol-h-pap) / .92);
  overflow-wrap: anywhere;
  white-space: pre-wrap;                 /* les retours à la ligne sont tenus */
}
/* le filet bronze qui tient la parole du concierge */
html #aiw.cv-ai-9232 .ai-m.bot::before {
  content: "";
  position: absolute;
  left: 0; top: .34em; bottom: .34em;
  width: 1px;
  background: linear-gradient(180deg, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .72), oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .10));
}
/* la parole du visiteur : rentrée, sur un satin à peine posé */
html #aiw.cv-ai-9232 .ai-m.user.user {
  margin-left: auto;
  max-width: 88%;
  padding: 11px 14px;
  border: 1px solid oklch(.7724 calc(var(--ol-c-body)*.438) var(--ol-h) / .16);
  background: oklch(.2817 calc(var(--ol-c-body)*.796) var(--ol-h) / .58);
  color: var(--cv-carrare);
  text-align: left;
}
html #aiw.cv-ai-9232 .ai-m.user::before { content: none; }

/* L'accueil : la première parole se lit comme une adresse, non comme un envoi. */
#aiw.cv-ai-9232 .ai-m.cv-ai-accueil {
  font-family: var(--font-editorial, "Cormorant Garamond", Georgia, serif);
  font-size: 19px;
  line-height: 1.48;
  color: oklch(.9687 calc(var(--ol-c-body)*.058) var(--ol-h-pap) / .96);
}

/* L'horodatage : présent, jamais bavard. */
#aiw.cv-ai-9232 .cv-ai-ts {
  display: block;
  margin-top: 7px;
  font-family: var(--font-l, Inter, sans-serif);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: .18em;
  color: oklch(.7724 calc(var(--ol-c-body)*.438) var(--ol-h) / .44);
}
#aiw.cv-ai-9232 .ai-m.user .cv-ai-ts { text-align: right; }

/* La reprise d'un échange retrouvé dans la session. */
#aiw.cv-ai-9232 .cv-ai-reprise {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0 20px;
  font-family: var(--font-l, Inter, sans-serif);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: oklch(.7724 calc(var(--ol-c-body)*.438) var(--ol-h) / .58);
}
#aiw.cv-ai-9232 .cv-ai-reprise::before,
#aiw.cv-ai-9232 .cv-ai-reprise::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .30), transparent);
}

/* L'attente : le concierge consulte. Ce n'est pas un chargement, c'est un temps. */
html #aiw.cv-ai-9232 .ai-m.is-thinking {
  font-family: var(--font-editorial, "Cormorant Garamond", Georgia, serif);
  font-size: 17px;
  font-style: italic;
  color: oklch(.7724 calc(var(--ol-c-body)*.438) var(--ol-h) / .82);
  opacity: 1;
}
html #aiw.cv-ai-9232 .ai-m.is-thinking::before {
  background: linear-gradient(180deg, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .34), transparent);
}
#aiw.cv-ai-9232 .ai-m.is-thinking span::after { background: oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .8); }

/* L'avarie : une note de service, pas une erreur technique. */
#aiw.cv-ai-9232 .ai-m.cv-ai-avarie {
  font-family: var(--font-editorial, "Cormorant Garamond", Georgia, serif);
  font-size: 17px;
  font-style: italic;
  color: oklch(.8242 calc(var(--ol-c-pat)*.806) var(--ol-h-pat) / .92);
}
html #aiw.cv-ai-9232 .ai-m.cv-ai-avarie::before {
  background: linear-gradient(180deg, var(--cv-bronze), oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .12));
}

/* Le lien d'action proposé par le concierge. */
html #aiw.cv-ai-9232 .ai-m-action {
  margin-top: 12px;
  font-family: var(--font-l, Inter, sans-serif);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cv-bronze);
  border-bottom: 1px solid oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .46);
}
html #aiw.cv-ai-9232 .ai-m-action:hover,
html #aiw.cv-ai-9232 .ai-m-action:focus-visible { color: var(--cv-carrare); border-color: var(--cv-carrare); }

/* -------------------------------------------------------- 4. LES AMORCES
   Trois ou quatre entrées en matière propres à la page. Ce sont des phrases,
   donc elles se lisent : pas de petites capitales, pas de 9 px. */
html #aiw.cv-ai-9232 .ai-quick.ai-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 12px 24px 4px;
  background: transparent;
  border-top: 1px solid oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .14);
}
html #aiw.cv-ai-9232 .ai-quick-btn.ai-quick-btn {
  appearance: none;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .26);
  border-radius: 999px;
  background: oklch(.2817 calc(var(--ol-c-body)*.796) var(--ol-h) / .42);
  color: oklch(.9687 calc(var(--ol-c-body)*.058) var(--ol-h-pap) / .84);
  font-family: var(--font-l, Inter, sans-serif);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: .008em;
  text-transform: none;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
  transition: background-color .5s var(--cv-lent), border-color .5s var(--cv-lent),
              color .5s var(--cv-lent), transform .5s var(--cv-lent);
}
html #aiw.cv-ai-9232 .ai-quick-btn.ai-quick-btn:hover,
html #aiw.cv-ai-9232 .ai-quick-btn.ai-quick-btn:focus-visible {
  background: oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .16);
  border-color: var(--cv-bronze);
  color: var(--cv-carrare);
  transform: translateY(-1px);
}

/* Les relances renvoyées par le serveur, même main. */
html #aiw.cv-ai-9232 .ai-sugg { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
html #aiw.cv-ai-9232 .ai-sugg-btn {
  padding: 7px 11px;
  border: 1px solid oklch(.7724 calc(var(--ol-c-body)*.438) var(--ol-h) / .24);
  border-radius: 999px;
  background: transparent;
  color: oklch(.7724 calc(var(--ol-c-body)*.438) var(--ol-h) / .92);
  font-family: var(--font-l, Inter, sans-serif);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .01em;
  text-transform: none;
  text-align: left;
  cursor: pointer;
}
html #aiw.cv-ai-9232 .ai-sugg-btn:hover,
html #aiw.cv-ai-9232 .ai-sugg-btn:focus-visible { border-color: var(--cv-bronze); color: var(--cv-carrare); }

/* ------------------------------------------------------------- 5. LA SAISIE */
html #aiw.cv-ai-9232 .ai-iw.ai-iw {
  gap: 10px;
  padding: 14px 24px 18px;
  background: transparent;
  border-top: 1px solid oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .18);
}
html #aiw.cv-ai-9232 .ai-inp.ai-inp {
  padding: 11px 2px;
  border: 0;
  border-bottom: 1px solid oklch(.7724 calc(var(--ol-c-body)*.438) var(--ol-h) / .30);
  border-radius: 0;
  background: transparent;
  color: var(--cv-carrare);
  font-family: var(--font-reading, var(--font-b), Inter, sans-serif);
  font-size: 15px;
  line-height: 1.45;
  box-shadow: none;
  transition: border-color .5s var(--cv-lent);
}
html #aiw.cv-ai-9232 .ai-inp.ai-inp::placeholder { color: oklch(.7724 calc(var(--ol-c-body)*.438) var(--ol-h) / .62); }
html #aiw.cv-ai-9232 .ai-inp.ai-inp:focus {
  border-color: var(--cv-bronze);
  box-shadow: none;
  outline: none;
}
html #aiw.cv-ai-9232 .ai-snd.ai-snd {
  width: 42px; height: 42px;
  align-self: end;
  border: 1px solid oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .40);
  border-radius: 50%;
  background: transparent;
  color: var(--cv-bronze);
  font-size: 16px;
  cursor: pointer;
  transition: background-color .5s var(--cv-lent), color .5s var(--cv-lent), border-color .5s var(--cv-lent);
}
html #aiw.cv-ai-9232 .ai-snd.ai-snd:hover,
html #aiw.cv-ai-9232 .ai-snd.ai-snd:focus-visible {
  background: oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .16);
  border-color: var(--cv-bronze);
  color: var(--cv-carrare);
}
html #aiw.cv-ai-9232 .ai-snd.ai-snd[disabled] { opacity: .42; cursor: default; }

/* ------------------------------------------------------------ 6. LE DÉCLENCHEUR */
html #aiw.cv-ai-9232 .ai-tr.ai-tr {
  border: 1px solid oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .38);
  background:
    radial-gradient(120% 120% at 30% 12%, oklch(.7625 calc(var(--ol-c-pat)*.821) var(--ol-h-pat) / .16), transparent 62%),
    linear-gradient(158deg, var(--cv-satin), var(--cv-nuit));
  box-shadow: 0 22px 54px oklch(.1264 calc(var(--ol-c-body)*.339) var(--ol-h) / .42), inset 0 1px 0 oklch(.9687 calc(var(--ol-c-body)*.058) var(--ol-h-pap) / .10);
  color: var(--cv-carrare);
  transition: transform .6s var(--cv-lent), border-color .5s var(--cv-lent), box-shadow .6s var(--cv-lent);
}
html #aiw.cv-ai-9232 .ai-tr.ai-tr:hover { transform: translateY(-2px); border-color: var(--cv-bronze); }
html #aiw.cv-ai-9232 .ai-tr.ai-tr:focus-visible { outline: 1px solid var(--cv-bronze); outline-offset: 4px; }
#aiw.cv-ai-9232 .ai-tr-ic { color: var(--cv-carrare); }

/* Le focus, partout, se voit — sans se donner en spectacle. */
#aiw.cv-ai-9232 :focus-visible { outline: 1px solid var(--cv-bronze); outline-offset: 2px; }

/* ------------------------------------------------------------ 7. LE PETIT ÉCRAN
   Le panneau ne prend jamais toute la page : la Maison reste visible derrière. */
@media (max-width: 640px) {
  html #aiw.cv-ai-9232 .ai-pn.ai-pn {
    right: 0;
    bottom: 72px;
    width: calc(100vw - 24px);
    max-width: 420px;
    height: min(456px, calc(100svh - 168px));
  }
  html #aiw.cv-ai-9232 .ai-ph.ai-ph { padding: 20px 92px 16px 20px; }
  #aiw.cv-ai-9232 .ai-pt { font-size: 19px; }
  #aiw.cv-ai-9232 .ai-m.cv-ai-accueil { font-size: 17px; }
  html #aiw.cv-ai-9232 .ai-msgs.ai-msgs { padding: 18px 20px 6px; }
  html #aiw.cv-ai-9232 .ai-quick.ai-quick { padding: 10px 20px 4px; gap: 6px; }
  html #aiw.cv-ai-9232 .ai-quick-btn.ai-quick-btn { font-size: 11px; padding: 7px 10px; }
  html #aiw.cv-ai-9232 .ai-iw.ai-iw { padding: 12px 20px 14px; }
  html #aiw.cv-ai-9232 .ai-inp.ai-inp { font-size: 16px; }   /* pas de zoom iOS */
}

/* -------------------------------------------------------- 8. MOUVEMENT RÉDUIT
   Le goût du lent ne s'impose pas à qui l'a refusé. */
@media (prefers-reduced-motion: reduce) {
  html #aiw.cv-ai-9232 .ai-pn.ai-pn {
    transition: opacity .2s linear, visibility .2s linear;
    transform: none;
  }
  html #aiw.cv-ai-9232 .ai-tr.ai-tr,
  html #aiw.cv-ai-9232 .ai-quick-btn.ai-quick-btn { transition: none; }
  html #aiw.cv-ai-9232 .ai-tr.ai-tr:hover,
  html #aiw.cv-ai-9232 .ai-quick-btn.ai-quick-btn:hover { transform: none; }
  #aiw.cv-ai-9232 .ai-m.is-thinking span::after { animation: none; }
}