/* ── Card Actions Row ── */
.card-actions-row { display: flex; align-items: center; gap: 0.5rem; }
.card-actions-row .cart-widget { flex: 1; }
.card-actions-row .price-brutal { flex: 1; }

/* ── Community Bar (vote + comment, inline) ── */
.community-bar { display: flex; align-items: center; gap: 0.15rem; flex-shrink: 0; }

/* ── Vote Widget ── */
.vote-widget { display: flex; flex-direction: row; align-items: center; gap: 0; flex-shrink: 0; }
.vote-widget-inline { gap: 0.2rem; }
.vote-btn { width: 24px; height: 24px; border: none; background: transparent; cursor: pointer; color: #bbb; transition: all 0.12s; display: flex; align-items: center; justify-content: center; padding: 0; }
.vote-btn:hover { color: var(--black); transform: scale(1.2); }
.vote-btn.voted-up { color: #ff4500; }
.vote-btn.voted-down { color: #7193ff; }
.vote-btn svg { width: 16px; height: 16px; }
.vote-count { font-family: 'Space Mono', monospace; font-size: 0.7rem; font-weight: 700; line-height: 1; min-width: 16px; text-align: center; color: #666; }
.vote-count.positive { color: #ff4500; }
.vote-count.negative { color: #7193ff; }

/* ── Comment Bubble ── */
.comment-bubble { display: flex; align-items: center; gap: 0.2rem; border: none; background: transparent; cursor: pointer; color: #bbb; font-family: 'Space Mono', monospace; font-size: 0.65rem; font-weight: 700; padding: 0.15rem 0.3rem; transition: all 0.12s; }
.comment-bubble:hover { color: var(--blue); }
.comment-bubble svg { flex-shrink: 0; }
.comment-bubble-count { min-width: 10px; }

/* ── Mention Autocomplete Dropdown ── */
.mention-dropdown { position: absolute; bottom: calc(100% + 4px); left: 0; right: 0; max-height: 220px; overflow-y: auto; border: 2px solid var(--black); background: var(--white); box-shadow: 4px -4px 0 var(--black); z-index: 100; }
.mention-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; cursor: pointer; transition: background 0.08s; }
.mention-item:hover, .mention-item-active { background: rgba(168,85,247,0.08); }
.mention-item-avatar { width: 30px; height: 30px; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-family: 'Space Mono', monospace; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; }
.mention-item-name { font-family: 'Space Mono', monospace; font-size: 0.75rem; font-weight: 700; color: var(--black); }
@media (max-width: 480px) {
  .mention-item { padding: 0.6rem; min-height: 44px; }
  .mention-item-avatar { width: 28px; height: 28px; font-size: 0.6rem; }
}

/* ── Comment Section ── */
.comment-section { border: 2px solid var(--black); background: var(--white); box-shadow: var(--shadow); padding: 1.25rem; margin-top: 1rem; }
.comment-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.comment-section-title { font-family: 'Space Mono', monospace; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.comment-section-count { font-family: 'Space Mono', monospace; font-size: 0.6rem; color: #888; }

/* ── Comment Sort ── */
.comment-sort { display: flex; gap: 0.35rem; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid #eee; }
.comment-sort-btn { padding: 0.25rem 0.5rem; border: 1px solid #ddd; border-radius: 3px; background: var(--white); font-family: 'Space Mono', monospace; font-size: 0.6rem; font-weight: 700; cursor: pointer; transition: all 0.12s; text-transform: uppercase; }
.comment-sort-btn:hover { border-color: var(--purple); }
.comment-sort-btn.active { background: var(--black); color: white; border-color: var(--black); }

/* ── Comment Input ── */
.comment-input { display: flex; gap: 0.6rem; margin-bottom: 1rem; }
.comment-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--gradient); color: white; display: flex; align-items: center; justify-content: center; font-family: 'Space Mono', monospace; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; }
.comment-avatar-sm { width: 24px; height: 24px; font-size: 0.55rem; }
.comment-input-body { flex: 1; }
.comment-textarea { width: 100%; border: 2px solid #ddd; padding: 0.5rem; font-family: 'Space Grotesk', sans-serif; font-size: 0.82rem; resize: vertical; min-height: 50px; background: var(--cream); transition: border-color 0.15s; box-sizing: border-box; }
.comment-textarea:focus { border-color: var(--purple); outline: none; }
.comment-input-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.4rem; }
.comment-hint { font-family: 'Space Mono', monospace; font-size: 0.5rem; color: #bbb; }
.comment-submit-btn { padding: 0.35rem 0.8rem; background: var(--black); color: white; border: 2px solid var(--black); font-family: 'Space Mono', monospace; font-size: 0.65rem; font-weight: 700; cursor: pointer; transition: all 0.12s; text-transform: uppercase; }
.comment-submit-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.comment-submit-btn:not(:disabled):hover { background: #333; }

/* ── Comment Card ── */
.comment-card { padding: 0.6rem 0; border-bottom: 1px solid #f0f0f0; }
.comment-card:last-child { border-bottom: none; }
.comment-card[data-depth="1"] { margin-left: 1.5rem; border-left: 2px solid #e5e5e5; padding-left: 0.75rem; }
.comment-card[data-depth="2"] { margin-left: 1.5rem; border-left: 2px solid rgba(168,85,247,0.2); padding-left: 0.75rem; }
.comment-card[data-depth="3"] { margin-left: 1.5rem; border-left: 2px solid rgba(232,67,147,0.2); padding-left: 0.75rem; }
.comment-header { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.25rem; }
.comment-username { font-family: 'Space Mono', monospace; font-size: 0.7rem; font-weight: 700; }
.comment-timestamp { font-family: 'Space Mono', monospace; font-size: 0.55rem; color: #999; }
.comment-body { font-size: 0.82rem; line-height: 1.5; color: #333; margin-bottom: 0.35rem; word-break: break-word; }
.comment-body.deleted { color: #aaa; font-style: italic; }
.comment-actions { display: flex; align-items: center; gap: 0.75rem; }
.comment-reply-btn { font-family: 'Space Mono', monospace; font-size: 0.55rem; font-weight: 700; text-transform: uppercase; color: #999; background: none; border: none; cursor: pointer; padding: 0.15rem 0.3rem; }
.comment-reply-btn:hover { color: var(--purple); }
.comment-delete-btn { font-family: 'Space Mono', monospace; font-size: 0.55rem; color: #ccc; background: none; border: none; cursor: pointer; }
.comment-delete-btn:hover { color: #dc2626; }

/* ── Mention/Item Chips ── */
.mention-chip { display: inline; padding: 1px 4px; background: rgba(232,67,147,0.1); color: var(--pink); font-family: 'Space Mono', monospace; font-size: 0.75rem; font-weight: 700; border-radius: 3px; }
.item-ref-chip { display: inline; padding: 1px 4px; background: rgba(99,102,241,0.1); color: var(--blue); font-family: 'Space Mono', monospace; font-size: 0.75rem; font-weight: 700; border-radius: 3px; text-decoration: none; cursor: pointer; }
.item-ref-chip:hover { background: rgba(99,102,241,0.2); }

/* ── Comment Panel (inline under item card) ── */
.comment-panel { grid-column: 1 / -1; border: 2px solid #e5e5e5; border-top: none; background: var(--white); padding: 1rem; margin-bottom: 0.5rem; }

/* ── Login Prompt ── */
.comment-login { text-align: center; padding: 1rem; font-family: 'Space Mono', monospace; font-size: 0.7rem; color: #888; }
.comment-login a { color: var(--purple); font-weight: 700; }

/* ── Notification Panel ── */
.notif-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-height: 420px; border: 2px solid var(--black); box-shadow: 6px 6px 0 var(--black); background: var(--white); z-index: 9999; overflow: hidden; display: flex; flex-direction: column; animation: vm-slide-up 0.15s ease; }
.notif-header { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.75rem; border-bottom: 2px solid var(--black); background: var(--cream); }
.notif-title { font-family: 'Space Mono', monospace; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.notif-mark-all { font-family: 'Space Mono', monospace; font-size: 0.55rem; font-weight: 700; color: var(--purple); background: none; border: none; cursor: pointer; text-transform: uppercase; }
.notif-mark-all:hover { text-decoration: underline; }
.notif-list { overflow-y: auto; flex: 1; }
.notif-item { display: flex; gap: 0.6rem; padding: 0.65rem 0.75rem; border-bottom: 1px solid #eee; cursor: pointer; transition: background 0.1s; }
.notif-item:hover { background: rgba(168,85,247,0.05); }
.notif-item.notif-read { opacity: 0.5; }
.notif-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--purple); color: white; display: flex; align-items: center; justify-content: center; font-family: 'Space Mono', monospace; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; }
.notif-body { flex: 1; min-width: 0; }
.notif-who { font-size: 0.75rem; line-height: 1.3; }
.notif-preview { font-family: 'Space Mono', monospace; font-size: 0.6rem; color: #888; margin-top: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-time { font-family: 'Space Mono', monospace; font-size: 0.5rem; color: #bbb; margin-top: 0.15rem; }
@media (max-width: 480px) {
  .notif-panel { position: fixed; top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-height: 60vh; border-radius: 0; }
}

/* Responsive */
@media (max-width: 768px) {
  .comment-card[data-depth="1"], .comment-card[data-depth="2"], .comment-card[data-depth="3"] { margin-left: 0.75rem; }
  .vote-widget { flex-direction: row; gap: 0.25rem; }
  .vote-btn { width: 24px; height: 20px; }
  .vote-count { font-size: 0.65rem; }
}
@media (max-width: 480px) {
  .comment-section { padding: 0.75rem; }
  .comment-input { gap: 0.4rem; }
  .comment-avatar { width: 26px; height: 26px; font-size: 0.55rem; }
}