.card-body h6 {
    font-style: italic;
    font-weight: bold;

}

.id-container {
    position: relative;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    padding-bottom: 2.5rem; /* Add space at the bottom for the icon */
    background-color: #f8f9fa;
}
.id-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            list-style-type: none;
            padding-left: 0;
            margin-bottom: 0;
            overflow: hidden;
            transition: max-height 0.35s ease-in-out;
}

        .id-list li {
            background-color: #e9ecef;
            padding: 0.25rem 0.6rem;
            border-radius: 0.25rem;
            font-size: 0.875em;
            font-family: monospace;
            white-space: nowrap;
        }

        .id-container.is-collapsible::after {
            content: '';
            position: absolute;
            top: 1rem;
            right: 1rem;
            width: 1em;
            height: 1em;
            /* Using an SVG background for a crisp icon */
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-size: 1em;
            transition: transform 0.35s ease-in-out;
        }

        /* Rotate the pseudo-element icon when the list is expanded */
        .id-container.is-collapsible:not(.is-collapsed)::after {
            transform: rotate(180deg);
        }

.fasta-panel {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    background-color: #f8f9fa;
}

.fasta-content {
    font-size: 0.9em;
}
.fasta-panel.is-open {
    max-height: 500px; 
    display: block;
}

/* By default, hide content and error, show spinner */
.fasta-panel,
.fasta-content,
.fasta-error {
    display: none;
}
.fasta-spinner {
    display: block;
}




/* --- Collapsed State --- */
.id-container.is-collapsible.is-collapsed .id-list {
    /* Set a fixed height that shows ~5 items */
    max-height: 125px; 
}

/* --- Expanded State --- */
.id-container.is-collapsible:not(.is-collapsed) .id-list {
    /* Use a CSS variable for the full height, set by JavaScript */
    max-height: var(--expanded-height, 1000px); /* 1000px fallback */
}

/* The toggle icon */
.toggle-icon {
    position: absolute;
    bottom: 8px;
    right: 12px;
    cursor: pointer;
    font-size: 1.2rem;
    color: #6c757d;
    transition: transform 0.35s ease-in-out;
    display: none; /* Hide by default */
}

/* Show the icon only if the container is collapsible */
/*
.id-container.is-collapsible .toggle-icon {
    display: block;
}
*/
.id-container.is-collapsible {
    cursor: pointer;
}

/* Rotate the icon when the list is expanded */
.id-container.is-collapsible:not(.is-collapsed) .toggle-icon {
    transform: rotate(180deg);
}





/* Overrides for Boostrap styles */
.card-body .table > :not(caption) > td {
    padding: 0.2rem;
}