/**
 * ====================================
 * Community Posts — стили постов
 * ====================================
 * 
 * Вдохновлено: Telegram channels, Reddit, VK
 * 
 * Принципы:
 * 1. Content-first — текст и медиа на первом месте
 * 2. Edge-to-edge media — фото без отступов по бокам карточки
 * 3. Compact header — аватар 36px, имя + время в одну строку
 * 4. Subtle footer — реакции и статистика не конкурируют с контентом
 * 5. Чистый whitespace — воздух между элементами
 * 
 * Структура:
 * .gc-post                    — карточка поста (базируется на .gc-card)
 *   .gc-post-header           — шапка (аватар + автор + время + действия)
 *   .gc-post-pinned           — бейдж закрепленного
 *   .gc-post-body             — контент (текст)
 *   .gc-post-media            — галерея (edge-to-edge)
 *   .gc-post-footer           — реакции + статистика
 * 
 * .gc-posts-compose-panel + .gc-posts-compose-slot — форма нового поста (отдельная панель над блоком ленты)
 * .gc-post-comments           — блок комментариев
 * .gc-comment                 — отдельный комментарий
 */

/* ========================================
   Post Card — Telegram-стиль
   Нет border, нет hover. Посты = контент в ленте.
   ======================================== */

.gc-post {
    /* Контекст скругления для вложений (не зависит от plain-панелей вокруг ленты) */
    --gc-corner-outer: var(--radius-lg);
    --gc-corner-nest: 0px;
    background: var(--bg-content-main);
    border: 1px solid var(--ui-border);
    border-radius: var(--gc-corner-outer);
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    scroll-margin-top: var(--spacing-mdl);
}

/* ========================================
   Post Header — компактная шапка
   Паттерн: [avatar 36px] [name · time] [⋯]
   ======================================== */

.gc-post-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-mdl);
}

.gc-post-header-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.gc-post-avatar-link {
    display: inline-flex;
    text-decoration: none;
    color: inherit;
}

/* Мета под именем (имя + дата / автор вертикально) */
.gc-post-header-meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}

.gc-post-header .gc-post-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.gc-post-author-link {
    display: inline-flex;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.gc-post-author {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--font-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* Дата под именем канала */
.gc-post-date {
    font-size: var(--font-size-xs);
    color: var(--font-secondary);
    line-height: 1.3;
}

.gc-post-subauthor {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: var(--font-secondary);
    text-decoration: none;
}

.gc-post-subauthor-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-xs);
    line-height: 1.3;
}

/* Старый .gc-post-time (в шапке, устарел) */
.gc-post-time {
    font-size: var(--font-size-xs);
    color: var(--font-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Время в footer (справа) */
.gc-post-time-footer {
    font-size: var(--font-size-xs);
    color: var(--font-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Имя автора (подпись справа, как «via» в Telegram) */
.gc-post-via {
    font-size: var(--font-size-xs);
    color: var(--font-secondary);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Placeholder когда у канала нет аватара */
.gc-post-header .gc-post-avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    box-sizing: border-box;
    background: var(--ui-surface-1);
    border: 1px solid var(--ui-border);
    color: var(--font-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-md);
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}

/* Иконка «Закреплено» в строке счётчиков (Telegram-стиль) */
.gc-post-pin-icon {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--font-secondary);
}

/* Бейдж «Отредактировано» */
.gc-post-edited {
    font-size: var(--font-size-xs);
    color: var(--font-secondary);
}

/* ========================================
   Post Body — текст поста
   ======================================== */

.gc-post-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-mdl);
    padding: var(--spacing-xs) var(--spacing-mdl) var(--spacing-sm);
    font-size: var(--font-size-mdl);
    line-height: 1.65;
    color: var(--font-primary);
    word-wrap: break-word;
}

.gc-post-header + .gc-post-body {
    padding-top: var(--spacing-xs);
}

.gc-post-media + .gc-post-body {
    padding-top: var(--spacing-mdl);
}

/* Ссылка на заголовок — без дефолтного стиля ссылки */
.gc-post-title-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.gc-post-title-link:hover .gc-post-title {
    color: var(--accent-link);
}

/* TipTap HTML контент — Telegram показывает полностью */
.gc-post-tiptap {
    display: flex;
    flex-direction: column;
    /* Посты должны ощущаться как блокнот: переносы строк компактные, без «провалов». */
    gap: var(--spacing-2xs);
    white-space: normal;
}

.gc-post-tiptap > * {
    margin: 0;
}

/* Эмбед-карточки (event/stage/profile/results) в постах: одинаковый небольшой отступ сверху/снизу.
   ВАЖНО: `data-embed-card` — единый маркер, часть эмбедов приходит не из TipTap extension. */
.gc-post-tiptap > a[data-embed-card] {
    margin: var(--spacing-sm) 0;
}

.gc-post-tiptap > a[data-embed-card]:first-child {
    margin-top: 0;
}

.gc-post-tiptap > a[data-embed-card]:last-child {
    margin-bottom: 0;
}

/* Эмбеды-ссылки в посте и в композере: лёгкая тень; ховер как у .gc-post-discussion-link для всех типов эмбеда */
.gc-post-tiptap a[data-embed-card].gc-card-activity-event,
.gc-post-compose-entry .stage-tiptap-editor a[data-embed-card].gc-card-activity-event {
    box-shadow: var(--shadow-sm);
}

.gc-post-tiptap a[data-embed-card].gc-card-activity-event:hover,
.gc-post-tiptap a[data-embed-card].gc-card-activity-event:focus-visible,
.gc-post-compose-entry .stage-tiptap-editor a[data-embed-card].gc-card-activity-event:hover,
.gc-post-compose-entry .stage-tiptap-editor a[data-embed-card].gc-card-activity-event:focus-visible {
    background: var(--bg-hover);
    color: var(--font-primary);
    border-color: var(--ui-border);
    box-shadow: none;
}

.gc-post-tiptap.gc-text-content :is(p, h1, h2, h3, ul, ol, blockquote) {
    margin: 0;
}

/* В постах ссылки не подчеркиваются вообще. Подчеркивание допустимо
   для описаний/брифингов, но не для ленты и деталей постов. */
.gc-post-tiptap.gc-text-content :is(a, .stage-editor-link),
.gc-post-tiptap.gc-text-content :is(a, .stage-editor-link):hover,
.gc-post-tiptap.gc-text-content :is(a, .stage-editor-link):focus {
    text-decoration: none;
}

/* Лента/карточка: ритм чуть плотнее «статьи», акцент мягче глобального .gc-text-content */
.gc-post-tiptap.gc-text-content strong,
.gc-post-tiptap.gc-text-content b {
    font-weight: 550;
}

.gc-post-tiptap.gc-text-content h1,
.gc-post-tiptap.gc-text-content h2,
.gc-post-tiptap.gc-text-content h3 {
    font-weight: 500;
    line-height: 1.35;
}

.gc-post-tiptap .gc-card-activity-event {
    width: 100%;
    min-width: 0;
    align-items: center;
}

.gc-post-tiptap .gc-card-activity-event .activity-event-meta .gc-text-truncate {
    display: block;
    min-width: 0;
}

.gc-post-tiptap .gc-card-activity-event .activity-event-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gc-card-activity-event--results {
    align-items: flex-start;
}

/* Layout делаем через UI Kit: gc-stack-sm / gc-flex / gc-gap-* */

.gc-embed-results {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-mdl);
}

.gc-embed-results .activity-event-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.gc-embed-results-top {
    padding-top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.gc-embed-results-top-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
    font-size: var(--font-size-sm);
    color: var(--font-secondary);
}

.gc-embed-results-place {
    color: var(--font-secondary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.gc-embed-results-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--ui-surface-1);
    border: 1px solid var(--ui-border);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gc-embed-results-avatar--photo {
    border: none;
}

.gc-embed-results-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gc-embed-results-avatar-fallback {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--font-secondary);
    line-height: 1;
}

.gc-embed-results-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--font-primary);
    font-weight: 500;
}

.gc-embed-results-points {
    color: var(--font-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Только что опубликованный пост: мягкое появление */
.gc-post--just-published {
    animation: gc-post-just-published-in 320ms var(--ease-out, ease-out) both;
}

@keyframes gc-post-just-published-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gc-post-embed-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.gc-post-embed-subtitle {
    margin-top: 0;
    font-size: var(--font-size-xs);
    color: var(--font-secondary);
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Заголовок поста (опционально) — ближе к телу ленты, без размера глобального h2 */
.gc-post-title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 550;
    line-height: 1.35;
}

.gc-post-readmore {
    color: var(--accent-link);
    font-weight: 500;
    text-decoration: none;
    font-size: var(--font-size-sm);
}

.gc-post-readmore:hover {
    text-decoration: underline;
}

/* ========================================
   Post Media — edge-to-edge фотографии
   object-fit: cover — ячейка заполняется, лишнее обрезается; object-position по ориентации.
   Подложка .gc-post-media-blur — та же картинка, blur + cover под основным слоем (при cover основного
   слоя подложка не видна; без JS-переключения режимов — нет «сначала fill, потом fit»).
   Одно фото с метаданными: .gc-post-media-item--measured — высота через padding-bottom % от ширины (без cqw).
   ======================================== */

.gc-post-media {
    display: grid;
    gap: 2px;
    overflow: hidden;
    /* Без border-radius — карточка сама обрезает через overflow: hidden */
}

.gc-post-media--1 {
    grid-template-columns: 1fr;
}

.gc-post-media--2 {
    grid-template-columns: 1fr 1fr;
}

.gc-post-media--3 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.gc-post-media--3 .gc-post-media-item:first-child {
    grid-row: 1 / 3;
    /* Базовый aspect-ratio 1:1 даёт высоту = ширине колонки; два ряда справа + row-gap
       дают большую сумму — левый кадр визуально «короче». Растягиваем на всю spanned-область. */
    aspect-ratio: unset;
    align-self: stretch;
    min-height: 0;
    height: 100%;
}

.gc-post-media--4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* --- Умная сетка 2 фото (ориентации из метаданных) --- */
.gc-post-media--2.gc-post-media--smart-2-pp {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, auto) minmax(0, auto);
}

.gc-post-media--2.gc-post-media--smart-2-pp .gc-post-media-item {
    aspect-ratio: unset;
    width: 100%;
}

.gc-post-media--2.gc-post-media--smart-2-pp .gc-post-media-item[data-gc-media-orientation='portrait'] {
    aspect-ratio: var(--gc-media-ratio, 3 / 4);
    max-height: min(72vh, 640px);
}

.gc-post-media--2.gc-post-media--smart-2-pp .gc-post-media-item:not([data-gc-media-orientation='portrait']) {
    aspect-ratio: 1 / 1;
    max-height: min(52vh, 480px);
}

.gc-post-media--2.gc-post-media--smart-2-ll {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
}

.gc-post-media--2.gc-post-media--smart-2-ll .gc-post-media-item {
    aspect-ratio: 3 / 2;
    max-height: min(36vw, 280px);
    min-height: 0;
}

.gc-post-media--2.gc-post-media--smart-2-pl {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    grid-template-rows: minmax(0, auto);
    align-items: stretch;
}

.gc-post-media--2.gc-post-media--smart-2-pl .gc-post-media-item:first-child {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: var(--gc-media-ratio, 3 / 4);
}

.gc-post-media--2.gc-post-media--smart-2-pl .gc-post-media-item:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: unset;
    height: 100%;
    min-height: 0;
}

.gc-post-media--2.gc-post-media--smart-2-lp {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    grid-template-rows: minmax(0, auto);
    align-items: stretch;
}

.gc-post-media--2.gc-post-media--smart-2-lp .gc-post-media-item:first-child {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: unset;
    height: 100%;
    min-height: 0;
}

.gc-post-media--2.gc-post-media--smart-2-lp .gc-post-media-item:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: var(--gc-media-ratio, 3 / 4);
}

/* --- Умная сетка 3–4 фото: только доля строк/колонок и форма ячеек --- */
.gc-post-media--3.gc-post-media--smart-3-portrait-heavy {
    grid-template-columns: 1.88fr 1fr;
    grid-template-rows: 1.1fr 1.1fr;
}

.gc-post-media--3.gc-post-media--smart-3-landscape-heavy {
    grid-template-columns: 1.58fr 1fr;
    grid-template-rows: 0.9fr 0.9fr;
}

.gc-post-media--4.gc-post-media--smart-4-portrait-heavy .gc-post-media-item {
    aspect-ratio: 3 / 4;
}

.gc-post-media--4.gc-post-media--smart-4-landscape-heavy .gc-post-media-item {
    aspect-ratio: 4 / 3;
}

.gc-post-media-item {
    position: relative;
    overflow: hidden;
    background: var(--bg-content-secondary);
    aspect-ratio: 1 / 1;
    min-width: 0;
}

/* Одиночное фото без метаданных — квадрат; с --measured — отдельные правила (не смешивать max-height) */
.gc-post-media--1 .gc-post-media-item:not(.gc-post-media-item--measured) {
    aspect-ratio: 1 / 1;
    max-height: min(85vh, 920px);
}

/*
 * Одно фото с --gc-media-ratio: высота = min(ширина/ratio, cap) через padding-bottom % (от ширины ячейки).
 * Без cqw/container queries — стабильно в flex-лейауте.
 */
.gc-post-media--1 .gc-post-media-item--measured {
    aspect-ratio: unset;
    width: 100%;
    height: 0;
    padding-bottom: min(calc(100% / var(--gc-media-ratio)), min(85vh, 920px));
    position: relative;
    box-sizing: content-box;
}

/* Только 2 фото без smart-*: одна строка — можно выставить ratio из файла. Сетка 2×2 на 4 фото с
 * grid-template-rows: 1fr 1fr + разные aspect-ratio на ячейках ломает раскладку — там остаётся 1:1
 * или классы smart-4-* (3/4 и 4/3) из PostMediaGridLayout. */
.gc-post-media--2:not([class*="smart"]) .gc-post-media-item:not([data-gc-media-bucket="unknown"]) {
    aspect-ratio: var(--gc-media-ratio);
    max-height: min(52vh, 560px);
}

/* Кадрирование ближе к Telegram: портрет — верх (лица), панорама — центр кадра */
.gc-post-media-item[data-gc-media-orientation='portrait'] .gc-post-media-image,
.gc-post-media-item[data-gc-media-orientation='portrait'] .gc-post-media-blur img {
    object-position: center 18%;
}

.gc-post-media-item[data-gc-media-tall='1'] .gc-post-media-image,
.gc-post-media-item[data-gc-media-tall='1'] .gc-post-media-blur img {
    object-position: center 10%;
}

/* 3 фото: крупный кадр слева на двух рядах — center 18%/10% для портрета съедает низ при object-fit: cover */
.gc-post-media--3 .gc-post-media-item:first-child .gc-post-media-image,
.gc-post-media--3 .gc-post-media-item:first-child .gc-post-media-blur img {
    object-position: center center;
}

.gc-post-media-item[data-gc-media-orientation='landscape'] .gc-post-media-image,
.gc-post-media-item[data-gc-media-orientation='landscape'] .gc-post-media-blur img {
    object-position: center center;
}

.gc-post-media-item[data-gc-media-wide='1'] .gc-post-media-image,
.gc-post-media-item[data-gc-media-wide='1'] .gc-post-media-blur img {
    object-position: center 48%;
}

.gc-post-media--5,
.gc-post-media--6,
.gc-post-media--7,
.gc-post-media--8,
.gc-post-media--9,
.gc-post-media--10 {
    --gc-post-media-row: clamp(120px, 13vw, 178px);
    grid-auto-flow: dense;
    grid-auto-rows: var(--gc-post-media-row);
}

/* Профиль по соотношениям (PostMediaGridLayout): портретный / альбомный альбом 5–10 */
.gc-post-media--5.gc-post-media--ratio-profile-portrait,
.gc-post-media--6.gc-post-media--ratio-profile-portrait,
.gc-post-media--7.gc-post-media--ratio-profile-portrait,
.gc-post-media--8.gc-post-media--ratio-profile-portrait,
.gc-post-media--9.gc-post-media--ratio-profile-portrait,
.gc-post-media--10.gc-post-media--ratio-profile-portrait {
    --gc-post-media-row: clamp(132px, 14.5vw, 190px);
}

.gc-post-media--5.gc-post-media--ratio-profile-landscape,
.gc-post-media--6.gc-post-media--ratio-profile-landscape,
.gc-post-media--7.gc-post-media--ratio-profile-landscape,
.gc-post-media--8.gc-post-media--ratio-profile-landscape,
.gc-post-media--9.gc-post-media--ratio-profile-landscape,
.gc-post-media--10.gc-post-media--ratio-profile-landscape {
    --gc-post-media-row: clamp(112px, 12vw, 168px);
}

.gc-post-media--5 .gc-post-media-item,
.gc-post-media--6 .gc-post-media-item,
.gc-post-media--7 .gc-post-media-item,
.gc-post-media--8 .gc-post-media-item,
.gc-post-media--9 .gc-post-media-item,
.gc-post-media--10 .gc-post-media-item {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
}

.gc-post-media--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gc-post-media--5 .gc-post-media-item:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.gc-post-media--5 .gc-post-media-item:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
}

.gc-post-media--5 .gc-post-media-item:nth-child(3) {
    grid-column: 3;
    grid-row: 2;
}

.gc-post-media--5 .gc-post-media-item:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
}

.gc-post-media--5 .gc-post-media-item:nth-child(5) {
    grid-column: 2 / 4;
    grid-row: 3;
}

.gc-post-media--6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gc-post-media--6 .gc-post-media-item:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.gc-post-media--6 .gc-post-media-item:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
}

.gc-post-media--6 .gc-post-media-item:nth-child(3) {
    grid-column: 3;
    grid-row: 2;
}

.gc-post-media--6 .gc-post-media-item:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
}

.gc-post-media--6 .gc-post-media-item:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
}

.gc-post-media--6 .gc-post-media-item:nth-child(6) {
    grid-column: 3;
    grid-row: 3;
}

.gc-post-media--7 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gc-post-media--7 .gc-post-media-item:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.gc-post-media--7 .gc-post-media-item:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
}

.gc-post-media--7 .gc-post-media-item:nth-child(3) {
    grid-column: 4;
    grid-row: 1;
}

.gc-post-media--7 .gc-post-media-item:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
}

.gc-post-media--7 .gc-post-media-item:nth-child(5) {
    grid-column: 4;
    grid-row: 2;
}

.gc-post-media--7 .gc-post-media-item:nth-child(6) {
    grid-column: 1;
    grid-row: 3;
}

.gc-post-media--7 .gc-post-media-item:nth-child(7) {
    grid-column: 2 / 5;
    grid-row: 3;
}

.gc-post-media--8 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gc-post-media--8 .gc-post-media-item:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.gc-post-media--8 .gc-post-media-item:nth-child(2) {
    grid-column: 3 / 5;
    grid-row: 1;
}

.gc-post-media--8 .gc-post-media-item:nth-child(3) {
    grid-column: 3;
    grid-row: 2;
}

.gc-post-media--8 .gc-post-media-item:nth-child(4) {
    grid-column: 4;
    grid-row: 2;
}

.gc-post-media--8 .gc-post-media-item:nth-child(5) {
    grid-column: 1;
    grid-row: 3;
}

.gc-post-media--8 .gc-post-media-item:nth-child(6) {
    grid-column: 2;
    grid-row: 3;
}

.gc-post-media--8 .gc-post-media-item:nth-child(7) {
    grid-column: 3;
    grid-row: 3;
}

.gc-post-media--8 .gc-post-media-item:nth-child(8) {
    grid-column: 4;
    grid-row: 3;
}

.gc-post-media--9 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gc-post-media--9 .gc-post-media-item:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1;
}

.gc-post-media--9 .gc-post-media-item:nth-child(2) {
    grid-column: 3 / 5;
    grid-row: 1;
}

.gc-post-media--9 .gc-post-media-item:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
}

.gc-post-media--9 .gc-post-media-item:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
}

.gc-post-media--9 .gc-post-media-item:nth-child(5) {
    grid-column: 3;
    grid-row: 2;
}

.gc-post-media--9 .gc-post-media-item:nth-child(6) {
    grid-column: 4;
    grid-row: 2;
}

.gc-post-media--9 .gc-post-media-item:nth-child(7) {
    grid-column: 1;
    grid-row: 3;
}

.gc-post-media--9 .gc-post-media-item:nth-child(8) {
    grid-column: 2;
    grid-row: 3;
}

.gc-post-media--9 .gc-post-media-item:nth-child(9) {
    grid-column: 3 / 5;
    grid-row: 3;
}

.gc-post-media--10 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gc-post-media--10 .gc-post-media-item:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.gc-post-media--10 .gc-post-media-item:nth-child(2) {
    grid-column: 3 / 5;
    grid-row: 1;
}

.gc-post-media--10 .gc-post-media-item:nth-child(3) {
    grid-column: 3;
    grid-row: 2;
}

.gc-post-media--10 .gc-post-media-item:nth-child(4) {
    grid-column: 4;
    grid-row: 2;
}

.gc-post-media--10 .gc-post-media-item:nth-child(5) {
    grid-column: 1;
    grid-row: 3;
}

.gc-post-media--10 .gc-post-media-item:nth-child(6) {
    grid-column: 2;
    grid-row: 3;
}

.gc-post-media--10 .gc-post-media-item:nth-child(7) {
    grid-column: 3;
    grid-row: 3;
}

.gc-post-media--10 .gc-post-media-item:nth-child(8) {
    grid-column: 4;
    grid-row: 3;
}

.gc-post-media--10 .gc-post-media-item:nth-child(9) {
    grid-column: 1 / 3;
    grid-row: 4;
}

.gc-post-media--10 .gc-post-media-item:nth-child(10) {
    grid-column: 3 / 5;
    grid-row: 4;
}

.gc-post-media-blur {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.gc-post-media-blur img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(18px);
    transform: scale(1.12);
    opacity: 0.9;
}

.gc-post-media-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.12));
    pointer-events: none;
}

.gc-post-media-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    cursor: zoom-in;
    transition: transform var(--transition-base);
}

.gc-post-media-item:hover .gc-post-media-image {
    transform: scale(1.02);
}

.gc-post-media--1 .gc-post-media-item:hover .gc-post-media-image {
    transform: none;
}

/* Оверлей "+N" для 4+ фото */
.gc-post-media-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    pointer-events: none;
}

/* ========================================
   Post Footer — Telegram-стиль
   Реакции слева, счётчики справа
   ======================================== */

.gc-post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-mdl) var(--spacing-mdl);
    min-height: 44px;
}

/* Реакции-чипы (Telegram-стиль) */
.gc-post-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2xs);
    align-items: center;
    position: relative;
}

.gc-post-footer--feed {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    min-height: 0;
}

.gc-post-footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    min-width: 0;
    padding: var(--spacing-xs) var(--spacing-mdl) var(--spacing-sm);
}

.gc-post-header + .gc-post-footer--feed .gc-post-footer-top {
    padding-top: 0;
}

.gc-post-media + .gc-post-footer--feed .gc-post-footer-top {
    padding-top: var(--spacing-sm);
}

.gc-post-body + .gc-post-footer--feed .gc-post-footer-top {
    padding-top: var(--spacing-xs);
}

.gc-post-chip,
.gc-post-reaction-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 3px 8px;
    min-height: 28px;
    min-width: 28px;
    border: 1px solid transparent;
    border-radius: 20px;
    background: var(--bg-content-secondary);
    font-size: var(--font-size-xs);
    color: var(--font-secondary);
    cursor: pointer;
    line-height: 1;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    font-family: inherit;
}

.gc-post-chip:hover {
    background: var(--bg-hover);
    border-color: var(--border-secondary);
    color: var(--font-primary);
}

.gc-post-chip--active {
    background: var(--bg-hover);
    border-color: var(--border-secondary);
    color: var(--font-primary);
}

.gc-post-chip--active:hover {
    background: var(--bg-content-tertiary);
    border-color: var(--border-secondary);
    color: var(--font-primary);
}

.gc-post-chip--pop {
    animation: gc-post-reaction-pop 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: center;
}

@keyframes gc-post-reaction-pop {
    0% {
        transform: scale(0.72);
        opacity: 0.4;
    }
    60% {
        transform: scale(1.14);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.gc-post-discussion-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    width: 100%;
    min-height: 48px;
    margin-top: auto;
    padding: var(--spacing-sm) var(--spacing-mdl);
    border-top: 1px solid var(--ui-border);
    border-radius: 0;
    text-decoration: none;
    color: var(--font-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    line-height: 1.2;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.gc-post-discussion-link:hover {
    background: var(--bg-hover);
    color: var(--font-primary);
}

.gc-post-discussion-link i {
    font-size: 16px;
    flex-shrink: 0;
}

.gc-post-discussion-link__left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Скелетон ленты: та же сетка, что у ссылки «Обсуждение», без клика */
.gc-post-discussion-link--skeleton {
    pointer-events: none;
    cursor: default;
}

.gc-post-discussion-link--skeleton .gc-post-discussion-link__left {
    flex: 1;
    min-width: 0;
}

.gc-post-discussion-link--skeleton .gc-post-discussion-link__left .gc-skeleton {
    max-width: 12rem;
}

.gc-post-discussion-link-chev-skeleton {
    width: var(--font-size-md);
    height: var(--font-size-md);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.gc-post-reaction-trigger:hover {
    background: var(--bg-hover);
    border-color: var(--border-secondary);
    color: var(--font-primary);
}

.gc-post-reaction-trigger-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 1rem = корень html (15px) — как раньше 15px без дробного --font-size-mdl */
    font-size: var(--font-size-md);
    line-height: 1;
}

.gc-post-chip-emoji {
    font-size: var(--font-size-md);
    line-height: 1;
}

.gc-post-chip-count {
    font-size: var(--font-size-xs);
    font-weight: 500;
    min-width: 10px;
}

/* Счётчики справа (views + comments) */
.gc-post-counters {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
    min-width: 0;
}

.gc-post-stat {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2xs);
    font-size: var(--font-size-xs);
    color: var(--font-secondary);
    text-decoration: none;
}

.gc-post-stat i {
    font-size: 13px;
}

/* Реакции-кнопки на детальной странице (крупнее) */
.gc-post-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2xs);
}

.gc-post-reaction {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 20px;
    background: transparent;
    font-size: var(--font-size-sm);
    color: var(--font-secondary);
    cursor: pointer;
    line-height: 1;
    transition: all var(--transition-fast);
    font-family: inherit;
}

.gc-post-reaction:hover {
    background: var(--bg-hover);
    border-color: var(--border-tertiary);
}

.gc-post-reaction--active {
    background: rgba(var(--accent-link-rgb), 0.12);
    border-color: var(--accent-link);
    color: var(--accent-link);
}

.gc-post-reaction:disabled {
    cursor: default;
    opacity: 0.6;
}

.gc-post-reaction-emoji {
    font-size: 18px;
}

.gc-post-reaction-count {
    font-weight: 500;
    min-width: 12px;
}

/* Детальная статистика */
.gc-post-stats-detail {
    display: flex;
    gap: var(--spacing-mdl);
}

.gc-post-stats-detail .gc-post-stat {
    font-size: var(--font-size-sm);
}

.gc-post-stats-detail .gc-post-stat i {
    font-size: var(--font-size-md);
}

/* ========================================
   Comments Section
   ======================================== */

/* Секция комментариев — отдельный блок в паттерне проекта */
.gc-post-comments {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.gc-post-comments-header {
    padding: 0 0 var(--spacing-sm);
    border: 0;
    background: transparent;
}

.gc-post-comments-header h4 {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--font-primary);
}

.gc-post-comments-body {
    padding: 0 0 var(--spacing-mdl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-mdl);
}

/* Comment Compose */
.gc-comment-compose {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-start;
}

.gc-comment-compose-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.gc-comment-compose-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.gc-comment-compose-dock {
    position: fixed;
    left: var(--gc-comment-compose-left, 16px);
    width: min(var(--gc-comment-compose-width, calc(100vw - 32px)), 100vw - 32px);
    bottom: 0;
    z-index: 75;
    background: var(--bg-content-main);
}

.gc-comment-compose-dock--floating {
    bottom: 16px;
    background: transparent;
}

.gc-comment-compose-shell {
    background: var(--bg-content-secondary);
    border: none;
    border-top: 1px solid var(--ui-border);
    border-radius: 0;
    box-shadow: none;
}

.gc-comment-compose-shell--floating {
    background: var(--bg-content-main);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.gc-comment-compose-skeleton {
    width: 100%;
    margin-top: var(--spacing-mdl);
}

.gc-comment-compose-skeleton .gc-comment-compose-field.gc-input-shell {
    min-height: 44px;
}

.gc-comment-compose--dock {
    padding: var(--spacing-sm) var(--spacing-mdl);
    align-items: center;
}

.gc-comment-compose-field.gc-input-shell,
.gc-comment-reply-row.gc-input-shell {
    gap: var(--spacing-xs);
    align-items: center;
    min-height: 44px;
    padding: 0 var(--spacing-xs);
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.gc-comment-compose-field.gc-input-shell:focus-within,
.gc-comment-reply-row.gc-input-shell:focus-within {
    border: none;
    background: transparent;
    box-shadow: none;
}

.gc-comment-compose-entry textarea,
.gc-comment-compose-input__textarea {
    display: block;
    align-self: center;
    min-height: 22px !important;
    height: auto;
    padding: 11px 0 !important;
    border-radius: 0 !important;
    font-size: var(--font-size-sm) !important;
    line-height: 1.4;
    resize: none;
    overflow-y: hidden;
    flex: 1;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.gc-comment-reply-send.gc-post-compose-send {
    flex-shrink: 0;
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin-bottom: 0;
    border-radius: 0 !important;
    background: transparent;
    color: var(--font-secondary);
}

.gc-comment-reply-send.gc-post-compose-send:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--font-primary);
}

.gc-comment-form-status {
    min-height: 18px;
    margin: 0;
    padding-left: 0;
}

.gc-comment-form-status:empty {
    display: none;
}

.gc-comment-reply-preview {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    border-left: 2px solid rgba(var(--accent-link-rgb), 0.45);
    border-radius: var(--radius-sm);
    background: var(--bg-content-secondary);
}

.gc-comment-reply-preview-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
}

.gc-comment-reply-preview-label,
.gc-comment-reply-preview-author {
    font-size: var(--font-size-xs);
    line-height: 1.3;
}

.gc-comment-reply-preview-label {
    color: var(--font-secondary);
}

.gc-comment-reply-preview-author {
    color: var(--accent-link);
    font-weight: 500;
}

.gc-comment-reply-preview-text {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.4;
    color: var(--font-secondary);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.gc-comment-reply-preview-close {
    width: 28px;
    min-width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--font-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gc-comment-reply-preview-close:hover {
    background: var(--bg-hover);
    color: var(--font-primary);
}

/* ========================================
   Comment Thread
   Паттерн Telegram: bubble-style
   ======================================== */

.gc-comment {
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-end;
}

.post-comments__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.post-comments__list > .gc-comment + .gc-comment {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.gc-comment-main {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    align-items: flex-start;
}

.gc-comment-row {
    width: auto;
    max-width: min(82%, 720px);
    display: inline-flex;
    align-items: flex-start;
    position: relative;
    padding-right: calc(var(--spacing-xs) + var(--spacing-xl));
}

.gc-comment-bubble {
    position: relative;
    background: var(--bg-content-main);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);
    padding: var(--spacing-sm);
    display: block;
    width: auto;
    min-width: 0;
    max-width: 100%;
}

.gc-comment-author {
    display: block;
    font-weight: 500;
    font-size: var(--font-size-sm);
    line-height: 1.3;
    color: var(--accent-link);
    text-decoration: none;
    margin: 0;
}

.gc-comment-author:hover {
    color: var(--accent-link-hover);
}

.gc-comment-quote {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    margin: var(--spacing-xs) 0;
    padding: var(--spacing-sm);
    border-left: 2px solid rgba(var(--accent-link-rgb), 0.45);
    border-radius: var(--radius-sm);
    background: var(--bg-content-secondary);
}

.gc-comment-quote--interactive {
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.gc-comment-quote--interactive:hover,
.gc-comment-quote--interactive:focus-visible {
    background: var(--bg-hover);
    border-left-color: rgba(var(--accent-link-rgb), 0.8);
    outline: none;
}

.gc-comment-quote-author {
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1.3;
    color: var(--accent-link);
    text-decoration: none;
}

.gc-comment-quote-author:hover {
    color: var(--accent-link-hover);
}

.gc-comment-quote-text {
    margin: 0;
    font-size: var(--font-size-xs);
    line-height: 1.4;
    color: var(--font-secondary);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.gc-comment--quoted-target .gc-comment-bubble {
    box-shadow: 0 0 0 1px rgba(var(--accent-link-rgb), 0.6);
    background: color-mix(in srgb, var(--bg-content-main) 88%, rgba(var(--accent-link-rgb), 0.12));
}

.gc-comment-bodyline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: var(--spacing-sm);
}

.gc-comment-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    align-self: end;
}

.gc-comment-time,
.gc-comment-meta .gc-post-edited {
    font-size: var(--font-size-xs);
    line-height: 1;
    color: var(--font-secondary);
    white-space: nowrap;
}

.gc-comment-reply-btn {
    border: none;
    background: transparent;
    padding: 0;
    font-size: var(--font-size-xs);
    line-height: 1;
    color: var(--font-secondary);
    cursor: pointer;
}

.gc-comment-reply-btn:hover {
    color: var(--font-primary);
}

.gc-comment-menu {
    position: absolute;
    top: var(--spacing-4xs);
    right: var(--spacing-xs);
}

.gc-comment-menu > .gc-dropdown-toggle {
    opacity: 0;
    pointer-events: none;
    transform: translateY(var(--spacing-4xs));
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.gc-comment:hover .gc-comment-menu > .gc-dropdown-toggle,
.gc-comment:focus-within .gc-comment-menu > .gc-dropdown-toggle {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

@media (hover: none) {
    .gc-comment-menu > .gc-dropdown-toggle {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }
}

.gc-comment-text {
    display: block;
    font-size: var(--font-size-mdl);
    line-height: 1.5;
    color: var(--font-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
    min-width: 0;
}

.gc-comment-text:last-child {
    margin-bottom: 0;
}

/* Аватар в комментарии (32px) */
.gc-comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 0;
    align-self: flex-end;
}

/* Empty state */
.gc-post-comments-empty {
    text-align: center;
    padding: var(--spacing-xl) 0 calc(var(--spacing-xl) + var(--spacing-sm));
    color: var(--font-secondary);
}

.gc-post-comments-empty i {
    font-size: 40px;
    opacity: 0.3;
    display: block;
    margin-bottom: var(--spacing-sm);
}

/* ========================================
   Post Form — create / edit
   ======================================== */

.gc-post-form-editor {
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-lg);
    background: var(--bg-content-secondary);
    padding: var(--spacing-sm);
    min-height: 180px;
}

/* Editor height rules migrated to `public/css/tiptap-editor.css` */

.gc-post-form-media-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
}

.gc-post-form-notify {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    color: var(--font-primary);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}

.gc-post-form-notify input {
    margin-top: 2px;
}

/* ========================================
   Feed-level: Quick Post Compose
   Telegram-style: аватар + rounded input
   ======================================== */

.gc-post-compose {
    padding: 0;
}

.gc-post-compose-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* Превью загруженных фото */
.gc-post-compose-photos {
    display: none;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.gc-post-compose-form--stacked .gc-post-compose-photos {
    gap: var(--spacing-mdl);
}

.gc-post-compose-photos.has-photos {
    display: flex;
}

.gc-post-compose-photos-grid {
    display: none;
}

.gc-post-compose-photos.has-grid .gc-post-compose-photos-grid {
    display: grid;
}

/* Сетка миниатюр на странице редактирования поста (не как в ленте) */
.gc-post-compose-photos.has-grid .gc-post-compose-photos-grid:not(.gc-post-media) {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: var(--spacing-xs);
}

/* Превью при создании поста: та же вёрстка, что у опубликованного поста */
.gc-post-compose-photos-grid.gc-post-compose-media-preview {
    border-radius: var(--radius-lg);
}

.gc-post-compose-media-preview .gc-post-compose-media-preview-image {
    cursor: default;
    pointer-events: none;
}

.gc-post-compose-media-preview .gc-post-media-item:hover .gc-post-compose-media-preview-image {
    transform: none;
}

.gc-post-compose-media-preview-remove {
    position: absolute;
    top: var(--spacing-2xs);
    right: var(--spacing-2xs);
    z-index: 3;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.65);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    line-height: 1;
    transition: background var(--transition-fast);
}

.gc-post-compose-media-preview-remove:hover {
    background: var(--danger-color);
}

.gc-post-compose-media-preview-remove i {
    font-size: var(--font-size-md);
    line-height: 1;
}

.gc-post-compose-progress {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: var(--spacing-xs);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-md);
    background: var(--bg-content-secondary);
}

.gc-post-compose-progress.is-visible {
    display: flex;
}

.gc-post-compose-progress-track {
    position: relative;
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: var(--bg-content-tertiary);
}

.gc-post-compose-progress-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--accent-primary);
    transition: width 180ms ease;
}

.gc-post-compose-progress-text {
    margin: 0;
    font-size: var(--font-size-xs);
    line-height: 1.4;
    color: var(--font-secondary);
}

/* Посты: локальные тексты прогресса не показываем (оставляем только top-loader) */
.gc-post-compose-progress-text {
    display: none;
}

.gc-post-compose-progress.is-indeterminate .gc-post-compose-progress-bar {
    width: 38%;
    animation: gc-post-compose-progress-indeterminate 1s ease-in-out infinite;
}

.gc-post-compose-progress.is-error .gc-post-compose-progress-bar {
    width: 100%;
    background: var(--danger-color);
}

.gc-post-compose-form--stacked .gc-post-compose-progress.is-visible {
    border: none;
    background: transparent;
    padding: 0;
    gap: var(--spacing-2xs);
}

.gc-post-compose-form--stacked .gc-post-compose-progress-track {
    height: var(--spacing-sm);
}

.gc-post-compose-form--stacked .gc-post-compose-progress-bar {
    background: var(--font-primary);
}

.gc-post-compose-progress.is-error .gc-post-compose-progress-text {
    color: var(--danger-color);
}

@keyframes gc-post-compose-progress-indeterminate {
    0% {
        transform: translateX(-110%);
    }
    100% {
        transform: translateX(290%);
    }
}

.gc-post-compose-photo {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-content-secondary);
}

.gc-post-compose-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gc-post-compose-photo-remove {
    position: absolute;
    top: var(--spacing-2xs);
    right: var(--spacing-2xs);
    width: 22px;
    height: 22px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: var(--radius-full);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: background var(--transition-fast);
}

.gc-post-compose-photo-remove:hover {
    background: var(--danger-color);
}

.gc-post-compose-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: calc(36px + var(--spacing-sm));
}

.gc-post-compose-attach {
    cursor: pointer;
}

.gc-post-compose-shell {
    box-shadow: none;
    background: var(--bg-content-secondary);
    border: none;
    border-top: 1px solid var(--ui-border);
    border-radius: 0;
}

.gc-post-compose-shell--floating {
    background: var(--bg-content-main);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.gc-post-compose-dock:not(.gc-post-compose-dock--inline) {
    position: fixed;
    left: 50%;
    width: min(948px, calc(100vw - 48px));
    bottom: 0;
    z-index: 80;
    background: var(--bg-content-main);
    transform: translateX(-50%);
    overflow: visible;
}

@media (min-width: 992px) {
    .gc-post-compose-dock:not(.gc-post-compose-dock--inline) {
        width: max(
            0px,
            calc(
                min(100vw, var(--layout-page-max-width))
                - var(--layout-catalog-sidebar-width)
                - var(--layout-channel-sidebar-width)
                - (var(--spacing-sm) * 2)
                - 32px
            )
        );
        transform: translateX(calc(
            -50%
            + ((var(--layout-catalog-sidebar-width) - var(--layout-channel-sidebar-width)) / 2)
        ));
    }

    /* Нет правого rail (закрепы / предстоящие) — не резервируем колонку и не сужаем док относительно неё */
    .channel-posts-layout--single .gc-post-compose-dock:not(.gc-post-compose-dock--inline) {
        width: max(
            0px,
            calc(
                min(100vw, var(--layout-page-max-width))
                - var(--layout-catalog-sidebar-width)
                - (var(--spacing-sm) * 2)
                - 32px
            )
        );
        transform: translateX(-50%);
    }
}

.gc-post-compose-dock--floating {
    bottom: 16px;
    background: transparent;
}

/* Панель «Новый пост» — отдельный блок над лентой (разрыв через gap у .channel-posts-main--with-compose) */
.gc-posts-compose-panel {
    flex-shrink: 0;
    background: var(--bg-content-main);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.channel-posts-main--with-compose {
    gap: var(--spacing-mdl);
}

/* Слот скелетона + формы внутри панели */
.gc-posts-compose-slot {
    position: relative;
    flex-shrink: 0;
    border-bottom: none;
    /*
     * Скелетон дока — position:absolute; inset:0 и не задаёт высоту родителю.
     * В x-skeleton.channel-feed в слоте только скелетон (нет in-flow формы) — без min-height слот схлопывается.
     * Реальная форма: до монтирования TipTap у #post_content_editor нет .stage-tiptap-editor, а у поля в футере min-height:0.
     */
    min-height: calc(var(--spacing-sm) * 2 + 2.5rem);
}

.gc-post-compose-dock--inline {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    transform: none;
    z-index: auto;
    background: transparent;
    overflow: visible;
}

.gc-post-compose-dock--inline.gc-post-compose-dock--skeleton {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    pointer-events: none;
    background: var(--bg-content-main);
}

.gc-post-compose-shell--inline {
    background: var(--bg-content-main);
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.gc-post-compose-dock--inline:not(.gc-post-compose-dock--skeleton) {
    position: relative;
    z-index: 1;
}

.gc-post-compose-page-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
    z-index: 70;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.14) 38%, rgba(0, 0, 0, 0.04) 68%, rgba(0, 0, 0, 0)),
        radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.12), transparent 34%),
        radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0.26), transparent 58%);
}

.gc-post-compose-dock--floating:focus-within + .gc-post-compose-page-overlay,
.gc-post-compose-dock--floating.is-expanded + .gc-post-compose-page-overlay {
    opacity: 1;
}

.gc-post-compose-dock.is-pending {
    opacity: 0;
    pointer-events: none;
    /* Резервируем высоту, пока форма невидима — слот не должен зависеть только от min-height слота */
    min-height: calc(var(--spacing-sm) * 2 + 2.5rem);
}

.gc-post-compose-dock--skeleton {
    z-index: 79;
    pointer-events: none;
}

.gc-post-compose-shell {
    width: 100%;
}

.gc-post-compose-form {
    margin: 0;
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
}

/* Лента канала: колонка (галерея → прогресс → строка аватар+редактор | кнопки) */
.gc-post-compose-form--stacked.gc-comment-compose--dock {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-mdl);
    padding: var(--spacing-sm);
    padding-left: var(--spacing-mdl);
}

.gc-post-compose-form--stacked.gc-comment-compose {
    align-items: stretch;
}

.gc-post-compose-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-mdl);
    width: 100%;
}

.gc-post-compose-footer-editor {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-mdl);
    flex: 1 1 0;
    min-width: 0;
}

.gc-post-compose-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-3xs);
    flex-shrink: 0;
}

.gc-post-compose-action-btn {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: var(--gc-dropdown-icon-toggle-radius);
    background-color: var(--bg-content-main);
    color: var(--font-primary);
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        opacity var(--transition-fast);
}

.gc-post-compose-action-btn:hover {
    background-color: var(--bg-content-secondary);
    color: var(--font-primary);
}

.gc-post-compose-action-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--bg-main), 0 0 0 4px rgba(var(--accent-link-rgb), 0.35);
}

.gc-post-compose-action-btn i {
    font-size: var(--font-size-lg);
    line-height: 1;
}

.gc-post-compose-form--stacked .gc-post-compose-send-dropdown {
    width: 40px;
    min-width: 40px;
    align-self: center;
}

.gc-post-compose-shell--skeleton {
    overflow: hidden;
}

.gc-post-compose-avatar-slot {
    width: 40px;
    min-width: 40px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-end;
}

.gc-post-compose-form--stacked .gc-post-compose-avatar-slot {
    height: 40px;
    align-self: flex-end;
}

.gc-post-compose-avatar-skeleton {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.gc-post-compose-icon-skeleton {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    flex-shrink: 0;
    display: block;
}

.gc-post-compose-input-skeleton {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: block;
    height: 40px;
    border-radius: var(--radius-md);
    flex: 1 1 auto;
}

.gc-post-compose-main {
    gap: var(--spacing-xs);
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.gc-post-compose-form--stacked .gc-post-compose-main {
    gap: var(--spacing-mdl);
    width: 100%;
    justify-content: flex-start;
}

.gc-post-compose-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.gc-post-compose-entry.gc-input-shell {
    gap: var(--spacing-xs);
    align-items: flex-end;
    min-height: 44px;
    padding: 0 var(--spacing-xs);
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.gc-post-compose-entry--editor-only.gc-input-shell {
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    align-items: stretch;
}

/*
 * Раньше здесь было min-height: 0 — flex с flex-basis 0 схлопывал слот до ~1px,
 * пока не смонтирован TipTap (#post_content_editor с min-height ещё не давал высоты колонке).
 * Оставляем минимум строки редактора; рост по контенту не ломается.
 */
.gc-post-compose-form--stacked .gc-post-compose-footer .gc-post-compose-entry.gc-input-shell {
    min-height: 2.5rem;
}

.gc-post-compose-editor-wrap {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: stretch;
}

.gc-post-compose-dock--skeleton .gc-post-compose-editor-wrap {
    flex: 1 1 0;
    min-width: 0;
}

.gc-post-compose-dock--skeleton .gc-post-compose-input-skeleton.gc-skeleton {
    display: block;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
}

.gc-post-compose-entry #post_content_editor {
    flex: 1;
    min-width: 0;
    /* 0 до TipTap давало схлопывание слота (absolute скелетон + opacity:0 форма). */
    min-height: 2.5rem;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.gc-post-compose-entry .stage-tiptap-editor {
    box-sizing: border-box;
    width: 100%;
    /* Высота строки как у аватарки/кнопок 40px; вертикальные поля симметричные под line-height */
    min-height: 40px;
    max-height: none;
    height: auto;
    overflow: visible;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: var(--spacing-2sm) 0;
    font-family: var(--font-family-base, inherit);
    font-weight: 400;
    font-size: var(--font-size-sm);
    line-height: 1.4;
    transition: background-color var(--transition-fast);
    color: var(--font-primary);
}

.gc-post-compose-entry .stage-tiptap-editor p {
    margin: 0;
    line-height: 1.4;
}

.gc-post-compose-entry .stage-tiptap-editor p + p {
    margin-top: var(--spacing-2xs);
}

/* Текстовое поле комментария — те же метрики, что редактор поста в ленте */
.gc-post-compose-entry--editor-only textarea.gc-comment-compose-input__textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 40px !important;
    height: auto;
    overflow-y: hidden;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: var(--spacing-2sm) 0 !important;
    font-family: var(--font-family-base, inherit);
    font-weight: 400;
    font-size: var(--font-size-sm) !important;
    line-height: 1.4;
    color: var(--font-primary);
    resize: none;
    box-shadow: none !important;
    outline: none;
    display: block;
    align-self: stretch;
    flex: 1 1 auto;
    min-width: 0;
}

.gc-post-compose-entry--editor-only textarea.gc-comment-compose-input__textarea::placeholder {
    color: var(--font-secondary);
    opacity: 1;
}

/* Плейсхолдер в потоке (как в stage-editor), без absolute — совпадает с первой строкой текста */
.gc-post-compose-entry .stage-tiptap-editor p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    float: left;
    height: 0;
    color: var(--font-secondary);
    pointer-events: none;
    font-family: var(--font-family-base, inherit);
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 1.4;
}

/*
 * Лента канала, адаптив: плейсхолдер в одну строку.
 * Не вешать overflow: hidden на ::before — у псевдоэлемента float + height: 0 из базового правила
 * (см. выше) это полностью скрывает текст плейсхолдера на малых экранах.
 */
@media (max-width: 991.98px) {
    .gc-post-compose-form.gc-comment-compose.gc-comment-compose--dock.gc-post-compose-form--stacked
        .gc-post-compose-entry
        .stage-tiptap-editor
        p.is-editor-empty:first-child {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .gc-post-compose-form.gc-comment-compose.gc-comment-compose--dock.gc-post-compose-form--stacked
        .gc-post-compose-entry
        .stage-tiptap-editor
        p.is-editor-empty:first-child::before {
        white-space: nowrap;
    }
}

.gc-post-compose-photo-trigger {
    width: 44px;
    min-width: 44px;
    height: 44px;
    align-self: flex-end;
}

.gc-post-compose-form--stacked .gc-post-compose-photo-trigger {
    width: 40px;
    min-width: 40px;
    height: 40px;
    align-self: center;
}

.gc-post-compose-photo-trigger i,
.gc-post-compose-send i {
    font-size: 18px;
    line-height: 1;
}

.gc-post-compose-photo-trigger.gc-btn {
    color: var(--font-secondary);
}

.gc-post-compose-send {
    width: 44px;
    min-width: 44px;
    height: 44px;
    align-self: flex-end;
    color: var(--font-secondary);
    background-color: var(--bg-content-secondary);
    border-color: transparent;
}

.gc-post-compose-send:disabled {
    opacity: 0.55;
}

.gc-post-compose-dock.is-expanded .gc-post-compose-send:not(:disabled),
.gc-post-compose-send:not(:disabled) {
    background: var(--accent-link);
    border-color: var(--accent-link);
    color: #fff;
}

.gc-post-compose-send:hover:not(:disabled) {
    background: var(--accent-link-hover);
    border-color: var(--accent-link-hover);
}

/* Лента: кнопки отправки и вложения — обводка как в макете, не заливка accent */
.gc-post-compose-form--stacked .gc-post-compose-footer-actions .gc-post-compose-send.gc-dropdown-toggle:not(:disabled),
.gc-post-compose-form--stacked .gc-post-compose-dock.is-expanded .gc-post-compose-footer-actions .gc-post-compose-send.gc-dropdown-toggle:not(:disabled) {
    background-color: var(--bg-content-main);
    border-color: var(--ui-border);
    color: var(--font-secondary);
}

.gc-post-compose-form--stacked .gc-post-compose-footer-actions .gc-post-compose-send.gc-dropdown-toggle:hover:not(:disabled),
.gc-post-compose-form--stacked .gc-post-compose-dock.is-expanded .gc-post-compose-footer-actions .gc-post-compose-send.gc-dropdown-toggle:hover:not(:disabled) {
    background-color: var(--bg-content-secondary);
    border-color: var(--ui-border);
    color: var(--font-primary);
}

.gc-post-compose-form--stacked .gc-post-compose-footer-actions .gc-post-compose-send.gc-dropdown-toggle[aria-expanded="true"]:not(:disabled) {
    background-color: var(--bg-content-secondary);
    border-color: var(--ui-border);
    color: var(--font-primary);
}

.gc-post-compose-form--stacked .gc-post-compose-action-btn.gc-dropdown-toggle-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: var(--gc-dropdown-icon-toggle-radius);
    padding: 0;
}

.gc-post-compose-send-dropdown {
    width: 44px;
    min-width: 44px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-end;
}

.gc-post-compose-send-skeleton-slot {
    align-items: center;
}

/* Специфичность > .gc-skeleton (skeleton.css подключается после posts.css и задаёт width: 100%) */
.gc-post-compose-action-skeleton.gc-skeleton {
    box-sizing: border-box;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: var(--gc-dropdown-icon-toggle-radius);
    display: block;
}

.gc-post-compose-editor-wrap--skeleton {
    flex: 1 1 0;
    min-width: 0;
    min-height: 2.5rem;
    display: flex;
    align-items: stretch;
}

/* ========================================
   Detail Page — расширения
   ======================================== */

.gc-post-message {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.channel-posts-main--detail {
    width: 100%;
    gap: var(--spacing-sm);
    box-sizing: border-box;
}

.gc-post-thread-shell {
    position: relative;
}

.gc-post-thread-shell--detail {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-mdl);
    padding-bottom: var(--spacing-lg);
    /* Липкая аватарка у нижнего края вьюпорта при прокрутке длинного пузыря */
    --gc-thread-avatar-sticky-bottom: calc(var(--spacing-mdl) + env(safe-area-inset-bottom, 0px));
}

/* Пост и комментарии: аватар снизу строки и «прилипает» к низу экрана при скролле */
.gc-post-thread-shell--detail .gc-post-message-avatar {
    position: sticky;
    bottom: var(--gc-thread-avatar-sticky-bottom);
    align-self: flex-end;
    z-index: 2;
}

.gc-post-thread-shell--detail .gc-comment-avatar {
    display: block;
    position: sticky;
    bottom: var(--gc-thread-avatar-sticky-bottom);
    align-self: flex-end;
    z-index: 2;
}

.gc-post-message-row {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-sm);
}

.gc-post-message-avatar {
    flex-shrink: 0;
}

.gc-post-message-avatar .gc-post-avatar,
.gc-post-message-avatar .gc-post-avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.gc-post-message-main {
    flex: 0 1 min(82%, 720px);
    min-width: 0;
    max-width: min(82%, 720px);
}

/* Страница поста: пузырь на всю ширину области справа от аватара */
.gc-post-thread-shell--detail .gc-post-message-main {
    flex: 1 1 auto;
    max-width: none;
}

.gc-post-message-bubble {
    background: var(--bg-content-main);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);
    overflow: hidden;
}

@media (min-width: 992px) {
    .channel-posts-main--detail {
        padding-left: 0;
    }
}

@media (max-width: 768px) {
    .gc-post-message-main {
        flex-basis: auto;
        max-width: 100%;
    }
}

/* Детальная страница: чуть крупнее заголовок */
/* Детальная страница: аватар побольше */
.gc-post--detail .gc-post-header .gc-post-avatar {
    width: 36px;
    height: 36px;
}

.gc-post--detail .gc-post-header .gc-post-avatar-placeholder {
    width: 36px;
    height: 36px;
}

.gc-post--detail .gc-post-footer--detail {
    padding: var(--spacing-xs) var(--spacing-mdl) var(--spacing-mdl);
    min-height: 0;
    border-top: none;
    margin: 0;
}

.gc-post-message .gc-post-header {
    padding: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-xs);
}

.gc-post-header-meta--stretch {
    flex: 1;
    min-width: 0;
}

.gc-post-message .gc-post-author {
    font-weight: 500;
    font-size: var(--font-size-sm);
    line-height: 1.3;
    color: var(--accent-link);
}

.gc-post-message .gc-post-author-link:hover .gc-post-author {
    color: var(--accent-link-hover);
}

.gc-post-message .gc-post-body {
    padding: var(--spacing-sm);
    font-size: var(--font-size-mdl);
    line-height: 1.5;
}

.gc-post-message .gc-post-footer--detail {
    padding: 0 var(--spacing-sm) var(--spacing-sm);
}

.gc-post-header + .gc-post-footer--detail {
    padding-top: 0;
}

.gc-post-media + .gc-post-footer--detail {
    padding-top: var(--spacing-sm);
}

.gc-post-body + .gc-post-footer--detail {
    padding-top: var(--spacing-xs);
}

/* ========================================
   Reaction Picker (popup выбора реакции)
   ======================================== */

.gc-post-reaction-picker {
    display: flex;
    gap: 4px;
    padding: var(--spacing-xs);
    background: var(--bg-content-main);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.25));
    position: absolute;
    bottom: calc(100% + 2px);
    left: 0;
    z-index: 100;
}

.gc-post-reaction-picker-item {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-md);
    transition: transform var(--transition-fast), background var(--transition-fast);
    line-height: 1;
}

.gc-post-reaction-picker-item:hover {
    background: var(--bg-hover);
    transform: scale(1.2);
}

/* ========================================
   Feed Layout (страница ленты постов)
   ======================================== */

.channel-posts-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--layout-channel-sidebar-width);
    gap: var(--spacing-lg);
    align-items: start;
}

.channel-posts-layout--single {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
}

.channel-posts-layout--single .channel-posts-main {
    width: 100%;
    max-width: calc(
        var(--layout-page-max-width)
        - var(--layout-catalog-sidebar-width)
        - (var(--spacing-sm) * 2)
    );
    margin: 0 auto;
}

@media (min-width: 992px) {
    /* Правый rail на десктопе пуст — убираем из потока, иначе лишний row-gap у одноколоночной сетки */
    .channel-posts-layout--single .channel-posts-sidebar {
        display: none;
    }
}

.channel-posts-sidebar {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-mdl);
    position: sticky;
    top: 67px;
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

/* Десктопный правый rail: закреп и «Предстоящие» — оболочки .catalog-nav (catalog.css) */

.channel-pinned-panel {
    position: static;
}

.channel-pinned-panel-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.channel-community-description {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    color: var(--font-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.channel-community-description p {
    margin: 0;
}

.channel-sidebar-list {
    width: 100%;
}

.channel-pinned-switcher:not(.catalog-nav-item) {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3sm);
    width: 100%;
    padding: var(--spacing-sm);
    box-sizing: border-box;
    cursor: pointer;
    background: none;
    transition: background-color var(--transition-fast);
}

/* В правом rail закреп оформлен как .catalog-nav-item (hover/active — catalog.css) */
.catalog-nav.channel-pinned-nav > .channel-pinned-panel > .channel-pinned-switcher.catalog-nav-item {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Узкая колонка rail: плотнее базового .catalog-nav-item (catalog.css) */
.catalog-nav.channel-pinned-nav .catalog-nav-item,
.catalog-nav.channel-upcoming-nav .catalog-nav-item {
    gap: var(--spacing-xs);
    padding-block: var(--spacing-3xs);
    padding-inline: var(--spacing-sm);
}

.catalog-nav.channel-pinned-nav,
.catalog-nav.channel-upcoming-nav {
    --catalog-nav-inset: var(--spacing-xs);
}

.channel-pinned-panel--slider {
    overflow: hidden;
}

.channel-pinned-switcher-rail-wrap {
    width: 100%;
    min-width: 0;
}

.channel-pinned-switcher:focus-visible {
    outline: 2px solid var(--accent-link);
    outline-offset: -2px;
}

.channel-pinned-switcher-rail {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-xs);
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
}

.channel-pinned-switcher-dot {
    flex: 1 1 0;
    display: block;
    height: 0.25rem;
    min-width: 0;
    border-radius: var(--radius-full);
    background: var(--border-tertiary);
    transition: background-color var(--transition-fast);
}

.channel-pinned-switcher-dot.is-active {
    background: var(--accent-link);
}

.channel-pinned-switcher-stage {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.channel-pinned-switcher-track {
    display: flex;
    flex-direction: row;
    width: 100%;
    transition: transform var(--transition-fast);
    will-change: transform;
}

.channel-pinned-slide {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    color: inherit;
    box-sizing: border-box;
}

.channel-pinned-slide::before {
    display: none !important;
}

.channel-pinned-slide .sidebar-transport-person {
    width: 100%;
    min-width: 0;
    align-items: center;
}

/* Иконки / превью закрепа и «Предстоящих» в rail: светлая плитка как у .gc-list-media-square (lists.css — --ui-surface-1) */
.catalog-nav.channel-pinned-nav .channel-pinned-slide :is(.gc-list-media-icon, .gc-list-media-square.sm, .gc-list-avatar-square.sm),
.catalog-nav.channel-upcoming-nav .catalog-nav-item.channel-upcoming-event-link > .gc-list-media-icon.sm {
    background: var(--ui-surface-1);
    border: 1px solid var(--ui-border);
}

.catalog-nav.channel-pinned-nav .channel-pinned-slide .gc-list-media-icon i,
.catalog-nav.channel-pinned-nav .channel-pinned-slide .sidebar-icon-box i,
.catalog-nav.channel-pinned-nav .channel-pinned-slide .sidebar-weapon-icon i,
.catalog-nav.channel-upcoming-nav .gc-list-media-icon.sm i {
    color: var(--font-primary);
}

.channel-pinned-slide .catalog-nav-content {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}

/* В карусели закрепа — до двух строк; базовый .catalog-nav-title — одна строка */
.catalog-nav.channel-pinned-nav .catalog-nav-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* Не задавать display: block — ломает flex-ряд .gc-interactive-row (иконка / текст / шеврон на одной линии). */
.channel-upcoming-event-link {
    color: inherit;
    text-decoration: none;
}

.channel-upcoming-event-link .gc-list-content > p {
    margin: 0;
}

.channel-upcoming-event-link__chev {
    color: var(--font-secondary);
}

/* Предстоящие в rail: пункты = .catalog-nav-item; chevron — второй <i>, вправо */
.catalog-nav.channel-upcoming-nav .catalog-nav-item.channel-upcoming-event-link > i.channel-upcoming-event-link__chev {
    margin-left: auto;
    flex-shrink: 0;
}

/* Мобильный rail ленты: карточка канала + предстоящие в одной секции */
.channel-feed-mobile-rail {
    min-width: 0;
}

.channel-sidebar-card--feed-mobile .channel-sidebar-card-cover--feed-mobile {
    height: 6.75rem;
}

.channel-sidebar-card--feed-mobile .channel-sidebar-card-body--feed-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-mdl) var(--spacing-sm) 0;
}

/* Без лишнего gap: блок действий только если есть кнопки (см. Blade) */
.channel-sidebar-card--feed-mobile .channel-sidebar-card-body--feed-mobile:not(:has(.channel-sidebar-card-actions-wrap--feed-mobile)) {
    gap: 0;
}

.channel-sidebar-card--feed-mobile .channel-feed-mobile-rail__identity + .channel-sidebar-card-actions-wrap--feed-mobile {
    margin-top: var(--spacing-xs);
}

.channel-sidebar-card--feed-mobile .channel-sidebar-card-actions-wrap--feed-mobile {
    margin-top: 0;
}

.channel-feed-mobile-rail__identity {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: var(--spacing-sm);
    min-width: 0;
}

.channel-sidebar-card--feed-mobile .channel-sidebar-card-avatar--feed-mobile {
    margin-top: -1.5rem;
    flex-shrink: 0;
}

.channel-sidebar-card--feed-mobile .channel-sidebar-card-content--feed-mobile {
    flex: 1;
    min-width: 0;
    padding-bottom: 0;
}

/* Отступ данных до «Предстоящих»: нижний padding у тела карточки, без margin у блока списка */
.channel-sidebar-card--feed-mobile:has(.channel-sidebar-card-upcoming) .channel-sidebar-card-body--feed-mobile {
    padding-bottom: var(--spacing-sm);
}

.channel-sidebar-card--feed-mobile .channel-upcoming-panel-content.gc-panel-content--list {
    padding-left: var(--spacing-2xs);
    padding-right: var(--spacing-2xs);
}

.channel-upcoming-panel-content .gc-stack-sm {
    gap: var(--spacing-xs);
}

.gc-mobile-nav-pinned-fixed .channel-pinned-switcher:hover .gc-list-media-icon,
.gc-mobile-nav-pinned-fixed .channel-pinned-switcher:hover .sidebar-icon-box,
.gc-mobile-nav-pinned-fixed .channel-pinned-switcher:hover .sidebar-weapon-icon,
.gc-mobile-nav-pinned-fixed .channel-pinned-switcher:focus-visible .gc-list-media-icon,
.gc-mobile-nav-pinned-fixed .channel-pinned-switcher:focus-visible .sidebar-icon-box,
.gc-mobile-nav-pinned-fixed .channel-pinned-switcher:focus-visible .sidebar-weapon-icon {
    background: var(--bg-accent);
}

.channel-pinned-fish-note {
    font-size: var(--font-size-xs);
}

.channel-pinned-empty {
    padding: var(--spacing-mdl) 0;
}

.channel-posts-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-mdl);
}

/* Оболочка ленты: без собственного фона — между дневными секциями виден фон страницы */
.gc-posts-stream {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 0;
}

/* Пустая лента — одна «карточка», как раньше у всего stream */
.gc-posts-stream > #posts-empty-state {
    background: var(--bg-content-main);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.gc-posts-stream--empty {
    margin-bottom: 0;
}

/* На адаптиве — без боковых линий у края экрана (скругления сохраняем) */
@media (max-width: 991.98px) {
    .channel-posts-main .gc-posts-stream,
    .channel-posts-main .gc-posts-compose-panel {
        /* border-left: none;
        border-right: none; */
    }

    .channel-posts-main .gc-card:not(.gc-card-activity-event) {
        /* border-left: none;
        border-right: none; */
    }
}

/* Как у карточки поста: шапка в потоке, ⋮ справа; без прав — больше воздуха сверху у центрального блока */
.gc-post--technical {
    padding: var(--spacing-mdl) var(--spacing-mdl) var(--spacing-lg);
}

.gc-post--technical--no-manage {
    padding-top: var(--spacing-xl);
}

.gc-post-technical-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.gc-post-technical-inner,
.gc-feed-service-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    text-align: center;
}

.gc-post-technical-avatar-wrap,
.gc-feed-service-avatar-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gc-post-technical-avatar,
.gc-feed-service-avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid var(--ui-border);
    background: var(--ui-surface-1);
    box-sizing: border-box;
}

.gc-post-technical-avatar-fallback,
.gc-feed-service-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: 1;
    color: var(--font-secondary);
}

.gc-post-technical-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0 var(--spacing-mdl);
    border-radius: var(--radius-full);
    background: var(--bg-content-secondary);
    color: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.gc-post-technical-badge.profile-trigger {
    cursor: pointer;
}

.gc-post-technical-badge.profile-trigger:hover,
.gc-post-technical-badge.profile-trigger:focus-visible {
    background: var(--gc-interactive-hover-bg);
}

.gc-post-technical-time {
    color: var(--font-muted);
    font-size: var(--font-size-xs);
}

.gc-feed-service-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs) var(--spacing-mdl);
    border-radius: var(--radius-full);
    background: var(--bg-content-secondary);
    border: 1px solid var(--ui-border);
    color: var(--font-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.gc-posts-feed {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-mdl);
}

/* Секции ленты канала по календарному дню — отдельная поверхность на фоне страницы */
.gc-channel-feed-day {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    background: var(--bg-content-main);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    padding: 0;
}

/* Бадж даты между карточками дней (в зазоре .gc-posts-feed, не внутри секции) */
.gc-channel-feed-day-marker {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.gc-channel-feed-day-marker__badge {
    max-width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gc-channel-feed-day__posts {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-top: var(--spacing-xs);
}

.gc-posts-feed:empty {
    display: none;
}

.gc-posts-sentinel {
    display: block;
    width: 100%;
    min-height: 1px;
}

.gc-posts-sentinel.is-hidden {
    display: none;
}

.gc-posts-sentinel.is-loading {
    min-height: var(--spacing-xl);
}

.gc-posts-stream .gc-post {
    border: none;
    border-radius: 0;
    background: transparent;
    scroll-margin-top: 84px;
}

/* Мобильный закреп: запас снизу над фикс. панелью (glass-бар как нижний навбар) */
@media (max-width: 991px) {
    .channel-posts-layout--pinned-mobile-bottom {
        /* Панель закрепа на всю ширину у нижнего края — без лишнего зазора как у «плавающей» капсулы */
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    }
}

.gc-posts-feed > .gc-post + .gc-post,
.gc-channel-feed-day__posts > .gc-post + .gc-post {
    border-top: 1px solid var(--ui-border);
}

.gc-posts-load-more {
    display: none;
    margin-top: var(--spacing-lg);
}

.gc-posts-load-more.is-visible {
    display: block;
}

.gc-posts-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-3xl) 0;
    color: var(--font-secondary);
    font-size: var(--font-size-xl);
}

/* ========================================
   Activity Feed — Event / Epic cards
   ======================================== */

.activity-event-meta--accent {
    color: var(--font-secondary);
}

/* Иконка закрытого события (замок) */
.activity-event-lock {
    font-size: 14px;
    color: var(--font-secondary);
}

/* Эпик-карточка с обложкой */
.gc-epic-card-cover {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
    position: relative;
    aspect-ratio: 16 / 9;
}

.gc-epic-card-background {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(20px);
    transform: scale(1.1);
    z-index: 0;
}

.gc-epic-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--transition-base);
    z-index: 1;
}

.gc-epic-card-cover:hover .gc-epic-card-image {
    transform: scale(1.03);
}

.gc-epic-card-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 100%);
    transition: opacity var(--transition-base);
    z-index: 2;
}

.gc-epic-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-mdl);
    color: white;
    z-index: 3;
}

.gc-epic-card-meta {
    font-size: var(--font-size-sm);
    opacity: 0.9;
    margin-bottom: var(--spacing-2xs);
}

.gc-epic-card-title {
    font-size: var(--font-size-md);
    font-weight: 500;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 991px) {
    .channel-posts-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-mdl);
    }

    .gc-post-compose-dock:not(.gc-post-compose-dock--inline) {
        left: var(--spacing-sm);
        right: var(--spacing-sm);
        width: auto;
        transform: none;
    }

    .channel-posts-sidebar {
        order: 1;
        position: static;
        max-height: none;
        overflow: visible;
    }

    /* Закреп только в шапке (d-lg-block); без «Предстоящих» aside пустой в потоке — лишний gap у грида */
    .channel-posts-sidebar:not(.channel-posts-sidebar--feed-rail):not(:has(.channel-upcoming-nav)) {
        display: none;
    }

    .channel-posts-main {
        order: 2;
    }
}

@media (max-width: 768px) {
    .channel-posts-layout {
        grid-template-columns: 1fr;
    }

    .channel-posts-layout--single .channel-posts-main {
        width: 100%;
        max-width: none;
    }

    .channel-posts-sidebar {
        position: static;
    }

    .gc-post-compose-form {
        gap: 0;
    }

    .gc-post-compose-form--stacked {
        gap: var(--spacing-mdl);
    }

    .gc-post-compose-avatar-slot {
        display: none;
    }

    .gc-post-compose-dock--floating:not(.gc-post-compose-dock--inline) {
        bottom: 12px;
    }

    /* Не трогаем --measured: иначе портрет сжимается по высоте (58vh) при той же ширине — жёсткий crop */
    .gc-post-media--1 .gc-post-media-item:not(.gc-post-media-item--measured) {
        max-height: min(58vh, 560px);
    }

    .gc-post-media--2.gc-post-media--smart-2-pl,
    .gc-post-media--2.gc-post-media--smart-2-lp {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .gc-post-media--2.gc-post-media--smart-2-pl .gc-post-media-item:first-child,
    .gc-post-media--2.gc-post-media--smart-2-pl .gc-post-media-item:nth-child(2),
    .gc-post-media--2.gc-post-media--smart-2-lp .gc-post-media-item:first-child,
    .gc-post-media--2.gc-post-media--smart-2-lp .gc-post-media-item:nth-child(2) {
        grid-column: auto;
        grid-row: auto;
        width: 100%;
        height: auto;
    }

    .gc-post-media--2.gc-post-media--smart-2-pl .gc-post-media-item:first-child,
    .gc-post-media--2.gc-post-media--smart-2-lp .gc-post-media-item:nth-child(2) {
        aspect-ratio: var(--gc-media-ratio, 3 / 4);
    }

    .gc-post-media--2.gc-post-media--smart-2-pl .gc-post-media-item:nth-child(2),
    .gc-post-media--2.gc-post-media--smart-2-lp .gc-post-media-item:first-child {
        aspect-ratio: var(--gc-media-ratio, 3 / 2);
    }

    .gc-post-media--2.gc-post-media--smart-2-ll {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .gc-post-media--2.gc-post-media--smart-2-ll .gc-post-media-item {
        aspect-ratio: var(--gc-media-ratio, 3 / 2);
        max-height: min(42vh, 320px);
    }

    .gc-comment-compose-dock {
        left: var(--spacing-mdl);
        width: calc(100vw - var(--spacing-lg));
        bottom: var(--spacing-mdl);
    }

    .gc-comment-compose-dock--floating {
        bottom: 12px;
    }

    .gc-comment-compose--dock {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }

    .gc-comment-bubble {
        max-width: 100%;
    }

    .gc-comment-row {
        max-width: calc(100vw - 116px);
        padding-right: 0;
        width: 100%;
        display: flex;
        gap: var(--spacing-xs);
    }

    .gc-comment-menu {
        position: static;
        flex-shrink: 0;
    }

    .gc-post-media--5,
    .gc-post-media--6,
    .gc-post-media--7,
    .gc-post-media--8,
    .gc-post-media--9,
    .gc-post-media--10 {
        grid-auto-rows: clamp(132px, 34vw, 220px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gc-post-media--5.gc-post-media--ratio-profile-portrait,
    .gc-post-media--6.gc-post-media--ratio-profile-portrait,
    .gc-post-media--7.gc-post-media--ratio-profile-portrait,
    .gc-post-media--8.gc-post-media--ratio-profile-portrait,
    .gc-post-media--9.gc-post-media--ratio-profile-portrait,
    .gc-post-media--10.gc-post-media--ratio-profile-portrait {
        grid-auto-rows: clamp(148px, 36vw, 240px);
    }

    .gc-post-media--5.gc-post-media--ratio-profile-landscape,
    .gc-post-media--6.gc-post-media--ratio-profile-landscape,
    .gc-post-media--7.gc-post-media--ratio-profile-landscape,
    .gc-post-media--8.gc-post-media--ratio-profile-landscape,
    .gc-post-media--9.gc-post-media--ratio-profile-landscape,
    .gc-post-media--10.gc-post-media--ratio-profile-landscape {
        grid-auto-rows: clamp(118px, 30vw, 200px);
    }

    /*
     * Сброс десктопных grid-column/grid-row у nth-child — иначе они сильнее
     * .gc-post-media-item { grid-column: auto } и при 2 колонках часть кадров
     * уезжает в несуществующие треки / обрезается (видно «только три фото»).
     */
    .gc-post-media--5 .gc-post-media-item:nth-child(n),
    .gc-post-media--6 .gc-post-media-item:nth-child(n),
    .gc-post-media--7 .gc-post-media-item:nth-child(n),
    .gc-post-media--8 .gc-post-media-item:nth-child(n),
    .gc-post-media--9 .gc-post-media-item:nth-child(n),
    .gc-post-media--10 .gc-post-media-item:nth-child(n) {
        grid-row: auto;
        grid-column: auto;
    }

    .gc-post-media--5 .gc-post-media-item:first-child,
    .gc-post-media--7 .gc-post-media-item:first-child,
    .gc-post-media--9 .gc-post-media-item:first-child {
        grid-column: 1 / -1;
    }
    
    .gc-post-reactions {
        flex-wrap: wrap;
    }
    
    .gc-post-footer--feed {
        padding: var(--spacing-xs) 0 0;
    }

    .gc-post-footer-top {
        width: 100%;
        padding: 0 var(--spacing-mdl) var(--spacing-sm);
    }
    
    .gc-post-compose-toolbar {
        padding-left: 0;
    }

    .gc-post-compose-entry .stage-tiptap-editor {
        overscroll-behavior: auto;
        touch-action: manipulation;
    }
    
    .gc-post-comments-body {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: var(--spacing-sm);
    }
}

@media (max-width: 576px) {
    .gc-post-header {
        padding: var(--spacing-mdl);
    }
    
    .gc-post-body {
        padding: var(--spacing-xs) var(--spacing-mdl) var(--spacing-sm);
    }
    
    .gc-post-footer {
        padding: var(--spacing-sm) var(--spacing-mdl) var(--spacing-mdl);
    }

    .gc-post-footer--feed {
        padding: 0;
    }

    .gc-post-footer-top {
        padding: var(--spacing-xs) var(--spacing-mdl) var(--spacing-sm);
    }
    
    .gc-post--detail .gc-post-footer--detail {
        padding: var(--spacing-sm);
    }
}