/* Base styles */
.chrome-enhanced-link-wrapper {
    display: flex;
    /* Use flexbox for better alignment */
    align-items: center;
    white-space: nowrap;
    gap: 10px;
    /* Space between link, recommendation, and button */
}

.chrome-enhanced-link-wrapper>a {
    vertical-align: middle;
    word-break: break-word;
    /* Prevent long URLs from breaking layout */
}

.chrome-recommendation {
    font-size: 0.85em;
    color: #777;
    white-space: nowrap;
    /* Keep recommendation on one line if possible */
}

.chrome-copy-link {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 6px 12px;
    /* Slightly adjust padding for touch */
    cursor: pointer;
    border-radius: 5px;
    font-size: 0.85em;
    color: #333;
    flex-shrink: 0;
    /* Prevent button from shrinking */
}

.chrome-copy-link:hover {
    background-color: #e0e0e0;
}

/* Mobile-specific styles (adjust breakpoint as needed) */
@media (max-width: 600px) {
    .chrome-enhanced-link-wrapper {
        flex-direction: column;
        /* Stack elements vertically on smaller screens */
        align-items: flex-start;
        /* Align items to the left */
        white-space: normal;
        /* Allow wrapping on smaller screens */
    }

    .chrome-recommendation {
        margin-left: 0;
        /* Reset left margin when stacked */
        margin-top: 5px;
    }

    .chrome-copy-link {
        margin-left: 0;
        /* Reset left margin when stacked */
        margin-top: 5px;
        width: 100%;
        /* Make the button take full width on smaller screens */
        box-sizing: border-box;
        /* Include padding and border in the element's total width and height */
    }
}

/* Smaller mobile screens */
@media (max-width: 400px) {
    .chrome-recommendation {
        font-size: 0.8em;
    }

    .chrome-copy-link {
        font-size: 0.8em;
        padding: 5px 10px;
    }
}