:root{
  --ilse-primary:#111;
  --ilse-header-bg:#111;
  --ilse-header-text:#fff;
  --ilse-body-bg:#f7f7f8;
  --ilse-text:#111;
  --ilse-btn-bg:#111;
  --ilse-btn-text:#fff;
  --ilse-radius:16px;
  --ilse-width:380px;
  --ilse-max-height:70vh;
  --ilse-offset:16px;
  --ilse-shadow:0 18px 48px rgba(0,0,0,.35);
  --ilse-form-pad:10px;
  --ilse-input-pad:10px;
}

/* FAB / launcher */
.ilse-fab{
  position: fixed;
  right: var(--ilse-offset, 16px);
  bottom: var(--ilse-offset, 16px);
  background: var(--ilse-btn-bg, #111);
  color: var(--ilse-btn-text, #fff);
  border:none;
  padding:12px 16px;
  border-radius:999px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  z-index: 2147483640;
  display:inline-flex; align-items:center; gap:8px;
}
.ilse-fab.only-icon{ padding:10px; border-radius:50%; }

/* Icoon (zowel in header als FAB) */
.ilse-icon{ display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center; }
.ilse-icon svg{ width:100%; height:100%; fill: currentColor; display:block; }

/* Overlay-paneel */
.ilse-panel{
  position: fixed;
  right: var(--ilse-offset, 16px);
  bottom: var(--ilse-offset, 16px);
  width: var(--ilse-width, 380px);
  max-width: calc(100% - 32px);
  background:#fff;
  border-radius: var(--ilse-radius, 16px);
  box-shadow: var(--ilse-shadow, 0 18px 48px rgba(0,0,0,.35));
  overflow:hidden;
  opacity:0; pointer-events:none; transform: translateY(10px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 2147483641;
  display:flex; flex-direction:column;
  max-height: var(--ilse-max-height, 70vh);
}
.ilse-panel.open{ opacity:1; pointer-events:auto; transform: translateY(0) scale(1); }

/* Header / body / form */
.ilse-head{
  background: var(--ilse-header-bg, #111);
  color: var(--ilse-header-text, #fff);
  padding:10px 12px;
  font-weight:700; display:flex; align-items:center; justify-content:space-between;
}
.ilse-title{ display:flex; align-items:center; gap:8px; }
.ilse-close{ cursor:pointer; opacity:.85; }
.ilse-close:hover{ opacity:1; }

.ilse-body{
  padding:12px; overflow:auto; flex:1;
  background: var(--ilse-body-bg, #f7f7f8);
  color: var(--ilse-text, #111);
}
.ilse-form{
  display:flex; gap:8px;
  padding: var(--ilse-form-pad, 10px);
  border-top:1px solid #eee; background:#fff;
}
.ilse-form input{
  flex:1; border:1px solid #ddd; border-radius:10px;
  padding: var(--ilse-input-pad, 10px); outline:none;
  color: var(--ilse-text, #111);
}
.ilse-form input:focus{ border-color: var(--ilse-primary, #111); }
.ilse-form button{
  background: var(--ilse-btn-bg, #111);
  color: var(--ilse-btn-text, #fff);
  border:none; border-radius:10px; padding:10px 14px; cursor:pointer;
}

/* Bubbels */
.ilse-msg{ margin-bottom:10px; display:flex; }
.ilse-msg.me{ justify-content:flex-end; }
.ilse-msg .bubble{
  max-width: 85%; padding:10px 12px; border-radius:12px;
  background:#fff; border:1px solid #eee;
}
.ilse-msg.me .bubble{ background:#bcdd59; border-color:; }
.ilse-typing{ font-size:12px; color:#ffffff; padding:4px 2px; }

/* CTA */
.ilse-cta{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }
.ilse-btn{
  display:inline-block; text-decoration:none;
  border:1px solid var(--ilse-primary, #111);
  padding:8px 10px; border-radius:10px; font-weight:600;
  color: var(--ilse-primary, #111);
}
.ilse-btn:hover{ background: var(--ilse-primary, #111); color:#fff; }

/* Mobiel */
@media (max-width: 640px){
  .ilse-panel{
    right: 10px; left: 10px; bottom: 10px;
    width: auto; max-width: none; height: 75vh; max-height: 75vh;
  }
}

/* meer ruimte in het invoerveld */
.ilse-panel .ilse-form input[type="text"]{
  padding: 16px 16px !important;   /* ↑↓  ←→ */
  line-height: 1.4 !important;     /* voorkomt dat tekst tegen de bovenrand plakt */
  height: auto !important;
  box-sizing: border-box;
}

/* wat extra lucht rondom het formulier zelf */
.ilse-panel .ilse-form{
  padding: 14px !important;
}