/* ═══════════════════════════════════════════════════════════════════════════
   WIDGETS — floating help bot, suggestion box and bug reporter.

   Extracted from an inline <style> in layouts/default.htm, where it was
   re-sent with every page response and could never be cached. Values are
   left as authored apart from the palette, which now uses tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

#hb-btn {
        position:fixed; bottom:145px; right:1.75rem; z-index:9999;
        width:41px; height:41px; border-radius:50%; border:none; cursor:pointer;
        background:linear-gradient(135deg,#64c85d,#3aa834);
        box-shadow:0 4px 16px rgba(100,200,93,.45);
        display:flex; align-items:center; justify-content:center;
        transition:transform .2s,box-shadow .2s;
    }
    #hb-btn:hover { transform:scale(1.08); box-shadow:0 6px 20px rgba(100,200,93,.6); }
    #hb-btn svg { width:26px; height:26px; fill:#fff; }
    #hb-btn .hb-badge {
        display:none; position:absolute; top:-2px; right:-2px;
        width:14px; height:14px; background:#e74c3c; border-radius:50%;
        border:2px solid #121212;
    }

    #hb-box {
        display:none; position:fixed; bottom:198px; right:1.75rem; z-index:9998;
        width:360px; max-width:calc(100vw - 32px);
        background:#1a1a1a; border-radius:16px;
        box-shadow:0 8px 40px rgba(0,0,0,.6);
        font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
        flex-direction:column; overflow:hidden;
    }
    #hb-box.open { display:flex; }

    .hb-head {
        background:linear-gradient(135deg,#64c85d,#3aa834);
        padding:14px 16px; display:flex; align-items:center; gap:10px;
    }
    .hb-head-icon { width:32px; height:32px; background:rgba(255,255,255,.2);
        border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .hb-head-icon svg { width:18px; height:18px; fill:#fff; }
    .hb-head-text { flex:1; }
    .hb-head-text strong { display:block; color:#fff; font-size:14px; font-weight:700; }
    .hb-head-text span { color:rgba(255,255,255,.8); font-size:12px; }
    .hb-close { background:none; border:none; cursor:pointer; padding:4px;
        color:rgba(255,255,255,.8); font-size:18px; line-height:1; }
    .hb-close:hover { color:#fff; }

    #hb-msgs {
        flex:1; overflow-y:auto; padding:16px; display:flex;
        flex-direction:column; gap:10px; max-height:380px; min-height:200px;
        scrollbar-width:thin; scrollbar-color:#333 transparent;
    }
    .hb-msg { max-width:85%; padding:10px 13px; border-radius:12px;
        font-size:13.5px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
    .hb-msg.user { background:#64c85d; color:#fff; align-self:flex-end;
        border-bottom-right-radius:4px; }
    .hb-msg.bot  { background:#2a2a2a; color:#e0e0e0; align-self:flex-start;
        border-bottom-left-radius:4px; }
    .hb-msg.bot a { color:#64c85d; }
    .hb-typing { display:flex; gap:4px; align-items:center; padding:10px 13px;
        background:#2a2a2a; border-radius:12px; border-bottom-left-radius:4px;
        align-self:flex-start; }
    .hb-typing span { width:7px; height:7px; background:#888; border-radius:50%;
        animation:hb-bounce .9s infinite; }
    .hb-typing span:nth-child(2) { animation-delay:.15s; }
    .hb-typing span:nth-child(3) { animation-delay:.3s; }
    @keyframes hb-bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-6px)} }

    .hb-foot { padding:10px 12px; border-top:1px solid #2a2a2a;
        display:flex; gap:8px; align-items:flex-end; }
    #hb-input {
        flex:1; background:#2a2a2a; border:1px solid #333; border-radius:10px;
        padding:9px 12px; color:#e0e0e0; font-size:13px; resize:none;
        outline:none; max-height:100px; line-height:1.4; font-family:inherit;
    }
    #hb-input:focus { border-color:#64c85d; }
    #hb-input::placeholder { color:#666; }
    #hb-send {
        background:#64c85d; border:none; border-radius:10px; cursor:pointer;
        width:38px; height:38px; flex-shrink:0;
        display:flex; align-items:center; justify-content:center;
        transition:background .15s; align-self:flex-end;
    }
    #hb-send:hover { background:#3aa834; }
    #hb-send:disabled { background:#444; cursor:not-allowed; }
    #hb-send svg { width:16px; height:16px; fill:#fff; }

    .hb-suggestions { padding:0 12px 10px; display:flex; flex-wrap:wrap; gap:6px; }
    .hb-chip {
        background:#2a2a2a; border:1px solid #333; border-radius:20px;
        padding:5px 12px; font-size:12px; color:#aaa; cursor:pointer;
        transition:border-color .15s, color .15s;
    }
    .hb-chip:hover { border-color:#64c85d; color:#64c85d; }