/* SB Intelligence — Frontend */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--r:#e8574a;--rd:#c93c30;--rl:#fdf1f0;--rim:#f5ceca;--bk:#111;--tx:#202124;--gr:#5f6368;--bg:#f8f9fa;--bo:#dfe1e5;--wh:#fff;--fn:'DM Sans',Arial,sans-serif}
.sbprem-page{font-family:var(--fn);color:var(--tx);background:var(--wh);width:100%}

/* Search view */
.sbprem-search-view{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:520px;padding:40px 20px 60px;animation:sbprem-in .4s ease}
@keyframes sbprem-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.sbprem-center{width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;gap:28px}
.sbprem-logo-img{width:220px;height:auto;display:block;max-width:80vw}
.sbprem-searchbar-wrap{width:100%}
.sbprem-searchbar{display:flex;align-items:center;gap:8px;border:1px solid var(--bo);border-radius:24px;padding:10px 10px 10px 20px;background:var(--wh);box-shadow:0 1px 3px rgba(0,0,0,.08);transition:box-shadow .2s,border-color .2s}
.sbprem-searchbar:focus-within{box-shadow:0 3px 14px rgba(0,0,0,.13);border-color:transparent}
.sbprem-si{flex-shrink:0;width:20px;height:20px}
.sbprem-input-field{flex:1;border:none;outline:none;font-family:var(--fn);font-size:16px;color:var(--bk);background:transparent;min-width:0}
.sbprem-input-field::placeholder{color:#aaa}
.sbprem-tagline{font-size:13px;color:var(--gr);text-align:center;margin:0}
.sbprem-tagline strong{color:var(--bk)}

/* Mic button */
.sbprem-mic-btn{width:34px;height:34px;border-radius:50%;background:transparent;border:1.5px solid var(--bo);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;color:var(--gr)}
.sbprem-mic-btn svg{width:15px;height:15px;stroke:currentColor}
.sbprem-mic-btn:hover{border-color:var(--r);color:var(--r);background:var(--rl)}
.sbprem-mic-btn.listening{background:var(--r);border-color:var(--r);color:#fff;animation:sbprem-mpulse 1s infinite}
@keyframes sbprem-mpulse{0%,100%{box-shadow:0 0 0 0 rgba(232,87,74,.4)}50%{box-shadow:0 0 0 8px rgba(232,87,74,0)}}

/* Send button */
.sbprem-send-btn,.sbprem-send-btn-top{width:36px;height:36px;border-radius:50%;background:var(--r);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.sbprem-send-btn:hover,.sbprem-send-btn-top:hover{background:var(--rd)}
.sbprem-send-btn:disabled,.sbprem-send-btn-top:disabled{opacity:.4;cursor:not-allowed}
.sbprem-send-btn svg,.sbprem-send-btn-top svg{width:14px;height:14px;stroke:white}
.sbprem-send-btn-top{width:30px;height:30px}
.sbprem-send-btn-top svg{width:12px;height:12px}

/* TTS toggle */
.sbprem-tts-btn{width:34px;height:34px;border-radius:50%;background:transparent;border:1.5px solid var(--bo);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;color:var(--gr)}
.sbprem-tts-btn svg{width:15px;height:15px;stroke:currentColor}
.sbprem-tts-btn:hover,.sbprem-tts-btn.active{border-color:var(--r);color:var(--r);background:var(--rl)}

/* Results view */
.sbprem-results-view{animation:sbprem-in .3s ease}
.sbprem-topbar{background:var(--wh);padding:10px 20px 0}
.sbprem-topbar-inner{display:flex;align-items:center;gap:16px;padding-bottom:10px}
.sbprem-topbar-logo{width:140px;height:auto;cursor:pointer;opacity:.9}
.sbprem-topbar-logo:hover{opacity:.7}
.sbprem-topbar-bar{flex:1;display:flex;align-items:center;gap:8px;border:1px solid var(--bo);border-radius:24px;padding:7px 10px 7px 16px;background:var(--wh);max-width:520px;transition:box-shadow .2s}
.sbprem-topbar-bar:focus-within{box-shadow:0 2px 10px rgba(0,0,0,.1);border-color:transparent}
.sbprem-input-top{flex:1;border:none;outline:none;font-family:var(--fn);font-size:15px;color:var(--bk);background:transparent;min-width:0}
.sbprem-input-top::placeholder{color:#aaa}
.sbprem-topbar-line{height:1px;background:var(--bo);margin:0 -20px}
.sbprem-results-body{max-width:660px;padding:24px 20px 24px 148px}
@media(max-width:640px){.sbprem-results-body{padding:16px}.sbprem-topbar-logo{width:70px}}

/* Result entries */
.sbprem-entry{margin-bottom:32px;animation:sbprem-in .3s ease}
.sbprem-qlbl{font-size:12px;color:var(--gr);margin:0 0 3px;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.sbprem-qtxt{font-size:22px;font-weight:700;color:var(--bk);margin:0 0 16px;line-height:1.3}
.sbprem-img-wrap{margin-bottom:14px;overflow:hidden;max-height:220px}
.sbprem-img-wrap img{width:100%;height:220px;object-fit:cover;display:block}

/* Answer block */
.sbprem-answer{font-size:15px;color:var(--tx);line-height:1.68;padding:16px 20px;background:#fff8f7;border-left:3px solid var(--r);margin-bottom:16px}
.sbprem-answer-heading{display:block;font-size:16px;font-weight:700;color:var(--bk);margin:14px 0 6px;line-height:1.3}
.sbprem-answer-heading:first-child{margin-top:0}

/* Searching dots */
.sbprem-searching{display:flex;align-items:center;gap:10px;color:var(--gr);font-size:14px;padding:4px 0}
.sbprem-dots span{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--r);margin:0 2px;animation:sbprem-bounce 1.2s infinite;opacity:.3}
.sbprem-dots span:nth-child(2){animation-delay:.2s}
.sbprem-dots span:nth-child(3){animation-delay:.4s}
@keyframes sbprem-bounce{0%,80%,100%{transform:scale(.75);opacity:.3}40%{transform:scale(1.1);opacity:1}}

/* Sources */
.sbprem-sources{margin-top:16px}
.sbprem-sources-title{font-size:11px;font-weight:700;color:var(--gr);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.sbprem-source{padding:10px 0;border-bottom:1px solid var(--bo)}
.sbprem-source:last-child{border-bottom:none}
.sbprem-source-dom{font-size:12px;color:var(--gr);display:flex;align-items:center;gap:6px;margin-bottom:3px}
.sbprem-source-fav{width:16px;height:16px;border-radius:3px;background:var(--r);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.sbprem-source-fav svg{width:10px;height:10px;stroke:white}
.sbprem-source-link{font-size:15px;color:#1a0dab;text-decoration:none;font-weight:500;display:block;line-height:1.3}
.sbprem-source-link:hover{text-decoration:underline;color:var(--rd)}

/* Feedback */
.sbprem-feedback{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--bo);flex-wrap:wrap}
.sbprem-feedback-lbl{font-size:12px;color:var(--gr)}
.sbprem-rate-btn{background:var(--wh);border:1px solid var(--bo);border-radius:20px;padding:3px 10px;font-size:14px;cursor:pointer;transition:all .15s}
.sbprem-rate-btn:hover{background:var(--rl);border-color:var(--r)}
.sbprem-copy-btn{background:transparent;border:1px solid var(--bo);border-radius:20px;padding:3px 10px;font-size:12px;color:var(--gr);cursor:pointer;margin-left:auto;font-family:var(--fn);transition:all .15s}
.sbprem-copy-btn:hover{background:var(--bg)}

/* Speak button */
.sbprem-speak-btn{display:inline-flex;align-items:center;gap:4px;margin-top:10px;padding:4px 10px;background:var(--wh);border:1px solid var(--rim);color:var(--r);font-size:11px;font-family:var(--fn);font-weight:600;cursor:pointer;transition:background .15s}
.sbprem-speak-btn:hover{background:var(--rl)}
.sbprem-answer.speaking{border-left-color:var(--r);background:#fef6f5}
.sbprem-answer.speaking .sbprem-speak-btn{background:var(--r);color:#fff;border-color:var(--r)}

/* Divider */
.sbprem-divider{border:none;border-top:1px solid var(--bo);margin:28px 0 24px}

/* Sidebar */
.sbprem-sidebar{width:100%;background:#fff;border:1px solid #e5e5e5;border-top:3px solid var(--r);font-family:var(--fn);overflow:hidden}
.sbprem-sb-header{padding:12px 14px 10px;border-bottom:1px solid #f0f0f0}
.sbprem-sb-logo{height:28px;width:auto;display:block}
.sbprem-sb-preview{padding:12px 14px;background:#fafafa;border-bottom:1px solid #f0f0f0;display:flex;flex-direction:column;gap:8px}
.sbprem-sb-bubble{padding:8px 10px;font-size:12px;line-height:1.45;max-width:90%}
.sbprem-sb-bot{background:#fff;border-left:2px solid var(--r);color:#222;box-shadow:0 1px 3px rgba(0,0,0,.06);align-self:flex-start}
.sbprem-sb-user{background:var(--rl);border-right:2px solid var(--r);color:#222;align-self:flex-end;text-align:right}
.sbprem-sb-typing{display:flex;align-items:center;gap:3px;padding:8px 10px;background:#fff;border-left:2px solid var(--r);width:fit-content}
.sbprem-sb-typing span{width:5px;height:5px;border-radius:50%;background:var(--r);opacity:.3;animation:sbprem-dot 1.2s infinite}
.sbprem-sb-typing span:nth-child(2){animation-delay:.2s}
.sbprem-sb-typing span:nth-child(3){animation-delay:.4s}
@keyframes sbprem-dot{0%,80%,100%{transform:scale(.8);opacity:.3}40%{transform:scale(1.1);opacity:1}}
.sbprem-sb-cta{padding:12px 14px}
.sbprem-sb-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#999;margin-bottom:8px}
.sbprem-sb-row{display:flex;gap:6px;align-items:center;border:1.5px solid #e5e5e5;padding:6px 8px 6px 10px;transition:border-color .15s}
.sbprem-sb-row:focus-within{border-color:var(--r)}
.sbprem-sb-input{flex:1;border:none;outline:none;font-size:12px;color:#222;background:transparent;font-family:var(--fn)}
.sbprem-sb-btn{width:26px;height:26px;background:var(--r);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;text-decoration:none;transition:background .15s}
.sbprem-sb-btn:hover{background:var(--rd)}
.sbprem-sb-btn svg{width:12px;height:12px}
.sbprem-sb-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.sbprem-sb-chip{font-size:11px;color:var(--r);border:1px solid var(--rim);background:#fff;padding:3px 8px;font-weight:600;text-decoration:none;display:inline-block;transition:background .15s}
.sbprem-sb-chip:hover{background:var(--rl);border-color:var(--r)}
.sbprem-sb-footer{padding:8px 14px;border-top:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between}

/* ── Sidebar widget 768×512 ────────────────────────────────── */
.sbprem-sidebar-widget {
    width: 768px;
    max-width: 100%;
    height: 512px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--bo);
    border-top: 3px solid var(--r);
    font-family: var(--fn);
    overflow: hidden;
}

.sbprem-sw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: #fff;
    border-bottom: 1px solid var(--bo);
    flex-shrink: 0;
}

.sbprem-sw-logo {
    height: 32px;
    width: auto;
    display: block;
}

.sbprem-sw-online {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #666;
}

.sbprem-sw-dot {
    width: 7px;
    height: 7px;
    background: var(--r);
    border-radius: 50%;
    animation: sbprem-pulse 2s infinite;
    display: inline-block;
}

/* Messages area */
.sbprem-sw-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    background: #f8f9fa;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}

.sbprem-sw-messages::-webkit-scrollbar { width: 4px; }
.sbprem-sw-messages::-webkit-scrollbar-thumb { background: var(--rim); }

.sbprem-sw-msg { display: flex; animation: sbprem-in .25s ease; }
.sbprem-sw-bot  { justify-content: flex-start; }
.sbprem-sw-user { justify-content: flex-end; }

.sbprem-sw-bubble {
    max-width: 72%;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
}

.sbprem-sw-bot .sbprem-sw-bubble {
    background: #fff;
    border-left: 3px solid var(--r);
    color: #111;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.sbprem-sw-user .sbprem-sw-bubble {
    background: var(--rl);
    border-right: 3px solid var(--r);
    color: #111;
    text-align: right;
}

/* Typing dots */
.sbprem-sw-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 14px !important;
}
.sbprem-sw-typing span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--r);
    opacity: .3;
    animation: sbprem-bounce 1.2s infinite;
    display: inline-block;
}
.sbprem-sw-typing span:nth-child(2) { animation-delay: .2s; }
.sbprem-sw-typing span:nth-child(3) { animation-delay: .4s; }

/* Footer */
.sbprem-sw-footer {
    padding: 12px 16px 14px;
    background: #fff;
    border-top: 1px solid var(--bo);
    flex-shrink: 0;
}

.sbprem-sw-inputrow {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--bo);
    padding: 8px 8px 8px 14px;
    margin-bottom: 10px;
    transition: border-color .15s;
}

.sbprem-sw-inputrow:focus-within { border-color: var(--r); }

.sbprem-sw-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    font-family: var(--fn);
    color: #111;
    background: transparent;
    min-width: 0;
}

.sbprem-sw-input::placeholder { color: #aaa; }

.sbprem-sw-send {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--r);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
.sbprem-sw-send:hover { background: var(--rd); }
.sbprem-sw-send:disabled { opacity: .4; cursor: not-allowed; }

.sbprem-sw-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.sbprem-sw-chip {
    background: #fff;
    border: 1px solid var(--rim);
    padding: 4px 12px;
    font-size: 12px;
    color: var(--r);
    font-weight: 600;
    cursor: pointer;
    font-family: var(--fn);
    transition: background .15s;
}
.sbprem-sw-chip:hover { background: var(--rl); border-color: var(--r); }

.sbprem-sw-brand {
    font-size: 10px;
    color: #bbb;
    text-align: center;
}

@media (max-width: 768px) {
    .sbprem-sidebar-widget { width: 100%; height: auto; min-height: 400px; }
    .sbprem-sw-messages { min-height: 200px; }
}

/* ── Dark mode ───────────────────────────────────────────────── */
.sbprem-dark { --r:#ff6b5b; --rd:#e8574a; --rl:#2a1a18; --rim:#4a2a26; --bk:#f0f0f0; --tx:#e0e0e0; --gr:#aaa; --bg:#1a1a1a; --bo:#333; --wh:#242424; }
.sbprem-dark .sbprem-search-view { background:#1a1a1a; }
.sbprem-dark .sbprem-topbar { background:#242424; }
.sbprem-dark .sbprem-results-body { background:#1a1a1a; }
.sbprem-dark .sbprem-answer { background:#2a1a18; color:#e0e0e0; }
.sbprem-dark .sbprem-source { background:#242424; }
.sbprem-dark .sbprem-source-link { color:#ff9a8b; }
.sbprem-dark .sbprem-input-field,
.sbprem-dark .sbprem-input-top { color:#e0e0e0; }
.sbprem-dark .sbprem-searchbar,
.sbprem-dark .sbprem-topbar-bar { background:#2a2a2a; border-color:#444; }
.sbprem-dark .sbprem-results-body { background:#1a1a1a; }
.sbprem-dark .sbprem-qtxt { color:#f0f0f0; }
.sbprem-dark .sbprem-related { background:#242424; }
.sbprem-dark .sbprem-related-btn { background:#2a2a2a; border-color:#444; color:#ff9a8b; }
.sbprem-dark .sbprem-rate-btn,
.sbprem-dark .sbprem-copy-btn { background:#2a2a2a; border-color:#444; color:#ccc; }
.sbprem-dark .sbprem-quote { background:#2a2020; border-color:#ff6b5b; color:#e0e0e0; }

/* Dark mode toggle button */
.sbprem-dark-btn {
    width:34px; height:34px; border-radius:50%;
    background:transparent; border:1.5px solid var(--bo);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-size:15px; transition:all .15s;
}
.sbprem-dark-btn:hover { border-color:var(--r); background:var(--rl); }

/* ── Topbar actions ──────────────────────────────────────────── */
.sbprem-topbar-actions {
    display:flex; gap:6px; align-items:center; flex-shrink:0;
}

/* ── History ─────────────────────────────────────────────────── */
.sbprem-history-btn {
    width:34px; height:34px; border-radius:50%;
    background:transparent; border:1.5px solid var(--bo);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-size:15px; transition:all .15s;
}
.sbprem-history-btn:hover { border-color:var(--r); background:var(--rl); }

.sbprem-history-dropdown {
    background:var(--wh); border:1px solid var(--bo);
    border-top:none; padding:8px; max-height:220px; overflow-y:auto;
}

.sbprem-history-item {
    display:block; width:100%; text-align:left; padding:8px 12px;
    background:transparent; border:none; border-bottom:1px solid var(--bo);
    font-size:13px; color:var(--tx); cursor:pointer; font-family:var(--fn);
    transition:background .15s;
}
.sbprem-history-item:last-child { border-bottom:none; }
.sbprem-history-item:hover { background:var(--rl); color:var(--r); }
.sbprem-history-empty { font-size:13px; color:var(--gr); padding:8px; margin:0; }

/* ── Source score badge ──────────────────────────────────────── */
.sbprem-score-badge {
    display:inline-flex; align-items:center; gap:6px;
    font-size:12px; padding:5px 12px; margin-bottom:10px;
    border:1px solid var(--bo); color:var(--gr);
}
.sbprem-score-hoog   { border-color:#27ae60; color:#27ae60; background:rgba(39,174,96,.08); }
.sbprem-score-gemiddeld { border-color:#f39c12; color:#f39c12; background:rgba(243,156,18,.08); }
.sbprem-score-laag   { border-color:#e8574a; color:#e8574a; background:rgba(232,87,74,.08); }

/* ── Answer buttons row ──────────────────────────────────────── */
.sbprem-answer-btns {
    display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;
}
.sbprem-speak-btn, .sbprem-print-btn {
    background:var(--wh); border:1px solid var(--rim);
    padding:4px 12px; font-size:12px; color:var(--r);
    font-family:var(--fn); font-weight:600; cursor:pointer;
    transition:background .15s;
}
.sbprem-speak-btn:hover, .sbprem-print-btn:hover { background:var(--rl); }
.sbprem-answer.speaking .sbprem-speak-btn { background:var(--r); color:#fff; border-color:var(--r); }

/* ── Citaten highlighter ─────────────────────────────────────── */
.sbprem-quote {
    border-left:4px solid var(--r); margin:12px 0;
    padding:10px 16px; background:var(--rl);
    font-style:italic; color:var(--tx); font-size:14px; line-height:1.6;
}

/* ── Gerelateerde vragen ─────────────────────────────────────── */
.sbprem-related {
    margin-top:16px; padding:14px 16px;
    background:var(--bg); border:1px solid var(--bo);
}
.sbprem-related-title {
    font-size:11px; font-weight:700; color:var(--gr);
    text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px;
}
.sbprem-related-btn {
    display:inline-block; background:var(--wh);
    border:1px solid var(--bo); padding:6px 14px;
    font-size:13px; color:var(--r); font-family:var(--fn);
    font-weight:600; cursor:pointer; margin:3px 4px 3px 0;
    transition:all .15s;
}
.sbprem-related-btn:hover { background:var(--rl); border-color:var(--r); }

/* ── Admin agenda update button ──────────────────────────────── */
.sbprem-tts-btn {
    width:34px; height:34px; border-radius:50%;
    background:transparent; border:1.5px solid var(--bo);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-size:15px; transition:all .15s; color:var(--gr);
}
.sbprem-tts-btn:hover, .sbprem-tts-btn.active { border-color:var(--r); background:var(--rl); color:var(--r); }

/* ── Archiefzoeker ───────────────────────────────────────────── */
.sbprem-archive-widget {
    font-family: var(--fn);
    max-width: 800px;
    width: 100%;
}

.sbprem-archive-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 3px solid var(--r);
    margin-bottom: 20px;
}

.sbprem-archive-logo { height: 32px; width: auto; }

.sbprem-archive-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--bk);
    margin: 0;
}

.sbprem-archive-filters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.sbprem-af-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gr);
    margin-bottom: 5px;
}

.sbprem-af-input {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid var(--bo);
    font-size: 14px;
    font-family: var(--fn);
    color: var(--bk);
    background: var(--wh);
    box-sizing: border-box;
    transition: border-color .15s;
}

.sbprem-af-input:focus { outline: none; border-color: var(--r); }

.sbprem-archive-btn {
    background: var(--r);
    color: #fff;
    border: none;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--fn);
    cursor: pointer;
    transition: background .15s;
}
.sbprem-archive-btn:hover    { background: var(--rd); }
.sbprem-archive-btn:disabled { opacity: .5; cursor: not-allowed; }

.sbprem-archive-results { margin-top: 20px; }

.sbprem-archive-item {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--bo);
    animation: sbprem-in .3s ease;
}

.sbprem-archive-item:last-child { border-bottom: none; }

.sbprem-archive-thumb {
    width: 80px;
    height: 60px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--bo);
}

.sbprem-archive-info { flex: 1; min-width: 0; }

.sbprem-archive-title {
    font-size: 15px;
    font-weight: 600;
    color: #1a0dab;
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
    line-height: 1.3;
}

.sbprem-archive-title:hover { text-decoration: underline; color: var(--rd); }

.sbprem-archive-excerpt {
    font-size: 13px;
    color: var(--gr);
    line-height: 1.4;
    margin-bottom: 4px;
}

.sbprem-archive-date {
    font-size: 11px;
    color: var(--gr);
}

/* Weekly summary in answer */
.sbprem-weekly-badge {
    display:inline-block;
    background: var(--rl);
    border: 1px solid var(--rim);
    color: var(--r);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ── Share buttons ───────────────────────────────────────────── */
/* ── v4.0 new features ───────────────────────────────────────── */

/* Trending */
.sbprem-trending { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; }
.sbprem-trending-label { font-size:12px; color:var(--gr); font-weight:600; }
.sbprem-trending-chip { background:var(--wh); border:1.5px solid var(--rim); color:var(--r); padding:5px 12px; font-size:12px; font-weight:600; font-family:var(--fn); cursor:pointer; transition:all .15s; }
.sbprem-trending-chip:hover { background:var(--rl); border-color:var(--r); transform:translateY(-1px); }

/* Autocomplete */
.sbprem-autocomplete { position:absolute; z-index:1000; background:var(--wh); border:1.5px solid var(--bo); border-top:none; width:100%; max-height:220px; overflow-y:auto; box-shadow:0 4px 16px rgba(0,0,0,.12); }
.sbprem-autocomplete-top { top:100%; left:0; right:0; }
.sbprem-searchbar-wrap { position:relative; width:100%; }
.sbprem-ac-item { padding:10px 16px; font-size:14px; color:var(--tx); cursor:pointer; border-bottom:1px solid var(--bo); transition:background .1s; }
.sbprem-ac-item:last-child { border-bottom:none; }
.sbprem-ac-item:hover { background:var(--rl); color:var(--r); }
.sbprem-ac-item strong { color:var(--r); }

/* Tijdlijn */
.sbprem-timeline { margin:16px 0; padding:14px 16px; background:var(--bg); border-left:3px solid var(--r); }
.sbprem-timeline-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--gr); margin-bottom:10px; }
.sbprem-timeline-item { display:flex; align-items:baseline; gap:12px; padding:5px 0; border-bottom:1px solid var(--bo); }
.sbprem-timeline-item:last-child { border-bottom:none; }
.sbprem-timeline-year { font-size:13px; font-weight:700; color:var(--r); flex-shrink:0; width:36px; }
.sbprem-timeline-link { font-size:13px; color:#1a0dab; text-decoration:none; line-height:1.3; }
.sbprem-timeline-link:hover { text-decoration:underline; color:var(--rd); }

/* Lees ook */
.sbprem-read-also { margin:16px 0; }
.sbprem-read-also-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--gr); margin-bottom:10px; }
.sbprem-read-also-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media(max-width:600px) { .sbprem-read-also-cards { grid-template-columns:1fr; } }
.sbprem-read-also-card { background:var(--wh); border:1px solid var(--bo); text-decoration:none; display:flex; flex-direction:column; transition:all .15s; overflow:hidden; }
.sbprem-read-also-card:hover { border-color:var(--r); box-shadow:0 3px 12px rgba(232,87,74,.15); transform:translateY(-2px); }
.sbprem-rac-img { width:100%; height:80px; overflow:hidden; background:var(--bg); }
.sbprem-rac-img img { width:100%; height:80px; object-fit:cover; display:block; }
.sbprem-rac-noimg { display:flex; align-items:center; justify-content:center; }
.sbprem-rac-body { padding:8px 10px; }
.sbprem-rac-source { font-size:10px; color:var(--r); font-weight:700; text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:3px; }
.sbprem-rac-title { font-size:12px; color:var(--tx); line-height:1.4; margin:0; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Sterrenrating */
.sbprem-stars-row { display:flex; align-items:center; gap:10px; margin-top:12px; padding-top:10px; border-top:1px solid var(--bo); flex-wrap:wrap; }
.sbprem-stars-label { font-size:12px; color:var(--gr); }
.sbprem-stars { display:flex; gap:2px; }
.sbprem-star { background:transparent; border:none; font-size:22px; cursor:pointer; color:#ddd; transition:color .1s, transform .1s; padding:0 2px; line-height:1; }
.sbprem-star:hover, .sbprem-star.sbprem-star-on { color:#f5a623; transform:scale(1.15); }
.sbprem-star.sbprem-star-set { color:#f5a623; transform:scale(1); }
.sbprem-stars-thanks { font-size:13px; color:var(--r); font-weight:600; }

/* Share row v4.0 — mooi en consistent */
/* Share buttons — clean v4.0 */

/* Dark mode updates */
.sbprem-dark .sbprem-trending-chip { background:#2a2a2a; border-color:#444; }
.sbprem-dark .sbprem-ac-item { background:#242424; color:#e0e0e0; border-color:#333; }
.sbprem-dark .sbprem-ac-item:hover { background:#2a1a18; }
.sbprem-dark .sbprem-timeline { background:#1a1a1a; }
.sbprem-dark .sbprem-read-also-card { background:#242424; border-color:#333; }
.sbprem-dark .sbprem-rac-title { color:#e0e0e0; }

/* ── Share knoppen — wit geforceerd ────────────────────────── */
a.sbprem-share-btn,
button.sbprem-share-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 12px;
    font-family: var(--fn);
    font-weight: 600;
    text-decoration: none !important;
    color: #ffffff !important;
    border: none !important;
    cursor: pointer;
    border-radius: 5px;
    transition: all .15s;
    white-space: nowrap;
    line-height: 1;
    margin: 0;
}
a.sbprem-share-btn span,
button.sbprem-share-btn span { color: #ffffff !important; font-size: 12px; }
a.sbprem-share-btn:hover,
button.sbprem-share-btn:hover { opacity: .88; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.2); color: #ffffff !important; }
.sbprem-share-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.sbprem-share-wa     { background: #25D366 !important; }
.sbprem-share-tg     { background: #229ED9 !important; }
.sbprem-share-x      { background: #000000 !important; }
.sbprem-share-li     { background: #0A66C2 !important; }
.sbprem-share-fb     { background: #1877F2 !important; }
.sbprem-share-mail   { background: #555555 !important; }
.sbprem-share-copy   { background: #666666 !important; }
.sbprem-share-native { background: var(--r) !important; }
@media(max-width:520px){
    a.sbprem-share-btn span, button.sbprem-share-btn span { display: none; }
    a.sbprem-share-btn, button.sbprem-share-btn { padding: 8px; border-radius: 50%; width: 34px; height: 34px; justify-content: center; gap: 0; }
}

/* ── Bronnen met afbeelding ──────────────────────────────────── */
.sbprem-source { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--bo); align-items:flex-start; }
.sbprem-source:last-child { border-bottom:none; }
.sbprem-source-img { width:72px; height:52px; object-fit:cover; flex-shrink:0; border:1px solid var(--bo); }
.sbprem-source-body { flex:1; min-width:0; }