/* the-stream/assets/css/the-stream-custom-backgrounds.css */

.ts-background-picker {
    display: flex;
    gap: 8px; /* Space between background options */
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee; /* Separator */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.ts-background-option {
    width: 32px; /* Small square previews */
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* For images */
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.ts-background-option.active {
    border-color: #4f46e5; /* Indigo-600 */
    box-shadow: 0 0 0 2px #4f46e5;
}

.ts-background-option.ts-no-background {
    font-size: 18px; /* For the 'X' icon */
    color: #999;
}

.ts-background-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Style for the post content when a custom background is active in composer */
.ts-activity-post-form-active-bg #ts-activity-content {
    min-height: 200px; /* Increased from 120px to 180px */
    padding: 20px;
    font-size: 20px;
    font-weight: 600;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Specific alignments for composer */
.ts-activity-post-form-active-bg.ts-align-left #ts-activity-content { text-align: left; justify-content: flex-start; }
.ts-activity-post-form-active-bg.ts-align-right #ts-activity-content { text-align: right; justify-content: flex-end; }


/* Hide original image upload button when background is active in composer */
.ts-activity-post-form-active-bg #ts-upload-image-button {
    display: none !important;
}

/* Styles for the main content wrapper (.p-5) when it has a custom background in the stream */
article .p-5.ts-background-active {
    /* Background properties will be set inline by PHP */
    padding: 1.25rem; /* Ensure original padding is kept */
    border-radius: inherit; /* Inherit from article */
    overflow: hidden; /* Important for border-radius on images/gradients and pseudo-elements */
    
    position: relative; /* CRITICAL: Establishes a positioning context for absolute children/pseudo-elements */
    z-index: 1; /* Ensures this element forms its own stacking context and is above default content */
    /* Remove any previous explicit display: flex here if it was causing issues.
       It should already be block by default or adjusted via PHP/JS if needed for content. */
}

/* Overlay for custom background images */
/* This will create a semi-transparent layer on top of the background image */
article .p-5.ts-background-active[style*="background-image"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3); /* Black overlay with 30% opacity */
    z-index: 2; /* Place it above the background image */
}

/* Ensure the content itself is above the overlay */
/* Make these elements explicitly position: relative; with a higher z-index */
article .p-5.ts-background-active > .flex.items-start.space-x-4.mb-4, /* Header (Avatar, Name, Dropdown) */
article .p-5.ts-background-active > .ts-activity-content, /* Main Text Content */
article .p-5.ts-background-active > .mt-4:not(.ts-stats-bar), /* Image/Link/Video containers, but not stats bar itself */
article .p-5.ts-background-active > .ts-activity-actions-bar /* Actions (using the new stable class) */
{
    position: relative; /* Establishes a new stacking context for these elements */
    z-index: 3; /* Place them above the overlay */
}


/* Styling for the text content within the custom background post in the stream */
article .p-5.ts-background-active .ts-activity-content-custom-bg {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    padding: 0;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}