/* ======================================================
   CHATBOT – THEME CLAIR #4eb217
   ====================================================== */

/* ---------- Variables ---------- */
:root{
  --cb-primary:#4eb217;
  --cb-primary-dark:#3f9713;
  --cb-primary-soft:rgba(78,178,23,.15);

  --cb-bg:#f9fafb;
  --cb-panel:#ffffff;
  --cb-border:#e5e7eb;

  --cb-text:#111827;
  --cb-muted:#6b7280;
}

/* ---------- Bouton flottant ---------- */
#cb-btn{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;

  width:56px;
  height:56px;
  border-radius:999px;
  border:0;
  cursor:pointer;

  background:linear-gradient(135deg,#4eb217,#7ce43a);
  color:#ffffff;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:0 14px 30px rgba(0,0,0,.25);
  transition:transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
#cb-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
#cb-btn:active{
  transform:scale(.96);
}
#cb-btn svg{
  stroke:#ffffff;
}

/* ---------- Badge ---------- */
#cb-badge{
  position:fixed;
  right:14px;
  bottom:78px;
  z-index:9998;

  background:#ffffff;
  border:1px solid rgba(78,178,23,.35);
  color:#065f46;

  font-size:12px;
  padding:6px 10px;
  border-radius:999px;

  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

/* ---------- Panel ---------- */
#cb-panel{
  position:fixed;
  right:-420px;
  bottom:90px;
  z-index:9999;

  width:360px;
  max-width:calc(100vw - 36px);
  height:420px;
  max-height:70vh;

  background:var(--cb-panel);
  color:var(--cb-text);

  border-radius:16px;
  border:1px solid var(--cb-border);

  box-shadow:0 16px 40px rgba(0,0,0,.25);
  overflow:hidden;
  transition:right .25s ease;
  padding: 10px 0 5px;
}
#cb-panel.open{
  right:18px;
}

/* ---------- Header ---------- */
.cb-head{
  padding:0 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;

  background:#ffffff;
  border-bottom:1px solid var(--cb-border);
}
.cb-title{
  font-weight:700;
  font-size:14px;
  color:var(--cb-text);
}
.cb-meta{
  font-size:12px;
  color:var(--cb-muted);
  margin-top:-2px;
}
.cb-close{
  background:transparent;
  border:0;
  cursor:pointer;
  font-size:18px;
  color:var(--cb-muted);
}
.cb-close:hover{
  color:var(--cb-primary);
}
#cb-sound{
  background:transparent;
  border:0;
  cursor:pointer;
  font-size:16px;
  color:var(--cb-muted);
}
#cb-sound:hover{
  color:var(--cb-primary);
}

/* ---------- Messages ---------- */
.cb-msgs {
    height: calc(100% - 130px);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: auto;
    background: var(--cb-bg);
}

/* scrollbar */
.cb-msgs::-webkit-scrollbar{
  width:6px;
}
.cb-msgs::-webkit-scrollbar-thumb{
  background:rgba(78,178,23,.35);
  border-radius:999px;
}
.cb-msgs::-webkit-scrollbar-track{
  background:transparent;
}

/* ---------- Message ---------- */
.cb-msg{
  max-width:85%;
  padding:10px 12px;
  border-radius:12px;
  line-height:1.4;
  font-size:14px;
}

/* bot */
.cb-bot{
  align-self:flex-start;
  background:#f3f4f6;
  border:1px solid var(--cb-border);
  color:var(--cb-text);
}

/* user */
.cb-me{
  align-self:flex-end;
  background:var(--cb-primary-soft);
  border:1px solid rgba(78,178,23,.35);
  color:#064e3b;
}

/* ---------- Typing loader ---------- */
.cb-typing{
  display:inline-flex;
  gap:6px;
  align-items:center;
}
.cb-dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--cb-primary);
  animation:cb-bounce 1s infinite ease-in-out;
}
.cb-dot:nth-child(2){ animation-delay:.3s; }
.cb-dot:nth-child(3){ animation-delay:.30s; }

@keyframes cb-bounce{
  0%,80%,100%{ transform:translateY(0); opacity:.4; }
  40%{ transform:translateY(-4px); opacity:1; }
}

/* ---------- Input bar ---------- */
.cb-bar{
  display:flex;
  gap:10px;
  padding:10px 12px;
  border-top:1px solid var(--cb-border);
  background:#ffffff;
}
.cb-input{
  flex:1;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--cb-border);
  background:#ffffff;
  color:var(--cb-text);
  outline:none;
  font-size:14px;
}
.cb-input::placeholder{
  color:var(--cb-muted);
}
.cb-input:focus{
  border-color:var(--cb-primary);
  box-shadow:0 0 0 2px var(--cb-primary-soft);
}

/* bouton envoyer */
.cb-send{
  padding:10px 14px;
  border-radius:10px;
  border:0;
  cursor:pointer;

  background:var(--cb-primary);
  color:#ffffff;
  font-weight:700;
  font-size:14px;
}
.cb-send:hover{
  background:var(--cb-primary-dark);
}

/* ---------- Mobile overlay ---------- */
/* ---------- Mobile (75vh / 85vw) ---------- */
@media (max-width:520px){

  #cb-panel{
    right:-110%;
    left:auto;
    bottom:80px;

    width:85vw;
    height:75vh;
    max-height:75vh;

    border-radius:16px;
    transition:right .25s ease;
  }

  #cb-panel.open{
    right:7.5vw; /* centré visuellement */
  }

  /* bouton légèrement plus petit */
  #cb-btn{
    width:52px;
    height:52px;
  }

  /* messages scroll bien */
  .cb-msgs{
    height:calc(100% - 120px);
  }
}