/* Assistante virtuelle « Léa » : panneau de conversation et cartes calculées.
   Le lanceur (.chat-launcher, disque 56 px) et ses règles de non-chevauchement sont dans site.css.
   Tokens de site.css uniquement : un accent (--brand), fonds --bg-alt / blanc, rayons 16 (panneau, bulles, cartes) / 12 (champ, note) / pilule. */

.chat-panel {
  position: fixed; right: var(--sp-6); bottom: var(--sp-6); z-index: 850;
  width: 400px; max-width: calc(100vw - 2 * var(--sp-6));
  height: 560px; max-height: calc(100vh - 2 * var(--sp-6));
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-m);
  font-family: var(--font-body); color: var(--ink);
  animation: chat-in .15s ease-out;
}
.chat-panel[hidden] { display: none; }
@keyframes chat-in { from { opacity: 0; } }

/* En-tête blanc : nom, nature automatique, marqueur IA, fermeture */
.chat-head { flex: none; display: flex; align-items: center; gap: var(--sp-2); min-height: 56px; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); background: #fff; border-bottom: 1px solid var(--line); }
.chat-title { flex: 1; min-width: 0; }
.chat-title p { margin: 0; }
.chat-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.chat-title-line strong { font: 700 1rem/1.25 var(--font-heading); color: var(--ink); }
.chat-mode:empty { display: none; }
.chat-demo { font: 600 var(--fs-small)/1.2 var(--font-body); color: var(--ink-3); }
.chat-subtitle { font-size: var(--fs-small); line-height: 1.35; color: var(--ink-3); }
.chat-icon-btn { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.chat-icon-btn:hover { background: var(--bg-alt); }
.chat-icon-btn svg { width: 22px; height: 22px; }

/* Journal */
.chat-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-4); background: var(--bg-alt); display: flex; flex-direction: column; }
.chat-log:focus { outline: none; }
.chat-thread { display: flex; flex-direction: column; gap: var(--sp-4); }
.chat-msg { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.chat-msg.is-bot { align-items: flex-start; }
.chat-msg.is-user { align-self: flex-end; max-width: 85%; align-items: flex-end; }
.chat-bubble { max-width: 92%; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-lg); font-size: var(--fs-body); line-height: var(--lh-body); overflow-wrap: anywhere; }
.chat-msg.is-bot .chat-bubble { background: #fff; color: var(--ink); border-bottom-left-radius: var(--radius-xs); }
.chat-msg.is-user .chat-bubble { max-width: 100%; background: var(--brand); color: var(--on-brand); border-bottom-right-radius: var(--radius-xs); white-space: pre-wrap; }
.chat-bubble:empty { display: none; }
.chat-bubble p { margin: 0 0 .5em; }
.chat-bubble p:last-child, .chat-bubble ul:last-child, .chat-bubble ol:last-child { margin-bottom: 0; }
.chat-bubble ul, .chat-bubble ol { margin: .25em 0 .5em; padding-left: 1.25em; }
.chat-bubble li { margin: .15em 0; }
.chat-bubble strong { font-weight: 600; }
.chat-bubble.is-error { background: var(--danger-bg); color: var(--danger); }
.chat-cursor { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -3px; background: var(--brand); animation: chat-blink .9s steps(2) infinite; }
@keyframes chat-blink { 50% { opacity: 0; } }
.chat-typing { display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; }
.chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: .35; animation: chat-dot 1s infinite; }
.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 40% { opacity: 1; } }
/* Outil en cours : « Léa calcule votre loyer… » */
.chat-tool { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-small); font-weight: 600; color: var(--ink-3); }
.chat-tool .chat-typing { padding: 0; }

/* Actions ([[action:x]]) et réponses rapides : pilules dans le journal */
.chat-actions, .chat-quick { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chat-action { white-space: normal; }
.chat-quick { margin-top: var(--sp-1); }
.chat-quick .chip-btn { text-align: left; }
.chat-quick .chip-btn:hover, .chat-card-slots .chip-btn:hover { border-color: var(--brand); color: var(--brand-deep); background: var(--bg-brand); }

/* Cartes calculées par le serveur (simulation, affacturage, pièces, créneaux) */
.chat-cards { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; }
.chat-cards:empty { display: none; }
.chat-card { width: 100%; background: #fff; border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.chat-card-kicker { margin: 0; font: 600 var(--fs-small)/1.35 var(--font-body); color: var(--ink-3); }
.chat-card-figure { margin: var(--sp-1) 0 0; font-variant-numeric: tabular-nums; }
.chat-card-figure strong { font: 700 2rem/1.1 var(--font-heading); color: var(--ink); letter-spacing: -.01em; }
.chat-card-figure span { font: 600 var(--fs-body)/1.2 var(--font-body); color: var(--ink-3); }
.chat-card-meta { margin: var(--sp-2) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); }
.chat-card-legal { margin: var(--sp-2) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
.chat-card-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.chat-card-actions .btn { flex: 1 1 auto; }
.chat-card-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.chat-card-list li { position: relative; padding-left: 28px; line-height: 1.4; }
.chat-card-list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23004652' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6'/%3E%3C/svg%3E") center / 20px no-repeat; }
.chat-card-slots { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.chat-card-slots .chip-btn { text-decoration: none; }

/* Demande transmise (carte « callback » ou référence de lead) */
.chat-note { width: 100%; display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); background: var(--success-bg); color: var(--success); font-size: var(--fs-small); line-height: var(--lh-small); }
.chat-note strong { font-weight: 600; }

.chat-log-foot { margin-top: var(--sp-4); text-align: center; }
.chat-log-foot[hidden] { display: none; }
.chat-reset { min-height: 44px; padding: 0 var(--sp-3); border: 0; background: transparent; color: var(--brand); font: 600 var(--fs-small)/1.2 var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.chat-reset:hover { color: var(--brand-hover); }

/* Saisie et note de confidentialité */
.chat-form { flex: none; display: flex; align-items: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-3) var(--sp-1); border-top: 1px solid var(--line); background: #fff; }
.chat-input { flex: 1; min-width: 0; min-height: 44px; max-height: 130px; resize: none; margin: 0; padding: 10px var(--sp-4); border-radius: var(--radius); border: var(--border-input) solid var(--line-input); background: #fff; font: 400 var(--fs-body)/1.4 var(--font-body); color: var(--ink); }
.chat-input::placeholder { color: var(--muted); }
.chat-input:hover { border-color: var(--ink-3); }
.chat-input:focus { border-color: var(--focus); }
.chat-send { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--brand-pale); color: var(--brand-deep); display: grid; place-items: center; cursor: pointer; }
.chat-send:hover { background: var(--bg-brand-2); }
.chat-send[disabled] { color: var(--muted); background: var(--bg-alt); cursor: not-allowed; }
.chat-send svg { width: 22px; height: 22px; }
.chat-privacy { flex: none; margin: 0; padding: var(--sp-1) var(--sp-4) var(--sp-3); background: #fff; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); }

/* Plein écran sous 680 px (le reste de la page est rendu inerte par chat.js) */
@media (max-width: 680px) {
  .chat-panel { inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none; }
  .chat-head { padding-top: calc(var(--sp-2) + env(safe-area-inset-top)); }
  .chat-privacy { padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)); }
  .chat-quick .chip-btn, .chat-card-slots .chip-btn { min-height: 44px; }
  .chat-card-actions .btn, .chat-actions .btn { min-height: 44px; }
  html.chat-locked, html.chat-locked body { overflow: hidden; }
}
@media print { .chat-launcher, .chat-panel { display: none !important; } }