/* In-page conversation thread view (replaces the old conversation modal) */

/* While a thread is open, every sibling view in the same column is hidden. Using CSS (not inline
   styles) means nothing the other views do in the background can leak through, and closing the
   thread simply reveals each view exactly as it was. */
.thread-mode > :not(#threadView) { display: none !important; }

/* Logged-out visitors opening a note from the discovery carousel */
body.thread-out #heroSection { display: none !important; }
body.thread-out #threadView { max-width: 760px; margin: 0 auto; }

#threadView { min-width: 0; overflow-wrap: anywhere; }

.thread-bar {
    position: sticky;
    top: 0;
    z-index: 90;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 8px 0;
    margin-bottom: 12px;
    background: rgba(26, 26, 46, 0.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(168, 85, 247, 0.3);
}

.thread-bar-title {
    color: var(--text-primary);
    font-weight: 600;
}

/* Sit below the sticky mobile menu bar (about 40px tall) */
@media (max-width: 991px) {
    body.user-logged-in .thread-bar { top: var(--thread-top, 40px); }
}

/* Images inside quoted notes keep to the column (content images are handled in styles.css) */
#threadView .quoted-note-content img {
    max-width: 100%;
    max-height: 300px;
    height: auto;
    object-fit: contain;
}

/* Videos in notes and quoted notes keep to the column too */
#threadView .conversation-content video,
#threadView .quoted-note-content video {
    max-width: 100%;
    max-height: 300px;
    border-radius: 8px;
}

/* Tighter nesting on phones so deep reply chains stay readable */
@media (max-width: 576px) {
    #threadView .conversation-note { padding: 10px; }
    #threadView .conversation-context,
    #threadView .conversation-replies { padding: 8px; }
    #threadView .thread-children { margin-left: 6px; padding-left: 8px; }
}

/* Conversation tree: one page, folding branches, path bar */
#threadView .conversation-note { scroll-margin-top: 120px; }
#threadView .conversation-note.highlighted { box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.6); }
#threadView .thread-wrapper { position: relative; }
#threadView .thread-children { display: block; margin: 0 0 0 4px; padding: 0 0 0 8px; border-left: 2px solid rgba(168, 85, 247, 0.35); cursor: pointer; }
#threadView .thread-children > * { cursor: auto; }
#threadView .thread-children:hover { border-left-color: #ec4899; }
#threadView .thread-children[hidden], #threadView .thread-fold[hidden], .conv-path[hidden] { display: none !important; }
/* Past 4 levels the indent stops growing; a thin line still marks the branch */
#threadView .thread-wrapper.deep > .thread-children { margin-left: 0; padding-left: 5px; }
#threadView .conversation-tree > .thread-wrapper > .conversation-note .conv-up { display: none; }
.thread-fold { background: none; border: 0; color: var(--purple-primary, #a855f7); font-size: 0.85rem; padding: 2px 6px; margin: 0 0 6px; }
.conv-up { margin-left: auto; background: none; border: 0; color: inherit; opacity: 0.6; padding: 0 6px; }
.conv-up:hover { opacity: 1; }
.conv-path { flex: 1 0 100%; display: flex; align-items: center; gap: 6px; overflow-x: auto; white-space: nowrap; font-size: 0.85rem; scrollbar-width: none; }
.conv-path::-webkit-scrollbar { display: none; }
.conv-chip { background: rgba(168, 85, 247, 0.15); border: 1px solid rgba(168, 85, 247, 0.4); color: inherit; border-radius: 12px; padding: 1px 10px; }
.conv-chip.on { background: rgba(236, 72, 153, 0.3); border-color: #ec4899; }
.conv-status { padding: 10px; text-align: center; opacity: 0.7; }

@media (max-width: 576px) {
    #threadView .thread-children { margin-left: 0; padding-left: 5px; }
}

/* Article comments use the note renderer: same media limits, and empty count badges stay hidden */
.article-comments-list .conversation-content video,
.article-comments-list .quoted-note-content video { max-width: 100%; max-height: 300px; border-radius: 8px; }
.article-actions .action-count:empty { display: none; }