/* Character Thumbnail Styles */

.character-thumbnail {
    display: inline-block;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.character-thumbnail-img {
    transition: opacity 0.2s;
}

.character-thumbnail-controls {
    z-index: 50;
    white-space: nowrap;
}

/* Ensure controls appear above other elements */
.character-thumbnail:hover {
    z-index: 10;
}

/* Add a hover area to prevent controls from disappearing */
.character-thumbnail::before {
    content: '';
    position: absolute;
    top: -30px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    z-index: -1;
}

/* Keep controls visible when hovering over them */
.character-thumbnail-controls:hover {
    opacity: 1 !important;
}

/* Loading state */
.character-thumbnail.loading .character-thumbnail-img {
    opacity: 0.5;
}

/* Version indicator */
.character-thumbnail-version-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    background-color: #7c3aed;
    color: white;
    border-radius: 50%;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}