/* "Ask about me" AI chat widget.
   A small open model (Llama-3.2) runs in the visitor's own browser via WebGPU
   (WebLLM) at zero cost, grounded in Jordy's CV; a keyword FAQ answers instantly
   as a fallback. CyberLife-blue styling; static portrait (no fake mouth). */

#dbh-widget{
    --cl-blue:#4fc9ff;
    --cl-ink:#0b1620;
    position:fixed;
    right:20px;bottom:20px;
    z-index:9000;
    font-family:'Montserrat','Helvetica Neue',Arial,sans-serif;
    -webkit-user-select:none;user-select:none;
}

/* ---------- launcher ---------- */
.dbh-launcher{
    width:62px;height:62px;border-radius:50%;
    position:relative;cursor:pointer;border:0;padding:0;background:transparent;
    box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.dbh-launcher::before{
    content:"";position:absolute;inset:-3px;border-radius:50%;
    background:conic-gradient(from 0deg,transparent,var(--cl-blue),#bff0ff,transparent 60%);
    animation:dbh-spin 3.6s linear infinite;filter:drop-shadow(0 0 5px rgba(79,201,255,.6));
}
.dbh-launcher .dbh-face{position:absolute;inset:2px;}
.dbh-launcher .dbh-led{width:11px;height:11px;top:3px;right:3px;}
.dbh-launcher .dbh-badge{
    position:absolute;bottom:-2px;left:-6px;
    background:var(--cl-blue);color:#04121c;
    font-size:9px;font-weight:700;letter-spacing:.06em;
    padding:2px 6px;border-radius:10px;white-space:nowrap;
    box-shadow:0 2px 8px rgba(0,0,0,.3);
}
#dbh-widget.is-open .dbh-launcher{display:none;}

/* ---------- shared face ---------- */
.dbh-face{
    border-radius:50%;overflow:hidden;position:relative;background:#0a0f14;
    box-shadow:inset 0 0 18px rgba(0,0,0,.6);
}
.dbh-face img{position:absolute;display:block;max-width:none;}
.dbh-face .dbh-tint{position:absolute;inset:0;border-radius:50%;
    background:linear-gradient(180deg,rgba(79,201,255,.14),rgba(10,20,30,.25));
    mix-blend-mode:screen;pointer-events:none;}
.dbh-led{
    position:absolute;border-radius:50%;background:var(--cl-blue);
    box-shadow:0 0 8px 2px rgba(79,201,255,.85);z-index:3;
}
.dbh-thinking .dbh-led{animation:dbh-blink .5s steps(1) infinite;background:#ffc23d;box-shadow:0 0 9px 2px rgba(255,194,61,.9);}
.dbh-speaking .dbh-led{animation:dbh-pulse 1s ease-in-out infinite;}

/* ---------- panel ---------- */
.dbh-panel{
    display:none;
    width:340px;max-width:calc(100vw - 32px);
    height:480px;max-height:calc(100vh - 100px);
    background:rgba(12,22,32,.97);
    border:1px solid rgba(79,201,255,.35);
    border-radius:14px;
    box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 0 1px rgba(79,201,255,.08);
    backdrop-filter:blur(6px);
    color:#eaf7ff;
    flex-direction:column;overflow:hidden;
}
#dbh-widget.is-open .dbh-panel{display:flex;animation:dbh-pop .22s ease both;}

.dbh-head{
    display:flex;align-items:center;gap:10px;
    padding:12px 12px;border-bottom:1px solid rgba(79,201,255,.2);
    background:linear-gradient(180deg,rgba(79,201,255,.10),transparent);
}
.dbh-head .dbh-face{width:40px;height:40px;flex:0 0 40px;}
.dbh-head .dbh-led{width:8px;height:8px;top:1px;right:1px;}
.dbh-head-txt{flex:1;min-width:0;}
.dbh-name{font-size:14px;font-weight:700;letter-spacing:.02em;}
.dbh-sub{font-size:10.5px;color:var(--cl-blue);letter-spacing:.12em;text-transform:uppercase;opacity:.85;}
.dbh-head-btn{
    background:transparent;border:0;color:#9fd8f2;cursor:pointer;
    font-size:16px;line-height:1;padding:6px;border-radius:6px;
}
.dbh-head-btn:hover{color:#fff;background:rgba(79,201,255,.15);}
.dbh-head-btn.is-on{color:var(--cl-blue);}

.dbh-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;}
.dbh-msgs::-webkit-scrollbar{width:8px;}
.dbh-msgs::-webkit-scrollbar-thumb{background:rgba(79,201,255,.3);border-radius:4px;}
.dbh-msg{max-width:85%;padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word;}
.dbh-msg.bot{align-self:flex-start;background:rgba(79,201,255,.12);border:1px solid rgba(79,201,255,.22);border-bottom-left-radius:4px;}
.dbh-msg.user{align-self:flex-end;background:#2a6f93;border-bottom-right-radius:4px;}
.dbh-msg.sys{align-self:center;background:transparent;color:#7fb3cc;font-size:11px;text-align:center;max-width:100%;}
.dbh-typing span{display:inline-block;width:6px;height:6px;margin:0 1px;border-radius:50%;background:var(--cl-blue);animation:dbh-typing 1.2s infinite;}
.dbh-typing span:nth-child(2){animation-delay:.2s;}
.dbh-typing span:nth-child(3){animation-delay:.4s;}

.dbh-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 6px;}
.dbh-chip{
    background:rgba(79,201,255,.08);border:1px solid rgba(79,201,255,.3);
    color:#cfeeff;font-size:11px;padding:5px 10px;border-radius:14px;cursor:pointer;
    font-family:inherit;
}
.dbh-chip:hover{background:rgba(79,201,255,.2);}

.dbh-load{padding:8px 14px;}
.dbh-load-btn{
    width:100%;padding:9px;border-radius:8px;cursor:pointer;
    background:rgba(79,201,255,.14);border:1px solid var(--cl-blue);color:#eaf7ff;
    font-family:inherit;font-size:12px;letter-spacing:.04em;
}
.dbh-load-btn:hover{background:rgba(79,201,255,.26);}
.dbh-load-btn:disabled{opacity:.6;cursor:default;}
.dbh-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.1);margin-top:8px;overflow:hidden;display:none;}
.dbh-bar > i{display:block;height:100%;width:0;background:var(--cl-blue);transition:width .3s ease;}
.dbh-load-note{font-size:10.5px;color:#8fb8ce;margin-top:6px;line-height:1.4;}

.dbh-input{display:flex;gap:8px;padding:10px 12px;border-top:1px solid rgba(79,201,255,.2);}
.dbh-input textarea{
    flex:1;resize:none;height:38px;max-height:96px;
    background:rgba(255,255,255,.06);border:1px solid rgba(79,201,255,.28);
    border-radius:9px;color:#eaf7ff;font-family:inherit;font-size:13px;padding:9px 10px;line-height:1.3;
}
.dbh-input textarea::placeholder{color:#7fa6bd;}
.dbh-input textarea:focus{outline:none;border-color:var(--cl-blue);}
.dbh-send{
    flex:0 0 auto;width:38px;height:38px;border-radius:9px;cursor:pointer;
    background:var(--cl-blue);border:0;color:#04121c;font-size:16px;font-weight:700;
}
.dbh-send:disabled{opacity:.45;cursor:default;}
.dbh-foot{font-size:9.5px;color:#6f95ab;text-align:center;padding:0 0 8px;}
.dbh-foot a{color:#8fc7e6;}

@keyframes dbh-spin{to{transform:rotate(360deg);}}
@keyframes dbh-blink{0%,49%{opacity:1}50%,100%{opacity:.15}}
@keyframes dbh-pulse{0%,100%{box-shadow:0 0 8px 2px rgba(79,201,255,.7)}50%{box-shadow:0 0 16px 5px rgba(79,201,255,1)}}
@keyframes dbh-pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes dbh-typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

@media (max-width:480px){
    #dbh-widget{right:12px;bottom:12px;}
    .dbh-panel{width:calc(100vw - 24px);height:70vh;}
}
@media (prefers-reduced-motion:reduce){
    .dbh-launcher::before{animation:none;}
}