/* ── СЕКЦИЯ КОММЕНТАРИЕВ ── */
/* Убрать белый блок GP вокруг нашей формы */
.separate-containers .comments-area:has(.pf-ac),
.comments-area:has(.pf-ac) {
    background: transparent !important; border: none !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 !important;
}
#comments { margin-top: 40px; padding-top: 32px; border-top: 2px solid var(--border-strong); }
#comments .comments-title, #comments h2.comments-title {
    font-family: var(--font-display) !important; font-size: 26px !important;
    color: var(--text) !important; letter-spacing: 1px !important;
    margin-bottom: 24px !important; line-height: 1.2 !important;
}

/* ── СПИСОК КОММЕНТАРИЕВ ── */
.comment-list { list-style: none !important; padding: 0 !important; margin: 0 0 32px !important; }
.comment-list .comment, .comment-list article.comment-body { list-style: none !important; }

.comment-body {
    background: var(--surface) !important; border: 1.5px solid var(--border) !important;
    border-radius: var(--r-lg) !important; padding: 18px 20px !important;
    margin-bottom: 14px !important; position: relative !important;
}

.comment-meta { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 10px !important; }
.comment-author .avatar { width: 44px !important; height: 44px !important; border-radius: 50% !important; border: 2px solid var(--accent-2) !important; flex-shrink: 0 !important; display: block !important; }
.comment-author.vcard { display: flex !important; align-items: center !important; gap: 12px !important; }
.comment-author .fn, .comment-author .fn a { font-family: var(--font-ui) !important; font-weight: 700 !important; font-size: 14px !important; color: var(--text) !important; text-decoration: none !important; }
.comment-metadata { margin-left: 56px !important; margin-top: -4px !important; margin-bottom: 8px !important; }
.comment-metadata a, .comment-metadata time { font-size: 12px !important; color: var(--text-dim) !important; text-decoration: none !important; }
.comment-content, .comment-content p { font-family: var(--font-ui) !important; font-size: 15px !important; line-height: 1.75 !important; color: var(--text) !important; margin: 0 !important; }
.comment-content { margin-left: 56px !important; }

.comment-reply-link { font-family: var(--font-ui) !important; font-size: 12px !important; font-weight: 700 !important; color: var(--accent-text,var(--accent)) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; text-decoration: none !important; border: 1.5px solid var(--accent) !important; border-radius: var(--r-sm) !important; padding: 3px 10px !important; margin-left: 56px !important; margin-top: 8px !important; display: inline-block !important; transition: background 0.2s, color 0.2s !important; }
.comment-reply-link:hover { background: var(--accent) !important; color: var(--accent-ink) !important; }
.reply { margin-top: 8px !important; }

/* Вложенные — предел визуального отступа на 5 уровнях */
.comment-list .children { list-style: none !important; padding-left: 24px !important; margin-top: 10px !important; border-left: 2px solid var(--accent) !important; }
.comment-list .children .comment-body { background: var(--bg-1) !important; border-color: var(--border) !important; }
.comment-list .children .children .children .children .children,
.comment-list .children .children .children .children .children .children { padding-left: 8px !important; border-left: 2px dashed var(--border) !important; }

/* Collapse toggle */
.pf-expand-thread { display: block; font-size: 13px; color: var(--accent-text,var(--accent)); margin: 4px 0 8px 56px; text-decoration: none; font-family: var(--font-ui); font-weight: 600; }
.pf-expand-thread:hover { color: var(--text); }

/* Анимация нового комментария */
@keyframes pfFadeIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.pf-new-comment { animation: pfFadeIn 0.4s ease; }

/* ── VOTE COLUMN (Reddit-style) ── */
.comment-body { display: flex !important; gap: 0 !important; }
.pf-vote-col {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 4px 10px 4px 0; flex-shrink: 0; margin-right: 4px;
}
.pf-vote-btn {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 24px; border-radius: var(--r-xs); cursor: pointer;
    color: var(--text-dim); background: none; border: none; padding: 0;
    transition: color .12s, background .12s;
}
.pf-vote-btn:hover { color: var(--text); background: var(--chip-bg); }
.pf-vote-btn.active.pf-vote-up { color: var(--emerald); }
.pf-vote-btn.active.pf-vote-down { color: var(--ruby); }
.pf-vote-score {
    font-family: var(--font-mono); font-size: 12px; font-weight: 700;
    color: var(--text-muted); min-width: 20px; text-align: center;
    line-height: 1;
}
.pf-comment-main { flex: 1; min-width: 0; }

/* ── SORT TABS ── */
.pf-comment-sort {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 16px; flex-wrap: wrap;
}
.pf-comment-sort-label {
    font-size: 13px; font-weight: 700; color: var(--text-muted);
    margin-right: 4px;
}
.pf-sort-btn {
    height: 28px; padding: 0 12px; font-size: 12px; font-weight: 600;
    border-radius: var(--r-pill); background: var(--chip-bg);
    color: var(--text-muted); border: 1px solid transparent;
    cursor: pointer; transition: all .15s; font-family: var(--font-ui);
}
.pf-sort-btn:hover { background: var(--chip-hover); color: var(--text); }
.pf-sort-btn.active { background: var(--accent); color: var(--accent-ink); }

/* ── ФОРМА КОММЕНТАРИЯ (форумный стиль) ── */
.pf-comment-form-wrap {
    display: flex; gap: 10px; margin-bottom: 24px;
}
.pf-comment-form-avatar { flex-shrink: 0; padding-top: 2px; }
.pf-comment-form-avatar img { width: 40px; height: 40px; border-radius: 50%; display: block; }
.pf-comment-form-body { flex: 1; min-width: 0; }

#respond { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; margin-top: 0 !important; }
#reply-title, #respond h3#reply-title { display: none !important; }
#reply-title small a { font-family: var(--font-ui) !important; font-size: 13px !important; color: var(--text-dim) !important; }
#respond .comment-form-author, #respond .comment-form-email, #respond .comment-form-url, #respond .comment-form-cookies-consent { display: none !important; }
#respond .comment-form-comment label { display: none !important; }
#respond .comment-form-comment { margin: 0 !important; }
#respond textarea#comment { width: 100% !important; min-height: 80px !important; border: 1px solid var(--border) !important; border-radius: 10px !important; padding: 14px !important; font-family: var(--font-ui) !important; font-size: 14px !important; line-height: 1.65 !important; color: var(--text) !important; resize: vertical !important; transition: border-color 0.2s !important; background: var(--bg-1) !important; box-sizing: border-box !important; }
#respond textarea#comment:focus { outline: 2px solid var(--accent) !important; outline-offset: 2px !important; border-color: var(--accent-2) !important; background: var(--surface) !important; }
#respond textarea#comment::placeholder { color: var(--text-dim) !important; }

.pf-comment-actions {
    display: flex; align-items: center; justify-content: space-between; margin-top: 8px;
}
#respond .form-submit { margin: 0 !important; }
.pf-submit-btn, #respond .form-submit #submit {
    display: inline-flex !important; align-items: center !important; gap: 4px !important;
    padding: 7px 18px !important; background: var(--accent) !important; color: var(--accent-ink) !important;
    border: none !important; border-radius: 8px !important; font-weight: 600 !important;
    font-size: 13px !important; font-family: var(--font-ui) !important; cursor: pointer !important;
    transition: background 0.2s !important;
}
.pf-submit-btn:hover, #respond .form-submit #submit:hover { background: var(--accent-hover) !important; }
.pf-submit-btn:disabled, #respond .form-submit #submit:disabled { background: #ccc !important; cursor: not-allowed !important; }

.logged-in-as { display: none !important; }

/* "Войти" кнопка */
.pf-login-to-comment { text-align: center; padding: 20px; }
.pf-login-to-comment p { color: #6b7280 !important; margin-bottom: 14px !important; }
.pf-login-comment-btn { display: inline-block; background: var(--accent-2); color: var(--accent-ink) !important; border: none; border-radius: var(--r-md); padding: 10px 28px; font-family: var(--font-ui); font-size: 15px; font-weight: 700; cursor: pointer; transition: background 0.2s; text-decoration: none; }
.pf-login-comment-btn:hover { background: var(--navy-800); color: var(--accent-ink) !important; }

/* Счётчик */
.pf-comment-counter { margin: 20px 0 0; font-size: 13px; color: var(--text-muted); cursor: pointer; display: inline-block; text-decoration: none; font-family: var(--font-ui); }
.pf-comment-counter:hover { color: var(--text); }

.logged-in-as { font-size: 13px !important; color: #6b7280 !important; margin-bottom: 10px !important; }
.logged-in-as a { color: var(--text) !important; font-weight: 700 !important; }
.comment-awaiting-moderation { font-size: 12px !important; color: var(--accent-text,var(--accent)) !important; font-style: italic !important; margin-left: 56px !important; display: block !important; }

/* AJAX loading state */
.pf-submitting #submit { background: #9b3060 !important; }

/* ── ЕДИНЫЙ ТУЛБАР РЕДАКТОРА (WP + wpForo) ── */
.pf-toolbar, .pf-forum-toolbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 8px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px; position: relative; }
.pf-toolbar button, .pf-forum-toolbar button { background: var(--bg-1) !important; border: 1px solid var(--border) !important; border-radius: var(--r-sm) !important; padding: 5px 10px !important; font-size: 13px !important; font-family: var(--font-ui) !important; color: var(--text) !important; cursor: pointer !important; line-height: 1.3 !important; transition: background 0.15s !important; min-width: 34px; text-align: center; }
.pf-toolbar button:hover, .pf-forum-toolbar button:hover { background: var(--chip-hover) !important; border-color: var(--border-strong) !important; }
.pf-toolbar button b, .pf-forum-toolbar button b { font-weight: 900; }
.pf-toolbar button i, .pf-forum-toolbar button i { font-style: italic; }
.pf-toolbar button u, .pf-forum-toolbar button u { text-decoration: underline; }
.pf-toolbar-sep { width: 1px; height: 22px; background: var(--border); margin: 0 3px; display: inline-block; }

/* Палитра цветов */
.pf-color-palette { position: absolute; z-index: 99; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-md); padding: 8px; box-shadow: var(--shadow-lg); display: none; gap: 5px; flex-wrap: wrap; width: auto; }
.pf-color-palette span { width: 26px; height: 26px; }
.pf-color-palette.open { display: flex; }
.pf-color-palette span { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); transition: transform 0.12s; }
.pf-color-palette span:hover { transform: scale(1.15); }

/* Превью загруженного фото */
.pf-upload-preview { display: none; margin: 8px 0; padding: 8px; background: var(--bg-1); border: 1.5px solid var(--border); border-radius: var(--r-md); max-width: 280px; position: relative; }
.pf-upload-preview.visible { display: block; }
.pf-upload-preview img { max-width: 100%; max-height: 120px; border-radius: var(--r-sm); display: block; }
.pf-upload-preview .pf-upload-remove { position: absolute; top: 4px; right: 4px; background: var(--accent); color: var(--accent-ink); border: none; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 14px; line-height: 24px; padding: 0; }

/* Inline ошибка */
.pf-form-error { color: var(--ruby); font-size: 13px; margin: 8px 0; font-family: var(--font-ui); }

/* Спойлер (details/summary) */
.comment-content details, #wpforo #wpforo-wrap .wpf-post-body details {
    background: var(--bg-1); border-left: 3px solid var(--accent); border-radius: var(--r-sm); padding: 8px 12px; margin: 8px 0;
}
.comment-content details summary, #wpforo #wpforo-wrap .wpf-post-body details summary {
    cursor: pointer; font-weight: 700; color: var(--text); list-style: none; user-select: none;
}
.comment-content details summary::before, #wpforo #wpforo-wrap .wpf-post-body details summary::before {
    content: '▸ '; display: inline-block; transition: transform 0.2s;
}
.comment-content details[open] summary::before, #wpforo #wpforo-wrap .wpf-post-body details[open] summary::before { content: '▾ '; }
.comment-content details > *:not(summary), #wpforo #wpforo-wrap .wpf-post-body details > *:not(summary) { margin-top: 8px; }

/* Ссылка-спойлер */
.comment-content details.pf-link-spoiler, #wpforo #wpforo-wrap .wpf-post-body details.pf-link-spoiler {
    border-left-color: var(--accent-2); display: inline-block; margin: 4px 0;
}
.comment-content details.pf-link-spoiler summary { font-size: 13px; }

/* Зачёркивание */
.comment-content del, .comment-content s { text-decoration: line-through; color: var(--text-dim); }

/* Инлайн-код */
.comment-content code {
    background: var(--bg-1); border: 1px solid var(--border); border-radius: 3px;
    padding: 1px 5px; font-family: var(--font-mono); font-size: 0.9em; color: var(--accent-text,var(--accent));
}

/* Эмодзи в комментариях */
.comment-content picture, .comment-content .pf-emoji-inline {
    display: inline-block; vertical-align: middle;
}
.comment-content picture img {
    vertical-align: middle; display: inline-block;
}

/* Эмодзи-пикер в тулбаре */
.pf-emoji-picker-panel {
    position: absolute; z-index: 100; background: var(--surface); border: 1.5px solid var(--border);
    border-radius: var(--r-md); padding: 8px; box-shadow: var(--shadow-lg); display: none;
    width: 260px; max-height: 220px; overflow-y: auto;
}
.pf-emoji-picker-panel.open { display: block; }
.pf-emoji-picker-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.pf-emoji-picker-grid button {
    width: 38px !important; height: 38px !important; min-width: 38px !important;
    padding: 3px !important; border: none !important; background: transparent !important;
    border-radius: var(--r-sm) !important; cursor: pointer !important;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.1s, background 0.1s !important;
}
.pf-emoji-picker-grid button:hover {
    background: var(--chip-hover) !important; transform: scale(1.12);
}
.pf-emoji-picker-grid button img {
    width: 28px; height: 28px; display: block;
}

/* ── ФОРУМ WPFORO — ФОРМА ОТВЕТА ── */
#wpforo #wpforo-wrap .wpforo-portable-form-wrap {
    background: var(--surface) !important; border: 1.5px solid var(--border) !important;
    border-radius: var(--r-lg) !important; padding: 20px !important; margin-top: 16px !important;
}
#wpforo #wpforo-wrap .wpf-form-wrapper,
#wpforo #wpforo-wrap .wpf-post-create,
#wpforo #wpforo-wrap .wpf-topic-create {
    background: var(--surface) !important; border: 1.5px solid var(--border) !important;
    border-radius: var(--r-lg) !important; padding: 20px !important; margin: 16px 0 !important;
}
#wpforo #wpforo-wrap .wpf-reply-form-title {
    font-family: var(--font-display) !important; font-size: 22px !important;
    color: var(--text) !important; letter-spacing: 1px !important; margin: 0 0 16px !important;
}
#wpforo #wpforo-wrap textarea[data-isbody="1"],
#wpforo #wpforo-wrap textarea.wpf_post_body,
#wpforo #wpforo-wrap textarea[id^="wpf_post_body_"],
#wpforo #wpforo-wrap textarea[id^="wpf_topic_body_"],
#wpforo #wpforo-wrap .wpforo-portable-form-wrap textarea,
#wpforo #wpforo-wrap .wpf-post-create textarea,
#wpforo #wpforo-wrap .wpf-topic-create textarea {
    width: 100% !important; min-height: 140px !important;
    border: 1.5px solid var(--border) !important; border-radius: var(--r-md) !important;
    padding: 12px 14px !important; font-family: var(--font-ui) !important;
    font-size: 15px !important; line-height: 1.65 !important; color: var(--text) !important;
    resize: vertical !important; background: var(--bg-1) !important;
    box-sizing: border-box !important; display: block !important;
    transition: border-color 0.2s !important; float: none !important;
    position: static !important; margin: 0 !important; max-width: 100% !important;
    visibility: visible !important; opacity: 1 !important; clip: auto !important;
}
#wpforo #wpforo-wrap textarea[data-isbody="1"]:focus,
#wpforo #wpforo-wrap textarea[id^="wpf_post_body_"]:focus,
#wpforo #wpforo-wrap textarea.wpf_post_body:focus {
    border-color: var(--accent-2) !important; outline: 2px solid var(--accent) !important; outline-offset: 2px !important; background: var(--surface) !important;
}

/* Обёртка textarea */
#wpforo #wpforo-wrap .wpf_post_form_textarea_wrap,
#wpforo #wpforo-wrap .wpf-field-body { display: block !important; width: 100% !important; padding: 0 !important; position: static !important; }

/* Скрыть сломанный TinyMCE контейнер */
#wpforo #wpforo-wrap .wp-editor-wrap,
#wpforo #wpforo-wrap .wp-editor-container,
#wpforo #wpforo-wrap .mce-tinymce,
#wpforo #wpforo-wrap .tox-tinymce { display: none !important; }

/* wpForo кнопки (исключаем наши pfr-btn) */
#wpforo #wpforo-wrap .wpf-button,
#wpforo #wpforo-wrap .wpf-reply-btn,
#wpforo #wpforo-wrap input[type="submit"]:not(.pfr-btn-main):not(.pfr-btn-submit),
#wpforo #wpforo-wrap button[type="submit"]:not(.pfr-btn-main):not(.pfr-btn-submit),
#wpforo #wpforo-wrap .wpforo-portable-form-wrap button[type="submit"]:not(.pfr-btn-main):not(.pfr-btn-submit) {
    background: var(--accent) !important; color: var(--accent-ink) !important; border: none !important;
    border-radius: var(--r-md) !important; padding: 10px 28px !important;
    font-family: var(--font-ui) !important; font-size: 15px !important;
    font-weight: 700 !important; cursor: pointer !important; transition: background 0.2s !important;
}
/* Наши pill-кнопки в Reddit-форме */
#wpforo #wpforo-wrap button.pfr-btn-main,
#wpforo #wpforo-wrap button.pfr-btn-submit {
    display: inline-flex !important; align-items: center !important; gap: 3px !important;
    padding: 4px 12px !important; border-radius: 999px !important; font-size: 11px !important;
    font-weight: 600 !important; background: #FF5C8D !important; color: #fff !important;
    border: none !important; cursor: pointer !important; min-height: 0 !important; height: auto !important;
}
#wpforo #wpforo-wrap .pfr-btn-cancel {
    display: inline-flex !important; align-items: center !important; gap: 3px !important;
    padding: 4px 12px !important; border-radius: 999px !important; font-size: 11px !important;
    font-weight: 600 !important; color: #666 !important; border: 1px solid #ddd !important;
    background: transparent !important; cursor: pointer !important; min-height: 0 !important; height: auto !important;
}
#wpforo #wpforo-wrap .wpf-button:hover,
#wpforo #wpforo-wrap input[type="submit"]:hover,
#wpforo #wpforo-wrap button[type="submit"]:not(.pfr-btn-main):not(.pfr-btn-submit):hover { background: var(--accent-hover) !important; }
#wpforo #wpforo-wrap .wpf-button:disabled,
#wpforo #wpforo-wrap input[type="submit"]:disabled,
#wpforo #wpforo-wrap button[type="submit"]:disabled { background: #ccc !important; cursor: not-allowed !important; }

/* wpForo вторичная кнопка */
#wpforo #wpforo-wrap .wpf-button-secondary { background: var(--bg-1) !important; color: var(--text) !important; border: 1.5px solid var(--border) !important; border-radius: var(--r-md) !important; padding: 9px 20px !important; font-family: var(--font-ui) !important; font-size: 14px !important; font-weight: 600 !important; }

/* Прикрепление файлов */
#wpforo #wpforo-wrap .wpf-extra-fields, #wpforo #wpforo-wrap .wpforo-extra-fields { font-size: 13px; color: #6b7280; margin: 10px 0 0; }
#wpforo #wpforo-wrap .wpf-default-attachment { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#wpforo #wpforo-wrap .wpf-default-attachment label { font-size: 13px; color: #6b7280; display: flex; align-items: center; gap: 6px; cursor: pointer; }
#wpforo #wpforo-wrap .wpf-default-attachment input[type="file"] { font-size: 12px; max-width: 220px; }

/* Subscribe checkbox */
#wpforo #wpforo-wrap .wpforo-topic-subscribe-wrap,
#wpforo #wpforo-wrap .wpf-topic-subscribe { font-size: 13px; color: #6b7280; }

/* Footer кнопок */
#wpforo #wpforo-wrap .wpf-buttons-wrap,
#wpforo #wpforo-wrap .wpf-footer-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; padding: 0 !important; }

/* Новый пост — анимация */
.pf-new-wpf-post { animation: pfFadeIn 0.4s ease; }

/* ── МОБИЛЬНАЯ ── */
@media (max-width: 768px) {
    .comment-author .avatar { width: 36px !important; height: 36px !important; }
    .comment-content, .comment-metadata, .reply .comment-reply-link { margin-left: 44px !important; }
    .comment-body, #respond, #wpforo #wpforo-wrap .wpforo-portable-form-wrap, #wpforo #wpforo-wrap .wpf-post-create { padding: 14px !important; }
    .comment-list .children { padding-left: 10px !important; }
    .comment-content { font-size: 15px !important; line-height: 1.6 !important; }
    .comment-metadata { font-size: 13px !important; }
    .pf-toolbar, .pf-forum-toolbar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: calc(100vw - 32px); }
    .pf-toolbar::-webkit-scrollbar, .pf-forum-toolbar::-webkit-scrollbar { display: none; }
    .pf-toolbar button, .pf-forum-toolbar button { padding: 6px 10px !important; font-size: 13px !important; flex-shrink: 0; min-height: 36px; }
    .comment-reply-link { padding: 6px 12px !important; font-size: 13px !important; min-height: 36px; display: inline-flex; align-items: center; }
    /* Vote buttons larger */
    .pf-vote-btn { min-width: 36px !important; min-height: 36px !important; font-size: 14px !important; }
    /* Reply form */
    #respond textarea { font-size: 16px !important; min-height: 100px !important; padding: 12px !important; }
    #respond input[type="submit"],
    #respond button[type="submit"] { width: 100% !important; padding: 14px !important; font-size: 16px !important; }
    /* wpForo forms */
    #wpforo #wpforo-wrap textarea { font-size: 16px !important; min-height: 100px !important; }
    #wpforo #wpforo-wrap .wpf-button,
    #wpforo #wpforo-wrap input[type="submit"],
    #wpforo #wpforo-wrap button[type="submit"]:not(.pfr-btn-main):not(.pfr-btn-submit) {
        padding: 12px 24px !important; font-size: 16px !important;
    }
    #wpforo #wpforo-wrap button.pfr-btn-main,
    #wpforo #wpforo-wrap button.pfr-btn-submit {
        padding: 8px 16px !important; font-size: 13px !important;
    }
    /* Comment counter */
    .pf-comment-counter { font-size: 15px !important; padding: 12px 16px !important; display: block; text-align: center; }
}
@media (max-width: 400px) {
    .comment-author .avatar { width: 32px !important; height: 32px !important; }
    .comment-content, .comment-metadata, .reply .comment-reply-link { margin-left: 40px !important; }
    .comment-list .children { padding-left: 6px !important; }
}