/* bbs-comments.css — comments block (track + album pages). Accent follows the site theme. */
.bbs-comments { --cm-accent: var(--bbs-accent, #7c5cfc); --cm-bg: rgba(255,255,255,.04); --cm-line: rgba(255,255,255,.08);
    --cm-text: #c9d1d9; --cm-muted: #8b949e; max-width: 860px; }
html[data-mode="light"] .bbs-comments { --cm-bg: #fff; --cm-line: rgba(0,0,0,.09); --cm-text: #24292f; --cm-muted: #6e7781; }

.bbs-cm-composer, .bbs-cm-login { background: var(--cm-bg); border: 1px solid var(--cm-line); border-radius: 14px; padding: 14px; margin-bottom: 22px; }
.bbs-cm-composer.is-reply { margin: 10px 0 4px; padding: 10px; border-radius: 12px; }
.bbs-cm-input { width: 100%; resize: vertical; min-height: 60px; background: transparent; border: 1px solid var(--cm-line); border-radius: 10px;
    color: var(--cm-text); padding: 10px 12px; font-size: .92rem; line-height: 1.5; outline: none; transition: border-color .2s; }
.bbs-cm-input:focus { border-color: var(--cm-accent); }
.bbs-cm-bar { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.bbs-cm-count { color: var(--cm-muted); font-size: .75rem; }
.bbs-cm-error { color: #f85149; font-size: .8rem; flex: 1; }
.bbs-cm-actions { margin-left: auto; display: flex; gap: 8px; }
.bbs-cm-send { background: var(--cm-accent); color: #fff !important; border: 0; border-radius: 50px; padding: 8px 18px; font-size: .85rem;
    font-weight: 600; cursor: pointer; text-decoration: none !important; display: inline-block; transition: opacity .2s, transform .15s; }
.bbs-cm-send:hover { opacity: .9; transform: translateY(-1px); }
.bbs-cm-send:disabled { opacity: .45; cursor: default; transform: none; }
.bbs-cm-cancel { background: transparent; color: var(--cm-muted); border: 1px solid var(--cm-line); border-radius: 50px; padding: 7px 16px; font-size: .85rem; cursor: pointer; }
.bbs-cm-login { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--cm-muted); font-size: .9rem; }

.bbs-cm-emoji-wrap { position: relative; }
.bbs-cm-emoji-btn { background: transparent; border: 1px solid var(--cm-line); border-radius: 50%; width: 34px; height: 34px; font-size: 1.05rem;
    cursor: pointer; line-height: 1; padding: 0; transition: border-color .2s; }
.bbs-cm-emoji-btn:hover { border-color: var(--cm-accent); }
.bbs-cm-emoji-pop { display: none; position: absolute; bottom: 42px; left: 0; z-index: 50; width: 292px; padding: 8px; border-radius: 12px;
    background: #1e1e32; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 12px 32px rgba(0,0,0,.45); grid-template-columns: repeat(8, 1fr); gap: 2px; }
html[data-mode="light"] .bbs-cm-emoji-pop { background: #fff; border-color: rgba(0,0,0,.1); box-shadow: 0 12px 32px rgba(0,0,0,.15); }
.bbs-cm-emoji-pop.open { display: grid; }
.bbs-cm-emoji-pop button { background: transparent; border: 0; font-size: 1.2rem; padding: 4px; border-radius: 8px; cursor: pointer; line-height: 1.2; }
.bbs-cm-emoji-pop button:hover { background: rgba(127,127,127,.18); }

.bbs-cm-item { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--cm-line); }
.bbs-cm-list > .bbs-cm-item:first-child { border-top: 0; }
.bbs-cm-item.is-reply { padding: 10px 0 0; border-top: 0; }
.bbs-cm-avatar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--cm-accent) 22%, transparent); color: var(--cm-accent); font-weight: 700; }
.bbs-cm-item.is-reply .bbs-cm-avatar { width: 32px; height: 32px; font-size: .85rem; }
.bbs-cm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bbs-cm-main { flex: 1; min-width: 0; }
.bbs-cm-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bbs-cm-name { color: var(--cm-text); font-weight: 600; font-size: .9rem; }
.bbs-cm-time { color: var(--cm-muted); font-size: .75rem; }
.bbs-cm-body { color: var(--cm-text); font-size: .92rem; line-height: 1.6; margin-top: 3px; white-space: pre-wrap; word-break: break-word; }
.bbs-cm-acts { display: flex; gap: 14px; margin-top: 6px; }
.bbs-cm-act { background: none; border: 0; padding: 0; color: var(--cm-muted); font-size: .8rem; font-weight: 600; cursor: pointer; transition: color .2s; }
.bbs-cm-act:hover, .bbs-cm-toggle { color: var(--cm-accent); }
.bbs-cm-del:hover { color: #f85149; }
.bbs-cm-replies { margin-top: 4px; padding-left: 14px; border-left: 2px solid color-mix(in srgb, var(--cm-accent) 35%, transparent); }
.bbs-cm-empty { color: var(--cm-muted); font-size: .9rem; padding: 10px 0; }
.bbs-cm-more { background: transparent; color: var(--cm-accent); border: 1px solid var(--cm-accent); border-radius: 50px; padding: 8px 22px;
    font-size: .85rem; font-weight: 600; cursor: pointer; }
.bbs-cm-more:hover { background: var(--cm-accent); color: #fff; }
.bbs-comment-link:hover { color: var(--bbs-accent, #7c5cfc) !important; }