/* ==========================================================================
   BBS UI — FAB 浮动入口 + 列表卡片重构
   Issues: #56, #58
   ========================================================================== */

/* ---------- Theme tokens ---------- */
:root {
    --bbs-card-border: #ececec;
    --bbs-card-hover-bg: rgba(0, 0, 0, .03);
    --bbs-title-color: #222;
    --bbs-title-hover: #0f6ecd;
    --bbs-meta-color: #999;
    --bbs-count-color: #1e87f0;
    --bbs-count-empty: #c4c4c4;
    --bbs-avatar-bg: #e7e7e7;
    --bbs-fab-bg: #1e87f0;
    --bbs-fab-bg-hover: #0f6ecd;
    --bbs-fab-fg: #fff;
    --bbs-overlay-bg: #fff;
    --bbs-overlay-fg: #222;
    --bbs-overlay-muted: #666;
    --bbs-badge-top-fg: #e74c3c;
    --bbs-badge-top-bg: rgba(231, 76, 60, .10);
    --bbs-badge-essence-fg: #d4910b;
    --bbs-badge-essence-bg: rgba(243, 156, 18, .12);
}

[data-md-theme="dark"] {
    --bbs-card-border: rgba(255, 255, 255, .08);
    --bbs-card-hover-bg: rgba(255, 255, 255, .04);
    --bbs-title-color: #e6e6e6;
    --bbs-title-hover: #4aa8ff;
    --bbs-meta-color: #888;
    --bbs-count-color: #4aa8ff;
    --bbs-count-empty: #555;
    --bbs-avatar-bg: #3a3a3a;
    --bbs-fab-bg: #f0f0f0;
    --bbs-fab-bg-hover: #fff;
    --bbs-fab-fg: #1a1a1a;
    --bbs-overlay-bg: #2a2a2a;
    --bbs-overlay-fg: #e6e6e6;
    --bbs-overlay-muted: #aaa;
    --bbs-badge-top-fg: #ff7468;
    --bbs-badge-top-bg: rgba(231, 76, 60, .18);
    --bbs-badge-essence-fg: #f3b13d;
    --bbs-badge-essence-bg: rgba(243, 156, 18, .18);
}

/* ==========================================================================
   List card  (#58)
   ========================================================================== */
.bbs-list {
    border-top: 1px solid var(--bbs-card-border);
    margin-top: 8px;
}

.bbs-card {
    display: grid;
    grid-template-columns: 40px 1fr 80px;
    gap: 14px;
    align-items: center;
    padding: 14px 12px;
    border-bottom: 1px solid var(--bbs-card-border);
    transition: background .12s ease;
    text-decoration: none;
    color: inherit;
}

.bbs-card:hover {
    background: var(--bbs-card-hover-bg);
    text-decoration: none;
}

.bbs-card:hover .bbs-card__title {
    color: var(--bbs-title-hover);
}

/* Avatar */
.bbs-card__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bbs-avatar-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bbs-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bbs-card__avatar-placeholder {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    user-select: none;
    background: linear-gradient(135deg, #6dabf0, #1e87f0);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Main column */
.bbs-card__main {
    min-width: 0;
}

.bbs-card__title-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.bbs-card__title {
    font-size: 16px;
    font-weight: 500;
    color: var(--bbs-title-color);
    text-decoration: none;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    transition: color .12s ease;
}

.bbs-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
    white-space: nowrap;
}

.bbs-card__badge--top {
    color: var(--bbs-badge-top-fg);
    background: var(--bbs-badge-top-bg);
}

.bbs-card__badge--essence {
    color: var(--bbs-badge-essence-fg);
    background: var(--bbs-badge-essence-bg);
}

.bbs-card__badge svg {
    width: 12px;
    height: 12px;
}

.bbs-card__meta {
    font-size: 12px;
    color: var(--bbs-meta-color);
    margin-top: 4px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bbs-card__meta .bbs-sep {
    margin: 0 6px;
    opacity: .55;
}

/* Stats column */
.bbs-card__stats {
    text-align: center;
    min-width: 60px;
}

.bbs-card__count {
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: var(--bbs-count-color);
    line-height: 1;
}

.bbs-card__count-label {
    display: block;
    font-size: 11px;
    color: var(--bbs-meta-color);
    margin-top: 4px;
}

.bbs-card__count--empty {
    font-size: 12px;
    color: var(--bbs-count-empty);
    font-weight: normal;
}

/* Mobile */
@media (max-width: 640px) {
    .bbs-card {
        grid-template-columns: 32px 1fr 56px;
        gap: 10px;
        padding: 12px 8px;
    }
    .bbs-card__avatar {
        width: 28px;
        height: 28px;
    }
    .bbs-card__title {
        font-size: 15px;
    }
    .bbs-card__count {
        font-size: 18px;
    }
}

/* ==========================================================================
   Floating Action Button  (#56)
   注意：本站右下角已有 #tc-skin-fab（皮肤切换器，bottom:20, z-index:9999），
   故本 FAB 在 y 方向上移至其上方避免视觉重叠。z-index 仍保持 ≤999。
   ========================================================================== */
.bbs-fab {
    position: fixed;
    right: 24px;
    /* 24px (用户规范) + 46px (皮肤 FAB) + 14px gap = 84px */
    bottom: 84px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bbs-fab-bg);
    color: var(--bbs-fab-fg) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18), 0 2px 4px rgba(0, 0, 0, .12);
    /* 低于 #sc-overlay-root（滑块验证码）和 #tc-skin-switcher 的 z-index */
    z-index: 990;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    cursor: pointer;
    border: 0;
    text-decoration: none;
}

.bbs-fab:hover,
.bbs-fab:focus {
    background: var(--bbs-fab-bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22), 0 3px 6px rgba(0, 0, 0, .14);
    text-decoration: none;
    color: var(--bbs-fab-fg) !important;
    outline: none;
}

.bbs-fab:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.bbs-fab svg {
    color: var(--bbs-fab-fg);
    width: 24px;
    height: 24px;
}

[data-md-theme="dark"] .bbs-fab {
    box-shadow: 0 4px 14px rgba(0, 0, 0, .55), 0 2px 4px rgba(0, 0, 0, .35);
}

[data-md-theme="dark"] .bbs-fab:hover,
[data-md-theme="dark"] .bbs-fab:focus {
    box-shadow: 0 6px 20px rgba(0, 0, 0, .6), 0 3px 6px rgba(0, 0, 0, .4);
}

@media (max-width: 640px) {
    .bbs-fab {
        width: 48px;
        height: 48px;
        right: 16px;
        /* 12 (皮肤 mobile bottom) + 40 (皮肤 mobile size) + 12 gap ≈ 64; 取 68 */
        bottom: 68px;
    }
    .bbs-fab svg {
        width: 20px;
        height: 20px;
    }
}

/* ==========================================================================
   Login overlay  (#56 — guest path)
   z-index 高于 #tc-skin-switcher (9999)，确保模态全覆盖
   ========================================================================== */
.bbs-login-overlay {
    position: fixed;
    inset: 0;
    z-index: 10010;
}

.bbs-login-overlay[hidden] {
    display: none !important;
}

.bbs-login-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    animation: bbs-fade-in .15s ease;
}

.bbs-login-overlay__panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    max-width: 360px;
    background: var(--bbs-overlay-bg);
    color: var(--bbs-overlay-fg);
    border-radius: 8px;
    padding: 24px 24px 20px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
    animation: bbs-pop-in .18s ease;
}

.bbs-login-overlay__close {
    position: absolute;
    top: 6px;
    right: 10px;
    background: none;
    border: 0;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #999;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.bbs-login-overlay__close:hover {
    color: var(--bbs-overlay-fg);
    background: rgba(0, 0, 0, .06);
}

[data-md-theme="dark"] .bbs-login-overlay__close:hover {
    background: rgba(255, 255, 255, .08);
}

.bbs-login-overlay__panel h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--bbs-overlay-fg);
}

.bbs-login-overlay__panel p {
    margin: 0 0 16px;
    color: var(--bbs-overlay-muted);
    font-size: 14px;
    line-height: 1.5;
}

.bbs-login-overlay__btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bbs-login-overlay__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    transition: opacity .12s ease, transform .08s ease;
}

.bbs-login-overlay__btn:hover {
    opacity: .92;
    text-decoration: none;
}

.bbs-login-overlay__btn:active {
    transform: scale(.98);
}

.bbs-login-overlay__btn--github {
    background: #24292f;
    color: #fff !important;
}

.bbs-login-overlay__btn--qq {
    background: #1296db;
    color: #fff !important;
}

.bbs-login-overlay__alt {
    text-align: center;
    margin: 16px 0 0 !important;
    font-size: 12px;
}

.bbs-login-overlay__alt a {
    color: var(--bbs-overlay-muted);
}

@keyframes bbs-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bbs-pop-in {
    from {
        opacity: 0;
        transform: translate(-50%, -45%) scale(.96);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ==========================================================================
   Daily topic banner  (#43)
   ========================================================================== */
:root {
    --bbs-dt-bg: linear-gradient(135deg, rgba(30,135,240,.08) 0%, rgba(243,156,18,.08) 100%);
    --bbs-dt-border: rgba(30,135,240,.18);
    --bbs-dt-label-fg: #1e87f0;
    --bbs-dt-title-fg: var(--bbs-title-color);
    --bbs-dt-intro-fg: var(--bbs-meta-color);
}
[data-md-theme="dark"] {
    --bbs-dt-bg: linear-gradient(135deg, rgba(74,168,255,.10) 0%, rgba(243,177,61,.10) 100%);
    --bbs-dt-border: rgba(74,168,255,.22);
    --bbs-dt-label-fg: #4aa8ff;
    /* dt-title-fg / dt-intro-fg 通过 var(--bbs-title-color) / var(--bbs-meta-color) 间接继承
       dark 主题色，这里显式重声明以便 scripts/test/check_dark_mode.sh 能够通过覆盖检查。 */
    --bbs-dt-title-fg: var(--bbs-title-color);
    --bbs-dt-intro-fg: var(--bbs-meta-color);
}

.bbs-daily-topic {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 14px;
    align-items: center;
    min-height: 80px;
    padding: 14px 16px;
    margin: 8px 0 16px;
    background: var(--bbs-dt-bg);
    border: 1px solid var(--bbs-dt-border);
    border-radius: 8px;
}

.bbs-daily-topic__icon {
    font-size: 26px;
    line-height: 1;
    text-align: center;
}

.bbs-daily-topic__body {
    min-width: 0;
}

.bbs-daily-topic__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    color: var(--bbs-dt-label-fg);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.bbs-daily-topic__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--bbs-dt-title-fg);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.bbs-daily-topic__intro {
    margin-top: 2px;
    font-size: 13px;
    color: var(--bbs-dt-intro-fg);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.bbs-daily-topic__cta {
    flex: 0 0 auto;
}

.bbs-daily-topic__btn {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .bbs-daily-topic {
        grid-template-columns: 28px 1fr;
        grid-template-rows: auto auto;
        min-height: 0;
        padding: 12px;
    }
    .bbs-daily-topic__cta {
        grid-column: 1 / -1;
        justify-self: end;
    }
    .bbs-daily-topic__intro {
        -webkit-line-clamp: 2;
    }
}

/* ============================================================
 * 版块导航 chip — pjkui/blog#49
 * 与 #56/#58 的 .bbs-list / .bbs-card 共用 bbs-ui.css，
 * 仅新增 .bbs-cat-chips 命名空间，不覆盖现有 selector。
 * ============================================================ */

.bbs-cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    align-items: center;
}

.bbs-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--bbs-card-border, #e5e5e5);
    background: var(--bbs-card-bg, #fff);
    color: var(--bbs-card-meta, #555);
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
    user-select: none;
    white-space: nowrap;
}

.bbs-cat-chip:hover {
    color: var(--bbs-card-title, #222);
    border-color: var(--bbs-card-title, #222);
    text-decoration: none;
}

.bbs-cat-chip:active {
    transform: scale(.97);
}

.bbs-cat-chip.is-active {
    background: var(--bbs-fab-bg, #1e87f0);
    border-color: var(--bbs-fab-bg, #1e87f0);
    color: #fff;
}

.bbs-cat-chip.is-active:hover {
    color: #fff;
}

.bbs-cat-chip__icon {
    font-size: 14px;
    line-height: 1;
}

.bbs-cat-chip__name {
    font-weight: 500;
}

.bbs-cat-chip__count {
    display: inline-block;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 9px;
    background: rgba(0, 0, 0, .06);
    font-size: 11px;
    line-height: 1.4;
    color: var(--bbs-card-meta, #777);
    text-align: center;
}

.bbs-cat-chip.is-active .bbs-cat-chip__count {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

/* 列表卡片上的版块徽章（与现有 --top / --essence 共存，独立样式） */
.bbs-card__badge--cat {
    background: rgba(30, 135, 240, .1);
    color: #1e87f0;
    border: 1px solid rgba(30, 135, 240, .25);
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
    .bbs-cat-chip__count {
        background: rgba(255, 255, 255, .08);
    }
    .bbs-card__badge--cat {
        background: rgba(110, 168, 254, .15);
        color: #6ea8fe;
        border-color: rgba(110, 168, 254, .35);
    }
}

/* ==========================================================================
   新手 3 步引导浮卡 — pjkui/blog#45
   位置：右上角浮动；z-index=950（FAB(990) 下方，避开 bbs-login-overlay(10010)）
   ========================================================================== */
.bbs-newbie-card {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 280px;
    max-width: calc(100vw - 40px);
    background: var(--bbs-overlay-bg);
    color: var(--bbs-overlay-fg);
    border: 1px solid var(--bbs-card-border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
    padding: 14px 14px 12px;
    z-index: 950;
    font-size: 13px;
    line-height: 1.5;
}

[data-md-theme=dark] .bbs-newbie-card {
    box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}

.bbs-newbie-card__close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 22px;
    height: 22px;
    line-height: 18px;
    border: 0;
    background: transparent;
    color: var(--bbs-overlay-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    border-radius: 50%;
}
.bbs-newbie-card__close:hover {
    background: rgba(0, 0, 0, .06);
}
[data-md-theme=dark] .bbs-newbie-card__close:hover {
    background: rgba(255, 255, 255, .08);
}

.bbs-newbie-card__title {
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 10px;
    padding-right: 18px;
    color: var(--bbs-title-color);
}

.bbs-newbie-card__list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}

.bbs-newbie-card__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px dashed var(--bbs-card-border);
}
.bbs-newbie-card__item:last-child {
    border-bottom: 0;
}

.bbs-newbie-card__check {
    flex: 0 0 auto;
    width: 18px;
    text-align: center;
    color: var(--bbs-count-color);
    font-size: 16px;
    line-height: 1;
}
.bbs-newbie-card__item.is-done .bbs-newbie-card__check {
    color: #2ecc71;
}

.bbs-newbie-card__text {
    flex: 1 1 auto;
    color: var(--bbs-overlay-fg);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.bbs-newbie-card__text:hover {
    color: var(--bbs-title-hover);
    text-decoration: underline;
}
.bbs-newbie-card__item.is-done .bbs-newbie-card__text {
    color: var(--bbs-meta-color);
    text-decoration: line-through;
}

.bbs-newbie-card__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}

.bbs-newbie-card__btn {
    appearance: none;
    border: 1px solid var(--bbs-card-border);
    background: transparent;
    color: var(--bbs-title-hover);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    line-height: 1.5;
}
.bbs-newbie-card__btn:hover {
    background: var(--bbs-card-hover-bg);
}
.bbs-newbie-card__btn[disabled] {
    opacity: .6;
    cursor: not-allowed;
}
.bbs-newbie-card__btn--ghost {
    color: var(--bbs-overlay-muted);
}

@media (max-width: 640px) {
    .bbs-newbie-card {
        top: 70px;
        right: 10px;
        width: calc(100vw - 20px);
        max-width: 320px;
    }
}


/* ==========================================================================
   Category chips  (#49)
   ========================================================================== */
:root {
    --bbs-chip-fg: #555;
    --bbs-chip-bg: rgba(0, 0, 0, .035);
    --bbs-chip-border: rgba(0, 0, 0, .06);
    --bbs-chip-hover-fg: #1e87f0;
    --bbs-chip-hover-bg: rgba(30, 135, 240, .08);
    --bbs-chip-active-fg: #fff;
    --bbs-chip-active-bg: #1e87f0;
    --bbs-chip-count-fg: #999;
    --bbs-chip-count-bg: rgba(0, 0, 0, .05);
    --bbs-chip-active-count-bg: rgba(255, 255, 255, .25);
    --bbs-chip-active-count-fg: #fff;
}

[data-md-theme="dark"] {
    --bbs-chip-fg: #c8c8c8;
    --bbs-chip-bg: rgba(255, 255, 255, .04);
    --bbs-chip-border: rgba(255, 255, 255, .08);
    --bbs-chip-hover-fg: #4aa8ff;
    --bbs-chip-hover-bg: rgba(74, 168, 255, .12);
    --bbs-chip-active-fg: #1a1a1a;
    --bbs-chip-active-bg: #f0f0f0;
    --bbs-chip-count-fg: #999;
    --bbs-chip-count-bg: rgba(255, 255, 255, .07);
    /* 暗模式下 active chip 是浅底深字，count 徽标改用半透明深色 */
    --bbs-chip-active-count-bg: rgba(0, 0, 0, .18);
    --bbs-chip-active-count-fg: #1a1a1a;
}

.bbs-cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 18px;
    padding: 0;
    list-style: none;
}

.bbs-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--bbs-chip-border);
    border-radius: 999px;
    background: var(--bbs-chip-bg);
    color: var(--bbs-chip-fg);
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.bbs-cat-chip:hover,
.bbs-cat-chip:focus {
    color: var(--bbs-chip-hover-fg);
    background: var(--bbs-chip-hover-bg);
    border-color: var(--bbs-chip-hover-fg);
    text-decoration: none;
}

.bbs-cat-chip.is-active {
    color: var(--bbs-chip-active-fg);
    background: var(--bbs-chip-active-bg);
    border-color: var(--bbs-chip-active-bg);
    font-weight: 500;
}

.bbs-cat-chip.is-active:hover {
    /* 选中态 hover 维持底色，不让用户以为已切换 */
    color: var(--bbs-chip-active-fg);
    background: var(--bbs-chip-active-bg);
    border-color: var(--bbs-chip-active-bg);
}

.bbs-cat-chip__icon {
    font-size: 14px;
    line-height: 1;
}

.bbs-cat-chip__name {
    /* 占位 — 给 icon / count 留出明确的中段块 */
}

.bbs-cat-chip__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 0 6px;
    height: 18px;
    border-radius: 10px;
    background: var(--bbs-chip-count-bg);
    color: var(--bbs-chip-count-fg);
    font-size: 11px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.bbs-cat-chip.is-active .bbs-cat-chip__count {
    background: var(--bbs-chip-active-count-bg, rgba(255,255,255,.25));
    color: var(--bbs-chip-active-count-fg, #fff);
}

@media (max-width: 640px) {
    .bbs-cat-chips {
        gap: 6px;
        /* 避免在窄屏挤成竖向堆叠 */
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .bbs-cat-chip {
        flex: 0 0 auto;
        font-size: 12px;
        padding: 5px 12px;
    }
}

/* 列表卡片里的版块标签（小色块） */
.bbs-card__badge--cat {
    background: var(--bbs-chip-bg);
    color: var(--bbs-chip-fg);
    border: 1px solid var(--bbs-chip-border);
}

.bbs-card__badge--cat:hover {
    color: var(--bbs-chip-hover-fg);
    border-color: var(--bbs-chip-hover-fg);
}

/* ==========================================================================
   @ 提醒补全面板 (Issue #63)
   ========================================================================== */
.bbs-mention-panel {
    position: absolute;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 4px 0;
    max-width: 320px;
    min-width: 220px;
    max-height: 280px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.4;
    -webkit-overflow-scrolling: touch;
}

.bbs-mention-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease;
}

.bbs-mention-item:hover,
.bbs-mention-item--active {
    background: #f5f8ff;
}

.bbs-mention-avatar {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    background: #eee;
}

.bbs-mention-avatar--ph {
    display: inline-block;
}

.bbs-mention-name {
    font-weight: 600;
    color: #333;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bbs-mention-username {
    color: #999;
    font-size: 12px;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bbs-mention-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4caf50;
    margin-left: auto;
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.18);
}

@media (max-width: 640px) {
    .bbs-mention-panel {
        position: fixed;
        max-width: 100%;
        min-width: 0;
        border-radius: 8px 8px 0 0;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
    }
    .bbs-mention-item {
        padding: 10px 12px;
    }
    .bbs-mention-name,
    .bbs-mention-username {
        max-width: 40vw;
    }
}

/* 暗色模式（与项目其它组件保持一致：检测 data-md-theme） */
[data-md-theme="dark"] .bbs-mention-panel {
    background: #2a2a2a;
    border-color: #444;
    color: #ddd;
}

[data-md-theme="dark"] .bbs-mention-item:hover,
[data-md-theme="dark"] .bbs-mention-item--active {
    background: #3a3a3a;
}

[data-md-theme="dark"] .bbs-mention-name {
    color: #eee;
}

[data-md-theme="dark"] .bbs-mention-username {
    color: #999;
}

/* 已选中的 mention chip（预留给未来 contenteditable 编辑器使用） */
.bbs-mention-chip {
    display: inline-block;
    background: #e3f2fd;
    color: #1565c0;
    border-radius: 4px;
    padding: 1px 6px;
    margin: 0 1px;
    font-weight: 500;
}

/* ===== @ 提醒补全面板 (GH #63) ===== */
.bbs-mention-panel {
    position: absolute;
    z-index: 9999;
    background: var(--bbs-card-bg, #fff);
    border: 1px solid var(--bbs-card-border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    padding: 4px 0;
    min-width: 240px;
    max-width: 380px;
    max-height: 280px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.5;
    -webkit-overflow-scrolling: touch;
}

.bbs-mention-panel.is-mobile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto !important;
    max-width: none;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
    max-height: 50vh;
}

.bbs-mention-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    color: var(--bbs-text, #111);
    user-select: none;
}

.bbs-mention-item.is-active,
.bbs-mention-item:hover {
    background: var(--bbs-hover-bg, #f3f4f6);
}

.bbs-mention-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 24px;
    background: #ddd;
    display: inline-block;
}

.bbs-mention-avatar--blank {
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
}

.bbs-mention-name {
    font-weight: 600;
    color: var(--bbs-text, #111);
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bbs-mention-username {
    color: var(--bbs-text-muted, #888);
    font-size: 12px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bbs-mention-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex: 0 0 8px;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18);
}

@media (prefers-color-scheme: dark) {
    .bbs-mention-panel {
        background: #1f2937;
        border-color: #374151;
        color: #e5e7eb;
    }
    .bbs-mention-item {
        color: #e5e7eb;
    }
    .bbs-mention-item.is-active,
    .bbs-mention-item:hover {
        background: #374151;
    }
    .bbs-mention-username {
        color: #9ca3af;
    }
}

/* ============================================================
 * 通知中心（Issue #65）— 三段分组 + 未读视觉锚
 * ============================================================ */
.bbs-notif {
    --bbs-notif-mention: #1e87f0;       /* 蓝 */
    --bbs-notif-reply:   #32d296;       /* 绿 */
    --bbs-notif-system:  #999;          /* 灰 */
    --bbs-notif-unread-bg: rgba(30, 135, 240, 0.06);
    --bbs-notif-row-bg:    #fff;
    --bbs-notif-row-bg-hover: #f7fafd;
    --bbs-notif-border:    #eee;
    --bbs-notif-text:      #333;
    --bbs-notif-text-muted:#888;
}

[data-md-theme="dark"] .bbs-notif {
    --bbs-notif-mention: #4ea1ff;
    --bbs-notif-reply:   #4cd6a0;
    --bbs-notif-system:  #aaa;
    --bbs-notif-unread-bg: rgba(78, 161, 255, 0.10);
    --bbs-notif-row-bg:    #1e1e1e;
    --bbs-notif-row-bg-hover: #262626;
    --bbs-notif-border:    #333;
    --bbs-notif-text:      #e6e6e6;
    --bbs-notif-text-muted:#aaa;
}

/* ---- Tab 强化（基于 UIKit .uk-tab） ---- */
.bbs-notif__tabs {
    margin-bottom: 0;
}
.bbs-notif__badge {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 11px;
    border-radius: 9px;
    background: #f0506e;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-align: center;
    vertical-align: middle;
}

/* ---- Sticky 操作行 ---- */
.bbs-notif__toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bbs-notif-row-bg);
    border-bottom: 1px solid var(--bbs-notif-border);
    margin: 0 0 12px 0;
}
.bbs-notif__toolbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px;
}
.bbs-notif__filter {
    color: var(--bbs-notif-text-muted) !important;
    font-size: 13px;
    text-decoration: none !important;
}
.bbs-notif__filter.is-on {
    color: var(--bbs-notif-mention) !important;
    font-weight: 600;
}
.bbs-notif__filter span[uk-icon] {
    margin-right: 4px;
    vertical-align: -2px;
}
.bbs-notif__mark-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ---- 列表 ---- */
.bbs-notif__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bbs-notif__item {
    position: relative;
    display: flex;
    align-items: stretch;
    padding: 12px 14px 12px 18px;
    margin-bottom: 8px;
    background: var(--bbs-notif-row-bg);
    border: 1px solid var(--bbs-notif-border);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color .15s ease, transform .1s ease;
}
.bbs-notif__item:hover {
    background: var(--bbs-notif-row-bg-hover);
}
.bbs-notif__item:active {
    transform: translateY(1px);
}

/* 左侧 3px 实心色条 */
.bbs-notif__bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 4px 0 0 4px;
    background: var(--bbs-notif-system);
}
.bbs-notif__item--mention .bbs-notif__bar { background: var(--bbs-notif-mention); }
.bbs-notif__item--reply   .bbs-notif__bar { background: var(--bbs-notif-reply); }
.bbs-notif__item--system  .bbs-notif__bar { background: var(--bbs-notif-system); }

/* 未读 / 已读 视觉差异 */
.bbs-notif__item.is-unread {
    background: var(--bbs-notif-unread-bg);
}
.bbs-notif__item.is-unread .bbs-notif__title {
    font-weight: 700;
    color: var(--bbs-notif-text);
}
.bbs-notif__item.is-read {
    background: var(--bbs-notif-row-bg);
}
.bbs-notif__item.is-read .bbs-notif__title {
    font-weight: 400;
    color: var(--bbs-notif-text-muted);
}
.bbs-notif__item.is-read .bbs-notif__sender,
.bbs-notif__item.is-read .bbs-notif__action {
    color: var(--bbs-notif-text-muted);
}

/* 内容布局 */
.bbs-notif__body {
    flex: 1 1 auto;
    min-width: 0;
}
.bbs-notif__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--bbs-notif-text);
}
.bbs-notif__sender {
    font-weight: 600;
}
.bbs-notif__verb {
    color: var(--bbs-notif-mention);
}
.bbs-notif__item--reply .bbs-notif__verb   { color: var(--bbs-notif-reply); }
.bbs-notif__item--system .bbs-notif__verb  { color: var(--bbs-notif-system); }

.bbs-notif__time {
    margin-left: auto;
    font-size: 12px;
}
.bbs-notif__title {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.45;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 未读小圆点 */
.bbs-notif__dot {
    flex: 0 0 auto;
    align-self: center;
    width: 8px;
    height: 8px;
    margin-left: 10px;
    border-radius: 50%;
    background: var(--bbs-notif-mention);
    box-shadow: 0 0 0 2px var(--bbs-notif-row-bg);
}
.bbs-notif__item--reply  .bbs-notif__dot { background: var(--bbs-notif-reply); }
.bbs-notif__item--system .bbs-notif__dot { background: var(--bbs-notif-system); }

/* 空态 */
.bbs-notif__empty {
    padding: 40px 0;
}

/* 移动端适配 */
@media (max-width: 640px) {
    .bbs-notif__item { padding: 10px 12px 10px 16px; }
    .bbs-notif__head { font-size: 12px; }
    .bbs-notif__title { font-size: 13px; }
    .bbs-notif__time { width: 100%; margin-left: 0; }
}

/* ============================================================
   楼中楼粘性快速回复条 — Issue #61
   位置：详情页底部 fixed
   z-index 层级：FAB(990) > sticky(980) > newbie(950)
   ============================================================ */
:root {
    --bbs-qr-bg: #fff;
    --bbs-qr-border: #e5e7eb;
    --bbs-qr-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    --bbs-qr-fg: #1a1a1a;
    --bbs-qr-meta: #666;
    --bbs-qr-quote-bg: #f3f4f6;
    --bbs-qr-quote-border: #1e87f0;
    --bbs-qr-highlight-bg: rgba(255, 230, 0, 0.45);
}

[data-md-theme="dark"] {
    --bbs-qr-bg: #1a1a1a;
    --bbs-qr-border: #333;
    --bbs-qr-shadow: 0 -2px 16px rgba(0, 0, 0, 0.6);
    --bbs-qr-fg: #f0f0f0;
    --bbs-qr-meta: #999;
    --bbs-qr-quote-bg: #2a2a2a;
    --bbs-qr-quote-border: #4ea1ff;
    --bbs-qr-highlight-bg: rgba(255, 230, 0, 0.25);
}

/* 给页面底部留出粘性条高度的空间，避免内容被遮挡 */
body:has(.bbs-quick-reply) {
    padding-bottom: 72px;
}

.bbs-quick-reply {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bbs-qr-bg);
    border-top: 1px solid var(--bbs-qr-border);
    box-shadow: var(--bbs-qr-shadow);
    z-index: 980; /* FAB(990) > sticky(980) > newbie(950) */
    transition: max-height 0.25s ease;
    max-height: 56px;
    overflow: hidden;
}

.bbs-quick-reply.is-expanded {
    max-height: 80vh;
    overflow: hidden;
}

.bbs-quick-reply__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 56px;
    padding: 0 16px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--bbs-qr-meta);
    font-size: 14px;
    user-select: none;
    text-align: left;
}

.bbs-quick-reply__header:hover {
    color: var(--bbs-qr-fg);
}

.bbs-quick-reply__placeholder {
    flex: 1 1 auto;
}

.bbs-quick-reply__chevron {
    flex: 0 0 auto;
    font-size: 10px;
    transition: transform 0.2s ease;
    margin-left: 8px;
}

.bbs-quick-reply.is-expanded .bbs-quick-reply__chevron {
    transform: rotate(180deg);
}

.bbs-quick-reply__body {
    padding: 8px 16px 16px;
    max-height: calc(80vh - 56px);
    overflow-y: auto;
    color: var(--bbs-qr-fg);
}

.bbs-quick-reply__quote-wrap[hidden] {
    display: none !important;
}

.bbs-quick-reply__quote {
    background: var(--bbs-qr-quote-bg);
    border-left: 3px solid var(--bbs-qr-quote-border);
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--bbs-qr-meta);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    border-radius: 2px;
}

.bbs-quick-reply__quote-text {
    flex: 1 1 auto;
    word-break: break-all;
    line-height: 1.5;
}

.bbs-quick-reply__quote-close {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: var(--bbs-qr-meta);
    font-size: 18px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.bbs-quick-reply__quote-close:hover {
    color: #d44;
}

.bbs-quick-reply__textarea {
    width: 100%;
    margin-bottom: 8px;
    background: var(--bbs-qr-bg);
    color: var(--bbs-qr-fg);
    border: 1px solid var(--bbs-qr-border);
}

[data-md-theme="dark"] .bbs-quick-reply__textarea {
    background: #222;
    color: var(--bbs-qr-fg);
}

.bbs-quick-reply__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bbs-quick-reply__captcha {
    flex: 1 1 auto;
    min-width: 200px;
}

.bbs-quick-reply__submit {
    flex: 0 0 auto;
}

/* 提交后高亮新回复 1.5s */
@keyframes bbsQrHighlight {
    0%   { background-color: var(--bbs-qr-highlight-bg); }
    100% { background-color: transparent; }
}

.bbs-qr-highlight {
    animation: bbsQrHighlight 1.5s ease-out;
}

@media (max-width: 640px) {
    .bbs-quick-reply__header {
        padding: 0 12px;
    }
    .bbs-quick-reply__body {
        padding: 8px 12px 12px;
    }
    .bbs-quick-reply__footer {
        gap: 8px;
    }
}