/* 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 */
    border-radius: inherit; /* Inherit from article */
    overflow: hidden; /* Important for border-radius on images/gradients */
    /* Ensure padding for visual consistency */
    padding: 1.25rem; /* This matches p-5 in Tailwind by default, but ensures it's explicit */
}

/* 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: 25px !important;
    font-weight: 600;
    line-height: 1.5;
    padding: 0; /* Padding is now handled by the .p-5 container */
    width: 100%; /* Take full width */
    max-width: 600px; /* Optional: constrain width for long lines */
    margin-left: auto; /* Center with auto margins if max-width is set */
    margin-right: auto;
    box-sizing: border-box; /* Include padding in width/height */
    min-height: 150px;
    align-content: center;
}

/* Optional: Add some minor styling for readability of elements over the background */
article.ts-post-has-custom-bg .p-5.ts-background-active .flex.items-start.space-x-4.mb-4,
article.ts-post-has-custom-bg .p-5.ts-background-active .ts-stats-bar,
article.ts-post-has-custom-bg .p-5.ts-background-active .flex.items-center.text-gray-500.font-semibold.mt-2.pt-2.border-t.border-gray-100 {
    /* Optional: subtle background to enhance readability on busy backgrounds */
    /* background: rgba(0,0,0,0.1); */
    /* backdrop-filter: blur(1px); */
    /* border-radius: 4px; */
    /* padding: 4px 8px; */
}