@charset "UTF-8";

/* Bulle */
#vm-ai-chat-launcher{
  position:fixed;
  right:18px;
  bottom:18px;
  width:52px;
  height:52px;
  border-radius:50%;
  background:#4da5a6;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  z-index:9999;
}
#vm-ai-chat-window{
  position:fixed;
  right:20px;
  bottom:80px;
  width:380px;
  max-height:80vh;
  background:#fff;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  display:none;
  flex-direction:column;
  overflow:hidden;
  z-index:999999; /* << plus haut que tout le reste */
  font-size:14px;
}

#vm-ai-chat-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.3);
  display:none;
  z-index:999998;
}


.vm-ai-chat-header{
  background:#4da5a6;
  color:#fff;
  padding:10px 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.vm-ai-chat-header button{
  background:transparent;
  border:none;
  color:#fff;
  font-size:18px;
  cursor:pointer;
}

#vm-ai-chat-messages{
  padding:10px;
  overflow-y:auto;
  max-height:50vh;
}

.vm-ai-msg{
  margin-bottom:8px;
  padding:8px 10px;
  border-radius:8px;
  line-height:1.4;
}

.vm-ai-msg-bot{
  background:#f3f5f7;
  align-self:flex-start;
}

.vm-ai-msg-user{
  background:#e1f5f5;
  align-self:flex-end;
  text-align:right;
}

#vm-ai-chat-form{
  display:flex;
  border-top:1px solid #eee;
}

#vm-ai-chat-input{
  flex:1;
  border:none;
  padding:8px;
  font-size:14px;
}

#vm-ai-chat-input:focus{
  outline:none;
}

#vm-ai-chat-form button{
  border:none;
  background:#4da5a6;
  color:#fff;
  padding:0 14px;
  font-size:14px;
  cursor:pointer;
}

/* Crédit Kaledo */
.vm-ai-chat-credit{
  padding:6px 10px 8px;
  border-top:1px solid #eee;
  background:#fafafa;
  font-size:11px;
  color:#777;
}

.vm-ai-chat-credit a{
  color:#4da5a6;
  text-decoration:none;
}

.vm-ai-chat-credit a:hover{
  text-decoration:underline;
}


/* Variante fenêtre centrée (quand on ajoute la classe .vm-center via JS) */
#vm-ai-chat-window.vm-center{
  right:auto;
  bottom:auto;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:min(520px, 96vw);
  max-height:90vh;
}

/* Mobile : ajustements */
@media (max-width:700px){
  #vm-ai-chat-window{
    right:0;
    left:0;
    bottom:0;
    top:auto;
    width:100%;
    max-height:80vh;
    border-radius:12px 12px 0 0;
  }
  #vm-ai-chat-window.vm-center{
    right:0;
    left:0;
    top:0;
    bottom:0;
    transform:none;
    width:100%;
    height:100vh;
    max-height:none;
    border-radius:0;
  }
}

/* Bloc d’appel inline (si tu l’utilises sur une page produit) */
.vm-ai-inline-help{
  margin:0;
  padding:0; /* adapte si tu veux la version encadrée */
}

.vm-ai-inline-help h2{
  font-size:18px;
  margin:0 0 4px;
}

.vm-ai-inline-help p{
  margin:0 0 10px;
  font-size:14px;
}

.vm-ai-chat-cta{
  display:inline-block;
  padding:8px 16px;
  border-radius:20px;
  border:none;
  background:#4da5a6;
  color:#fff;
  font-size:14px;
  cursor:pointer;
}

.vm-ai-chat-cta:hover{
  opacity:0.9;
}
.vm-ai-chat-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;          /* espace entre icône et texte */
  padding: 0.6rem 1.4rem;
}

.vm-ai-icon img {
  display: block;
  width: 30px;
  height: 30px;
}
.vm-ai-inline-help .vm-ai-cta-wrap {
  display: inline-flex;
  align-items: center;
  gap: 12px;                /* espace entre icône et bouton */
}

/* cerveau bleu – hauteur ~ bouton */
.vm-ai-icon {
  height: 46px;             /* ajuste à l’œil en fonction du bouton */
  width: auto;
  display: block;
}

/* bouton IA (si besoin de forcer l’alignement vertical) */
.vm-ai-chat-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.8rem;
  border-radius: 999px;
}