/* =========================================================================
 * bf-community.css — the comment thread and the like control
 * -------------------------------------------------------------------------
 * Shared by community.html and post.html. Nothing here frosts: a thread lives
 * inside a glass pane the renderer draws, so it is cut from that pane — tints
 * and hairlines, never a second backdrop. The accent is the page's --primary.
 * ========================================================================= */

.bfc-thread + .bfc-thread { margin-top: 4px; }
.bfc-replies { margin-left: 44px; }

.bfc-comment {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    transition: opacity 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.bfc-comment.is-reply { gap: 10px; padding: 8px 0; }
.bfc-comment.is-pending { opacity: 0.5; pointer-events: none; }

.bfc-ava-btn {
    appearance: none; border: 0; padding: 0; margin: 0; background: none;
    cursor: pointer; flex-shrink: 0; border-radius: 50%;
    align-self: flex-start;
}
.bfc-ava {
    width: 34px; height: 34px; border-radius: 50%;
    object-fit: cover; display: block;
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
}
.is-reply .bfc-ava { width: 28px; height: 28px; }
.bfc-ava-none {
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--primary, #8b3dff) 28%, #1c1c22);
    color: #fff; font: 600 14px/1 'Roboto', system-ui, sans-serif;
}
.is-reply .bfc-ava-none { font-size: 12px; }

.bfc-c-main { flex: 1; min-width: 0; }
.bfc-c-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.bfc-c-name {
    appearance: none; border: 0; padding: 0; background: none; cursor: pointer;
    color: #fff; font: 600 14px/1.3 'Roboto', system-ui, sans-serif;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.bfc-c-name:hover { color: color-mix(in srgb, var(--primary, #8b3dff) 55%, #fff); }
.bfc-c-time { color: rgba(235, 235, 245, 0.38); font-size: 12px; white-space: nowrap; }
.bfc-c-text {
    color: rgba(235, 235, 245, 0.86);
    font: 400 15px/1.45 'Roboto', system-ui, sans-serif;
    white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px;
}

.bfc-c-actions { display: flex; align-items: center; gap: 2px; margin: 4px 0 0 -8px; }
.bfc-act {
    appearance: none; border: 0; background: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    min-height: 30px; min-width: 30px; padding: 0 8px; border-radius: 15px;
    color: rgba(235, 235, 245, 0.42); font: 500 13px/1 'Roboto', system-ui, sans-serif;
    transition: color 0.2s cubic-bezier(0.32, 0.72, 0, 1), background-color 0.2s cubic-bezier(0.32, 0.72, 0, 1), transform 0.42s cubic-bezier(0.34, 1.4, 0.64, 1);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.bfc-act .bf-i { width: 16px; height: 16px; }
.bfc-act:hover { color: rgba(235, 235, 245, 0.8); background: rgba(255, 255, 255, 0.06); }
.bfc-act:active { transform: scale(0.92); transition-duration: 0.1s; }
.bfc-act:focus-visible { outline: 2px solid var(--primary, #8b3dff); outline-offset: 1px; }
.bfc-like.is-on { color: #ff375f; }
.bfc-del:hover { color: #ff453a; }

.bfc-empty {
    color: rgba(235, 235, 245, 0.38);
    font-size: 14px; text-align: center; padding: 18px 0;
}

/* The like on a post — the same control, one size up. */
.bf-i.is-on { fill: currentColor; }

@media (max-width: 640px) {
    .bfc-replies { margin-left: 38px; }
    .bfc-c-text { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .bfc-act, .bfc-comment { transition-duration: 0.01ms !important; }
}