/* ============================================================
   Assistant Lionel Belinha — chatbot flottant
   ============================================================ */

.lb-chatbot{
  position:fixed;
  right:clamp(1rem, 3vw, 1.75rem);
  bottom:clamp(1rem, 3vw, 1.75rem);
  z-index:200;
  font-family:var(--body, 'Inter', sans-serif);
}

/* ---------- bouton flottant ---------- */
.lb-chat-toggle{
  width:3.6rem; height:3.6rem;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background:linear-gradient(135deg, var(--accent, #3d6bff), #22399c);
  color:#ffffff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(6,10,22,0.35), 0 0 0 1px rgba(238,241,251,0.08);
  transition:transform 0.2s ease, filter 0.2s ease;
  position:relative;
}
.lb-chat-toggle:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.lb-chat-toggle:focus-visible{ outline:2px solid var(--accent-2, #8fb4ff); outline-offset:3px; }
.lb-chat-icon{ width:1.5rem; height:1.5rem; position:absolute; transition:opacity 0.18s ease, transform 0.18s ease; }
.lb-chat-icon-open{ opacity:1; transform:scale(1) rotate(0deg); }
.lb-chat-icon-close{ opacity:0; transform:scale(0.6) rotate(-45deg); }
.lb-chatbot.lb-open .lb-chat-icon-open{ opacity:0; transform:scale(0.6) rotate(45deg); }
.lb-chatbot.lb-open .lb-chat-icon-close{ opacity:1; transform:scale(1) rotate(0deg); }

/* petite pastille pour attirer l'oeil, discrète */
.lb-chat-toggle::after{
  content:"";
  position:absolute; top:-2px; right:-2px;
  width:0.6rem; height:0.6rem; border-radius:50%;
  background:var(--accent-2, #8fb4ff);
  box-shadow:0 0 0 2px var(--navy-950, #060a16);
  animation:lb-pulse 2.4s ease-in-out infinite;
}
.lb-chatbot.lb-open .lb-chat-toggle::after{ display:none; }
@keyframes lb-pulse{
  0%, 100%{ opacity:1; }
  50%{ opacity:0.35; }
}

/* ---------- panneau du chat ---------- */
.lb-chat-panel{
  position:absolute;
  right:0; bottom:calc(100% + 0.9rem);
  width:min(22rem, calc(100vw - 2rem));
  height:min(32rem, calc(100vh - 7rem));
  height:min(32rem, calc(100dvh - 7rem));
  background:var(--navy-950, #060a16);
  border:1px solid var(--line-on-navy, rgba(238,241,251,0.14));
  border-radius:20px;
  box-shadow:0 24px 60px rgba(6,10,22,0.5);
  display:flex; flex-direction:column;
  overflow:hidden;
  opacity:0; visibility:hidden;
  transform:translateY(12px) scale(0.98);
  transform-origin:bottom right;
  transition:opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}
.lb-chatbot.lb-open .lb-chat-panel{
  opacity:1; visibility:visible;
  transform:translateY(0) scale(1);
  transition:opacity 0.22s ease, transform 0.22s ease;
}

.lb-chat-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.1rem;
  border-bottom:1px solid var(--line-on-navy, rgba(238,241,251,0.14));
  background:rgba(238,241,251,0.03);
  flex-shrink:0;
}
.lb-chat-header-info{ display:flex; align-items:center; gap:0.7rem; }
.lb-chat-mark{
  width:2.1rem; height:2.1rem; border-radius:7px; flex-shrink:0;
  background:linear-gradient(135deg, var(--accent, #3d6bff), var(--accent-2, #8fb4ff));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display, 'Space Grotesk', sans-serif); font-weight:700; font-size:0.9rem; color:var(--navy-950, #060a16);
}
.lb-chat-title{ font-family:var(--display, 'Space Grotesk', sans-serif); font-weight:600; font-size:0.95rem; color:var(--ice, #eef1fb); }
.lb-chat-subtitle{ font-size:0.75rem; color:var(--ice-dim, #aab3d6); margin-top:0.1rem; }
.lb-chat-close{
  background:none; border:none; cursor:pointer; color:var(--ice-dim, #aab3d6);
  display:flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; border-radius:8px; flex-shrink:0;
  transition:background 0.15s ease, color 0.15s ease;
}
.lb-chat-close:hover{ background:rgba(238,241,251,0.08); color:var(--ice, #eef1fb); }

.lb-chat-messages{
  flex:1; overflow-y:auto;
  padding:1.1rem;
  display:flex; flex-direction:column; gap:0.7rem;
}
.lb-chat-messages::-webkit-scrollbar{ width:6px; }
.lb-chat-messages::-webkit-scrollbar-thumb{ background:rgba(238,241,251,0.14); border-radius:10px; }

.lb-msg{ display:flex; }
.lb-msg-user{ justify-content:flex-end; }
.lb-msg-bot{ justify-content:flex-start; }
.lb-bubble{
  max-width:85%;
  padding:0.65rem 0.85rem;
  border-radius:14px;
  font-size:0.88rem; line-height:1.5;
}
.lb-msg-bot .lb-bubble{
  background:rgba(238,241,251,0.06);
  border:1px solid var(--line-on-navy, rgba(238,241,251,0.14));
  color:var(--ice, #eef1fb);
  border-bottom-left-radius:4px;
}
.lb-msg-user .lb-bubble{
  background:linear-gradient(120deg, var(--accent-2, #8fb4ff), var(--accent, #3d6bff));
  color:var(--navy-950, #060a16);
  font-weight:500;
  border-bottom-right-radius:4px;
}
.lb-chat-link{ color:var(--accent-2, #8fb4ff); text-decoration:underline; text-underline-offset:2px; }
.lb-msg-user .lb-chat-link{ color:var(--navy-950, #060a16); }

.lb-typing{ display:flex; align-items:center; gap:0.3rem; padding:0.85rem 0.9rem; }
.lb-typing span{
  width:6px; height:6px; border-radius:50%; background:var(--ice-dim, #aab3d6);
  animation:lb-typing-bounce 1.1s infinite ease-in-out;
}
.lb-typing span:nth-child(2){ animation-delay:0.15s; }
.lb-typing span:nth-child(3){ animation-delay:0.3s; }
@keyframes lb-typing-bounce{
  0%, 60%, 100%{ transform:translateY(0); opacity:0.5; }
  30%{ transform:translateY(-3px); opacity:1; }
}

.lb-chat-quick{
  display:flex; flex-wrap:wrap; gap:0.5rem;
  padding:0 1.1rem 0.9rem;
  flex-shrink:0;
}
.lb-chip{
  font-family:var(--body, 'Inter', sans-serif); font-size:0.78rem; font-weight:500;
  color:var(--ice, #eef1fb);
  background:rgba(238,241,251,0.06);
  border:1px solid var(--line-on-navy, rgba(238,241,251,0.14));
  border-radius:100px; padding:0.4rem 0.8rem; cursor:pointer;
  transition:background 0.15s ease, border-color 0.15s ease;
}
.lb-chip:hover{ background:rgba(143,180,255,0.14); border-color:var(--accent-2, #8fb4ff); }

.lb-chat-form{
  display:flex; align-items:center; gap:0.6rem;
  padding:0.9rem 1.1rem;
  border-top:1px solid var(--line-on-navy, rgba(238,241,251,0.14));
  flex-shrink:0;
}
.lb-chat-form input{
  flex:1; min-width:0;
  /* 16px is the threshold below which iOS/Android auto-zoom the page on
     focus — anything smaller here was what caused the unwanted zoom when
     typing in the chatbot on mobile. */
  font-family:var(--body, 'Inter', sans-serif); font-size:16px; color:var(--ice, #eef1fb);
  background:rgba(238,241,251,0.06); border:1px solid var(--line-on-navy, rgba(238,241,251,0.14));
  border-radius:10px; padding:0.6rem 0.8rem; outline:none;
}
.lb-chat-form input:focus{ border-color:var(--accent-2, #8fb4ff); }
.lb-chat-form input::placeholder{ color:var(--ice-dim, #aab3d6); }
.lb-chat-form button{
  width:2.2rem; height:2.2rem; flex-shrink:0; border-radius:8px; border:none; cursor:pointer;
  background:linear-gradient(120deg, var(--accent-2, #8fb4ff), var(--accent, #3d6bff));
  color:var(--navy-950, #060a16);
  display:flex; align-items:center; justify-content:center;
  transition:filter 0.15s ease;
}
.lb-chat-form button:hover{ filter:brightness(1.08); }

@media (max-width:480px){
  .lb-chat-panel{
    width:calc(100vw - 1.5rem);
    height:min(30rem, calc(100vh - 6.5rem));
    height:min(30rem, calc(100dvh - 6.5rem));
    right:-0.15rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .lb-chat-toggle::after{ animation:none; }
  .lb-typing span{ animation:none; }
}