.blockContentMain{
    position: absolute;
    top: 5vw;
    left: 11vw;
    height: 100%;
    width: calc(100% - 11vw - 13vw);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.feedFilters{
    position: absolute;
    top: 5vw;
    left: 11vw;
    display: flex;
    align-items: center;
    z-index: 20;
}

.feedFilterButton,
.feedFilterOption{
    border: 0.06vw solid #1E2127;
    background: #14161A;
    color: #8A90A0;
    padding: 0.45vw 0.9vw;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.85vw;
    transition: all 0.2s ease;
}

.feedFilterButton:hover,
.feedFilterOption:hover{
    color: #ffffff;
    border-color: #2D7DFF;
}

.feedFilterButton.active,
.feedFilterOption.active{
    background: linear-gradient(90deg, #14161a, #14161a);
    color: white;
    border: 0.06vw solid #1E2127;
}

.feedFilterTrigger{
    display: inline-flex;
    align-items: center;
    gap: 0.45vw;
}

.feedFilterArrow{
    font-size: 0.75vw;
    opacity: 0.8;
}

.feedFilterMenu{
    position: absolute;
    top: calc(100% + 0.45vw);
    left: 0;
    display: none;
    flex-direction: column;
    gap: 0.35vw;
    padding: 0.45vw;
    background: #1B1E22;
    border: 0.06vw solid #1E2127;
    border-radius: 0.9vw;
    box-shadow: 0 0.5vw 1.1vw rgba(0,0,0,0.25);
}

.feedFilterMenu.isOpen{
    display: flex;
}

.feedFilterOption{
    width: 100%;
    text-align: left;
    border-radius: 0.7vw;
}

.postBlock{
    position: relative;
    width: 80%;
    left: 1.3vw;
    margin-bottom: 1vw;
    padding: 1.2vw 1.4vw;
    padding-bottom: 1.6vw;
    background-color: #14161A;
    border: 0.06vw solid #1E2127;
    border-radius: 1.6vw;
    display: flex;
    flex-direction: row;
    gap: 1.2vw;
    align-items: flex-start;
    transition: opacity 0.28s ease, filter 0.28s ease, transform 0.28s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.postBlock.isHiding{
    opacity: 0;
    filter: blur(0.8vw) saturate(0.7);
    transform: translateY(0.6vw) scale(0.97);
    pointer-events: none;
}

.postBlock:hover{
    transform: translateY(-0.12vw);
    box-shadow: 0 0.5vw 1.2vw rgba(0, 0, 0, 0.2);
    border-color: #2d7dff5c;
}

.avatarWrap{
    position: relative;
    flex-shrink: 0;
    height: 3.6vw;
}

.userAvatar{
    width: 3.2vw;
    height: 3.2vw;
    border-radius: 50%;
    border: 0.06vw solid #1E2127;
    object-fit: cover;
    margin-top: 0.15vw;
    transition: transform 0.22s ease, border-radius 0.22s ease, box-shadow 0.22s ease;
}

.userAvatar:hover{
    transform: scale(1.05);
    border-radius: 35%;
    box-shadow: 0 0.4vw 0.8vw rgba(0, 0, 0, 0.22);
}

.avatarPlus{
    position: absolute;
    right: 0.1vw;
    padding-left: 0.41vw;
    bottom: 0.15vw;
    width: 1.1vw;
    height: 1.1vw;
    border: none;
    border-radius: 50%;
    background: linear-gradient(90deg, #5A9CFF, #2D7DFF);
    color: white;
    font-size: 0.8vw;
    font-weight: 700;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 0.2vw 0.5vw rgba(45, 125, 255, 0.35);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    align-items: start;
    align-content: end;
    justify-content: center;
}

.avatarPlus:hover{
    transform: scale(1.08);
    box-shadow: 0 0.3vw 0.7vw rgba(45, 125, 255, 0.45);
}

.addPostButton{
    position: fixed;
    bottom: 2vw;
    left: calc(11vw + 42%);
    transform: translateX(-50%);
    z-index: 30;
    padding: 0.95vw 2.2vw;
    border: none;
    border-radius: 999px;
    background: linear-gradient(90deg, #5A9CFF, #2D7DFF);
    color: #ffffff;
    font-size: 1vw;
    font-weight: 700;
    box-shadow: 0 0.6vw 1.5vw rgba(45, 125, 255, 0.22);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.addPostButton:hover{
    transform: translateX(-50%) scale(1.02);
    box-shadow: 0 0.8vw 2vw rgba(45, 125, 255, 0.28);
}

.addPostButton{
    position: fixed;
    bottom: 2vw;
    left: calc(11vw + 42%);
    transform: translateX(-50%);
    z-index: 30;
    padding: 0.95vw 2.2vw;
    border: none;
    border-radius: 999px;
    background: linear-gradient(90deg, #5A9CFF, #2D7DFF);
    color: #ffffff;
    font-size: 1vw;
    font-weight: 700;
    box-shadow: 0 0.6vw 1.5vw rgba(45, 125, 255, 0.22);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.addPostButton:hover{
    transform: translateX(-50%) scale(1.02);
    box-shadow: 0 0.8vw 2vw rgba(45, 125, 255, 0.28);
}

.addPostButtonMobile {
    display: none !important;
}

/* ===== МОБИЛЬНАЯ КРУГЛАЯ КНОПКА С ПЛЮСОМ ===== */
@media (max-width: 430px) {

    .addPostButton {
        display: none !important;
    }

    .addPostButtonMobile {
        display: flex !important;
        position: fixed;
        bottom: 90px;
        right: 20px;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: none;
        background: linear-gradient(135deg, #5A9CFF, #2D7DFF);
        color: #ffffff;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        z-index: 1001;
        box-shadow:
            0 4px 16px rgba(45, 125, 255, 0.35),
            0 0 0 1px rgba(255, 255, 255, 0.1) inset;
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        -webkit-tap-highlight-color: transparent;
        z-index: 30;
    }

    .addPostButtonMobile:active {
        transform: scale(0.92);
        box-shadow:
            0 2px 8px rgba(45, 125, 255, 0.25),
            0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    }

    @media (hover: hover) {
        .addPostButtonMobile:hover {
            transform: scale(1.08);
            box-shadow:
                0 6px 20px rgba(45, 125, 255, 0.45),
                0 0 0 1px rgba(255, 255, 255, 0.15) inset;
        }
    }


    .addPostIcon {
        width: 24px;
        height: 24px;
        stroke: currentColor;
        fill: none;
    }
}

.postContent{
    flex: 1;
    color: #E6EEF9;
}

.userName{
    margin: 0;
    color: #CFE4FF;
    font-size: 1.05vw;
    font-weight: 700;
    text-decoration: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25vw;
    transition: color 0.2s ease, transform 0.2s ease;
}

.userName::after{
    content: '↗';
    font-size: 0.8vw;
    opacity: 0;
    transform: translateX(-0.2vw);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.userName:hover{
    color: #ffffff;
    transform: translateX(0.08vw);
}

.userName:hover::after{
    opacity: 1;
    transform: translateX(0.08vw);
}
.postHeader{
    display: flex;
    flex-direction: row;
    gap: 0vw;
    align-items: center;
}

.DatePost{
    margin: 0;
    color: #6D747E;
    font-size: 0.9vw;
    font-weight: 400;
    transition: margin-left 0.1s ease, opacity 0.3s ease;
}

.userName:hover + .DatePost {
    margin-left: 0.8vw;
    opacity: 0.5;
}

.postMenuButton{
    margin-left: auto;
    width: 1.8vw;
    height: 1.8vw;
    border: none;
    border-radius: 50%;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.12vw;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

.postMenuButton:hover{
    background: rgba(255,255,255,0.06);
    transform: scale(1.04);
}

.postMenuButton span{
    width: 0.2vw;
    height: 0.2vw;
    border-radius: 50%;
    background: #CFE4FF;
    display: block;
}

.postMenu{
    position: fixed;
    z-index: 99999;
    background: #1B1E22;
    border: 0.06vw solid #1E2127;
    border-radius: 0.9vw;
    padding: 0.45vw;
    box-shadow: 0 0.6vw 1.4vw rgba(0,0,0,0.28);
    display: flex;
    flex-direction: column;
    gap: 0.25vw;
    opacity: 0;
    transform: translateY(-0.25vw) scale(0.97);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.postMenu.isVisible{
    opacity: 1;
    transform: translateY(0) scale(1);
}

.postMenuItem{
    background: transparent;
    border: none;
    color: #E6EEF9;
    text-align: left;
    padding: 0.45vw 0.55vw;
    border-radius: 0.6vw;
    cursor: pointer;
    font-size: 0.85vw;
    transition: background 0.16s ease, color 0.16s ease;
}

.postMenuItem:hover{
    background: rgba(255,255,255,0.06);
    color: #ffffff;
}

.postMenuItemDanger{
    margin-top: 0.25vw;
    color: #ff7b7b;
}

.postMenuItemDanger:hover{
    background: rgba(255,123,123,0.12);
    color: #ffb4b4;
}

.editPostOverlay{
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(5, 7, 11, .74);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}

.editPostOverlay.isOpen{
    opacity: 1;
    pointer-events: auto;
}

.editPostModal{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10001;
    width: min(80vw, 836px);
    min-height: 292px;
    padding: 2.2vw 2.5vw 1.7vw;
    background: #14161A;
    border: 1px solid #252B35;
    border-radius: 2.4vw;
    box-shadow: 0 1.6vw 4vw rgba(0,0,0,.48), 0 0 2vw rgba(90,156,255,.08);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -46%) scale(.97);
    transition: opacity .22s ease, transform .22s ease;
}

.editPostModal.isOpen{
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.editPostHeader{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2vw;
}

.editPostHeader h3{
    margin: 0;
    color: #F4F7FC;
    font-size: 1.75vw;
    font-weight: 700;
}

.editPostClose{
    width: 2vw;
    height: 2vw;
    padding: 0;
    border: 0;
    background: transparent;
    color: #7B818D;
    cursor: pointer;
    transition: color .18s ease, transform .18s ease;
}

.editPostClose:hover{
    color: #F4F7FC;
    transform: rotate(90deg);
}

.editPostComposer{
    display: flex;
    align-items: flex-start;
    gap: 1.35vw;
}

.editPostAvatar img{
    width: 3.55vw;
    height: 3.55vw;
    border-radius: .65vw;
    object-fit: cover;
}

.editPostContent{
    flex: 1;
    min-width: 0;
}

.editPostContent textarea{
    display: block;
    width: 100%;
    min-height: 6.1vw;
    padding: .2vw 0 1vw;
    resize: vertical;
    border: 0;
    border-bottom: 1px solid #20252D;
    outline: 0;
    background: transparent;
    color: #E6EEF9;
    font: inherit;
    font-size: 1.02vw;
    line-height: 1.6;
}

.editPostContent textarea::placeholder{ color: #737B89; }

.editPostContent textarea:focus{ border-bottom-color: #5A9CFF; }

.editPostFooter{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1vw;
    padding-top: 1.1vw;
}

#editPostCounter{
    color: #697383;
    font-family: monospace;
    font-size: .78vw;
}

.editPostActions{
    display: flex;
    align-items: center;
    gap: .65vw;
}

.editPostCancel,
.editPostSave{
    min-width: 6.4vw;
    padding: .7vw 1vw;
    border-radius: .65vw;
    font: inherit;
    font-size: .82vw;
    font-weight: 600;
    cursor: pointer;
    transition: transform .18s ease, opacity .18s ease, background .18s ease;
}

.editPostCancel{
    border: 1px solid #2A303A;
    background: transparent;
    color: #A6AFBD;
}

.editPostCancel:hover{ background: rgba(255,255,255,.06); color: #fff; }

.editPostSave{
    border: 0;
    background: linear-gradient(135deg, #5A9CFF, #2D7DFF);
    color: #fff;
    box-shadow: 0 .35vw 1vw rgba(45,125,255,.25);
}

.editPostSave:not(:disabled):hover{ transform: translateY(-2px); }
.editPostSave:disabled{ cursor: not-allowed; opacity: .42; }

@media (max-width: 600px){
    .editPostModal{ width: calc(100vw - 28px); min-height: 260px; padding: 24px 20px 18px; border-radius: 22px; }
    .editPostHeader{ margin-bottom: 24px; }
    .editPostHeader h3{ font-size: 21px; }
    .editPostClose{ width: 24px; height: 24px; }
    .editPostComposer{ gap: 12px; }
    .editPostAvatar img{ width: 42px; height: 42px; border-radius: 8px; }
    .editPostContent textarea{ min-height: 120px; padding: 2px 0 12px; font-size: 15px; }
    .editPostFooter{ padding-top: 14px; }
    #editPostCounter{ font-size: 11px; }
    .editPostActions{ gap: 8px; }
    .editPostCancel, .editPostSave{ min-width: 82px; padding: 9px 12px; font-size: 12px; }
}

.postText{
    white-space: pre-wrap;
    transition: color 1s ease;
    margin: 0vw 0 0 0;
    color: #C6D6F4;
    font-size: 1.02vw;
    font-weight: 300;
    width: 100%;
    line-height: 1.6vw;
    word-wrap: break-word;
}


.hashtags{
    text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
    margin-top: 0.6vw;
    color: #2D7DFF;
    font-size: 0.98vw;
    display: inline-block;
    gap: 0.6vw;
}

.postImage{
    margin-top: 0.8vw;
}

.postImage img{
    width: 100%;
    border-radius: 1.2vw;
    max-height: 20vw;
    object-fit: cover;
}

.gallery{
    position: relative;
    width: 100%;
    overflow: hidden;
}

.galleryTrack{
    display: flex;
    gap: 0.8vw;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0vw;
    cursor: grab;
    user-select: none;
    overflow-x: hidden;
}

.galleryTrack.grabbing{cursor: grabbing}

.galleryItem{flex:0 0 97%;border-radius:1vw;overflow:hidden}

.galleryItem img{width:100%;height:auto;max-height:16vw;object-fit:cover;border-radius:1vw}

.postActions{
    display: flex;
    gap: 0.8vw;
    margin-top: 0.9vw;
    align-items: center;
}

.actionButton{
    background: transparent;
    border: none;
    color: #94A3B8;
    display: inline-flex;
    align-items: center;
    gap: 0.35vw;
    font-size: 0.95vw;
    cursor: pointer;
    padding: 0.25vw 0.5vw;
    border-radius: 0.4vw;
    transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease;
}

.actionButton:hover{
    color: #ffffff;
    background: rgba(255,255,255,0.02);
    transform: translateY(-0.08vw);
}

.actionIcon{width:1.2vw;height:1.2vw;display:inline-block;transition: transform 0.2s ease, filter 0.2s ease;}

.actionCount{color:#8A90A0;font-size:0.92vw;transition: color 0.2s ease;}

.actionButton.isActive{
    color: #ebebeb;
    animation: likePulse 0.35s ease;
}

.actionButton.isActive .actionCount{
    color: #ebebeb;
}

.actionButton.isActive .actionIcon{
    transform: scale(1.15) rotate(-8deg);
    filter: brightness(0) saturate(100%) invert(56%) sepia(98%) saturate(750%) hue-rotate(316deg) brightness(102%) contrast(101%);
}

.repostMenu{
    position: fixed;
    z-index: 1000;
    background: #1B1E22;
    border: 0.06vw solid #1E2127;
    border-radius: 0.9vw;
    padding: 0.55vw;
    box-shadow: 0 0.6vw 1.4vw rgba(0, 0, 0, 0.28);
    animation: repostMenuIn 0.2s ease-out;
}

.repostMenuCopy{
    background: transparent;
    border: none;
    color: #CFE4FF;
    font-size: 0.9vw;
    cursor: pointer;
    padding: 0.35vw 0.55vw;
    border-radius: 0.5vw;
    transition: background 0.18s ease, transform 0.18s ease;
}

.repostMenuCopy:hover{
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(0.08vw);
}

.repostMenuHint{
    color: #CFE4FF;
    font-size: 0.9vw;
    display: inline-block;
    padding: 0.25vw 0.35vw;
    animation: fadeIn 0.18s ease;
}

@keyframes likePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

@keyframes repostMenuIn {
    from { opacity: 0; transform: translateY(-0.25vw) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}


/* ============================================
   CREATE POST MODAL / МОДАЛКА СОЗДАНИЯ ПОСТА
   ============================================ */
.createPostOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 12, 16, 0.7);
    backdrop-filter: blur(0.4vw);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.createPostOverlay.isOpen {
    opacity: 1;
    pointer-events: all;
}

.createPostModal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    width: 42vw;
    max-width: 90vw;
    background: #14161A;
    border: 0.15vw solid #1E2127;
    border-radius: 1.6vw;
    padding: 1.6vw;
    z-index: 1000;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.createPostModal.isOpen {
    opacity: 1;
    pointer-events: all;
    transform: translate(-50%, -50%) scale(1);
}
.createPostModal::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(45,125,255,0.08), transparent);
    transition: left 0.7s ease;
    pointer-events: none;
    z-index: 1;
}
.createPostModal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(45,125,255,0.06), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}
.createPostModal:hover::before {
    left: 100%;
}
.createPostModal:hover::after {
    opacity: 1;
}
.createPostModal:hover {
    box-shadow: 0 0.8vw 2vw rgba(0, 0, 0, 0.35), 0 0 1.8vw rgba(45, 125, 255, 0.15);
    border-color: #2D7DFF;
}

/* ============================================
   CREATE POST MODAL / МОДАЛКА СОЗДАНИЯ ПОСТА
   ============================================ */
.createPostOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 12, 16, 0.7);
    backdrop-filter: blur(0.4vw);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.createPostOverlay.isOpen {
    opacity: 1;
    pointer-events: all;
}

.createPostModal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    width: 42vw;
    max-width: 90vw;
    background: #14161A;
    border: 0.15vw solid #1E2127;
    border-radius: 1.6vw;
    padding: 1.6vw;
    z-index: 1000;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.createPostModal.isOpen {
    opacity: 1;
    pointer-events: all;
    transform: translate(-50%, -50%) scale(1);
}
.createPostModal::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(45,125,255,0.08), transparent);
    transition: left 0.7s ease;
    pointer-events: none;
    z-index: 1;
}
.createPostModal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(45,125,255,0.06), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}
.createPostModal:hover::before {
    left: 100%;
}
.createPostModal:hover::after {
    opacity: 1;
}
.createPostModal:hover {
    box-shadow: 0 0.8vw 2vw rgba(0, 0, 0, 0.35), 0 0 1.8vw rgba(45, 125, 255, 0.15);
    border-color: #2D7DFF;
}


/* --- Modal Header --- */
.modalHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2vw;
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(-0.5vw);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.createPostModal.isOpen .modalHeader {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}
.modalTitle {
    margin: 0;
    color: #ffffff;
    font-size: 1.2vw;
    font-weight: 700;
}
.modalClose {
    width: 2.4vw;
    height: 2.4vw;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}
.modalClose svg {
    width: 1.2vw;
    height: 1.2vw;
    stroke: #7B818D;
    transition: stroke 0.2s ease, transform 0.2s ease;
}
.modalClose:hover {
    background: rgba(255, 77, 77, 0.1);
}
.modalClose:hover svg {
    stroke: #ff5d7a;
    transform: rotate(90deg);
}
.modalClose:active {
    transform: scale(0.92);
}

/* --- Composer (переиспользуем) --- */
.createPostModal .postComposer {
    display: flex;
    gap: 1vw;
    position: relative;
    z-index: 2;
}
.createPostModal .composerAvatar {
    flex-shrink: 0;
    width: 3.2vw;
    height: 3.2vw;
    border-radius: 20%;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.createPostModal.isOpen .composerAvatar {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.15s;
}
.createPostModal .composerAvatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0.15vw solid #1E2127;
}
.createPostModal .composerContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.8vw;
}
.createPostModal .postTextarea {
    width: 100%;
    min-height: 3vw;
    max-height: 26vw;
    background: transparent;
    border: none;
    outline: none;
    color: #E6EEF9;
    font-size: 1.1vw;
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
    font-weight: 400;
    line-height: 1.5;
    resize: none;
    overflow: hidden;
    padding: 0.2vw 0;
    transition: color 0.2s ease;
}
.createPostModal .postTextarea::placeholder {
    color: #6D747E;
    font-weight: 300;
}
.createPostModal .postTextarea:focus {
    color: #ffffff;
}

/* --- Attached Media --- */
.createPostModal .attachedMedia {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6vw;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.4s ease, margin 0.3s ease;
}
.createPostModal .attachedMedia.hasFiles {
    opacity: 1;
    max-height: 20vw;
    margin-top: 0.4vw;
}
.createPostModal .mediaPreview {
    position: relative;
    width: 12vw;
    height: 8vw;
    border-radius: 1vw;
    overflow: hidden;
    border: 0.06vw solid #1E2127;
    animation: mediaPreviewPop 0.3s ease forwards;
}
.createPostModal .mediaPreview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.createPostModal .mediaPreviewRemove {
    position: absolute;
    top: 0.3vw;
    right: 0.3vw;
    width: 1.6vw;
    height: 1.6vw;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: #ffffff;
    font-size: 0.9vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
}
.createPostModal .mediaPreview:hover .mediaPreviewRemove {
    opacity: 1;
}
.createPostModal .mediaPreviewRemove:hover {
    background: rgba(255, 77, 77, 0.9);
}

/* --- Composer Actions --- */
.createPostModal .composerActions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.8vw;
    border-top: 0.06vw solid #1E2127;
    opacity: 0;
    transform: translateY(0.4vw);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.createPostModal.isOpen .composerActions {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}
.createPostModal .composerTools {
    display: flex;
    gap: 0.4vw;
}
.createPostModal .toolButton {
    width: 2.4vw;
    height: 2.4vw;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.createPostModal .toolButton svg {
    width: 1.4vw;
    height: 1.4vw;
    stroke: #7B818D;
    transition: stroke 0.2s ease, transform 0.2s ease;
}
.createPostModal .toolButton:hover {
    background: rgba(45, 125, 255, 0.1);
}
.createPostModal .toolButton:hover svg {
    stroke: #5A9CFF;
    transform: scale(1.1);
}
.createPostModal .toolButton:active {
    transform: scale(0.95);
}
.createPostModal .composerRight {
    display: flex;
    align-items: center;
    gap: 0.8vw;
}
.createPostModal .characterCounter {
    color: #6D747E;
    font-size: 0.8vw;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s ease, color 0.2s ease;
}
.createPostModal .characterCounter.visible {
    opacity: 1;
}
.createPostModal .characterCounter.warning {
    color: #FFB800;
}
.createPostModal .characterCounter.danger {
    color: #FF5D7A;
    animation: counterPulse 0.5s ease infinite;
}
.createPostModal .sendButton {
    width: 2.8vw;
    height: 2.8vw;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #5A9CFF, #2D7DFF);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
    position: relative;
    overflow: hidden;
}
.createPostModal .sendButton::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.3), transparent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
}
.createPostModal .sendButton:hover::before {
    width: 4vw;
    height: 4vw;
}
.createPostModal .sendButton:hover {
    transform: scale(1.08) rotate(-5deg);
    box-shadow: 0 0.4vw 1vw rgba(45, 125, 255, 0.4);
    filter: brightness(1.1);
}
.createPostModal .sendButton:active {
    transform: scale(0.95);
}
.createPostModal .sendButton:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(0.5);
}
.createPostModal .sendButton svg {
    width: 1.2vw;
    height: 1.2vw;
    stroke: #ffffff;
    transition: transform 0.25s ease;
}
.createPostModal .sendButton:hover svg {
    transform: translateX(0.1vw) translateY(-0.1vw);
}

/* --- Floating Particles --- */
.createPostModal .particle {
    position: absolute;
    width: 0.3vw;
    height: 0.3vw;
    background: rgba(90, 156, 255, 0.4);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation: particleFloat 3s ease infinite;
}
.createPostModal .particle:nth-child(1) { top: 15%; left: 10%; animation-delay: 0s; }
.createPostModal .particle:nth-child(2) { top: 70%; right: 10%; animation-delay: 1.2s; }
.createPostModal .particle:nth-child(3) { bottom: 25%; left: 50%; animation-delay: 2.4s; }
@keyframes particleFloat {
    0%, 100% { opacity: 0; transform: translateY(0) scale(0); }
    50% { opacity: 1; transform: translateY(-1vw) scale(1); }
}

/* --- Add Post Button (кнопка в index) --- */
.addPostButton {
    position: fixed;
    bottom: 2vw;
    left: calc(11vw + 42%);
    transform: translateX(-50%);
    z-index: 30;
    padding: 0.95vw 2.2vw;
    border: none;
    border-radius: 999px;
    background: linear-gradient(90deg, #5A9CFF, #2D7DFF);
    color: #ffffff;
    font-size: 1vw;
    font-weight: 700;
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
    box-shadow: 0 0.6vw 1.5vw rgba(45, 125, 255, 0.22);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.addPostButton:hover {
    transform: translateX(-50%) scale(1.04);
    box-shadow: 0 0.8vw 2vw rgba(45, 125, 255, 0.35);
}
.addPostButton:active {
    transform: translateX(-50%) scale(0.97);
}


/* ============================================
EMOJI PICKER / ЭМОДЗИ
============================================ */
.emojiPickerWrapper {
    position: absolute;
    bottom: 4vw;
    top: 21vw;
    left: 72vw;
    z-index: 999;
    opacity: 0;
    transform: translateY(1vw) scale(0.96);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    border-radius: 9vw;
}
.emojiPickerWrapper.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* --- Emoji Mart Theme Overrides (Dark + vw) --- */
em-emoji-picker {
    --rgb-background: 20, 22, 26 !important;
    --rgb-color: 230, 238, 249 !important;
    --rgb-input: 27, 30, 34 !important;
    --border-color-rgb: 30, 33, 39 !important;
    --border-radius: 1.4vw !important;
    --border-size: 0.15vw !important;
    --category-icon-size: 1.2vw !important;
    --font-size: 0.9vw !important;
    width: 24vw !important;
    height: 26vw !important;
}
em-emoji-picker #search {
    background: #1B1E22 !important;
    border: 0.06vw solid #1E2127 !important;
    color: #E6EEF9 !important;
    border-radius: 0.8vw !important;
    font-size: 0.85vw !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    padding: 0.6vw 1vw !important;
}
em-emoji-picker #search::placeholder {
    color: #6D747E !important;
}
em-emoji-picker #nav {
    background: #14161A !important;
    border-color: #1E2127 !important;
}
em-emoji-picker #nav button {
    color: #7B818D !important;
}
em-emoji-picker #nav button:hover,
em-emoji-picker #nav button[aria-selected="true"] {
    color: #5A9CFF !important;
}
em-emoji-picker #nav button[aria-selected="true"] {
    border-color: #5A9CFF !important;
}
em-emoji-picker #skins {
    background: #14161A !important;
    border-color: #1E2127 !important;
}
em-emoji-picker .emoji {
    border-radius: 0.6vw !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
    font-size: 1.6vw !important;
}
em-emoji-picker .emoji:hover {
    background: rgba(255,255,255,0.08) !important;
    transform: scale(1.15) !important;
}
em-emoji-picker #categories .name {
    color: #94A3B8 !important;
    font-size: 0.8vw !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05vw !important;
}
em-emoji-picker #preview {
    background: #14161A !important;
    border-color: #1E2127 !important;
    color: #E6EEF9 !important;
}
em-emoji-picker #preview .name {
    color: #ffffff !important;
    font-size: 0.9vw !important;
}
em-emoji-picker #preview .shortcodes {
    color: #7B818D !important;
    font-size: 0.8vw !important;
}
em-emoji-picker::-webkit-scrollbar {
    width: 0.4vw !important;
}
em-emoji-picker::-webkit-scrollbar-track {
    background: transparent !important;
}
em-emoji-picker::-webkit-scrollbar-thumb {
    background: #1E2127 !important;
    border-radius: 999px !important;
}
em-emoji-picker::-webkit-scrollbar-thumb:hover {
    background: #2D7DFF !important;
}



.like-btn {
    display: flex;
    align-items: center;
    gap: 0.38vw;
    padding: 0.5vw 0.75vw;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 1.25vw;
    transition: all 0.2s;
}

.like-btn:hover {
    background: #ebebeb04;
}

.like-btn.isActive .actionIcon {
    filter: brightness(0) saturate(0%) invert(92%) sepia(0%) saturate(0%) hue-rotate(340deg);
}

.like-btn.isActive .actionCount {
    color: #ebebeb;
    font-weight: 600;
}

.like-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.like-btn .actionIcon {
    width: 1.25vw;
    height: 1.25vw;
    transition: transform 0.2s;
}

.hashtags:hover {
    text-decoration: none;
    color: #3d88ff;
}

.postText:has(.hashtags:hover) {
    transition: color 0.6s ease;
    color: #c6d6f459;
}

/* ===== СТАТИСТИКА ПОСТА (внутри модалки) ===== */
.modalPostStats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2vw;
    margin-top: 1vw;
    padding-top: 0.8vw;
    border-top: 0.06vw solid #1E2127;
}

/* Левая часть: лайк · комменты · репост */
.modalStatsLeft {
    display: flex;
    align-items: center;
    gap: 1.2vw;
}

.modalStatBtn {
    display: flex;
    align-items: center;
    gap: 0.35vw;
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 0.95vw;
    cursor: pointer;
    padding: 0.25vw 0.5vw;
    border-radius: 0.4vw;
    transition: all 0.18s ease;
    font-family: inherit;
    line-height: 1;
}

.modalStatBtn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.02);
}

.modalStatBtn .actionIcon {
    width: 1.2vw;
    height: 1.2vw;
    display: inline-block;
}

.modalStatBtn .actionCount {
    color: #8A90A0;
    font-size: 0.92vw;
    font-weight: 500;
}

.modalStatBtn.isActive {
    color: #ff5d7a;
}

.modalStatBtn.isActive .actionCount {
    color: #ff5d7a;
}

/* Правая часть: Пост захвачен · просмотры */
.modalStatsRight {
    display: flex;
    align-items: center;
    gap: 1.5vw;
    flex-shrink: 0;
}

.capturedBadge {
    display: flex;
    align-items: center;
    gap: 0.3vw;
    color: #2ED573;
    font-size: 0.88vw;
    font-weight: 500;
    line-height: 1;
}

.capturedBadge .starIcon {
    width: 1vw;
    height: 1vw;
    fill: #2ED573;
}

.viewsBadge {
    display: flex;
    align-items: center;
    gap: 0.3vw;
    color: #6D747E;
    font-size: 0.88vw;
    font-weight: 500;
    line-height: 1;
    padding-right: 1vw;
}

.viewsBadge .eyeIcon {
    width: 1vw;
    height: 1vw;
    stroke: #6D747E;
}

/* ===== МОДАЛКА ОТКРЫТОГО ПОСТА ===== */
.postModalOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(0.4vw);
    z-index: 5000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.postModalOverlay.isOpen {
    opacity: 1;
    pointer-events: all;
}

.postModalSheet {
    position: relative;
    width: 100%;
    max-width: 700px;
    max-height: 96vh;
    background: #14161A;
    border-radius: 1.6vw 1.6vw 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -0.5vw 3vw rgba(0, 0, 0, 0.5);
}

.postModalOverlay.isOpen .postModalSheet {
    transform: translateY(0);
}

/* ===== РУЧКА ДЛЯ СВАЙПА ===== */
.modalSwipeHandle {
    width: 3.5vw;
    height: 0.35vw;
    background: #2D3038;
    border-radius: 999px;
    margin: 0.8vw auto 0.4vw;
    cursor: grab;
    transition: background 0.2s ease;
}

.modalSwipeHandle:hover {
    background: #5A9CFF;
}

/* ===== ШАПКА ===== */
.modalTopHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8vw 1.6vw;
    border-bottom: 0.06vw solid #1E2127;
    flex-shrink: 0;
}

.modalBackBtn,
.modalCloseBtn {
    width: 2.6vw;
    height: 2.6vw;
    background: transparent;
    border: none;
    color: #7B818D;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.2s ease;
}

.modalBackBtn:hover,
.modalCloseBtn:hover {
    background: rgba(255, 77, 77, 0.1);
    color: #ff5d7a;
}

.modalTitle {
    font-size: 1.3vw;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}


/* ===== МОБИЛЬНАЯ ВЕРСИЯ - BOTTOM SHEET ===== */
@media (max-width: 430px) {
    .createPostModal .particle {
        width: 1.3vw;
        height: 1.3vw;
    }
    .rightSidebar{
        display: none;
    }
    .createPostOverlay.isOpen {
        backdrop-filter: blur(1vw);
    }

    .createPostModal {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        transform: translateY(100%);
        width: 100vw;
        height: 178vw;
        max-width: 100vw;
        background: rgba(20, 22, 26, 0.95);
        backdrop-filter: blur(2vw) saturate(1.5);
        -webkit-backdrop-filter: blur(2vw) saturate(1.5);
        border: none;
        border-radius: 2.5vw 2.5vw 0 0;
        padding: 0;
        box-shadow: 0 -0.5vw 3vw rgba(0, 0, 0, 0.5), 0 0 0 0.1vw rgba(255, 255, 255, 0.05) inset;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, box-shadow 0.3s ease;
        z-index: 999;
    }
    .createPostModal.isOpen {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0);
    }

    /* Индикатор сверху (полоска) */
    .createPostModal::before {
        transform: translateX(-50%);
        width: 16vw;
        height: 1vw;
    }

    /* Убираем эффекты hover для мобильной версии */

    .createPostModal:hover::after {
        opacity: 0;
    }

    .createPostModal:hover {
        box-shadow:
            0 -0.5vw 3vw rgba(0, 0, 0, 0.5),
            0 0 0 0.1vw rgba(255, 255, 255, 0.05) inset;
        border: none;
    }

    /* Header */
    .modalHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2.5vw 2.5vw 2vw;
        border-bottom: 0.15vw solid rgba(255, 255, 255, 0.06);
        background: transparent;
    }

    .modalTitle {
        font-size: 5.3vw;
        font-weight: 700;
        color: #ffffff;
        margin: 0;
        letter-spacing: 0.02vw;
    }

    .modalClose {
        display: none;
    }

    .modalClose:active {
        transform: scale(0.92);
        background: rgba(255, 255, 255, 0.12);
    }

    .modalClose svg {
        width: 2.2vw;
        height: 2.2vw;
        stroke: #7B818D;
    }

    /* Composer */
    .postComposer {
        display: flex;
        gap: 1.5vw;
        padding: 2.5vw;
        align-items: flex-start;
    }

    .composerAvatar {
        flex-shrink: 0;
    }

    .composerAvatar img {
        width: 5vw;
        height: 5vw;
        border-radius: 50%;
        object-fit: cover;
        border: 0.15vw solid rgba(255, 255, 255, 0.1);
    }

    .composerContent {
        flex: 1;
        min-width: 0;
    }

    .postTextarea {
        width: 100%;
        min-height: 36vw;
        max-height: 31vw;
        background: transparent;
        border: none;
        outline: none;
        color: #E6EEF9;
        font-size: 4.1vw;
        font-family: 'Plus Jakarta Sans', Arial, sans-serif;
        font-weight: 400;
        line-height: 1.5;
        resize: none;
        overflow: hidden;
        padding: 0.2vw 1vw;
        transition: color 0.2s ease;
    }

    .postTextarea:focus {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(90, 156, 255, 0.4);
    }

    .postTextarea::placeholder {
        color: rgba(123, 129, 141, 0.8);
    }

    /* Attached Media */
    .attachedMedia {
        margin-top: 1.5vw;
        min-height: 0.1vw;
    }

    /* Actions */
    .composerActions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 2vw;
        padding-top: 2vw;
        border-top: 0.15vw solid rgba(255, 255, 255, 0.06);
    }

    .composerTools {
        display: flex;
        gap: 1vw;
    }

    .toolButton {
        width: 4.5vw;
        height: 4.5vw;
        background: rgba(255, 255, 255, 0.06);
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.2s ease;
        padding: 0;
    }

    .toolButton:active {
        transform: scale(0.9);
        background: rgba(90, 156, 255, 0.2);
    }

    .toolButton svg {
        width: 2.4vw;
        height: 2.4vw;
        stroke: #7B818D;
    }

    .composerRight {
        display: flex;
        align-items: center;
        gap: 1.5vw;
    }

    .characterCounter {
        font-size: 1.4vw;
        color: rgba(123, 129, 141, 0.9);
        font-weight: 500;
    }

    .sendButton {
        width: 5vw;
        height: 5vw;
        background: linear-gradient(135deg, #5A9CFF, #2D7DFF);
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
        padding: 0;
        box-shadow: 0 0.4vw 1.2vw rgba(45, 125, 255, 0.35);
    }

    .sendButton:active {
        transform: scale(0.92);
    }

    .sendButton:not(:disabled):hover {
        box-shadow: 0 0.6vw 1.5vw rgba(45, 125, 255, 0.45);
    }

    .sendButton:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .sendButton svg {
        width: 2.4vw;
        height: 2.4vw;
        stroke: #ffffff;
    }

    .createPostModal .composerRight {
        display: flex;
        align-items: center;
        gap: 2.8vw;
    }

    .createPostModal .characterCounter {
        font-size: 2.8vw;
        font-weight: 500;
    }
    .createPostModal .sendButton {
        width: 9.8vw;
        height: 9.8vw;
    }

    .createPostModal .sendButton svg {
        width: 5.2vw;
        height: 5.2vw;
        stroke: #ffffff;
        transition: transform 0.25s ease;
    }

    .createPostModal .composerTools {
        gap: 4.4vw;
    }

    .createPostModal .toolButton {
        width: 5.4vw;
        height: 2.4vw;
    }

    .createPostModal .toolButton svg {
        width: 20.4vw;
        height: 10.4vw;
    }

    /* Emoji Picker */
    .emojiPickerWrapper {
        top: auto !important;
        bottom: 0;
        left: 0;
        width: 100vw;
        position: fixed !important;
    }

    .emojiPickerContainer {
        border-radius: 2.5vw 2.5vw 0 0;
    }

    .createPostModal .mediaPreview {
        width: 24vw;
        height: 24vw;
    }

    .createPostModal .mediaPreviewRemove {
        width: 5.6vw;
        height: 5.6vw;
        font-size: 3.9vw;
    }

    .createPostModal .composerAvatar {
        width: 5.6vw;
        height: 5.6vw;
    }

    .createPostModal .postTextarea {
        min-height: 14vw;
        max-height: 65vw;
        font-size: 3.1vw;
        padding: 0 .2vw 2vw;
        border-radius: 2vw;
    }
    .modalTitle {
        font-size: 5vw;
    }

}


/* ===== КОНТЕНТ ===== */
.modalContent {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    overscroll-behavior: contain
}

.modalContent::-webkit-scrollbar {
    width: 0.4vw;
}

.modalContent::-webkit-scrollbar-track {
    background: transparent;
}

.modalContent::-webkit-scrollbar-thumb {
    background: #1E2127;
    border-radius: 999px;
}

.modalContent::-webkit-scrollbar-thumb:hover {
    background: #2D7DFF;
}

/* ===== ПОСТ ===== */
.modalPostBlock {
    padding: 1.4vw 1.6vw;
    display: flex;
    gap: 1.2vw;
}

.modalAvatar {
    width: 3.2vw;
    height: 3.2vw;
    border-radius: 20%;
    border: 0.06vw solid #1E2127;
    object-fit: cover;
    margin-top: 0.15vw;
}

.modalAuthor {
    color: #CFE4FF;
    font-size: 1.05vw;
    font-weight: 700;
    text-decoration: none;
}

.modalTime {
    color: #6D747E;
    font-size: 0.9vw;
    margin: 0;
}

.modalText {
    color: #C6D6F4;
    font-size: 1.02vw;
    font-weight: 300;
    line-height: 1.6vw;
    margin: -0.5vw 0vw 0vw;
    word-wrap: break-word;
}

.modalText .hashtag {
    color: #5A9CFF;
    text-decoration: none;
}

.modalImage {
    margin-top: 0.8vw;
}

.modalImage img {
    width: 100%;
    border-radius: 1.2vw;
    max-height: 16vw;
    object-fit: cover;
}

/* ===== СТАТИСТИКА ПОСТА ===== */
.modalPostStats {
    display: flex;
    align-items: center;
    gap: 1.2vw;
    margin-top: 1vw;
    width: 121%;
    margin-left: -6vw;
    padding-top: 0.8vw;
    border-top: 0.06vw solid #1E2127;
}

.modalStatBtn {
    display: flex;
    align-items: center;
    gap: 0.35vw;
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 0.95vw;
    cursor: pointer;
    padding: 0.25vw 0.5vw;
    border-radius: 0.4vw;
    margin-left: 1vw;
    transition: all 0.18s ease;
}

.modalStatBtn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.02);
}

.modalStatBtn .actionIcon {
    width: 1.2vw;
    height: 1.2vw;
}

.modalStatBtn.isActive {
    color: #ebebeb;
}

.modalStatBtn.isActive .actionCount {
    color: #ebebeb;
}

.modalStatRight {
    margin-left: 19vw;
    display: flex;
    align-items: center;
    gap: 2vw;
    font-size: 0.85vw;
}

.capturedBadge {
    color: #2ED573;
    font-weight: 500;
}

.viewsBadge {
    color: #6D747E;
}

/* ===== РАЗДЕЛИТЕЛЬНАЯ ЛИНИЯ ===== */
.modalDivider {
    height: 0.06vw;
    background: #1E2127;
    margin: 0 1.6vw;
}

/* ===== СОРТИРОВКА ===== */
.commentsSort {
    padding: 1vw 1.6vw;
}

.sortBtn {
    display: flex;
    align-items: center;
    gap: 0.4vw;
    background: rgba(90, 156, 255, 0.1);
    border: none;
    color: #5A9CFF;
    font-size: 0.95vw;
    font-weight: 600;
    cursor: pointer;
    padding: 0.4vw 0.8vw;
    border-radius: 0.6vw;
    transition: background 0.2s ease;
    font-family: inherit;
}

.sortBtn:hover {
    background: rgba(90, 156, 255, 0.15);
}

/* ===== КОММЕНТАРИИ ===== */
.commentsList {
    padding: 0 1.6vw;
}

.commentItem {
    display: flex;
    gap: 1vw;
    padding: 1.2vw 0;
    border-bottom: 0.06vw solid #1E2127;
    animation: commentSlideIn 0.35s ease;
}

.commentItem:last-child {
    border-bottom: none;
}

@keyframes commentSlideIn {
    from {
        opacity: 0;
        transform: translateY(0.5vw);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.commentAvatar {
    width: 3vw;
    height: 3vw;
    border-radius: 20%;
    background: #1E2127;
    display: grid;
    place-items: center;
    font-size: 1.4vw;
    flex-shrink: 0;
}

.commentBody {
    flex: 1;
    min-width: 0;
}

.commentHead {
    display: flex;
    align-items: center;
    gap: 0.5vw;
    margin-bottom: 0.4vw;
    flex-wrap: wrap;
}

.commentAuthor {
    color: #CFE4FF;
    font-weight: 700;
    font-size: 0.98vw;
    text-decoration: none;
}

.commentAuthor:hover {
    color: #5A9CFF;
}

.commentBadge {
    font-size: 0.7vw;
    padding: 0.1vw 0.35vw;
    border-radius: 999px;
    background: rgba(90, 156, 255, 0.15);
    color: #5A9CFF;
    font-weight: 600;
}

.commentDot {
    color: #4A4F5A;
    font-size: 0.85vw;
}

.commentTime {
    color: #6D747E;
    font-size: 0.82vw;
}

.commentText {
    color: #E6EEF9;
    font-size: 0.98vw;
    line-height: 1.55;
    margin-bottom: 0.6vw;
    word-wrap: break-word;
}

.commentFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.commentReplyBtn {
    background: transparent;
    border: none;
    color: #6D747E;
    font-size: 0.82vw;
    font-weight: 500;
    cursor: pointer;
    padding: 0.2vw 0.4vw;
    border-radius: 0.4vw;
    transition: color 0.2s ease;
    font-family: inherit;
}

.commentReplyBtn:hover {
    color: #5A9CFF;
}

.commentLikeBtn {
    display: flex;
    align-items: center;
    gap: 0.3vw;
    background: transparent;
    border: none;
    color: #8A90A0;
    font-size: 0.85vw;
    cursor: pointer;
    padding: 0.3vw 0.5vw;
    border-radius: 999px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.commentLikeBtn svg {
    width: 1vw;
    height: 1vw;
    stroke: currentColor;
    fill: none;
}

.commentLikeBtn:hover {
    color: #CFE4FF;
}

.commentLikeBtn.isActive {
    color: #ff5d7a;
}

.commentLikeBtn.isActive svg {
    fill: #ff5d7a;
    stroke: #ff5d7a;
}

/* ===== ПОЛЕ ВВОДА ===== */
.modalInputWrap {
    display: flex;
    align-items: center;
    gap: 0.8vw;
    padding: 1vw 1.6vw;
    border-top: 0.06vw solid #1E2127;
    background: #14161A;
    flex-shrink: 0;
}

.attachBtn,
.micBtn {
    width: 2.8vw;
    height: 2.8vw;
    background: transparent;
    border: none;
    color: #7B818D;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.attachBtn:hover,
.micBtn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #5A9CFF;
}

.commentInput {
    flex: 1;
    background: #1B1E22;
    border: 0.06vw solid #1E2127;
    border-radius: 999px;
    padding: 0.7vw 1.2vw;
    color: #E6EEF9;
    font-size: 0.95vw;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.commentInput::placeholder {
    color: #6D747E;
}

.commentInput:focus {
    border-color: rgba(90, 156, 255, 0.4);
    box-shadow: 0 0 0.8vw rgba(90, 156, 255, 0.15);
}

@media (max-width: 700px) {
    .postModalSheet {
        max-height: 83vh;
        border-radius: 1.2vw 1.2vw 0 0;
    }
}

/* ===== КАРТИНКА ПОСТА В МОДАЛКЕ ===== */
.modalImage {
    margin-top: 0.8vw;
    border-radius: 1.2vw;
    overflow: hidden;
    max-height: 20vw;
}

.modalImage img {
    width: 100%;
    height: auto;
    max-height: 20vw;
    object-fit: cover;
    border-radius: 1.2vw;
    display: block;
    transition: transform 0.3s ease;
}

.modalImage:hover img {
    transform: scale(1.02);
}

/* Если картинки нет — скрываем блок */
.modalImage[style*="display: none"] {
    display: none !important;
}

/* ===== КОЛЛАЖ ===== */
.modalGallery {
    display: grid;
    gap: 0.3vw;
    margin-top: 0.8vw;
    border-radius: 1.2vw;
    overflow: hidden;
    max-height: 20vw;
}

.modalGallery:empty { display: none; }

.modalGallery.count-1 { grid-template-columns: 1fr; }
.modalGallery.count-2 { grid-template-columns: 1fr 1fr; }
.modalGallery.count-3 {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.modalGallery.count-3 .galleryImg:first-child { grid-row: span 2; }
.modalGallery.count-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.galleryImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
    display: block;
}

.galleryImg:hover {
    transform: scale(1.03);
    filter: brightness(1.1);
}

/* ===== LIGHTBOX ===== */
.lightboxOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.lightboxOverlay.isOpen {
    opacity: 1;
    pointer-events: all;
}

.lightboxImg {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 0.8vw;
    transition: opacity 0.15s ease;
}

.lightboxNav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3.5vw;
    height: 3.5vw;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(0.4vw);
    border: 0.06vw solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.2s ease;
}

.lightboxNav:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.1);
}

.lightboxNav svg { width: 1.5vw; height: 1.5vw; stroke: currentColor; }
.lightboxPrev { left: 1.5vw; }
.lightboxNext { right: 1.5vw; }

.lightboxClose {
    position: absolute;
    top: 1.5vw;
    right: 1.5vw;
    width: 3vw;
    height: 3vw;
    background: rgba(255, 255, 255, 0.1);
    border: 0.06vw solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.2s ease;
}

.lightboxClose:hover {
    background: rgba(255, 77, 77, 0.3);
    transform: scale(1.1);
}

.lightboxClose svg { width: 1.3vw; height: 1.3vw; stroke: currentColor; }

.lightboxCounter {
    position: absolute;
    bottom: 1.5vw;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9vw;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.4vw 1vw;
    border-radius: 999px;
}

/* Loading */
.commentsLoading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5vw 1.25vw;
    color: rgba(255, 255, 255, 0.5);
    gap: 0.75vw;
}

.commentsLoading .spinner {
    width: 2vw;
    height: 2vw;
    border: 0.19vw solid rgba(255, 255, 255, 0.1);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Empty */
.commentsEmpty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5vw 1.25vw;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

.commentsEmptyIcon {
    font-size: 3vw;
    margin-bottom: 0.75vw;
    opacity: 0.6;
}

.commentsEmpty p {
    font-size: 1.13vw;
    font-weight: 600;
    margin: 0 0 0.25vw 0;
    color: rgba(255, 255, 255, 0.6);
}

.commentsEmpty span {
    font-size: 0.81vw;
}

/* Error */
.commentsError {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5vw 1.25vw;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    gap: 0.75vw;
}

.commentsErrorIcon {
    font-size: 2.5vw;
    margin-bottom: 0.5vw;
}

.commentsRetryBtn {
    margin-top: 0.75vw;
    padding: 0.63vw 1.25vw;
    background: rgba(59, 130, 246, 0.2);
    border: 0.06vw solid rgba(59, 130, 246, 0.4);
    border-radius: 0.63vw;
    color: #3b82f6;
    font-size: 0.88vw;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.commentsRetryBtn:hover {
    background: rgba(59, 130, 246, 0.3);
}

/* ===== ЗАГРУЗКА ===== */
.commentsLoading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.75vw 1.25vw;
    gap: 1.25vw;
}

.loading-spinner {
    position: relative;
    width: 3.75vw;
    height: 3.75vw;
}

.spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0.19vw solid transparent;
    border-radius: 50%;
    animation: spinner-rotate 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.spinner-ring:nth-child(1) {
    border-top-color: #3b82f6;
}

.spinner-ring:nth-child(2) {
    border-right-color: #8b5cf6;
    animation-delay: 0.2s;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
}

.spinner-ring:nth-child(3) {
    border-bottom-color: #06b6d4;
    animation-delay: 0.4s;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
}

@keyframes spinner-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    font-size: 0.88vw;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

/* ===== ПОВТОР ===== */
.commentsRetry,
.commentsError,
.commentsEmpty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5vw 1.25vw;
    gap: 0.75vw;
    animation: fadeInUp 0.5s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(1.25vw);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.retry-icon,
.error-icon,
.empty-icon {
    font-size: 3vw;
}

.retry-icon {
    animation: warning-bounce 2s ease infinite;
}

@keyframes warning-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-0.63vw); }
}

.empty-icon {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-0.63vw); }
}

.retry-title,
.error-title,
.empty-title {
    font-size: 1.13vw;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.retry-subtitle,
.error-subtitle,
.empty-subtitle,
.retry-hint {
    font-size: 0.88vw;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.retry-hint {
    font-size: 0.81vw;
    color: rgba(255, 255, 255, 0.4);
}

/* ===== КНОПКИ ПОВТОРА ===== */
.retry-now-btn,
.retry-final-btn {
    display: flex;
    align-items: center;
    gap: 0.5vw;
    padding: 0.75vw 1.5vw;
    background: rgba(59, 130, 246, 0.15);
    border: 0.09vw solid rgba(59, 130, 246, 0.4);
    border-radius: 0.75vw;
    color: #3b82f6;
    font-size: 0.88vw;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 0.5vw;
}

.retry-now-btn:hover,
.retry-final-btn:hover {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.6);
    transform: translateY(-0.13vw);
    box-shadow: 0 0.25vw 0.75vw rgba(59, 130, 246, 0.2);
}

.retry-now-btn:active,
.retry-final-btn:active {
    transform: translateY(0);
}

/* Обертка для меню (относительное позиционирование) */
.commentMenuWrapper {
    position: relative;
    margin-left: auto;
}

/* Кнопка с тремя точками */
.commentMenuBtn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.25vw;
    line-height: 1;
    cursor: pointer;
    padding: 0.25vw 0.5vw;
    border-radius: 0.38vw;
    transition: all 0.2s ease;
}

.commentMenuBtn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

/* Выпадающее меню */
.commentMenuDropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: #1e2127;
    border: 0.06vw solid rgba(255, 255, 255, 0.1);
    border-radius: 0.63vw;
    padding: 0.38vw;
    min-width: 8.75vw;
    box-shadow: 0 0.5vw 1.5vw rgba(0, 0, 0, 0.4);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.63vw) scale(0.95);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.commentMenuDropdown.isOpen {
    opacity: 1;
    visibility: visible;
    transform: translateY(0.25vw) scale(1);
}

/* Кнопка удаления внутри меню */
.commentMenuDelete {
    display: flex;
    align-items: center;
    gap: 0.5vw;
    width: 100%;
    padding: 0.5vw 0.75vw;
    background: transparent;
    border: none;
    border-radius: 0.38vw;
    color: #ef4444;
    font-size: 0.81vw;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.commentMenuDelete:hover {
    background: rgba(239, 68, 68, 0.1);
}

.commentMenuDelete svg {
    flex-shrink: 0;
}


/* Базовый стиль для упоминаний */
.mentions {
    color: #5A9CFF;
    text-decoration: none;
    font-weight: 600;
    background: rgba(90, 156, 255, 0.08);
    padding: 0.13vw 0.38vw;
    border-radius: 0.38vw;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    line-height: 1.3;
    word-break: break-word;
}

/* Эффект при наведении */
.mentions:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #5A9CFF, #2D7DFF);
    box-shadow: 0 0.25vw 0.75vw rgba(90, 156, 255, 0.3);
    transform: translateY(-0.06vw);
}

/* Эффект при нажатии */
.mentions:active {
    transform: translateY(0) scale(0.96);
    box-shadow: 0 0.13vw 0.38vw rgba(90, 156, 255, 0.2);
    transition: all 0.1s ease;
}

/* ===== ОФИЦИАЛЬНЫЙ ПОСТ: В СТИЛЕ NETLOS ===== */

.postBlock.official {
    position: relative;
    border-left: 0.2vw solid transparent;
    background: linear-gradient(#14161A, #14161A) padding-box,
                linear-gradient(180deg, #5A9CFF, #2D7DFF) border-box;
    overflow: visible;
}

/* Иконка-галочка в фирменном синем */
.officialIcon {
    position: absolute;
    top: 1.2vw;
    left: -0.9vw;
    width: 1.8vw;
    height: 1.8vw;
    background: linear-gradient(135deg, #5A9CFF, #2D7DFF);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.2vw 0.8vw rgba(45, 125, 255, 0.5),
                0 0 0 0.15vw #14161A;
    z-index: 10;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    animation: officialPulse 3s ease-in-out infinite;
}

.officialIcon svg {
    width: 1vw;
    height: 1vw;
}

.officialIcon:hover {
    transform: scale(1.15);
    box-shadow: 0 0.3vw 1.2vw rgba(45, 125, 255, 0.7),
                0 0 0 0.15vw #14161A;
}

@keyframes officialPulse {
    0%, 100% {
        box-shadow: 0 0.2vw 0.8vw rgba(45, 125, 255, 0.5),
                    0 0 0 0.15vw #14161A;
    }
    50% {
        box-shadow: 0 0.2vw 1.2vw rgba(45, 125, 255, 0.7),
                    0 0 0 0.15vw #14161A;
    }
}

.postBlock.official:hover {
    background: linear-gradient(#14161A, #14161A) padding-box,
                linear-gradient(180deg, #7AB0FF, #4D93FF) border-box;
    box-shadow: -0.1vw 0 1.5vw rgba(45, 125, 255, 0.2);
}

/* ===== МОБИЛЬНАЯ ВЕРСИЯ - BOTTOM SHEET ===== */
@media (max-width: 430px) {
    .createPostModal .particle {
        width: 1.3vw;
        height: 1.3vw;
    }
    .rightSidebar{
        display: none;
    }
    .createPostOverlay.isOpen {
        backdrop-filter: blur(1vw);
    }

    .createPostModal {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        transform: translateY(100%);
        width: 100vw;
        height: 178vw;
        max-width: 100vw;
        background: rgba(20, 22, 26, 0.95);
        backdrop-filter: blur(2vw) saturate(1.5);
        -webkit-backdrop-filter: blur(2vw) saturate(1.5);
        border: none;
        border-radius: 2.5vw 2.5vw 0 0;
        padding: 0;
        box-shadow: 0 -0.5vw 3vw rgba(0, 0, 0, 0.5), 0 0 0 0.1vw rgba(255, 255, 255, 0.05) inset;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, box-shadow 0.3s ease;
        z-index: 999;
    }
    .createPostModal.isOpen {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0);
    }

    /* Индикатор сверху (полоска) */
    .createPostModal::before {
        transform: translateX(-50%);
        width: 16vw;
        height: 1vw;
    }

    /* Убираем эффекты hover для мобильной версии */

    .createPostModal:hover::after {
        opacity: 0;
    }

    .createPostModal:hover {
        box-shadow:
            0 -0.5vw 3vw rgba(0, 0, 0, 0.5),
            0 0 0 0.1vw rgba(255, 255, 255, 0.05) inset;
        border: none;
    }

    /* Header */
    .modalHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2.5vw 2.5vw 2vw;
        border-bottom: 0.15vw solid rgba(255, 255, 255, 0.06);
        background: transparent;
    }

    .modalTitle {
        font-size: 5.3vw;
        font-weight: 700;
        color: #ffffff;
        margin: 0;
        letter-spacing: 0.02vw;
    }

    .modalClose {
        display: none;
    }

    .modalClose:active {
        transform: scale(0.92);
        background: rgba(255, 255, 255, 0.12);
    }

    .modalClose svg {
        width: 2.2vw;
        height: 2.2vw;
        stroke: #7B818D;
    }

    /* Composer */
    .postComposer {
        display: flex;
        gap: 1.5vw;
        padding: 2.5vw;
        align-items: flex-start;
    }

    .composerAvatar {
        flex-shrink: 0;
    }

    .composerAvatar img {
        width: 5vw;
        height: 5vw;
        border-radius: 50%;
        object-fit: cover;
        border: 0.15vw solid rgba(255, 255, 255, 0.1);
    }

    .composerContent {
        flex: 1;
        min-width: 0;
    }

    .postTextarea {
        width: 100%;
        min-height: 36vw;
        max-height: 31vw;
        background: transparent;
        border: none;
        outline: none;
        color: #E6EEF9;
        font-size: 4.1vw;
        font-family: 'Plus Jakarta Sans', Arial, sans-serif;
        font-weight: 400;
        line-height: 1.5;
        resize: none;
        overflow: hidden;
        padding: 0.2vw 1vw;
        transition: color 0.2s ease;
    }

    .postTextarea:focus {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(90, 156, 255, 0.4);
    }

    .postTextarea::placeholder {
        color: rgba(123, 129, 141, 0.8);
    }

    /* Attached Media */
    .attachedMedia {
        margin-top: 1.5vw;
        min-height: 0.1vw;
    }

    /* Actions */
    .composerActions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 2vw;
        padding-top: 2vw;
        border-top: 0.15vw solid rgba(255, 255, 255, 0.06);
    }

    .composerTools {
        display: flex;
        gap: 1vw;
    }

    .toolButton {
        width: 4.5vw;
        height: 4.5vw;
        background: rgba(255, 255, 255, 0.06);
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.2s ease;
        padding: 0;
    }

    .toolButton:active {
        transform: scale(0.9);
        background: rgba(90, 156, 255, 0.2);
    }

    .toolButton svg {
        width: 2.4vw;
        height: 2.4vw;
        stroke: #7B818D;
    }

    .composerRight {
        display: flex;
        align-items: center;
        gap: 1.5vw;
    }

    .characterCounter {
        font-size: 1.4vw;
        color: rgba(123, 129, 141, 0.9);
        font-weight: 500;
    }

    .sendButton {
        width: 5vw;
        height: 5vw;
        background: linear-gradient(135deg, #5A9CFF, #2D7DFF);
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
        padding: 0;
        box-shadow: 0 0.4vw 1.2vw rgba(45, 125, 255, 0.35);
    }

    .sendButton:active {
        transform: scale(0.92);
    }

    .sendButton:not(:disabled):hover {
        box-shadow: 0 0.6vw 1.5vw rgba(45, 125, 255, 0.45);
    }

    .sendButton:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .sendButton svg {
        width: 2.4vw;
        height: 2.4vw;
        stroke: #ffffff;
    }

    .createPostModal .composerRight {
        display: flex;
        align-items: center;
        gap: 2.8vw;
    }

    .createPostModal .characterCounter {
        font-size: 2.8vw;
        font-weight: 500;
    }
    .createPostModal .sendButton {
        width: 9.8vw;
        height: 9.8vw;
    }

    .createPostModal .sendButton svg {
        width: 5.2vw;
        height: 5.2vw;
        stroke: #ffffff;
        transition: transform 0.25s ease;
    }

    .createPostModal .composerTools {
        gap: 4.4vw;
    }

    .createPostModal .toolButton {
        width: 5.4vw;
        height: 2.4vw;
    }

    .createPostModal .toolButton svg {
        width: 20.4vw;
        height: 10.4vw;
    }

    /* Emoji Picker */
    .emojiPickerWrapper {
        top: auto !important;
        bottom: 0;
        left: 0;
        width: 100vw;
        position: fixed !important;
    }

    .emojiPickerContainer {
        border-radius: 2.5vw 2.5vw 0 0;
    }

    .createPostModal .mediaPreview {
        width: 24vw;
        height: 24vw;
    }

    .createPostModal .mediaPreviewRemove {
        width: 5.6vw;
        height: 5.6vw;
        font-size: 3.9vw;
    }

    .createPostModal .composerAvatar {
        width: 5.6vw;
        height: 5.6vw;
    }

    .createPostModal .postTextarea {
        min-height: 14vw;
        max-height: 65vw;
        font-size: 3.1vw;
        padding: 0 .2vw 2vw;
        border-radius: 2vw;
    }
    .modalTitle {
        font-size: 5vw;
    }

    .blockContentMain {
        position: absolute;
        top: 9vw;
        left: 0.3vw;
        height: 100%;
        width: 100%;
        width: calc(100% - 0vw - 1vw);
    }
}

/* ===== МОБИЛЬНАЯ ВЕРСИЯ POST BLOCK ===== */
@media (max-width: 430px) {
    .postBlock {
        width: 104vw;
        left: -2vw;
        background: transparent;
        border: none;
        border-bottom: 0.25vw solid rgba(255, 255, 255, 0.08);
        border-radius: 0;
        padding: 4.5vw 5vw 0vw;
        margin-bottom: 0;
        box-shadow: none;
        backdrop-filter: none;
    }

    .postBlock:last-child {
        border-bottom: none;
    }

    .postBlock:hover {
        border-color: rgba(90, 156, 255, 0.2);
        box-shadow: none;
        background: transparent;
    }

    .postHeader {
        gap: 3vw;
        margin-bottom: 3vw;
    }

    .postAvatar {
        width: 11vw;
        height: 11vw;
        border-radius: 50%;
        border: 0.3vw solid rgba(90, 156, 255, 0.3);
    }

    .postUserInfo {
        gap: 1vw;
    }

    .postUsername {
        font-size: 4.2vw;
        font-weight: 700;
        letter-spacing: -0.05vw;
    }

    .postTime {
        font-size: 3.2vw;
    }

    .postContent {
        font-size: 4vw;
        line-height: 1.5;
        margin-bottom: 4vw;
    }

    .postImage {
        border-radius: 2.5vw;
        margin-top: 1vw;
        width: 0vw;
    }

    .postActions {
        gap: 0vw;
        margin-top: 1vw;
        padding-top: 0vw;
        padding-left: 3vw;
    }

    .postAction {
        gap: 0vw;
        margin-top: 1vw;
        position: relative;
        left: -6vw;
        padding-top: 0vw;
        border-top: 0.25vw solid rgba(255, 255, 255, 0.06);
    }

    .postAction:active {
        background: rgba(90, 156, 255, 0.15);
        transform: scale(0.92);
    }

    .postAction svg {
        width: 5.5vw;
        height: 5.5vw;
    }

    .postAction:hover {
        color: #5A9CFF;
    }

    .postAction.active {
        color: #5A9CFF;
    }

    .postAction.active svg {
        fill: rgba(90, 156, 255, 0.25);
    }

    .userAvatar {
        width: 7.2vw;
        height: 7.2vw;
    }
    .avatarPlus {
        right: -0.9vw;
        padding-left: 0.41vw;
        padding-bottom: 0vw;
        bottom: -4.85vw;
        width: 3.1vw;
        height: 3.1vw;
        border: none;
        font-size: 3.8vw;
        background: linear-gradient(90deg, #5a9cff00, #5a9cff00);
        box-shadow: none
    }

    .userName {
        font-size: 3.05vw;
        left: 5vw;
    }

    .postText {
        font-size: 3.4vw;
        position: relative;
        left: 5vw;
        top: -2vw;
        width: 79vw;
        line-height: 4.6vw;
    }

    .DatePost {
        font-size: 2.9vw;
        position: relative;
        left: 4vw;
    }

    .postImage img {
        max-height: 82vw;
    }
    .modalGallery.count-3 {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .modalGallery {
        max-height: 37vw;
    }

    .avatarWrap {
        position: relative;
        flex-shrink: 0;
        height: 3.6vw;
        left: 5vw;
    }
    .modalPostBlock {
        padding: 1.4vw 0vw;
        display: flex;
        gap: 0.2vw;
    }
}

/* ===== ДЕСКТОП — как было ===== */
.actionButton {
    background: transparent;
    border: none;
    color: #94A3B8;
    display: inline-flex;
    align-items: center;
    gap: 0.35vw;
    font-size: 0.95vw;
    cursor: pointer;
    padding: 0.25vw 0.5vw;
    border-radius: 0.4vw;
    transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease;
}

/* ===== МОБИЛЬНАЯ ВЕРСИЯ — КРУПНО ===== */
@media (max-width: 430px) {
    .actionButton {
        gap: 2vw;
        font-size: 3.8vw;
        padding: 2vw 2.5vw;
        border-radius: 2vw;
        -webkit-tap-highlight-color: transparent;
    }

    .actionButton:active {
        background: rgba(90, 156, 255, 0.15);
        transform: scale(0.92);
    }

    .actionButton:hover {
        color: #5A9CFF;
    }

    .actionButton svg {
        width: 5.5vw;
        height: 5.5vw;
    }

    /* Цветные состояния */
    .actionButton.like.active {
        color: #FF5D7A;
    }

    .actionButton.like.active svg {
        fill: rgba(255, 93, 122, 0.25);
    }

    .actionButton.comment.active {
        color: #5A9CFF;
    }

    .actionButton.repost.active {
        color: #34D399;
    }

    .actionButton.repost.active svg {
        fill: rgba(52, 211, 153, 0.25);
    }

    .like-btn .actionIcon {
        width: 4.2vw;
        height: 4.2vw;
    }
    .actionIcon {
        width: 4.2vw;
        height: 4.2vw;
    }

    .actionCount {
        font-size: 3.92vw;
    }

    .modalGallery {
        max-height: 78vw;
    }
    .modalGallery.count-3 {
        grid-template-columns: 2fr 1fr;
    }
    .modalText {
        font-size: 3.6vw;
        margin: 7.5vw 0vw 3vw;
        position: relative;
        left: -5vw;
    }
    .postModalSheet .postHeader {
        gap: 3vw;
        margin-bottom: 3vw;
    }

    .postModalSheet .userName {
        top: 1.8vw;
        left: 5vw;
    }

    .postModalSheet .DatePost {
        position: relative;
        top: 2vw;
        left: 3vw;
    }

    .modalGallery {
        position: relative;
        left: -7vw;
        border-radius: 3vw;
        max-height: 82vw;
        width: 96vw;
    }

    .postModalSheet .modalGallery {
        left: -5vw;
    }

    .postModalSheet .avatarWrap {
        flex-shrink: 0;
        height: 3.6vw;
        position: relative;
        left: 2.4vw;
    }

    .postModalSheet .modalBackBtn, .postModalSheet .modalCloseBtn{
        opacity: 0;
    }

    .modalStatBtn .actionIcon {
        width: 4.2vw;
        height: 4.2vw;
    }

    .modalStatBtn {
        gap: 2.35vw;
    }

    .modalStatBtn .actionCount {
        font-size: 0.92vw;
        font-size: 3vw;
    }
    .modalPostStats {
        gap: 1.2vw;
        margin-top: 1vw;
        width: 72%;
        margin-left: -5vw;
    }
    .lightboxCounter {
        font-size: 2.9vw;
    }
    .lightboxClose {
        width: 8vw;
        height: 8vw;
    }
    .lightboxClose svg {
        width: 4.3vw;
        height: 4.3vw;
    }
    .searchBar {
        position: fixed;
        top: 4vw;
        left: 82vw;
        width: 11vw;
        height: 11vw;
        background: rgb(20 22 26 / 72%);
        backdrop-filter: blur(20px) saturate(1.5);
        border-bottom: .4vw solid rgb(199 222 255 / 15%);
        border-top: .4vw solid rgb(199 222 255 / 8%);
    }

    .searchIcon {
        width: 20vw;
        height: 5vw;
        position: relative;
        left: 0;
        opacity: .8;
    }

    .searchInput{
        display: none;
    }
}

/* ===== МОБИЛЬНАЯ ВЕРСИЯ КОММЕНТАРИЕВ — КОМПАКТНО ===== */
@media (max-width: 430px) {
    .commentItem {
        display: flex;
        gap: 2.5vw;
        padding: 3vw 4vw;
        border-bottom: 0.2vw solid rgba(255, 255, 255, 0.06);
        align-items: flex-start;
    }

    .commentItem:last-child {
        border-bottom: none;
    }

    .commentAvatar {
        width: 8vw;
        height: 8vw;
        border-radius: 50%;
        flex-shrink: 0;
        background: #1E2127;
        border: none;
    }

    .commentBody {
        flex: 1;
        min-width: 0;
    }

    .commentHead {
        display: flex;
        align-items: center;
        gap: 1.5vw;
        margin-bottom: 1vw;
        flex-wrap: wrap;
    }

    .commentAuthor {
        font-size: 3.5vw;
        font-weight: 700;
        color: #ffffff;
        text-decoration: none;
    }

    .commentAuthor:hover {
        color: #5A9CFF;
    }

    .commentBadge {
        font-size: 2.4vw;
        padding: 0.3vw 1vw;
        border-radius: 1.5vw;
        background: rgba(90, 156, 255, 0.15);
        color: #5A9CFF;
        font-weight: 600;
    }

    .commentDot {
        color: #4A4F5A;
        font-size: 2.8vw;
    }

    .commentTime {
        font-size: 2.8vw;
        color: #6D747E;
    }

    .commentText {
        font-size: 3.2vw;
        line-height: 1.5;
        color: #E6EEF9;
        margin-bottom: 1.5vw;
        word-wrap: break-word;
    }

    .commentFooter {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .commentReplyBtn {
        background: transparent;
        border: none;
        color: #6D747E;
        font-size: 3vw;
        font-weight: 500;
        cursor: pointer;
        padding: 1vw 1.5vw;
        border-radius: 1.5vw;
        font-family: inherit;
        transition: color 0.2s ease;
    }

    .commentReplyBtn:hover {
        color: #5A9CFF;
    }

    .commentLikeBtn {
        display: flex;
        align-items: center;
        gap: 1vw;
        background: transparent;
        border: none;
        color: #6D747E;
        font-size: 3vw;
        cursor: pointer;
        padding: 1vw 1.5vw;
        border-radius: 1.5vw;
        font-family: inherit;
        transition: color 0.2s ease;
    }

    .commentLikeBtn svg {
        width: 4.5vw;
        height: 4.5vw;
        stroke: currentColor;
        fill: none;
    }

    .commentLikeBtn:hover {
        color: #CFE4FF;
    }

    .commentLikeBtn.isActive {
        color: #ff5d7a;
    }

    .commentLikeBtn.isActive svg {
        fill: #ff5d7a;
        stroke: #ff5d7a;
    }

    /* Кнопка меню */
    .commentMenuBtn {
        font-size: 3.5vw;
        padding: 1vw;
        color: rgba(255, 255, 255, 0.4);
    }

    .commentMenuBtn:hover {
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.8);
    }

    /* Меню */
    .commentMenuDropdown {
        min-width: 20vw;
        padding: 1vw;
        border-radius: 1.5vw;
    }

    .commentMenuDelete {
        padding: 1.2vw 1.5vw;
        font-size: 3vw;
        gap: 1.5vw;
    }

    .commentMenuDelete svg {
        width: 3.5vw;
        height: 3.5vw;
    }

    /* Упоминания */
    .mentions {
        font-size: 3.2vw;
        padding: 0.5vw 1vw;
        border-radius: 1vw;
    }
    .hashtags {
        font-size: 3.2vw;
    }
}

/* ===== МОБИЛЬНАЯ ВЕРСИЯ ПОЛЯ ВВОДА КОММЕНТАРИЯ ===== */
@media (max-width: 430px) {
    .modalInputWrap {
        display: flex;
        align-items: center;
        gap: 2.5vw;
        padding: 2.5vw 3.5vw;
        border-top: 0.2vw solid rgba(255, 255, 255, 0.06);
        background: #0D1117;
        flex-shrink: 0;
    }

    .attachBtn,
    .micBtn {
        width: 10vw;
        height: 10vw;
        background: #1B1E22;
        border: none;
        color: #7B818D;
        border-radius: 50%;
        cursor: pointer;
        display: grid;
        place-items: center;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .attachBtn svg,
    .micBtn svg {
        width: 5vw;
        height: 5vw;
        stroke: currentColor;
    }

    .attachBtn:hover,
    .micBtn:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #CFE4FF;
    }

    .attachBtn:active,
    .micBtn:active {
        transform: scale(0.92);
    }

    .commentInput {
        flex: 1;
        background: #1B1E22;
        border: none;
        border-radius: 999px;
        padding: 3vw 4vw;
        color: #E6EEF9;
        font-size: 3.5vw;
        font-family: inherit;
        outline: none;
        transition: background 0.2s ease;
        min-height: 10vw;
    }

    .commentInput::placeholder {
        color: #6D747E;
    }

    .commentInput:focus {
        background: #22262E;
    }

    .retry-icon, .error-icon, .empty-icon {
        font-size: 11vw;
    }

    .commentsEmpty span {
        font-size: 2.81vw;
    }

    .commentsEmpty p {
        font-size: 3.13vw;
    }
}