/* ============================================================================
   TEXT DIFF HIGHLIGHTING
   ============================================================================ */

.block-content.with-diff {
    position: relative;
    padding-bottom: 30px; /* Space for button */
}

.diff-added {
    background: rgba(63, 185, 80, 0.25);
    color: #7ee787;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 600;
    border-left: 2px solid #3fb950;
    margin: 0 1px;
    display: inline-block;
}

.diff-removed {
    background: rgba(248, 81, 73, 0.25);
    color: #ff7b72;
    padding: 2px 4px;
    border-radius: 3px;
    text-decoration: line-through;
    opacity: 0.8;
    border-left: 2px solid #f85149;
    margin: 0 1px;
    display: inline-block;
}

.diff-toggle-btn {
    position: absolute;
    bottom: 4px;
    right: 4px;
    padding: 4px 8px;
    background: rgba(48, 54, 61, 0.8);
    border: 1px solid #30363d;
    border-radius: 4px;
    color: #9cdcfe;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
}

.diff-toggle-btn:hover {
    background: rgba(48, 54, 61, 1);
    border-color: #58a6ff;
    color: #58a6ff;
    transform: translateY(-1px);
}

.diff-toggle-btn:active {
    transform: translateY(0);
}

/* Diff appearance animation */
.diff-added,
.diff-removed {
    animation: diffAppear 0.3s ease-out;
}

@keyframes diffAppear {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* User hint */
.block-content.with-diff::before {
    content: "💡 Изменения выделены цветом";
    position: absolute;
    top: -25px;
    left: 0;
    font-size: 0.7rem;
    color: #6a9955;
    opacity: 0;
    animation: hintFade 3s ease-in-out;
}

@keyframes hintFade {
    0%, 100% {
        opacity: 0;
    }
    10%, 90% {
        opacity: 1;
    }
}