/* ===== Julie – Chat widget · Encart Pro (v33 – gradient popup) ===== */

/* Palette & tokens */
:root{
  --lanx-text:    #0b1324;
  --lanx-sub:     #5e6b7e;
  --lanx-muted:   #6f7b8e;
  --lanx-border:  #e6e9ee;
  --lanx-panel:   #ffffff;
  --lanx-surface: #f7f8fa;

  /* Thème gradient aligné sur le popup */
  --lanx-from: #6a35ff;   /* violet */
  --lanx-to:   #ff3e86;   /* rose   */
  --lanx-grad: linear-gradient(135deg, var(--lanx-from), var(--lanx-to));
}

/* Conteneur global fixé (hors footer) */
.lanx-shell{
  position: fixed !important;
  right: 22px !important;
  bottom: 22px !important;
  z-index: 2147483647 !important;
  font-family: Inter, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Bulle flottante : gradient + picto discussion === */
.lanx-bubble{
  width:56px; height:56px; border-radius:50%;
  background: var(--lanx-grad); color:#fff; border:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 28px rgba(2,6,23,.25), 0 2px 8px rgba(2,6,23,.15);
  cursor:pointer; transition: transform .1s ease, filter .15s ease;
}
.lanx-bubble:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.lanx-bubble:active{ transform: scale(.98); }
/* Icône de chat injectée en CSS (aucun HTML à changer) */
.lanx-bubble::before{
  content:""; width:22px; height:22px; background:#fff; display:block;
  -webkit-mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path d="M7 6h10a4 4 0 0 1 4 4v5a4 4 0 0 1-4 4H10l-4 3v-3H7a4 4 0 0 1-4-4v-5a4 4 0 0 1 4-4Z"/></svg>') no-repeat center/contain;
          mask: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\
<path d="M7 6h10a4 4 0 0 1 4 4v5a4 4 0 0 1-4 4H10l-4 3v-3H7a4 4 0 0 1-4-4v-5a4 4 0 0 1 4-4Z"/></svg>') no-repeat center/contain;
}

/* === Panneau : anneau/bordure dégradée façon popup === */
.lanx-chat-panel{
  position: fixed !important;
  right:22px !important; bottom:90px !important;
  width:392px; max-height:72vh;
  background: var(--lanx-panel); border:1px solid transparent; border-radius:18px;
  box-shadow: 0 24px 60px rgba(2,6,23,.25), 0 4px 12px rgba(2,6,23,.12);
  overflow:hidden; display:none; flex-direction:column;
}
.lanx-chat-panel.open{ display:flex; }
/* Anneau gradient (sans affecter l’intérieur) */
.lanx-chat-panel::before{
  content:""; position:absolute; inset:0; padding:1px; border-radius:18px; pointer-events:none;
  background: var(--lanx-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* Responsive */
@media (max-width:480px){
  .lanx-chat-panel{ width:calc(100vw - 20px); right:10px !important; bottom:80px !important; }
}

/* === En-tête : blanc + avatar gradient + libellé Julie === */
.lanx-header{
  background:#fff; color:var(--lanx-text);
  padding:12px 14px; display:flex; align-items:center; gap:12px;
  border-bottom: 1px solid var(--lanx-border);
}
.lanx-avatar{
  width:30px; height:30px; border-radius:9999px;
  background: var(--lanx-grad); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; box-shadow:0 4px 10px rgba(2,6,23,.18);
}
/* Remplace visuellement le nom par “ bot virtuel” */
.lanx-name{ position:relative; color:transparent !important; font-weight:800; letter-spacing:.1px; }
.lanx-name::after{
  content:"Conseiller(e) virtuel(le)";
  color:var(--lanx-text); font-weight:800;
}
.lanx-sub{ font-size:12px; color:#5e6b7e; }
.lanx-actions{ margin-left:auto; display:flex; gap:6px }
.lanx-hdr-btn{
  width:32px; height:32px; border-radius:8px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff; color:var(--lanx-text);
  display:flex; align-items:center; justify-content:center;
}

/* === Zone messages === */
.lanx-messages{
  flex:1; background: var(--lanx-surface);
  padding:12px; overflow-y:auto; scrollbar-gutter: stable;
}

/* Bulles messages */
.msg{ margin:8px 0; max-width:92%; border-radius:10px; border:1px solid var(--lanx-border); }
.msg__inner{ padding:10px 12px; font-size:14px; line-height:1.48; color:var(--lanx-text); }
.msg.bot{  background:#fff;  margin-right:auto; }
.msg.user{ background:#fff7f4; margin-left:auto; border-color:#ffd0e1; color:#7a294f; }

/* === Cartes / CTA === */
.lanx-card{ background:#fff; border:1px solid var(--lanx-border); border-radius:10px; padding:12px; }
.lanx-card__title{ font-weight:700; color:var(--lanx-text); }
.lanx-card__desc{  color:var(--lanx-muted); margin-top:4px; }
.lanx-card__list{  margin:8px 0 0; padding-left:18px; color:var(--lanx-muted); }
.lanx-card__list li{ margin:4px 0; }
.lanx-card__actions{ margin-top:10px; display:flex; flex-wrap:wrap; gap:10px; }

.lanx-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; min-height:44px; min-width:140px;
  border:1px solid #ccd3dd; border-radius:10px;
  font-weight:600; font-size:14px; line-height:1; text-decoration:none;
  background:#fff; color:var(--lanx-text);
}
.lanx-btn:hover, .lanx-btn:focus{ outline:none; background:#f4f6f9; }
.lanx-btn--primary{
  background: var(--lanx-grad); color:#fff; border:0;
  box-shadow: 0 6px 16px rgba(255, 62, 134, .25);
}
.lanx-btn--primary:hover, .lanx-btn--primary:focus{ filter:brightness(.97); }

.lanx-small{ color:#7a8698; font-size:12px; margin-top:6px; }
@media (max-width:480px){
  .lanx-card__actions .lanx-btn{ flex:1 1 100%; min-width:0; }
}

/* === Quickbar (masquée) === */
.lanx-quickbar{
  display:none !important; visibility:hidden !important;
  height:0 !important; padding:0 !important; margin:0 !important; border:0 !important;
}

/* === Formulaire === */
.lanx-form{
  border-top:1px solid var(--lanx-border);
  background:#fff; padding:8px; display:flex; gap:8px;
}
.lanx-form input{
  flex:1; border:1px solid #d6dde7; background:#fff; color:var(--lanx-text);
  border-radius:10px; padding:10px 12px; font-size:14px; outline:none;
}
.lanx-form input:focus{
  border-color:#d1d5db; box-shadow:0 0 0 3px rgba(106,53,255,.15);
}
.lanx-send{
  border:0; border-radius:10px; cursor:pointer; color:#fff;
  background: var(--lanx-grad);
  padding:10px 12px; font-weight:700; font-size:14px;
  box-shadow:0 6px 16px rgba(106,53,255,.25);
}

/* === Indicateur “écrit…” === */
.lanx-typing{
  background:#fff; border-top:1px solid var(--lanx-border);
  padding:6px 10px; display:flex; align-items:center; gap:4px;
}
.lanx-typing[hidden]{ display:none !important; }
.lanx-typing .dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--lanx-to); animation: lanx-bounce 1s infinite;
}
.lanx-typing .dot:nth-child(2){ animation-delay:.12s }
.lanx-typing .dot:nth-child(3){ animation-delay:.24s }
@keyframes lanx-bounce{ 0%,80%,100%{ transform:translateY(0); opacity:.5 } 40%{ transform:translateY(-3px); opacity:1 } }

/* === Mode sombre (conserve le gradient) === */
@media (prefers-color-scheme: dark){
  :root{
    --lanx-text:#e6eaf1; --lanx-sub:#9aa4b2; --lanx-muted:#cbd5e1;
    --lanx-border:#22304a; --lanx-panel:#0b1220; --lanx-surface:#0a0f1a;
    --lanx-from:#6a35ff; --lanx-to:#ff3e86; --lanx-grad: linear-gradient(135deg, var(--lanx-from), var(--lanx-to));
  }
  .lanx-bubble{ box-shadow:0 12px 28px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.25); }
  .msg.bot{ background:#0b1220; border-color:#22304a; }
  .msg.user{ background:rgba(255,62,134,.14); color:#ffd3e6; border-color:#3b1230; }
  .lanx-form{ background:#0b1220; }
  .lanx-form input{ background:#0a0f1a; border-color:#22304a; color:#e6eaf1; }
}
/* === Chips (boutons rapides) === */
.lanx-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.lanx-chip{
  appearance:none;
  border:1px solid #ccd3dd;
  background:#fff;
  color:var(--lanx-text);
  padding:8px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  user-select:none;
}
.lanx-chip:hover{ background:#f4f6f9; }
.lanx-chip:focus{ outline:none; box-shadow:0 0 0 3px rgba(106,53,255,.15); }

.lanx-chip--primary{
  background:var(--lanx-grad);
  border:0;
  color:#fff;
  box-shadow: 0 6px 16px rgba(255, 62, 134, .20);
}
.lanx-chip--primary:hover{ filter:brightness(.97); }