/* Bell button + badge */
.bell-btn {
    position: relative;
    background: transparent;
    border: 1px solid #525872;
    color: #e5e7eb;
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    line-height: 1;
}
.bell-btn:hover { background: #444961; border-color: #6b7280; color: #fff; }

.bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border: 2px solid #1e2029;
    display: none;
}
.bell-badge.is-visible { display: inline-block; }
.bell-btn.has-unread .bi-bell-icon { animation: bellPulse 1.6s ease-in-out 2; }
@keyframes bellPulse {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-12deg); }
    40% { transform: rotate(10deg); }
    60% { transform: rotate(-6deg); }
    80% { transform: rotate(4deg); }
}

/* Drawer (Bootstrap offcanvas tweaks) */
#postsOffcanvas {
    background: #1e2029;
    color: #e5e7eb;
    width: 400px;
    max-width: 100vw;
}
#postsOffcanvas .offcanvas-header { border-bottom: 1px solid #3b3f52; }
#postsOffcanvas .offcanvas-title { color: #f1f1f1; font-size: 1rem; font-weight: 600; }
#postsOffcanvas .btn-close-white { filter: invert(1); }

.post-card {
    background: #2a2d3a;
    border: 1px solid #3b3f52;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    transition: border-color 0.15s;
}
.post-card.is-unread { border-left: 3px solid #3b82f6; background: #2d3142; }
.post-card.is-pinned { border-left: 3px solid #f59e0b; }
.post-card .post-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.post-card .post-type-icon {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}
.post-card .post-type-news      { background: #1e3a8a; color: #bfdbfe; }
.post-card .post-type-blog      { background: #064e3b; color: #a7f3d0; }
.post-card .post-type-bug_report{ background: #7f1d1d; color: #fecaca; }
.post-card .post-type-notice    { background: #78350f; color: #fde68a; }
.post-card h6 {
    color: #f1f1f1;
    font-size: 1rem;
    font-weight: 600;
    margin: 4px 0 6px;
}
.post-card .post-body {
    color: #d1d5db;
    font-size: 0.9rem;
    line-height: 1.5;
}
.post-card .post-body p { margin: 0 0 0.5rem; }
.post-card .post-body p:last-child { margin-bottom: 0; }
.post-card .post-body a { color: #93c5fd; text-decoration: underline; }
.post-card .post-body img { max-width: 100%; height: auto; border-radius: 4px; }
.post-card .post-body code { background: #1e1f24; color: #fde68a; padding: 1px 4px; border-radius: 3px; font-size: 0.85em; }
.post-card .post-body pre { background: #1e1f24; padding: 8px; border-radius: 4px; overflow-x: auto; }
.post-card .post-body h1, .post-card .post-body h2, .post-card .post-body h3 { color: #f1f1f1; margin: 0.75rem 0 0.5rem; font-weight: 600; font-size: 1rem; }
.post-card .post-sites {
    margin-top: 6px;
    font-size: 11px;
    color: #9ca3af;
}
.post-card .post-sites .site-pill {
    display: inline-block;
    background: #363948;
    border: 1px solid #525872;
    border-radius: 10px;
    padding: 1px 8px;
    margin-right: 4px;
}

/* Spotlight overlay (sibling of body, not inside loading-overlay) */
#bellSpotlight {
    position: fixed;
    inset: 0;
    z-index: 10500;
    pointer-events: none;
    display: none;
}
#bellSpotlight.is-active { display: block; }
#bellSpotlight .spotlight-mask {
    position: absolute;
    inset: 0;
    background: rgba(10, 12, 22, 0.72);
    backdrop-filter: blur(2px);
    pointer-events: auto;
    transition: opacity 0.2s;
}
#bellSpotlight .spotlight-hole {
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(10, 12, 22, 0.72);
    pointer-events: none;
    transition: top 0.2s, left 0.2s;
}
#bellSpotlight .spotlight-tip {
    position: absolute;
    background: #1e2029;
    color: #f1f1f1;
    border: 1px solid #3b82f6;
    border-radius: 8px;
    padding: 14px 16px;
    max-width: 280px;
    font-size: 0.95rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}
#bellSpotlight .spotlight-tip .spotlight-title {
    color: #93c5fd;
    font-weight: 700;
    margin-bottom: 6px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
#bellSpotlight .spotlight-tip .btn { margin-top: 10px; }

/* Admin modal markdown preview */
.posts-admin-preview {
    background: #2a2d3a;
    border: 1px solid #3b3f52;
    border-radius: 6px;
    padding: 10px 12px;
    min-height: 200px;
    color: #d1d5db;
    font-size: 0.9rem;
}
.posts-admin-preview p:last-child { margin-bottom: 0; }
.posts-admin-site-picker {
    max-height: 220px;
    overflow-y: auto;
    background: #2a2d3a;
    border: 1px solid #3b3f52;
    border-radius: 6px;
    padding: 6px 10px;
}
.posts-admin-site-picker .form-check { margin-bottom: 2px; }

@media (max-width: 576px) {
    #postsOffcanvas { width: 100vw; }
    .post-card { padding: 10px 12px; }
}