/* code-collapse.css — collapsed preview for long code blocks */

.code-collapse {
    position: relative;
}

/* Collapsed: a short, semi-transparent peek at the code with a fade
   toward the bottom. Roughly the height of the search composer. */
.code-collapse.is-collapsed {
    cursor: pointer;
    margin-bottom: var(--space-md);
}

.code-collapse.is-collapsed pre {
    max-height: 7.5rem;
    overflow: hidden;
    opacity: 0.55;
    margin-bottom: 0;
}

.code-collapse.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4rem;
    background: linear-gradient(transparent, var(--color-surface, #fff));
    pointer-events: none;
}

.code-collapse-toggle {
    border: 1px solid var(--color-border);
    background-color: var(--color-surface, #fff);
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    padding: 0.2em 0.75em;
    cursor: pointer;
}

.code-collapse-toggle:hover {
    color: var(--color-text);
}

/* Collapsed: float the toggle over the faded preview. */
.code-collapse.is-collapsed .code-collapse-toggle {
    position: absolute;
    left: 50%;
    bottom: var(--space-sm);
    transform: translateX(-50%);
    z-index: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Expanded: a normal small button under the code. */
.code-collapse:not(.is-collapsed) .code-collapse-toggle {
    display: block;
    margin: calc(-1 * var(--space-sm)) 0 var(--space-md) 0;
}