/* Vice Social · yorum yanıtı, yorum beğenisi ve @etiket (22.10).
   Zincir: kök yorum + girintili yanıtlar (solda kesik çizgi) + "Yanıtla" ile açılan tek yanıt formu; kaldırılan kök yer tutucu olur.
   Uygulamada imza katmanının (--i-*), misafir görünümü ve karakter duvarında site (--vx-*) / Social (--sn-*) değişkenleri.
   Renk ve yazı kuralları site genelindeki ".vsn a { color: inherit !important }" ve imza yorum kurallarını geçecek kadar güçlü. */

.vsn {
	--y-line: var(--i-line, var(--vx-line, var(--sn-line, #2a3441)));
	--y-strong: var(--i-strong, var(--vx-line-strong, #3a4656));
	--y-ink: var(--i-ink, var(--vx-ink, var(--sn-ink, #f2f4f8)));
	--y-muted: var(--i-muted, var(--vx-muted, var(--sn-muted, #b0bccb)));
	--y-faint: var(--i-faint, var(--vx-faint, var(--sn-muted, #8391a3)));
	--y-sunk: var(--i-sunk, var(--vx-sunken, var(--sn-soft, #0b0f14)));
	--y-raised: var(--i-raised, var(--vx-raised, #171d26));
	--y-pink: var(--i-pink, var(--vx-pink, var(--sn-pink, #f49ac1)));
	--y-gold: var(--i-gold, var(--vx-gold, #e7cb89));
	--y-cond: var(--i-cond, var(--vx-cond, "Barlow Condensed", sans-serif));
	--y-mono: var(--i-mono, var(--vx-mono, "JetBrains Mono", ui-monospace, monospace));
	--y-sans: var(--i-sans, var(--vx-sans, "Barlow", sans-serif));
}

/* ---------- zincir ---------- */
.vsn .vsn-thread { margin: 16px 0; }
.vsn .vsn-thread > .vsn-comment { margin: 0; }
.vsn .vsn-replies { margin: 8px 0 0 42px; padding: 0 0 0 14px; border-left: 1px dashed var(--y-strong); }
.vsn .vsn-replies:empty { display: none; }
.vsn .vsn-replies > .vsn-comment { margin: 0; padding: 10px 0 0; }
.vsn .vsn-replies > .vsn-comment:first-child { padding-top: 2px; }
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn .vsn-comment.is-reply .vsn-avatar { width: 28px !important; height: 28px !important; min-width: 28px !important; }
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn .vsn-comment.is-reply .vsn-avatar-fallback { font-size: 14px !important; }
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn .vsn-replies-more { display: inline-block; margin: 6px 0 2px; padding: 2px 0; color: var(--y-gold) !important; font: 500 11px/1.4 var(--y-mono) !important; letter-spacing: .04em !important; text-decoration: none !important; }
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn .vsn-replies-more:is(:hover, :focus-visible) { color: var(--y-pink) !important; }

/* yer tutucu: kök kaldırıldı ya da görene kapalı, altındaki yanıtlar duruyor */
.vsn .vsn-comment.is-gone { align-items: center; }
.vsn .vsn-comment.is-gone > .vsn-comment-author { display: block; flex: none; width: 32px; height: 32px; border: 1px dashed var(--y-strong); border-radius: 50%; }
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn .vsn-comment.is-gone .vsn-comment-body { margin: 0 !important; color: var(--y-faint) !important; font: 500 12px/1.5 var(--y-mono) !important; letter-spacing: .02em; }

/* zincir görünümü başlığı (bildirimden ya da "önceki yanıtlar"dan gelince) */
.vsn .vsn-thread-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin: 0 0 4px; padding: 8px 0; border-bottom: 1px dashed var(--y-line); }
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn .vsn-thread-head span { color: var(--y-gold) !important; font: 600 12px/1.2 var(--y-cond) !important; letter-spacing: .16em !important; text-transform: uppercase !important; }
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn .vsn-thread-head a { color: var(--y-muted) !important; font: 600 12px/1.2 var(--y-cond) !important; letter-spacing: .08em !important; text-transform: uppercase !important; text-decoration: none !important; }
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn .vsn-thread-head a:is(:hover, :focus-visible) { color: var(--y-pink) !important; }

/* ---------- beğen · yanıtla · kaldır · düzenle (tek satır, yazı eylemleri) ---------- */
.vsn .vsn-comment-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; margin: 3px 0 0; }
.vsn .vsn-comment-tools > form { display: inline-flex; margin: 0 !important; }
.vsn .vsn-comment-tools > .vsn-comment-editor { margin: 0 !important; }
.vsn .vsn-comment-tools > .vsn-comment-editor[open] { flex-basis: 100%; }
.vsn .vsn-comment-tools > .vsn-comment-editor > summary { list-style: none; }
.vsn .vsn-comment-tools > .vsn-comment-editor > summary::-webkit-details-marker { display: none; }
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn.vsn.vsn .vsn-comment-tools > form > button,
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn.vsn.vsn .vsn-comment-tools > a.vsn-reply-link,
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn.vsn.vsn .vsn-comment-tools > .vsn-comment-editor > summary { display: inline-block; min-height: 28px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--y-faint) !important; font: 600 12px/28px var(--y-cond) !important; letter-spacing: .1em !important; text-transform: uppercase !important; text-decoration: none !important; cursor: pointer; }
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn.vsn.vsn .vsn-comment-tools > form > button:is(:hover, :focus-visible),
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn.vsn.vsn .vsn-comment-tools > a.vsn-reply-link:is(:hover, :focus-visible),
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn.vsn.vsn .vsn-comment-tools > .vsn-comment-editor > summary:is(:hover, :focus-visible) { color: var(--y-ink) !important; }
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn.vsn.vsn .vsn-comment-tools > .vsn-comment-delete > button:is(:hover, :focus-visible) { color: var(--y-pink) !important; }
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn.vsn.vsn .vsn-comment-tools > .vsn-comment-editor[open] > summary { color: var(--y-gold) !important; }
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn.vsn.vsn .vsn-comment-tools > .vsn-comment-like > button { font-size: 14px !important; letter-spacing: .04em !important; }
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn.vsn.vsn .vsn-comment-tools > .vsn-comment-like.is-liked > button { color: var(--y-pink) !important; text-shadow: 0 0 10px rgba(244, 154, 193, .45); }
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn.vsn.vsn .vsn-comment-tools > form > button:disabled { opacity: .55; cursor: progress; }
.vsn .vsn-comment-tools [data-vsn-interaction-status]:not(:empty) { flex-basis: 100%; font-size: 12px; }
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn .vsn-comment-likes { color: var(--y-faint) !important; }

/* ---------- yanıt formu ---------- */
.vsn .vsn-reply-form[hidden] { display: none !important; }
.vsn .vsn-reply-form { margin: 10px 0 2px 56px !important; }
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn .vsn-reply-form textarea { min-height: 44px !important; font-size: 14.5px !important; }

/* ---------- @etiket ---------- */
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn a.vsn-mention { color: var(--y-pink) !important; font-weight: 600 !important; text-decoration: none !important; border-bottom: 1px solid transparent; transition: border-color .15s; }
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn a.vsn-mention:is(:hover, :focus-visible) { border-bottom-color: currentColor; }

/* öneri listesi: metin alanının altında, formu itmeden */
.vsn .vsn-mention-box { position: absolute; z-index: 60; margin: 0; padding: 6px; list-style: none; max-height: 292px; overflow-y: auto; background: var(--y-raised); border: 1px solid var(--y-strong); box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
.vsn .vsn-mention-box::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(92deg, #f49ac1, #f17f97 45%, #e7cb89); }
.vsn .vsn-mention-box[hidden] { display: none !important; }
.vsn .vsn-mention-box li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 8px; cursor: pointer; }
.vsn .vsn-mention-box li[aria-selected="true"], .vsn .vsn-mention-box li:hover { background: rgba(244, 154, 193, .12); }
.vsn .vsn-mention-box img, .vsn .vsn-mention-box li > span { flex: none; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--y-sunk); }
.vsn .vsn-mention-box li > span { display: grid; place-items: center; color: var(--y-gold); font: 600 13px/1 var(--y-cond); }
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn .vsn-mention-box b { min-width: 0; overflow: hidden; color: var(--y-ink) !important; font: 600 14px/1.2 var(--y-cond) !important; letter-spacing: .05em !important; text-transform: uppercase !important; text-overflow: ellipsis; white-space: nowrap; }
html:root[data-vice-mode] body #main_content_section .vsn.vsn.vsn.vsn .vsn-mention-box li[aria-selected="true"] b { color: var(--y-pink) !important; }

@media (max-width: 560px) {
	.vsn .vsn-replies { margin-left: 18px; padding-left: 10px; }
	.vsn .vsn-reply-form { margin-left: 28px !important; }
	.vsn .vsn-comment-tools { gap: 2px 14px; }
}
@media (prefers-reduced-motion: reduce) { .vsn a.vsn-mention { transition: none; } }