body {
    font-family: 'Inter', sans-serif;
    background: #0f172a;
}

.placeholder-glow::placeholder {
    color: #94a3b8;
    opacity: 1;
}

/* Класс для многострочного обрезания текста (для постов в профиле) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* Стили для меню действий */
.action-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #334155;
    border: 1px solid #475569;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    z-index: 50;
    min-width: 180px;
    padding: 0.5rem 0;
    transition: opacity 0.2s, transform 0.2s;
    transform-origin: top right;
}

/* Стили кнопок внутри меню */
.action-menu button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5rem 1rem;
    text-align: left;
    color: #e2e8f0;
    transition: background-color 0.15s;
}

.action-menu button:hover {
    background-color: #475569;
}

.action-menu button i {
    margin-right: 0.75rem;
    width: 1rem;
    text-align: center;
}

.action-menu button.action-delete-btn,
.action-menu button.action-warn-btn {
    color: #ef4444;
}

.action-menu button.action-delete-btn:hover,
.action-menu button.action-warn-btn:hover {
    background-color: #fca5a51a;
}

@keyframes heart-pop {
    0% {
        transform: scale(1);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1)
    }
}

.animate-heart-pop {
    /* Запуск анимации на 0.5 секунды */
    animation: heart-pop 0.5s ease-out forwards;
}

/* Анимация для исчезновения (если вы хотите ее использовать). 
   Обычно не требуется, так как иконка меняется мгновенно, 
   но добавим для полноты: 100% -> 110% -> 0%
*/
@keyframes heart-fade-out {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        /* Увеличение до 110% */
        opacity: 0.5;
    }

    100% {
        transform: scale(0);
        /* Сжатие до 0% */
        opacity: 0;
    }
}

.animate-heart-fade-out {
    animation: heart-fade-out 0.25s ease-in forwards;
}

@keyframes pulse-highlight {
    0% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
    }

    /* indigo-500 */
    70% {
        box-shadow: 0 0 0 10px rgba(99, 102, 241, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    }
}

.highlight-pulse {
    animation: pulse-highlight 1.5s ease-out;
    /* Убедимся, что начальный цвет заметен */
    border-color: #6366f1 !important;
    /* indigo-500 */
}