:root {
    --ai-thumb: 150px;
    --ai-caption-lines: 4;
    --ai-caption-lh: 1rem;
    --ai-cap-pad-y: 12px;      /* 6px top + 6px bottom */
}

#media-selected-grid {
    margin-top: 12px;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(var(--ai-thumb), 1fr));
    gap: 9px;
}

/* Make each tile fixed-size in the strip */
.ai-selected-thumb {
    flex: 0 0 var(--ai-thumb);
    width: var(--ai-thumb);
    height: var(--ai-thumb);
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #d0d7de;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    box-sizing: border-box;
}
.ai-selected-thumb > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ai-selected-thumb:hover {
    transform: none;
    box-shadow: 0 3px 10px rgba(0,0,0,.12);
    border-color: #b5bcc5;
    text-decoration: none;
}

/* Filename caption with a *true* 3-line clamp */
.ai-selected-thumb .ai-caption{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 6px 8px;
    box-sizing: border-box;               /* include padding in the height math */

    font-size: 11px;
    line-height: var(--ai-caption-lh);
    color: #fff;
    background: linear-gradient(transparent 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.80) 100%);

    display: -webkit-box;                 /* required for line-clamp */
    -webkit-box-orient: vertical;         /* required for line-clamp */
    -webkit-line-clamp: var(--ai-caption-lines);
    overflow: hidden;
    white-space: normal;

    /* exact height = lines * line-height + vertical padding */
    max-height: calc((var(--ai-caption-lines) * 1em * var(--ai-caption-lh)) + var(--ai-cap-pad-y));

    /* single-line ellipsis isn’t used for clamps; keep for safety */
    text-overflow: ellipsis;              /* valid values: clip | ellipsis */
}

@media (prefers-reduced-motion: reduce){
    .ai-selected-thumb{ transition: none; }
    .ai-selected-thumb:hover{ transform: none; }
}

/* Focus ring + optional ↗ hint */
.ai-selected-thumb:focus-visible {
    outline: 2px solid var(--wp-admin-theme-color, #2271b1);
    outline-offset: 3px;
}
.ai-selected-thumb::before {
    content: "↗";
    position: absolute;
    top: 6px; right: 6px;
    font-size: 11px;
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(255,255,255,.9);
    color: #2c3338;
    opacity: 0;
    transition: opacity .12s ease;
    pointer-events: none;
}
.ai-selected-thumb:hover::before,
.ai-selected-thumb:focus-visible::before { opacity: 1; }


/* make the top toolbar spacing consistent */
.media-modal .media-toolbar .ai-skip-existing {
    font-size: 12px;
    white-space: nowrap;
}
.media-modal .media-toolbar .ai-skip-existing input {
    margin: 0;
}
 /* grid_view.css */