/* Shift & Lift – chat-assistent */
/* grotere zwevende knop */
.slc-knop span{display:flex; flex-direction:column; align-items:flex-start; text-align:left}
.slc-knop b{font-size:18px}
.slc-knop small{font:500 12.5px/1.2 var(--body,sans-serif); text-transform:none; letter-spacing:0; color:#d9c9ba; margin-top:3px}
.slc-knop svg{width:28px !important; height:28px !important}
@media (max-width:760px){ .slc-heeft-dock .slc-knop{display:none} }

/* knop onder de grote oranje WhatsApp-knop */
.slc-cta{
  display:flex; align-items:center; gap:14px; width:100%; max-width:520px; margin-top:12px;
  background:#131c31; color:#f8e8d8; border:2px solid #f26a00; border-radius:var(--r,4px);
  padding:14px 20px; cursor:pointer; text-align:left;
}
.slc-cta:hover{background:#1e293b}
.slc-cta svg{width:34px; height:34px; color:#f26a00; flex:none}
.slc-cta span{display:flex; flex-direction:column}
.slc-cta b{font:700 22px/1.05 var(--display,'Barlow Condensed',sans-serif); text-transform:uppercase; letter-spacing:.02em}
.slc-cta small{font:500 14px/1.3 var(--body,sans-serif); color:#bdb2a8; margin-top:4px}

/* chatknop in de mobiele balk */
.slc-dock{
  flex:none; width:66px; min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:#131c31; border:1px solid #f26a00; border-radius:var(--r,4px); color:#f8e8d8; padding:6px 4px; cursor:pointer;
}
.slc-dock svg{width:22px; height:22px; color:#f26a00}
.slc-dock b{font:700 13px/1 var(--display,sans-serif); text-transform:uppercase; letter-spacing:.02em}

/* teaser-ballon */
.slc-teaser{
  position:fixed; right:16px; bottom:calc(96px + env(safe-area-inset-bottom)); z-index:76; max-width:280px;
  background:#fff; color:#172554; border:0; border-radius:14px 14px 4px 14px; padding:12px 14px; text-align:left; cursor:pointer;
  font:500 15px/1.4 var(--body,sans-serif); box-shadow:0 10px 30px rgba(15,23,42,.3); animation:slcIn .35s ease-out;
}
.slc-teaser span{color:#f26a00; font-weight:700}
@media (max-width:760px){ .slc-heeft-dock .slc-teaser{bottom:calc(92px + env(safe-area-inset-bottom))} }
@keyframes slcIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .slc-teaser{animation:none} }

.slc-knop{
  position:fixed; right:16px; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:75;
  display:flex; align-items:center; gap:8px;
  background:var(--ink-2,#131c31); color:var(--cream,#f8e8d8);
  border:2px solid var(--orange,#f26a00); border-radius:999px;
  padding:10px 16px 10px 12px; cursor:pointer;
  font:700 15px/1 var(--display,'Barlow Condensed',sans-serif); text-transform:uppercase; letter-spacing:.03em;
  box-shadow:0 8px 24px rgba(15,23,42,.35);
}
.slc-knop:hover{background:#1e293b}
.slc-knop svg{width:20px; height:20px; color:var(--orange,#f26a00)}
body:has(.dock.show) .slc-knop{bottom:calc(88px + env(safe-area-inset-bottom))}

.slc-paneel{
  position:fixed; right:16px; bottom:16px; z-index:210;
  width:min(390px, calc(100vw - 32px)); height:min(600px, calc(100vh - 32px));
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; color:#172554; border-radius:10px;
  box-shadow:0 20px 60px rgba(15,23,42,.45);
  font:16px/1.45 var(--body,'Barlow',system-ui,sans-serif);
}
.slc-paneel[hidden]{display:none}
@media (max-width:560px){
  .slc-paneel{inset:0; width:auto; height:auto; border-radius:0}
}
.slc-kop{display:flex; align-items:center; gap:10px; padding:12px 14px; background:#0f172a; color:#f8e8d8}
.slc-kop b{flex:1; font:700 18px/1.1 var(--display,'Barlow Condensed',sans-serif); text-transform:uppercase; letter-spacing:.02em}
.slc-kop small{display:block; font:400 12.5px/1.3 var(--body,sans-serif); color:#a3a3a0; text-transform:none; letter-spacing:0}
.slc-kop button{background:none; border:0; color:#f8e8d8; font-size:26px; line-height:1; cursor:pointer; padding:4px 8px}
.slc-log{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; background:#f3f3f2}
.slc-b{max-width:85%; padding:10px 12px; border-radius:12px; white-space:pre-wrap; word-wrap:break-word}
.slc-b.u{align-self:flex-end; background:#f26a00; color:#fff; border-bottom-right-radius:4px}
.slc-b.a{align-self:flex-start; background:#fff; border:1px solid #e0e0dd; border-bottom-left-radius:4px}
.slc-b.a.bezig{color:#5d5d5a; font-style:italic}
.slc-b.fout{background:#fff3ec; border-color:#f26a00}
.slc-wa{align-self:flex-start; display:inline-flex; align-items:center; gap:8px; background:#25d366; color:#fff; text-decoration:none;
  font-weight:700; padding:10px 14px; border-radius:8px}
.slc-invoer{display:flex; gap:8px; padding:10px; border-top:1px solid #e0e0dd; background:#fff}
.slc-invoer textarea{flex:1; resize:none; border:1px solid #cfcfcb; border-radius:8px; padding:10px; font:inherit; min-height:44px; max-height:120px}
.slc-invoer button{background:#f26a00; color:#fff; border:0; border-radius:8px; padding:0 16px; font-weight:700; cursor:pointer}
.slc-invoer button:disabled{opacity:.5; cursor:default}
.slc-noot{font-size:11.5px; color:#8a8783; padding:0 12px 8px; background:#fff}

/* hoofdknop na het afronden: de aanvraag gaat pas naar Hafid als de klant hierop tikt */
.slc-wa.slc-wa-groot{display:block; align-self:stretch; text-align:center; background:#1faa53; color:#fff; font-weight:800; font-size:16px; padding:14px 16px; border-radius:10px; text-decoration:none}
.slc-wa.slc-wa-groot:hover{background:#188f45}

.slc-instructie{align-self:stretch; font-size:14px; font-weight:700; color:#172554; background:#fff3e8; border:1.5px solid #f26a00; border-radius:10px; padding:10px 12px}