/**
 * Link Preview Popup Styles
 *
 * Wikipedia-style hover preview popups for internal links.
 * Uses Bootstrap 5 variables for consistency.
 */

/* Popup container */
.bp-link-preview {
    position: fixed;
    z-index: 1050;
    width: 360px;
    max-width: calc(100vw - 2rem);
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius-lg, 0.5rem);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
    pointer-events: none;
}

.bp-link-preview.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Invisible bridge extending above popup to catch mouse moving from link to popup */
.bp-link-preview::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
    /* Transparent but captures mouse events */
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .bp-link-preview {
        transition: none;
    }
}

/* Header with image and title */
.bp-link-preview__header {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
}

.bp-link-preview__image {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: var(--bs-border-radius, 0.375rem);
    object-fit: cover;
    background: var(--bs-secondary-bg, #e9ecef);
}

.bp-link-preview__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 1.5rem;
}

.bp-link-preview__title-group {
    flex: 1;
    min-width: 0;
}

.bp-link-preview__title {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--bs-body-color, #212529);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-link-preview__subtitle {
    margin: 0;
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1.4;
}

/* Body with excerpt */
.bp-link-preview__body {
    padding: 0.75rem 1rem;
}

.bp-link-preview__excerpt {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--bs-body-color, #212529);
}

/* Meta information */
.bp-link-preview__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
    font-size: 0.75rem;
    color: var(--bs-secondary-color, #6c757d);
}

.bp-link-preview__meta-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.bp-link-preview__meta-icon {
    font-size: 0.875rem;
}

/* Footer with link */
.bp-link-preview__footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
}

.bp-link-preview__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-primary, #0d6efd);
    text-decoration: none;
}

.bp-link-preview__link:hover {
    text-decoration: underline;
}

/* Loading state */
.bp-link-preview--loading .bp-link-preview__body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

.bp-link-preview__loader {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: 0.875rem;
}

.bp-link-preview__loader-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--bs-border-color, #dee2e6);
    border-top-color: var(--bs-primary, #0d6efd);
    border-radius: 50%;
    animation: bp-preview-spin 0.75s linear infinite;
}

@keyframes bp-preview-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Error state */
.bp-link-preview--error .bp-link-preview__body {
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
}

/* Party colors for meta badges */
.bp-link-preview__party--republican {
    color: #dc3545;
}

.bp-link-preview__party--democrat {
    color: #0d6efd;
}

.bp-link-preview__party--independent {
    color: #198754;
}