/* JBN AI-assistent — huisstijl JBN Security (rood #c00000, charcoal #141414, wit, Lato).
   Alles namespaced onder #jbnai-root / .jbnai-* zodat het niet botst met Journal 3. */
#jbnai-root{
  --jbnai-primary:#c00000; --jbnai-primary-dark:#990000;
  --jbnai-ink:#141414; --jbnai-ink-2:#1f1f1f;
  --jbnai-surface:#ffffff; --jbnai-surface-2:#f2f3f5; --jbnai-surface-3:#e7e9ec;
  --jbnai-line:#e4e6ea; --jbnai-line-strong:#d6d9de;
  --jbnai-fg:#141414; --jbnai-muted:#6a6f78; --jbnai-faint:#9aa0a8;
  --jbnai-wa:#25d366; --jbnai-radius:14px;
  --jbnai-font:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
#jbnai-root, #jbnai-root *{ box-sizing:border-box; }
#jbnai-root button{ font-family:var(--jbnai-font); cursor:pointer; }

/* ---------- Launcher ---------- */
#jbnai-launcher{
  position:fixed; z-index:2147483000; right:24px; bottom:24px;
  display:flex; align-items:center; gap:11px;
  background:var(--jbnai-primary); color:#fff; border:none; border-radius:999px;
  padding:13px 20px 13px 14px; font-family:var(--jbnai-font); font-weight:700; font-size:14.5px;
  box-shadow:0 12px 30px rgba(192,0,0,.32), 0 2px 8px rgba(0,0,0,.18);
  transition:transform .18s, box-shadow .18s, background .18s;
}
#jbnai-launcher:hover{ transform:translateY(-2px); background:var(--jbnai-primary-dark); box-shadow:0 18px 40px rgba(192,0,0,.42); }
#jbnai-launcher .jbnai-ic{ width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.18); display:grid; place-items:center; font-size:15px; color:#fff; }
#jbnai-launcher.jbnai-hidden{ transform:scale(.4); opacity:0; pointer-events:none; }

/* ---------- Dim (mobile) ---------- */
#jbnai-dim{ position:fixed; inset:0; z-index:2147482000; background:rgba(10,10,10,.5); opacity:0; pointer-events:none; transition:opacity .3s; }
#jbnai-dim.jbnai-show{ opacity:1; pointer-events:auto; }

/* ---------- Panel ---------- */
#jbnai-panel{
  position:fixed; z-index:2147483001; top:0; bottom:0; right:0;
  width:430px; max-width:100%; display:flex; flex-direction:column;
  background:var(--jbnai-surface); border-left:1px solid var(--jbnai-line);
  box-shadow:-24px 0 60px rgba(10,10,10,.25);
  font-family:var(--jbnai-font); color:var(--jbnai-fg); font-size:15px; line-height:1.5;
  transform:translateX(104%); transition:transform .34s cubic-bezier(.22,.8,.3,1);
}
#jbnai-panel.jbnai-open{ transform:none; }
#jbnai-panel *{ font-family:var(--jbnai-font); }

/* header */
#jbnai-panel .jbnai-head{ position:relative; overflow:hidden; color:#fff; flex:none;
  background:linear-gradient(145deg,#1d1d1d,#000); }
#jbnai-panel .jbnai-glow{ position:absolute; top:-40px; right:-30px; width:190px; height:190px; border-radius:50%;
  background:radial-gradient(circle, rgba(192,0,0,.65), transparent 66%); filter:blur(6px); }
#jbnai-panel .jbnai-grid{ position:absolute; inset:0; opacity:.4;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 24px);
  -webkit-mask-image:radial-gradient(120% 100% at 80% 0%,#000 35%,transparent 80%);
          mask-image:radial-gradient(120% 100% at 80% 0%,#000 35%,transparent 80%); }
#jbnai-panel .jbnai-hinner{ position:relative; padding:18px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
#jbnai-panel .jbnai-hl{ display:flex; align-items:center; gap:12px; }
#jbnai-panel .jbnai-badge{ width:42px; height:42px; border-radius:11px; background:var(--jbnai-primary);
  display:grid; place-items:center; font-weight:800; font-size:16px; letter-spacing:1px; color:#fff; }
#jbnai-panel .jbnai-ttl{ font-weight:800; font-size:18px; line-height:1.1; }
#jbnai-panel .jbnai-st{ display:flex; align-items:center; gap:6px; font-size:12px; color:rgba(255,255,255,.72); margin-top:3px; }
#jbnai-panel .jbnai-dot{ width:7px; height:7px; border-radius:50%; background:#34d07f; box-shadow:0 0 0 3px rgba(52,208,127,.25); }
#jbnai-panel .jbnai-min{ flex:none; width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.08); color:#fff; font-size:17px; display:grid; place-items:center; }
#jbnai-panel .jbnai-min:hover{ background:rgba(255,255,255,.18); }

/* conversation */
#jbnai-panel .jbnai-convo{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:18px 16px 8px;
  display:flex; flex-direction:column; gap:14px; }
#jbnai-panel .jbnai-msg{ display:flex; gap:9px; max-width:100%; }
#jbnai-panel .jbnai-av{ flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:13px; margin-top:2px; }
#jbnai-panel .jbnai-bot .jbnai-av{ background:var(--jbnai-ink); color:#fff; }
#jbnai-panel .jbnai-bubble{ padding:11px 14px; border-radius:14px; max-width:84%; white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere; }
#jbnai-panel .jbnai-bot .jbnai-bubble{ background:var(--jbnai-surface-2); border:1px solid var(--jbnai-line); border-top-left-radius:4px; color:var(--jbnai-fg); }
#jbnai-panel .jbnai-user{ flex-direction:row-reverse; }
#jbnai-panel .jbnai-user .jbnai-bubble{ background:var(--jbnai-ink); color:#fff; border-top-right-radius:4px; font-weight:500; }
#jbnai-panel .jbnai-user .jbnai-av{ background:var(--jbnai-surface-3); color:var(--jbnai-muted); }
#jbnai-panel .jbnai-bubble b{ color:inherit; }
#jbnai-panel .jbnai-intro b{ color:var(--jbnai-primary); }
#jbnai-panel .jbnai-contact{ font-weight:700; color:var(--jbnai-primary); }

/* chips */
#jbnai-panel .jbnai-chips{ display:flex; flex-wrap:wrap; gap:8px; padding-top:2px; }
#jbnai-panel .jbnai-chip{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--jbnai-line-strong);
  color:var(--jbnai-ink); border-radius:999px; padding:9px 14px; font-size:13.5px; text-align:left; font-weight:700; transition:border-color .15s, background .15s; }
#jbnai-panel .jbnai-chip:hover{ border-color:var(--jbnai-primary); background:var(--jbnai-surface-2); }
#jbnai-panel .jbnai-chip .jbnai-ar{ color:var(--jbnai-primary); font-weight:800; }

/* typing */
#jbnai-panel .jbnai-typing{ display:inline-flex; gap:4px; align-items:center; padding:12px 14px; }
#jbnai-panel .jbnai-typing i{ width:7px; height:7px; border-radius:50%; background:var(--jbnai-faint); display:inline-block; animation:jbnaiBlink 1.2s infinite; }
#jbnai-panel .jbnai-typing i:nth-child(2){ animation-delay:.2s; } #jbnai-panel .jbnai-typing i:nth-child(3){ animation-delay:.4s; }
@keyframes jbnaiBlink{ 0%,60%,100%{opacity:.25; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)} }

/* quick actions */
#jbnai-panel .jbnai-quick{ display:flex; flex-wrap:wrap; gap:7px; padding:10px 16px 6px; border-top:1px solid var(--jbnai-line); }
#jbnai-panel .jbnai-qbtn{ display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--jbnai-line-strong);
  color:var(--jbnai-muted); border-radius:9px; padding:7px 12px; font-size:12.5px; font-weight:700; transition:.15s; }
#jbnai-panel .jbnai-qbtn:hover{ color:var(--jbnai-primary); border-color:var(--jbnai-primary); }
#jbnai-panel .jbnai-qbtn .jbnai-qd{ width:7px; height:7px; border-radius:50%; background:var(--jbnai-primary); }
#jbnai-panel .jbnai-qbtn.jbnai-wa .jbnai-qd{ background:var(--jbnai-wa); }

/* composer */
#jbnai-panel .jbnai-composer{ flex:none; padding:10px 14px 14px; border-top:1px solid var(--jbnai-line); }
#jbnai-panel .jbnai-cwrap{ display:flex; align-items:flex-end; gap:8px; background:#fff; border:1.5px solid var(--jbnai-line-strong);
  border-radius:14px; padding:6px 6px 6px 12px; transition:border-color .15s; }
#jbnai-panel .jbnai-cwrap:focus-within{ border-color:var(--jbnai-primary); }
#jbnai-panel .jbnai-attach{ flex:none; width:34px; height:34px; border-radius:9px; border:none; background:transparent; color:var(--jbnai-faint); font-size:17px; display:grid; place-items:center; }
#jbnai-panel .jbnai-attach:hover{ color:var(--jbnai-primary); }
#jbnai-panel .jbnai-q{ flex:1; min-width:0; border:none; background:transparent; color:var(--jbnai-fg); font-size:14.5px; resize:none; max-height:120px; padding:9px 0; line-height:1.45; }
#jbnai-panel .jbnai-q::placeholder{ color:var(--jbnai-faint); }
#jbnai-panel .jbnai-q:focus{ outline:none; }
#jbnai-panel .jbnai-send{ flex:none; width:38px; height:38px; border-radius:11px; border:none; color:#fff;
  background:var(--jbnai-primary); font-size:17px; display:grid; place-items:center; transition:.15s; }
#jbnai-panel .jbnai-send:disabled{ opacity:.35; cursor:default; }
#jbnai-panel .jbnai-send:not(:disabled):hover{ background:var(--jbnai-primary-dark); }
#jbnai-panel .jbnai-foot{ text-align:center; color:var(--jbnai-faint); font-size:11px; margin-top:8px; }
#jbnai-panel .jbnai-banner{ margin:14px 16px 0; background:#fdeceb; border:1px solid #f3c4c1; color:#8f1a14; border-radius:11px; padding:10px 13px; font-size:12.5px; }

@media (max-width:760px){
  #jbnai-panel{ width:100%; border-left:none; }
}
@media (prefers-reduced-motion:reduce){
  #jbnai-root *{ transition:none !important; animation:none !important; }
}