/* AFO chatbot-widget. Gebruikt de globale merk-variabelen uit main.css. */
#afo-chat{
  --cb-primary: var(--primary, #D8261E);
  --cb-ink: var(--secondary, #2f2d31);
  position: fixed; right: 20px; bottom: 20px; z-index: 1200;
  font-family: var(--font-body, system-ui, sans-serif);
}
@media (max-width: 640px){
  /* boven de mobiele actiebalk blijven */
  #afo-chat{ right: 14px; bottom: 78px; }
}

/* Launcher */
.afo-chat-launcher{
  width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--cb-primary); color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--shadow, 0 16px 40px rgba(31,29,33,.18));
  transition: transform .18s ease, box-shadow .18s ease;
}
.afo-chat-launcher:hover{ transform: translateY(-2px); }
.afo-chat-launcher svg{ width: 27px; height: 27px; }
.afo-chat-launcher .ic-close{ display: none; }
#afo-chat.is-open .afo-chat-launcher .ic-chat{ display: none; }
#afo-chat.is-open .afo-chat-launcher .ic-close{ display: block; }

/* Paneel — standaard VERBORGEN; alleen zichtbaar als #afo-chat .is-open heeft. */
.afo-chat-panel{
  position: absolute; right: 0; bottom: 74px;
  width: 360px; max-width: calc(100vw - 28px);
  height: 520px; max-height: calc(100vh - 120px);
  background: #fff; border-radius: 18px; overflow: hidden;
  display: none; flex-direction: column;
  box-shadow: var(--shadow-lg, 0 30px 70px rgba(31,29,33,.22));
  border: 1px solid var(--line, #e8e6e6);
  transform-origin: bottom right;
}
#afo-chat.is-open .afo-chat-panel{
  display: flex;
  animation: afo-chat-in .18s ease;
}
@keyframes afo-chat-in{ from{ opacity:0; transform: translateY(10px) scale(.98);} to{opacity:1;} }
@media (max-width: 640px){
  .afo-chat-panel{ height: 70vh; bottom: 72px; }
}

.afo-chat-head{
  background: var(--cb-ink); color: #fff;
  padding: 13px 14px; display: flex; align-items: center; justify-content: space-between;
}
.afo-chat-id{ display: flex; align-items: center; gap: 8px; line-height: 1.1; }
.afo-chat-id strong{ font-size: 15px; }
.afo-chat-id small{ opacity: .7; font-size: 12px; margin-left: 2px; }
.afo-chat-dot{ width: 9px; height: 9px; border-radius: 50%; background: #36d07f; box-shadow: 0 0 0 3px rgba(54,208,127,.25); }
.afo-chat-min{ background: none; border: 0; color: #fff; cursor: pointer; opacity: .8; padding: 4px; }
.afo-chat-min:hover{ opacity: 1; }
.afo-chat-min svg{ width: 20px; height: 20px; }

/* Log */
.afo-chat-log{
  flex: 1; overflow-y: auto; padding: 16px 14px;
  background: var(--bg-tint, #faf9f8);
  display: flex; flex-direction: column; gap: 10px;
}
.afo-msg{ max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.afo-msg a{ color: inherit; text-decoration: underline; }
.afo-msg-bot{ align-self: flex-start; background: #fff; border: 1px solid var(--line, #e8e6e6); border-bottom-left-radius: 4px; color: var(--text, #26242a); }
.afo-msg-user{ align-self: flex-end; background: var(--cb-primary); color: #fff; border-bottom-right-radius: 4px; }

/* Typing-indicator */
.afo-typing{ display: inline-flex; gap: 4px; align-items: center; }
.afo-typing span{ width: 7px; height: 7px; border-radius: 50%; background: var(--muted, #9b98a1); animation: afo-blink 1.2s infinite both; }
.afo-typing span:nth-child(2){ animation-delay: .2s; }
.afo-typing span:nth-child(3){ animation-delay: .4s; }
@keyframes afo-blink{ 0%,60%,100%{opacity:.25;} 30%{opacity:1;} }

/* Snelle suggesties + leadformulier */
.afo-chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.afo-chip{ border: 1px solid var(--cb-primary); background: #fff; color: var(--cb-primary); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.afo-chip:hover{ background: color-mix(in srgb, var(--cb-primary) 10%, #fff); }
.afo-lead{ background:#fff; border:1px solid var(--line,#e8e6e6); border-radius:14px; padding:12px; display:flex; flex-direction:column; gap:8px; align-self:stretch; }
.afo-lead strong{ font-size: 14px; }
.afo-lead input{ border:1px solid var(--line,#e8e6e6); border-radius:9px; padding:9px 11px; font:inherit; font-size:14px; }
.afo-lead button{ background: var(--cb-primary); color:#fff; border:0; border-radius:9px; padding:10px; font:inherit; font-weight:600; cursor:pointer; }

/* Invoer */
.afo-chat-form{ display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line, #e8e6e6); background: #fff; align-items: flex-end; }
.afo-chat-form textarea{
  flex: 1; resize: none; border: 1px solid var(--line, #e8e6e6); border-radius: 12px;
  padding: 10px 12px; font: inherit; font-size: 14.5px; max-height: 110px; line-height: 1.4;
}
.afo-chat-form textarea:focus{ outline: none; border-color: var(--cb-primary); box-shadow: var(--ring, 0 0 0 4px rgba(216,38,30,.18)); }
.afo-chat-form button{ background: var(--cb-primary); color: #fff; border: 0; width: 42px; height: 42px; border-radius: 12px; cursor: pointer; display: grid; place-items: center; flex: none; }
.afo-chat-form button:disabled{ opacity: .5; cursor: default; }
.afo-chat-form button svg{ width: 20px; height: 20px; }

.afo-chat-consent{ margin: 0; padding: 8px 12px 11px; font-size: 11.5px; color: var(--muted, #6f6c75); background: #fff; line-height: 1.4; }
.afo-chat-consent a{ color: var(--cb-primary); }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }