/*--------------------------------------------------------------
Hello, this is the BuddyPress Activity Link Preview stylesheet.

@version 1.0.0

----------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1 - Activity Page (Main Posts)
2 - Activity Comments & Replies
3 - Responsive Design

--------------------------------------------------------------*/


/*--------------------------------------------------------------
0 - Color Tokens (light defaults + dark mode)
----------------------------------------------------------------
Previews are painted through the plugin's own --bpalp-* tokens, so
you can retheme every preview from this one block. Each token reads
the matching BuddyX / BuddyX Pro theme token (--bx-color-*) first,
and falls back to the plugin's own light literal when the active
theme does not define that token.

Two rule sets assign the tokens:
  1. Base rule (below)              - light defaults, applied always.
  2. :root[data-bx-mode="dark"]     - BuddyX / Reign explicit dark mode.

Dark values still read --bx-color-* first, and BuddyX / Reign only flip
those vars under [data-bx-mode="dark"] (NOT under a bare body dark class),
so keying the dark scope off data-bx-mode is what actually produces a
dark card - a body.buddyx-dark-theme scope would resolve back to the
light --bx-color-* values and render light. Verified in-browser.

There is intentionally NO @media (prefers-color-scheme: dark) block.
Dark is opt-in via the theme's explicit data-bx-mode attribute only; the
plugin never maintains a duplicate OS-driven palette.
--------------------------------------------------------------*/

.activity-url-scrapper-container,
.activity-comment-url-scrapper-container,
.activity-link-preview-container,
.activity-comment-link-preview-container,
.comment-attachments {
    --bpalp-surface: var(--bx-color-bg-elevated, #fff);
    --bpalp-surface-alt: var(--bx-color-bg-muted, #f9f9f9);
    --bpalp-border: #e5e5e5;
    --bpalp-border-soft: #ddd;
    --bpalp-title: var(--bx-color-h4, var(--bx-color-fg, #32373c));
    --bpalp-text: var(--bx-color-fg, #888);
    --bpalp-text-strong: var(--bx-color-fg, #666);
    --bpalp-muted: #7f7f7f;
    --bpalp-close: rgba(0, 0, 0, 0.4);
    --bpalp-btn-bg: var(--bx-color-button-bg, #f0f0f1);
    --bpalp-btn-fg: var(--bx-color-button-fg, #2c3338);
    --bpalp-btn-border: var(--bx-color-button-border, #c3c4c7);
    --bpalp-btn-bg-hover: var(--bx-color-button-bg-hover, #dcdcde);
    --bpalp-btn-fg-hover: var(--bx-color-button-fg-hover, #1d2327);
}

:root[data-bx-mode="dark"] .activity-url-scrapper-container,
:root[data-bx-mode="dark"] .activity-comment-url-scrapper-container,
:root[data-bx-mode="dark"] .activity-link-preview-container,
:root[data-bx-mode="dark"] .activity-comment-link-preview-container,
:root[data-bx-mode="dark"] .comment-attachments {
    --bpalp-surface: var(--bx-color-bg-elevated, #1e2126);
    --bpalp-surface-alt: var(--bx-color-bg-muted, #23262b);
    --bpalp-border: rgba(255, 255, 255, 0.16);
    --bpalp-border-soft: rgba(255, 255, 255, 0.12);
    --bpalp-title: var(--bx-color-h4, var(--bx-color-fg, #e9eaec));
    --bpalp-text: var(--bx-color-fg, #b6bcc3);
    --bpalp-text-strong: var(--bx-color-fg, #cfd3d8);
    --bpalp-muted: #9aa0a6;
    --bpalp-close: rgba(255, 255, 255, 0.6);
    --bpalp-btn-bg: var(--bx-color-button-bg, #2c3138);
    --bpalp-btn-fg: var(--bx-color-button-fg, #e9eaec);
    --bpalp-btn-border: var(--bx-color-button-border, rgba(255, 255, 255, 0.24));
    --bpalp-btn-bg-hover: var(--bx-color-button-bg-hover, #3a4048);
    --bpalp-btn-fg-hover: var(--bx-color-button-fg-hover, #fff);
}

/*--------------------------------------------------------------
1 - Activity Page (Main Posts) - Original Styles
--------------------------------------------------------------*/

.activity-link-preview-container {
    margin: 15px 0 0;
    padding: 25px;
    line-height: 1.5;
    color: var(--bpalp-text, #888);
    background: var(--bpalp-surface, #fff);
    border: 1px solid var(--bpalp-border, #e5e5e5);
    border-radius: 3px !important;
    position: relative;
    overflow: auto;
    zoom: 1;
}

.activity-form .activity-link-preview-container {
    margin: 0 0 15px;
}

.activity-video-preview .activity-link-preview-container {
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    max-width: 640px;
}

.activity-link-preview-container div.fluid-width-video-wrapper {
    margin-top: 0;
    margin-bottom: 0;
}

.activity-link-preview-image {
    float: left;
    max-width: 160px;
    margin-inline-end: 20px;
    margin-bottom: 20px;
    position: relative;
}

.activity-link-preview-image img {
    width: 100%;
    height: auto;
    border: none;
}

.activity-url-scrapper-container .activity-link-preview-image {
    margin-bottom: 30px;
}

.activity-video-preview {
    padding: 0;
}

.activity-link-preview-title {
    font-weight: 500;
    font-size: 22px;
    line-height: 1.3;
    color: var(--bpalp-title, #32373c);
}

.activity-list .activity-item .activity-content .activity-link-preview-title,
.activity-link-preview-title {
    margin: 0 0 15px;
}

.activity-link-preview-title a:hover {
    text-decoration: underline !important;
}

.activity-link-preview-excerpt {
    padding: 0 0 40px;
}

.activity-link-preview-excerpt p {
    font-size: 14px;
    font-weight: 400;
}

.activity-link-preview-excerpt a.activity-link-preview-more:hover {
    text-decoration: underline !important;
}

.activity-url-thumb-nav {
    position: absolute;
    bottom: 3px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}

#buddypress .activity-url-thumb-nav button,
.activity-url-thumb-nav button {
    cursor: pointer;
    width: auto;
    padding: 3px 6px;
    margin: 0 3px;
    height: auto;
    min-height: 10px;
    background: var(--bpalp-btn-bg, #f0f0f1);
    color: var(--bpalp-btn-fg, #2c3338);
    border: 1px solid var(--bpalp-btn-border, #c3c4c7);
    border-radius: 3px;
}

#buddypress .activity-url-thumb-nav button:hover,
#buddypress .activity-url-thumb-nav button:focus-visible,
.activity-url-thumb-nav button:hover,
.activity-url-thumb-nav button:focus-visible {
    background: var(--bpalp-btn-bg-hover, #dcdcde);
    color: var(--bpalp-btn-fg-hover, #1d2327);
    border-color: var(--bpalp-btn-border, #c3c4c7);
}

#activity-url-scrapper-img-count {
    font-size: 12px;
    color: var(--bpalp-muted, #7f7f7f);
    margin-top: 5px;
}

.activity-url-error {
    color: #d33;
}

#activity-url-scrapper-url {
    color: var(--bpalp-text-strong, rgba(0, 0, 0, 0.6));
    font-size: 14px;
}

#activity-close-link-suggestion {
    border: 0;
    color: var(--bpalp-close, rgba(0, 0, 0, 0.4));
    font-size: 16px;
    position: absolute;
    inset-inline-start: 3px;
    top: 8px;
    text-decoration: none;
}

#activity-close-link-suggestion .dashicons.dashicons-no-alt {
    font-size: 20px;
}

.activity-post-form-link-wp-embed #activity-close-link-suggestion {
    top: 30px;
    inset-inline-start: 8px;
    inset-inline-end: auto;
    background: var(--bpalp-surface, #fff);
    z-index: 11;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

@media screen and (max-width: 32em) {
    #activity-close-link-suggestion {
        color: var(--bpalp-title, #000);
    }
}

#activity-link-preview-close-image {
    border: 0;
    color: #fff;
    font-size: 16px;
    inset-inline-start: 3px;
    position: absolute;
    top: 3px;
    text-decoration: none;
}

#activity-link-preview-close-image .dashicons.dashicons-no-alt {
    font-size: 20px;
}

#activity-close-link-suggestion:focus-visible,
#activity-link-preview-close-image:focus-visible {
    outline: 2px solid var(--bpalp-title, #1d2327);
    outline-offset: 2px;
    border-radius: 2px;
}

.activity-list .activity-item .activity-content .activity-inner .twitter-post, 
.activity-list .activity-item .activity-content .activity-inner .fb-post {
    margin: 0 15px 15px;
}

/*--------------------------------------------------------------
2 - Activity Comments & Replies (New Styles)
--------------------------------------------------------------*/

/* Comment attachments container */
.comment-attachments {
    margin: 10px 0;
    padding: 0;
}

/* Comment-specific link preview container */
.activity-comment-link-preview-container {
    margin: 10px 0;
    padding: 15px;
    line-height: 1.4;
    color: var(--bpalp-text-strong, #666);
    background: var(--bpalp-surface-alt, #f9f9f9);
    border: 1px solid var(--bpalp-border-soft, #ddd);
    border-radius: 3px;
    position: relative;
    overflow: auto;
    zoom: 1;
    font-size: 13px;
}

/* Smaller sizing for comment previews */
.activity-comment-link-preview-container .activity-link-preview-title {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    color: var(--bpalp-title, #32373c);
    margin: 0 0 10px;
}

.activity-comment-link-preview-container .activity-link-preview-image {
    float: left;
    max-width: 120px;
    margin-inline-end: 15px;
    margin-bottom: 15px;
    position: relative;
}

.activity-comment-link-preview-container .activity-link-preview-excerpt {
    padding: 0 0 25px;
}

.activity-comment-link-preview-container .activity-link-preview-excerpt p {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}

/* Comment-specific close buttons */
[id^="activity-close-comment-link-suggestion"] {
    border: 0;
    color: var(--bpalp-close, rgba(0, 0, 0, 0.4));
    font-size: 14px;
    position: absolute;
    inset-inline-end: 5px;
    top: 5px;
    text-decoration: none;
    z-index: 10;
}

[id^="activity-close-comment-link-suggestion"] .dashicons.dashicons-no-alt {
    font-size: 16px;
}

[id^="activity-comment-link-preview-close-image"] {
    border: 0;
    color: #fff;
    font-size: 14px;
    inset-inline-start: 3px;
    position: absolute;
    top: 3px;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
}

[id^="activity-comment-link-preview-close-image"] .dashicons.dashicons-no-alt {
    font-size: 14px;
    line-height: 18px;
}

/* Comment navigation buttons */
.activity-comment-link-preview-container .activity-url-thumb-nav button {
    cursor: pointer;
    width: auto;
    padding: 2px 4px;
    margin: 0 2px;
    height: auto;
    min-height: 8px;
    font-size: 12px;
}

.activity-comment-link-preview-container [id^="activity-comment-url-scrapper-img-count"] {
    font-size: 11px;
    color: var(--bpalp-muted, #7f7f7f);
    margin-top: 3px;
}

/* Comment scrapper container */
.activity-comment-url-scrapper-container {
    margin: 5px 0;
}

/* Form styling for comment forms */
.ac-form .comment-attachments {
    background: var(--bpalp-surface, #fff);
    border: 1px solid var(--bpalp-border, #e5e5e5);
    border-radius: 3px;
    padding: 10px;
    margin-top: 10px;
}

/* Comment form link preview in reply area */
.ac-form .activity-comment-link-preview-container {
    background: var(--bpalp-surface, #fff);
    border: 1px solid var(--bpalp-border, #e5e5e5);
    margin: 0;
    padding: 15px;
}

/*--------------------------------------------------------------
3 - Responsive Design
--------------------------------------------------------------*/

@media screen and (max-width: 32em) {
    /* Main activity previews */
    #activity-close-link-suggestion {
        color: var(--bpalp-title, #000);
        inset-inline-end: 5px;
        top: 5px;
        inset-inline-start: auto;
    }

    .activity-link-preview-container {
        padding: 15px;
        margin: 10px 0;
    }

    .activity-link-preview-image {
        max-width: 100px;
        margin-inline-end: 10px;
        margin-bottom: 10px;
    }

    .activity-link-preview-title {
        font-size: 18px;
    }

    /* Comment previews */
    .activity-comment-link-preview-container {
        padding: 10px;
        margin: 8px 0;
    }

    .activity-comment-link-preview-container .activity-link-preview-image {
        max-width: 80px;
        margin-inline-end: 10px;
        margin-bottom: 10px;
    }

    .activity-comment-link-preview-container .activity-link-preview-title {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .activity-comment-link-preview-container .activity-link-preview-excerpt p {
        font-size: 12px;
    }

    [id^="activity-close-comment-link-suggestion"] {
        inset-inline-end: 3px;
        top: 3px;
        font-size: 12px;
    }

    [id^="activity-close-comment-link-suggestion"] .dashicons.dashicons-no-alt {
        font-size: 14px;
    }
}

@media screen and (max-width: 24em) {
    /* Stack images on very small screens */
    .activity-link-preview-image,
    .activity-comment-link-preview-container .activity-link-preview-image {
        float: none;
        max-width: 100%;
        margin-bottom: 10px;
        text-align: center;
    }

    .activity-comment-link-preview-container {
        font-size: 12px;
    }
}

/* Social media embeds in comments */
.activity-comment-link-preview-container .twitter-post,
.activity-comment-link-preview-container .fb-post {
    margin: 0;
    max-width: 100%;
}

/* Focus states for accessibility (keyboard-only ring, token-driven) */
[id^="activity-close-comment-link-suggestion"]:focus-visible,
[id^="activity-comment-link-preview-close-image"]:focus-visible {
    outline: 2px solid var(--bpalp-title, #1d2327);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Hover effects */
[id^="activity-close-comment-link-suggestion"]:hover {
    color: #d33;
}

[id^="activity-comment-link-preview-close-image"]:hover {
    background: rgba(0, 0, 0, 0.8);
}
/*--------------------------------------------------------------
4 - Preview error notice (parse endpoint rejected the URL)
--------------------------------------------------------------*/

.bpalp-preview-error {
    --bpalp-error-fg: #8a1f2d;
    --bpalp-error-bg: #fdeaea;
    --bpalp-error-border: #f0b8b8;
    margin: 10px 0 0;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--bpalp-error-fg);
    background: var(--bpalp-error-bg);
    border: 1px solid var(--bpalp-error-border);
}

:root[data-bx-mode="dark"] .bpalp-preview-error {
    --bpalp-error-fg: #f3b6bd;
    --bpalp-error-bg: rgba(200, 60, 75, 0.16);
    --bpalp-error-border: rgba(220, 95, 110, 0.45);
}

/*--------------------------------------------------------------
5 - RTL
----------------------------------------------------------------
Spacing and single-side offsets use logical properties
(margin-inline-*, inset-inline-*) so they mirror automatically.
The preview image float is the one thing logical values cannot flip
with the browser support this plugin targets, so the side is flipped
explicitly for RTL. Gated above the 24em stacking breakpoint so it
never fights the small-screen "float: none" stack rule.
--------------------------------------------------------------*/

@media screen and (min-width: 24.0625em) {
    [dir="rtl"] .activity-link-preview-image,
    [dir="rtl"] .activity-comment-link-preview-container .activity-link-preview-image {
        float: right;
    }
}