.metadata-container {
    display: flex; /* Use flexbox to align items horizontally */
    align-items: center; /* Vertically center the items */
    gap: 8px; /* Optional: Space between the metadata link and the expand button */
}

.metadata {
    margin: 0; /* Remove margin to ensure it aligns properly */
}

.expand-button {
    /* Set the width and height of the button */
    width: 60px; /* Small but clickable button width */
    height: 20px; /* Small but visually balanced height */

    /* Set padding to control spacing inside the button */
    padding: 2px 5px; /* Adjust padding for better text alignment */

    /* Set the font size of the button text */
    font-size: 10px; /* Small but readable font size */

    /* Optional: Set font family and weight */
    font-family: Arial, sans-serif;
    font-weight: bold;

    /* Set the background to a transparent blue color */
    background-color: rgba(255, 255, 255, 0.5); /* Very transparent blue (alpha value 0.2) */
    color: rgba(10, 9, 9); /* Slightly transparent white text */

    /* Remove border and make it slightly transparent */
    border: 1px solid rgba(0, 123, 255, 0.5); /* Lightly transparent border */

    /* Rounded corners for smooth look */
    border-radius: 4px;

    /* Pointer cursor on hover */
    cursor: pointer;

    /* Smooth transition for background color on hover */
    transition: background-color 0.3s, color 0.3s;
}

.expand-button:hover {
    /* Change background to a more solid blue on hover */
    background-color: rgba(255, 255, 255, 0.5); /* Slightly less transparent on hover */
    color: rgba(255, 255, 255, 0.5); /* Fully opaque white text on hover */
}

.expand-button:focus {
    outline: none; /* Remove the outline when the button is focused */
}