/* Basic styles for The Feed */
#the-feed-app {
    border: 0;
    padding: 0px;
    border-radius: 0px;
    background-color: none;
    margin-bottom: 10px;
}

/* --- NEW POST BOX STYLES --- */

.the-feed-post-box {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    transition: all 0.2s ease-in-out;
}

.the-feed-post-box-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.the-feed-post-box-input-placeholder {
    flex-grow: 1;
    padding: 10px 15px;
    background-color: #f0f2f5;
    border-radius: 20px;
    color: #65676b;
    cursor: pointer;
    transition: background-color 0.2s;
}
.the-feed-post-box-input-placeholder:hover {
    background-color: #e4e6e9;
}

/* Hidden by default, shown when .expanded class is added */
.the-feed-post-box-extended {
    display: none;
    margin-top: 12px;
    border-top: 1px solid #f0f2f5;
    padding-top: 12px;
}

.the-feed-post-box.expanded .the-feed-post-box-main {
    display: none; /* Hide the placeholder when expanded */
}

.the-feed-post-box.expanded .the-feed-post-box-extended {
    display: block; /* Show the real textarea and controls */
}

#the-feed-post-textarea {
    width: 100%;
    border: none;
    padding: 8px 4px;
    font-size: 1.2em; /* Larger font for typing */
    resize: none;
    min-height: 80px;
    background-color: transparent;
}
#the-feed-post-textarea:focus {
    outline: none;
}

.the-feed-photo-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    margin-top: 10px;
    padding: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.the-feed-photo-preview-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
}

.the-feed-photo-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.the-feed-photo-preview-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(15, 20, 25, 0.75);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

/* Progress bar styles */
.the-feed-progress-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}
.the-feed-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 5px;
    width: 0%; /* Width is updated by JS */
    background-color: #0073aa;
    transition: width 0.1s linear;
}

.the-feed-post-box-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f2f5;
}

.the-feed-add-media-btn {
    background: none;
    border: none;
    color: #65676b;
    font-weight: bold;
    font-size: 0.9em;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.the-feed-add-media-btn:hover {
    background-color: #f0f2f5;
}

#the-feed-post-button {
    background-color: #0073aa;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    width: 100%; /* Make it full width in its container */
}
#the-feed-post-button:disabled {
    background-color: #e4e6eb;
    color: #bcc0c4;
    cursor: not-allowed;
}

#the-feed-post-message {
    margin-top: 10px;
    font-size: 0.9em;
    font-weight: bold;
}

.the-feed-activity {
    border: 1px solid #eee;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.the-feed-activity-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.the-feed-activity-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover; /* Ensures image covers the area, good for profile pics */
}

.the-feed-activity-user-name {
    font-weight: bold;
    color: #333;
    text-decoration: none; /* In case you make it a link later */
}

.the-feed-activity-user-name:hover {
    text-decoration: underline;
}

.the-feed-activity-timestamp {
    font-size: 0.8em;
    color: #888;
    margin-left: auto;
}

.the-feed-activity-content p {
    margin: 0 0 10px 0;
    line-height: 1.5;
    word-wrap: break-word; /* Prevents long words from breaking layout */
}

/* --- NEW RICH CONTENT / LINK PREVIEW STYLES (V2) --- */

/* The main preview container */
.the-feed-rich-content-preview {
    border: 1px solid #ddd;
    overflow: hidden;
    margin: 10px -16px;
    display: flex;
    text-decoration: none;
    color: inherit;
    background-color: #f7f7f7;
}
.the-feed-rich-content-preview:hover {
    border-color: #ccc;
    text-decoration: none;
}

/* Wrapper for the image, for better layout control */
.the-feed-rich-content-image-wrapper {
    flex-shrink: 0; 
    background-color: #e9ebee;
    display: flex;
    align-items: center;
    justify-content: center;
}

.the-feed-rich-content-image {
    display: block;
    width: 100%;
    height: 100%;
}

/* The text content area */
.the-feed-rich-content-text {
    padding: 12px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    flex-grow: 1; /* Allows text to take up remaining space */
}
.the-feed-rich-content-title {
    font-weight: bold;
    margin-bottom: 4px;
    font-size: 0.9em;
}
.the-feed-rich-content-description {
    font-size: 0.85em;
    color: #65676b;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Allow up to 3 lines of description */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.the-feed-rich-content-url {
    font-size: 0.8em;
    color: #65676b;
    word-break: break-all;
}

/* -- Layout for Landscape Images (Full width image on top) -- */
.orientation-landscape {
    flex-direction: column;
}
.orientation-landscape .the-feed-rich-content-image-wrapper {
    width: 100%;
    padding-bottom: 52.5%; /* 16:9 aspect ratio */
    position: relative;
}
.orientation-landscape .the-feed-rich-content-image {
    object-fit: cover; /* Crop to fill the landscape container */
    position: absolute;
    top: 0; left: 0;
}

/* -- Layout for Portrait & Square Images (Image left, text right) -- */
.orientation-portrait,
.orientation-square {
    flex-direction: row;
    align-items: stretch; /* Make both columns equal height */
}
.orientation-portrait .the-feed-rich-content-image-wrapper,
.orientation-square .the-feed-rich-content-image-wrapper {
    flex-basis: 38%; /* Image area takes up ~38% of the container width */
}
.orientation-portrait .the-feed-rich-content-image,
.orientation-square .the-feed-rich-content-image {
    object-fit: contain; /* This is key: fits the full image without cropping */
}

/* -- Responsive styles for small screens -- */
@media (max-width: 600px) {
    /* On mobile, ALL previews should stack vertically */
    .the-feed-rich-content-preview,
    .orientation-portrait,
    .orientation-square {
        flex-direction: column;
    }
    .orientation-portrait .the-feed-rich-content-image-wrapper,
    .orientation-square .the-feed-rich-content-image-wrapper {
        flex-basis: auto; /* Reset basis */
        width: 100%; /* Image takes full width */
        max-width: none; /* Reset max-width */
        padding-bottom: 52.5%; /* Give it a standard aspect ratio on mobile */
        position: relative;
    }
    .orientation-portrait .the-feed-rich-content-image,
    .orientation-square .the-feed-rich-content-image {
        object-fit: cover; /* Revert to cover on mobile for a uniform look */
        position: absolute;
        top: 0; left: 0;
    }
}


/* --- Video Embed Styles (Unchanged) --- */
.the-feed-video-embed {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #000;
}
.the-feed-video-embed iframe,
.the-feed-video-embed video {
    width: 100%;
    height: 100%;
    border: none;
}

/* Error message styling */
p.error {
    color: #dc3232;
    font-weight: bold;
    margin-top: 10px;
}

/* Comments Section */
.the-feed-comments-section {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    display: none; /* Hidden by default, toggled by JS */
}

.the-feed-comments-list {
    margin-bottom: 15px;
}

.the-feed-comment {
    display: flex;
    align-items: flex-start; /* Align avatar to top of comment */
    margin-bottom: 10px;
    background-color: #f8f8f8;
    padding: 8px;
    border-radius: 4px;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.05);
}

.the-feed-comment-avatar { /* Smaller avatar for comments */
    width: 30px;
    height: 30px;
    min-width: 30px; /* Prevent shrinking */
    margin-right: 8px;
    border-radius: 50%;
    object-fit: cover;
}

.the-feed-comment-content {
    flex-grow: 1;
}

.the-feed-comment-user-name {
    font-weight: bold;
    font-size: 0.9em;
    color: #333;
    margin-right: 5px;
    display: inline-block;
}

.the-feed-comment-text {
    margin: 0;
    font-size: 0.9em;
    line-height: 1.4;
    word-wrap: break-word;
    white-space: pre-wrap; /* Preserve whitespace and line breaks from textarea */
}

.the-feed-comment-timestamp {
    font-size: 0.7em;
    color: #999;
    margin-top: 3px;
    display: block;
}

/* Comment Input Box */
.the-feed-comment-box {
    display: flex;
    align-items: flex-end; /* Align button to bottom of textarea */
    gap: 10px;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.the-feed-comment-box .the-feed-comment-avatar { /* Reuse main avatar style for consistency */
    width: 35px; /* Slightly larger than comment avatars */
    height: 35px;
    min-width: 35px;
}

.the-feed-comment-textarea {
    flex-grow: 1;
    min-height: 40px;
    max-height: 120px; /* Prevent excessively tall textareas */
    resize: vertical; /* Allow vertical resizing */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9em;
    box-sizing: border-box;
}

.the-feed-post-comment-btn {
    background-color: #0073aa;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
    align-self: flex-end; /* Align button to bottom */
}

.the-feed-post-comment-btn:hover {
    background-color: #005177;
}

.the-feed-post-comment-btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

/* Messages */
.loading-comments, .no-comments, .error-comments {
    text-align: center;
    color: #777;
    font-style: italic;
    margin: 10px 0;
    font-size: 0.9em;
}
.error-comments {
    color: #dc3232;
    font-style: normal;
    font-weight: bold;
}
/* --- User Profile Styles --- */
#the-feed-profile-app {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
}

.the-feed-profile-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.the-feed-profile-avatar-container {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 15px auto;
    border: 3px solid #0073aa;
    box-shadow: 0 0 0 4px #fff; /* White border effect */
}

.the-feed-profile-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#the-feed-profile-display-name {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 2em;
    color: #333;
}

.the-feed-profile-actions {
    margin: 20px 0;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.the-feed-profile-action-btn {
    background-color: #0073aa;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease;
}

.the-feed-profile-action-btn:hover {
    background-color: #005177;
}

.the-feed-profile-action-btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.the-feed-profile-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
    font-size: 1.1em;
    color: #666;
}

.the-feed-stat {
    font-weight: bold;
}

.the-feed-profile-content h2 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 1.6em;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.the-feed-user-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Responsive grid */
    gap: 15px;
    margin-bottom: 20px;
}

.the-feed-user-list-item {
    text-align: center;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.the-feed-user-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.the-feed-user-list-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
}

.the-feed-user-list-name {
    font-weight: bold;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
}

.the-feed-user-list-item:hover {
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Generic loading/no items messages */
.loading-activities, .loading-items, .no-items {
    text-align: center;
    color: #777;
    font-style: italic;
    margin: 15px 0;
}

/* --- Notifications Styles --- */
#the-feed-notifications-app {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
}

#the-feed-notifications-app h1 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    display: inline-block; /* To allow button on same line if preferred */
    margin-right: 15px;
}

#the-feed-mark-all-read-btn {
    background-color: #0085ba;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}

#the-feed-mark-all-read-btn:hover {
    background-color: #006799;
}

#the-feed-notifications-list {
    margin-top: 20px;
}

.the-feed-notification {
    display: flex;
    align-items: flex-start;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 5px;
    background-color: #fcfcfc;
    border: 1px solid #eee;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.the-feed-notification.unread {
    background-color: #e6f7ff; /* Light blue for unread */
    border-color: #99d9ff;
    font-weight: bold;
}

.the-feed-notification:hover {
    background-color: #f0f0f0;
    border-color: #ddd;
}

.the-feed-notification.unread:hover {
    background-color: #d1edff;
    border-color: #66c2ff;
}

.the-feed-notification-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
    flex-shrink: 0; /* Prevent shrinking */
}

.the-feed-notification-content {
    flex-grow: 1;
    font-size: 0.95em;
    line-height: 1.4;
}

.the-feed-notification-sender {
    font-weight: bold;
    color: #0073aa;
    text-decoration: none;
    margin-right: 4px;
}

.the-feed-notification-sender:hover {
    text-decoration: underline;
}

.the-feed-notification-timestamp {
    display: block;
    font-size: 0.8em;
    color: #888;
    margin-top: 4px;
    font-weight: normal; /* Override bold from unread state */
}

/* Styling for the global unread count indicator (e.g., a bell icon) */
#the-feed-unread-count {
    background-color: #dc3232; /* Red circle */
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.7em;
    font-weight: bold;
    vertical-align: super;
    margin-left: -10px; /* Adjust positioning next to a bell icon */
    display: none; /* Hidden by default if count is 0 */
    line-height: 1;
    min-width: 15px; /* Ensures circle shape for single digits */
    text-align: center;
}

/* Load More button for notifications */
#the-feed-load-more-notifications {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 20px;
    background-color: #f0f2f5;
    color: #555;
    border: 1px solid #ddd;
}

#the-feed-load-more-notifications:hover:not(:disabled) {
    background-color: #e0e2e5;
    border-color: #ccc;
}

.loading-notifications, .no-notifications {
    text-align: center;
    color: #777;
    font-style: italic;
    margin: 15px 0;
}

/* ... existing activity footer styles ... */

.the-feed-activity-footer .the-feed-report-btn {
    margin-left: auto; /* Push report button to the right */
    background: none;
    color: #888;
    border-color: #eee;
}

.the-feed-activity-footer .the-feed-report-btn:hover {
    color: #dc3232; /* Red color on hover for report */
    border-color: #fdd;
    background-color: #fff;
}

/* For comments, need a new container for actions */
.the-feed-comment-actions {
    margin-top: 5px;
    text-align: right; /* Align report button to the right */
}

.the-feed-comment-actions .the-feed-report-btn {
    background: none;
    color: #888;
    border: none;
    padding: 5px 8px;
    font-size: 0.8em;
}

.the-feed-comment-actions .the-feed-report-btn:hover {
    background-color: #fcfcfc;
    color: #dc3232;
}

/* --- Activity Editing Styles --- */
.the-feed-edit-activity-btn {
    background-color: #28a745; /* Green for Edit */
    color: white;
    border-color: #28a745;
    margin-left: 10px;
}
.the-feed-edit-activity-btn:hover {
    background-color: #218838;
    border-color: #218838;
}

/* Edit form container */
.the-feed-edit-form {
    padding: 10px;
    background-color: #fcfcfc;
    border-radius: 5px;
    margin-top: 10px;
    border: 1px solid #ddd;
}

.the-feed-edit-textarea,
.the-feed-edit-link-input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
}

.the-feed-edit-textarea {
    min-height: 80px;
    resize: vertical;
}

.the-feed-edit-link-preview-area {
    min-height: 40px; /* Space for preview */
    border: 1px dashed #eee;
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.9em;
    color: #888;
}

.the-feed-edit-link-preview-area .the-feed-rich-content-preview {
    /* Inherit full width from parent div */
    width: 100%;
    margin-top: 0;
    border: none;
}


.the-feed-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.the-feed-save-activity-btn {
    background-color: #0073aa;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}
.the-feed-save-activity-btn:hover {
    background-color: #005177;
}

.the-feed-cancel-edit-btn {
    background-color: #f0f0f0;
    color: #555;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}
.the-feed-cancel-edit-btn:hover {
    background-color: #e0e0e0;
}

/* Hide original display content when editing */
/* These will be handled by replacing the activity-content HTML */
/*
.the-feed-activity-content p,
.the-feed-activity-rich-content-display {
    display: none;
}
*/

/* --- Activity Options Menu --- */
.the-feed-activity-header {
    position: relative; /* Needed for absolute positioning of the menu */
    display: flex; /* To align items horizontally */
    align-items: center;
    /* ensure proper spacing if needed for the ... button */
}

.the-feed-activity-options-trigger {
    position: absolute; /* Position relative to the header */
    top: 5px; /* Adjust as needed */
    right: 5px; /* Adjust as needed */
    z-index: 10; /* Ensure it's above other content */
}

.the-feed-options-btn {
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 4px;
    color: #888;
    transition: background-color 0.2s ease;
}

.the-feed-options-btn:hover {
    background-color: #f0f2f5;
    color: #555;
}

.the-feed-activity-options-menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%; /* Position below the button */
    right: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    min-width: 150px;
    z-index: 11; /* Above the trigger */
    padding: 5px 0;
    flex-direction: column; /* Stack buttons vertically */
}

.the-feed-activity-options-menu.active {
    display: flex; /* Show when active */
}

.the-feed-activity-options-menu button {
    background: none;
    border: none;
    padding: 10px 15px;
    text-align: left;
    cursor: pointer;
    font-size: 0.9em;
    color: #333;
    width: 100%; /* Make buttons fill the menu width */
    white-space: nowrap; /* Prevent text wrapping */
    transition: background-color 0.1s ease;
}

.the-feed-activity-options-menu button:hover {
    background-color: #f0f2f5;
    color: #0073aa; /* Highlight on hover */
}

/* Specific button colors within the menu */
.the-feed-activity-options-menu .the-feed-delete-activity-btn {
    color: #dc3232; /* Red for delete */
}

.the-feed-activity-options-menu .the-feed-delete-activity-btn:hover {
    background-color: #fcebeb; /* Light red background on hover */
}

.the-feed-activity-options-menu .the-feed-edit-activity-btn {
    color: #28a745; /* Green for edit */
}
.the-feed-activity-options-menu .the-feed-edit-activity-btn:hover {
    background-color: #e6ffe6; /* Light green background on hover */
}

.the-feed-activity-options-menu .the-feed-report-btn {
    color: #ffc107; /* Yellowish for report */
}
.the-feed-activity-options-menu .the-feed-report-btn:hover {
    background-color: #fffbe6; /* Light yellow background on hover */
}

/* --- Three Column Feed Layout --- */
.the-feed-main-container {
    display: flex;
    gap: 20px; /* Space between the columns */
    max-width: 1200px; /* Optional: sets a max width for the whole layout */
    margin: 0 auto; /* Optional: centers the layout */
}

.the-feed-left-sidebar,
.the-feed-right-sidebar {
    /* Sidebars will have a fixed width and not grow or shrink */
    flex: 0 0 250px;
    padding: 15px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
    height: fit-content; /* Makes sidebar height adjust to its content */
}

.the-feed-center-column {
    /* The main feed column will grow to fill available space */
    flex-grow: 1;
    min-width: 0; /* Prevents flexbox overflow issues */
}

/* --- Responsive Layout for Smaller Screens --- */
@media (max-width: 992px) {
    .the-feed-main-container {
        flex-direction: column; /* Stack columns vertically on smaller screens */
    }

    .the-feed-left-sidebar,
    .the-feed-right-sidebar {
        flex-basis: auto; /* Allow sidebars to take full width */
        width: 100%;
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    /* On very small screens, you might want to hide the sidebars completely */
    .the-feed-left-sidebar,
    .the-feed-right-sidebar {
        display: none;
    }
}

/* --- New Profile Page Layout --- */

/* This container ensures consistent width with the main feed layout */
.the-feed-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px; /* Add some padding for smaller screens */
}

#the-feed-profile-app {
    border: none;
    padding: 0;
    background-color: transparent;
}

.the-feed-profile-header-new {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 20px;
}

.the-feed-profile-banner {
    height: 250px;
    background-color: #e9ebee;
    overflow: hidden;
    border-radius: 5px 5px 0 0;
    position: relative;
}

.the-feed-profile-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.the-feed-profile-user-info-bar {
    display: flex;
    align-items: center;
    padding: 0 30px;
    transform: translateY(-40px); /* Pulls this section up over the banner */
    margin-bottom: -40px; /* Counteracts the transform for layout flow */
}

.the-feed-profile-user-info-bar .the-feed-profile-avatar-container {
    width: 160px;
    height: 160px;
    border: 4px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    margin-right: 20px;
    background-color: #fff;
    position: relative;
}

.the-feed-profile-name-and-stats {
    flex-grow: 1;
    color: #fff; /* White text looks good over a banner */
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.the-feed-profile-name-and-stats h1 {
    margin: 0;
    font-size: 2.5em;
}

.the-feed-profile-name-and-stats .the-feed-profile-stats {
    font-size: 1em;
    gap: 15px;
}
.the-feed-profile-name-and-stats .the-feed-profile-stats span {
    margin-right: 15px;
}

.the-feed-profile-actions {
    margin: 0;
}

/* Tab Navigation */
.the-feed-profile-nav {
    border-bottom: 1px solid #ddd;
    background: #fff;
    padding: 0 30px;
}

.the-feed-profile-nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style-type: none;
}

.the-feed-profile-nav ul li a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #555;
    font-weight: bold;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
}

.the-feed-profile-nav ul li.active a,
.the-feed-profile-nav ul li a:hover {
    color: #0073aa;
    border-bottom-color: #0073aa;
}

/* Tab Content */
.the-feed-profile-tab-content {
    background: #f0f2f5; /* A slightly off-white background like Faceboovk */
    padding: 20px;
}

.the-feed-profile-tab-panel {
    display: none;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.the-feed-profile-tab-panel.active {
    display: block;
}

/* --- Profile Page Feed Tab Layout --- */
.the-feed-profile-feed-tab-container {
    display: flex;
    gap: 20px;
    align-items: flex-start; /* Aligns items to the top */
}

.the-feed-profile-feed-sidebar {
    flex: 1; /* Sidebar takes up remaining space */
    min-width: 200px;
    position: sticky; /* Makes the sidebar sticky */
    top: 20px; /* Adjust as needed for your theme's header */
}

.the-feed-profile-activities-column {
    width: 100%;
    max-width: 700px; /* IMPORTANT: Sets a fixed max-width for the feed column */
}

.the-feed-sidebar-widget {
    background: #fff;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.the-feed-sidebar-widget h4 {
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.the-feed-friends-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3-column grid */
    gap: 10px;
}

.the-feed-friend-grid-item a {
    text-decoration: none;
    color: inherit;
    display: block;
    text-align: center;
}

.the-feed-friend-grid-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 5px;
}

.the-feed-friend-grid-item span {
    font-size: 0.8em;
    font-weight: bold;
    color: #555;
    word-break: break-word;
}

.the-feed-sidebar-view-all {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 15px;
    padding: 8px;
    background-color: #e9ebee;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    color: #555;
    transition: background-color 0.2s;
}

.the-feed-sidebar-view-all:hover {
    background-color: #ddd;
}

/* --- NEW Profile Edit Page Styles --- */
#the-feed-profile-edit-app {
    display: flex;
    gap: 20px;
    max-width: 1000px;
    margin: 20px auto;
    align-items: flex-start;
}

/* Tab Navigation Sidebar */
.the-feed-profile-edit-nav {
    flex: 0 0 200px; /* Fixed width for the nav sidebar */
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px;
}
.the-feed-profile-edit-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.the-feed-profile-edit-nav a {
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.the-feed-profile-edit-nav a:hover {
    background-color: #f0f2f5;
}
.the-feed-profile-edit-nav li.active a {
    background-color: #0073aa;
    color: #fff;
}

/* Tab Content Area */
.the-feed-profile-edit-content {
    flex-grow: 1; /* Takes up the remaining space */
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px 30px;
}
.the-feed-profile-edit-tab-panel {
    display: none; /* Hidden by default */
}
.the-feed-profile-edit-tab-panel.active {
    display: block; /* Shown by JS */
}

/* Form Styles */
.the-feed-profile-edit-tab-panel h2 {
    margin-top: 0;
    margin-bottom: 5px;
}
.the-feed-profile-edit-tab-panel p.description {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 0.9em;
    color: #666;
}
.the-feed-form-row {
    display: flex;
    gap: 20px;
}
.the-feed-form-row .the-feed-form-group {
    flex: 1;
}
.the-feed-form-group {
    margin-bottom: 15px;
}
.the-feed-form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}
.the-feed-form-group input[type="text"],
.the-feed-form-group input[type="email"],
.the-feed-form-group select,
.the-feed-form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.the-feed-form-group hr {
    margin: 25px 0;
    border: none;
    border-top: 1px solid #eee;
}

.the-feed-submit-btn,
.the-feed-action-btn {
    background-color: #0073aa;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    margin-top: 10px;
}
.the-feed-action-btn.danger {
    background-color: #d63638;
}
.the-feed-message {
    font-size: 0.9em;
    font-weight: bold;
    margin-top: 10px;
}

/* --- Mention Suggestions --- */
.the-feed-mention-suggestions {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    list-style: none;
    margin: 0;
    padding: 5px 0;
    z-index: 9999; /* Ensure it's on top */
    max-height: 200px;
    overflow-y: auto;
}

.the-feed-mention-suggestions li {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.1s ease;
}

.the-feed-mention-suggestions li:hover,
.the-feed-mention-suggestions li.selected {
    background-color: #f0f2f5;
}

.the-feed-mention-suggestions li img.the-feed-mention-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 8px;
    object-fit: cover;
}

.the-feed-mention-suggestions li span {
    font-size: 0.9em;
    color: #333;
}

.the-feed-mention-suggestions li small { /* For username part */
    color: #777;
    margin-left: 5px;
    font-size: 0.8em;
}

/* Style for rendered mentions */
.the-feed-mention {
    color: #0073aa; /* Highlight color for mentions */
    font-weight: bold;
    text-decoration: none;
}
.the-feed-mention:hover {
    text-decoration: underline;
}

/* --- Activity Footer Redesign--- */
.the-feed-activity-footer {
    display: flex;
    flex-direction: column; /* Stack counts and actions vertically */
    margin-top: 0px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    gap: 10px; /* Space between count row and action row */
}

/* Row for Likes, Comments, Shares counts */
.the-feed-activity-counts {
    display: flex;
    justify-content: space-between; /* Pushes like summary to left, meta counts to right */
    align-items: center;
    font-size: 0.85em;
    color: #65676b; /* Facebook-like muted text */
    padding: 0 5px; /* Little padding to match image */
}

.the-feed-like-summary {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600; /* Slightly bolder for like summary */
}

.the-feed-like-summary span {
    vertical-align: middle;
}

.the-feed-activity-meta-counts {
    display: flex;
    gap: 15px; /* Space between comment and share counts */
}

.the-feed-comment-count-display,
.the-feed-share-count-display {
    /* Specific styles for individual count displays */
    cursor: pointer; /* Suggests clickable */
}

.the-feed-comment-count-display:hover,
.the-feed-share-count-display:hover {
    text-decoration: underline;
}

/* Row for Like, Comment, Share buttons */
.the-feed-activity-actions-row {
    display: flex;
    justify-content: space-around; /* Distributes buttons evenly */
    align-items: center;
    border-top: 1px solid #f0f2f5; /* Light separator line */
    padding-top: 8px; /* Padding above buttons */
    margin-top: 5px; /* Space from counts line */
}

.the-feed-activity-actions-row button {
    background: none;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.95em; /* Slightly larger text for buttons */
    color: #65676b; /* Muted button text color */
    font-weight: 600; /* Bolder text for buttons */
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex; /* For icon and text alignment */
    align-items: center;
    gap: 6px; /* Space between icon and text */
    flex-grow: 1; /* Allow buttons to grow and take equal space */
    justify-content: center; /* Center content within button */
}

.the-feed-activity-actions-row button:hover {
    background-color: #f0f2f5; /* Light hover background */
    color: #333; /* Darker text on hover */
}

.the-feed-activity-actions-row button:active {
    background-color: #e0e2e5;
}

.the-feed-activity-actions-row button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Styles for icons within the buttons */
.the-feed-activity-actions-row button .dashicons {
    font-size: 1.1em; /* Adjust icon size relative to text */
    vertical-align: middle;
    line-height: 1; /* Align icon better */
}

/* Specific color for liked button */
.the-feed-react-btn.liked {
    color: #0073aa; /* WordPress blue for liked */
    font-weight: bold;
}

/* --- Post Box Photo Upload UI --- */
.the-feed-photo-upload-area {
    margin-top: 15px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.the-feed-photo-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); /* Responsive grid for previews */
    gap: 10px;
    margin-bottom: 15px;
}

.the-feed-photo-preview-item {
    position: relative;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.the-feed-photo-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.the-feed-photo-preview-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8em;
    padding: 0;
    line-height: 1; /* For dashicon centering */
}
.the-feed-photo-preview-remove:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
.the-feed-photo-preview-remove .dashicons {
    width: 18px; /* Adjust dashicon size */
    height: 18px;
    font-size: 18px;
}

.the-feed-photo-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.the-feed-post-action-btn { /* For "Add Photo" button */
    background-color: #f0f2f5;
    color: #555;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.the-feed-post-action-btn:hover {
    background-color: #e0e2e5;
    color: #333;
}

.the-feed-post-action-btn .dashicons {
    font-size: 1em;
}

.the-feed-album-options {
    display: flex;
    gap: 10px;
    flex-grow: 1; /* Allow it to take available space */
}

.the-feed-album-options select,
.the-feed-album-options input[type="text"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9em;
    box-sizing: border-box;
    max-width: 250px; /* Limit width */
    flex-grow: 1; /* Allow input/select to grow */
}

/* Style for drag-and-drop feedback on textarea */
.the-feed-post-box textarea.drag-over {
    border-color: #0073aa;
    box-shadow: 0 0 0 2px #0073aa;
}

/* --- Photo Collage Styles (for activity feed display) --- */
.the-feed-activity-media {
    margin: 0 -16px;
}

/* --- NEW & CORRECTED PHOTO COLLAGE STYLES --- */

/* Base square container for all collages */
.the-feed-photo-collage {
    display: grid;
    gap: 2px; /* The small white/black lines between photos */
    width: 100%;
    margin: 10px auto 0; /* Center the collage */
    aspect-ratio: 1 / 1; /* This makes the entire container a perfect square */
    background-color: #fff; /* Color of the gaps between photos */
    overflow: hidden;
}

/* Style for each individual photo item within the grid */
.the-feed-collage-item {
    position: relative;
    overflow: hidden;
    background-color: #f0f2f5; /* Placeholder color while image loads */
}

.the-feed-collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This crops the image to fill its container, rather than stretching it */
    display: block;
    transition: transform 0.2s ease;
}

.the-feed-collage-item a:hover img {
    transform: scale(1.05);
}

/* Layout for 1 Photo */
.the-feed-photo-collage-1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

/* Layout for 2 Photos (side-by-side) */
.the-feed-photo-collage-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

/* Layout for 3 Photos (1 large left, 2 stacked right) */
.the-feed-photo-collage-3 {
    grid-template-columns: 2fr 1fr; /* Left column is twice as wide as the right */
    grid-template-rows: 1fr 1fr;
}
.the-feed-photo-collage-3 .the-feed-collage-item:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 3; /* First photo takes up both rows on the left */
}
.the-feed-photo-collage-3 .the-feed-collage-item:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 2; /* Second photo takes top-right */
}
.the-feed-photo-collage-3 .the-feed-collage-item:nth-child(3) {
    grid-column: 2 / 3;
    grid-row: 2 / 3; /* Third photo takes bottom-right */
}

/* Layout for 4 Photos (2x2 grid) */
.the-feed-photo-collage-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* Layout for 5 Photos (2 stacked left, 3 stacked right) */
.the-feed-photo-collage-5 {
    grid-template-columns: 1fr 1fr; /* Two equal-width columns */
    grid-template-rows: 1fr 1fr 1fr; /* Three rows for the right side */
}
.the-feed-photo-collage-5 .the-feed-collage-item:nth-child(1) {
    grid-column: 1 / 2; /* First photo in top-left */
    grid-row: 1 / 2;
}
.the-feed-photo-collage-5 .the-feed-collage-item:nth-child(2) {
    grid-column: 1 / 2; /* Second photo in bottom-left */
    grid-row: 2 / 3;
    /* We need to make the first column span the full height. Let's adjust. */
    grid-row: 1 / 3; /* This makes the left column have 2 rows */
}
/* Re-doing the 5 photo layout based on your rules (2 left, 3 right) is a bit tricky with pure grid rows.
   A better approach is using nested grids or more complex column/row spans. Let's try this: */
.the-feed-photo-collage-5 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr; /* We will use row-spans to achieve the effect */
}
.the-feed-photo-collage-5 .the-feed-collage-item:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}
.the-feed-photo-collage-5 .the-feed-collage-item:nth-child(2) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
.the-feed-photo-collage-5 .the-feed-collage-item:nth-child(3) {
    grid-column: 2 / 3;
    grid-row: 1 / 3; /* Third photo takes up full height on the right */
}
/* User requested 2 on left, 3 on right. That layout is visually imbalanced. 
   A more common 5-photo layout is 2 on top, 3 on bottom. Let's implement that as it's more standard. */
.the-feed-photo-collage-5 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.the-feed-photo-collage-5 .the-feed-collage-item:nth-child(1) {
    grid-column: 1 / 3; /* First photo spans two columns on top row */
    grid-row: 1 / 2;
}
.the-feed-photo-collage-5 .the-feed-collage-item:nth-child(2) {
    grid-column: 3 / 4; /* Second photo is on the top-right */
    grid-row: 1 / 2;
}
.the-feed-photo-collage-5 .the-feed-collage-item:nth-child(3) {
    grid-column: 1 / 2; /* Third photo is bottom-left */
    grid-row: 2 / 3;
}
.the-feed-photo-collage-5 .the-feed-collage-item:nth-child(4) {
    grid-column: 2 / 3; /* Fourth is bottom-middle */
    grid-row: 2 / 3;
}
.the-feed-photo-collage-5 .the-feed-collage-item:nth-child(5) {
    grid-column: 3 / 4; /* Fifth is bottom-right */
    grid-row: 2 / 3;
}


/* Overlay for "+X more photos" */
.the-feed-collage-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    font-weight: bold;
    cursor: pointer;
    z-index: 1;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.the-feed-collage-overlay:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* The main overlay, now fully opaque black for a more immersive experience */
.the-feed-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Darker, more opaque background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

/* Prevent body scrolling when lightbox is active */
body.the-feed-lightbox-active {
    overflow: hidden;
}

/* The main content area that holds the image and comments */
.the-feed-lightbox-content {
    background-color: transparent;
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* The area dedicated to displaying the image */
.the-feed-lightbox-image-area {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #000;
    min-width: 0; /* +++ ADD THIS LINE: This is the fix for the overlap issue +++ */
}

/* The image itself, configured to fit without being cropped */
.the-feed-lightbox-image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* The comment section with a fixed width */
.the-feed-lightbox-comments-area {
    width: 360px;
    flex-shrink: 0;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
    height: 100%;
}

/* -- Lightbox UI Elements -- */
.the-feed-lightbox-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(30, 30, 30, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.5em;
    cursor: pointer;
    z-index: 10002;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.the-feed-lightbox-close:hover {
    background-color: rgba(30, 30, 30, 0.8);
}

/* Navigation Arrows for Next/Previous */
.the-feed-lightbox-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(30, 30, 30, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 2em;
    cursor: pointer;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}
.the-feed-lightbox-nav-arrow:hover {
    background-color: rgba(30, 30, 30, 0.8);
}
.the-feed-lightbox-nav-arrow.prev {
    left: 20px;
}
.the-feed-lightbox-nav-arrow.next {
    right: 20px;
}
.the-feed-lightbox-nav-arrow.disabled {
    display: none;
}

/* --- Styles for content within the comment sidebar --- */
.the-feed-lightbox-description {
    font-size: 0.9em;
    color: #555;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.the-feed-lightbox-engagement-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
    flex-shrink: 0;
}
.the-feed-lightbox-comments-list {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 5px;
}
.the-feed-lightbox-comments-area .the-feed-comment-box {
    border-top: 1px solid #eee;
    padding-top: 10px;
    margin-top: 10px;
    flex-shrink: 0;
}

/* Responsive styles for mobile */
@media (max-width: 992px) {
    .the-feed-lightbox-content {
        flex-direction: column;
        height: auto;
        min-height: 100%;
        overflow-y: auto;
    }
    .the-feed-lightbox-image-area {
        flex-grow: 0;
        height: auto;
        max-height: 70vh;
        width: 100%;
    }
    .the-feed-lightbox-comments-area {
        width: 100%;
        height: auto;
    }
    .the-feed-lightbox-close {
        position: fixed;
    }
}

/* --- Profile Photos Tab (Inner Tabs and Grids) --- */
.the-feed-profile-photos-tab {
    /* Container for the entire photos tab content */
    display: flex;
    flex-direction: column;
}

.the-feed-profile-photos-inner-nav {
    /* Navigation for "All Photos" and "Albums" inner tabs */
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.the-feed-profile-photos-inner-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start; /* Align inner tabs to the left */
}

.the-feed-profile-photos-inner-nav li {
    margin-right: 15px;
}

.the-feed-profile-photos-inner-nav a {
    display: block;
    padding: 10px 0; /* Padding for inner tab links */
    text-decoration: none;
    color: #555;
    font-weight: bold;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
}

.the-feed-profile-photos-inner-nav li.active a,
.the-feed-profile-photos-inner-nav a:hover {
    color: #0073aa;
    border-bottom-color: #0073aa;
}

.the-feed-profile-photos-inner-content {
    /* Container for the content of the inner tabs */
    flex-grow: 1;
    position: relative; /* For absolute positioning of inner panels */
    min-height: 200px; /* Ensure some height even if empty */
}

.the-feed-profile-inner-tab-panel {
    /* Styles for "All Photos", "Albums", and "Album Photos View" */
    display: none; /* Hidden by default, activated by JS */
    padding: 0; /* No extra padding here, content inside will have it */
    position: absolute; /* Allows smooth transitions if desired */
    width: 100%;
    top: 0;
    left: 0;
}

.the-feed-profile-inner-tab-panel.active {
    display: block; /* Show when active */
    position: relative; /* Reset position for active one */
}

/* Headings within inner tabs */
.the-feed-profile-inner-tab-panel h2 {
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    font-size: 1.5em;
    color: #333;
}

/* User Photo Grid (for All Photos and specific Album Photos view) */
.the-feed-user-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Responsive square grid */
    gap: 15px;
}

.the-feed-user-photo-grid-item {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 5px;
    overflow: hidden;
    position: relative; /* For image scaling/overlay */
    aspect-ratio: 1 / 1; /* Make grid items square */
}

.the-feed-user-photo-grid-item a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.the-feed-user-photo-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fill the square item */
    display: block;
    transition: transform 0.2s ease;
}

.the-feed-user-photo-grid-item a:hover img {
    transform: scale(1.05); /* Subtle zoom effect on hover */
}

/* Album Grid (for displaying albums) */
.the-feed-albums-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Responsive for album covers */
    gap: 20px;
}

.the-feed-album-grid-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: relative;
    aspect-ratio: 1 / 1; /* Make album grid item square */
}

.the-feed-album-grid-item a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.the-feed-album-grid-item img {
    width: 100%;
    height: calc(100% - 60px); /* Adjust height for info bar below */
    object-fit: cover;
    display: block;
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
}

.the-feed-album-info {
    padding: 10px;
    background-color: #fff;
    border-top: 1px solid #eee;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.the-feed-album-name {
    font-weight: bold;
    font-size: 1em;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: block;
}

.the-feed-album-count {
    font-size: 0.85em;
    color: #777;
    margin-top: 3px;
}

/* Back to Albums Button */
.the-feed-back-to-albums-btn {
    background-color: #f0f2f5;
    color: #555;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 20px;
}

.the-feed-back-to-albums-btn:hover {
    background-color: #e0e2e5;
    color: #333;
}

.the-feed-back-to-albums-btn .dashicons {
    font-size: 1em;
}

/* --- NOTIFICATION BELL & POPUP STYLES --- */

/* The main container to position the popup relative to */
.the-feed-bell-container {
    position: relative;
    display: inline-block;
}

/* The bell icon button */
#the-feed-bell-trigger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    position: relative;
    color: #333;
}
#the-feed-bell-trigger:hover {
    background-color: #f0f0f0;
}
#the-feed-bell-trigger .dashicons-bell {
    font-size: 24px;
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

/* The red unread count badge */
#the-feed-bell-count {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #d63638;
    color: white;
    font-size: 10px;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff; /* White border to separate from bell */
}

/* The main popup container */
#the-feed-bell-popup {
    position: absolute;
    top: 120%; /* Position below the bell */
    right: 0;
    width: 380px;
    max-height: 450px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 99999;
    display: none; /* Controlled by JS */
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
#the-feed-bell-popup.visible {
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: translateY(0);
}

.the-feed-popup-header,
.the-feed-popup-footer {
    padding: 10px 15px;
    background-color: #f7f7f7;
    flex-shrink: 0;
}

.the-feed-popup-header h3 {
    margin: 0;
    font-size: 1em;
}

.the-feed-popup-footer {
    text-align: center;
    border-top: 1px solid #eee;
}
.the-feed-popup-footer a {
    text-decoration: none;
    font-weight: bold;
    color: #0073aa;
}

#the-feed-popup-list {
    flex-grow: 1;
    overflow-y: auto;
}

/* Use existing notification item styles but with minor tweaks for popup */
#the-feed-popup-list .the-feed-notification {
    margin-bottom: 0;
    border: none;
    border-top: 1px solid #eee;
    border-radius: 0;
}
#the-feed-popup-list .the-feed-notification:first-child {
    border-top: none;
}

/* --- LEFT SIDEBAR STYLES --- */

/* Adjust sidebar container padding */
.the-feed-left-sidebar {
    padding: 0; /* Remove old padding, new widgets have their own */
    background-color: transparent;
    border: none;
    height: fit-content;
    position: sticky; /* Makes the sidebar stick on scroll */
    top: 20px; /* Adjust as needed for your theme's header */
}

/* Style for the user profile link at the top */
.the-feed-sidebar-profile-link {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}
.the-feed-sidebar-profile-link:hover {
    background-color: #e4e6e9;
}

.the-feed-sidebar-profile-link img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 12px;
}

/* Style for the navigation menu */
.the-feed-sidebar-nav {
    margin-top: 10px;
}

.the-feed-sidebar-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.the-feed-sidebar-nav li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.the-feed-sidebar-nav li a:hover {
    background-color: #e4e6e9;
}

.the-feed-sidebar-nav li a .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: #0073aa; /* Use an accent color for the icons */
}

/* Optional widget style for logged-out message */
.the-feed-sidebar-widget {
    background: #fff;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

/* --- PROFILE PAGE DIRECT EDIT STYLES (BUTTONS ALWAYS VISIBLE) --- */

/* Edit buttons that appear over the images */
.the-feed-edit-media-btn {
    position: absolute;
    background-color: rgba(15, 20, 25, 0.75);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    padding: 8px 12px;
    transition: background-color 0.2s ease;
    opacity: 1; /* MODIFIED: Set to 1 to be visible by default */
}
.the-feed-edit-media-btn:hover {
    background-color: rgba(15, 20, 25, 0.9);
}

/* Edit button positioning */
#the-feed-edit-banner-btn {
    bottom: 15px;
    right: 15px;
}
#the-feed-edit-avatar-btn {
    bottom: 10px;
    right: 10px;
    border-radius: 50%;
    padding: 8px;
    height: 36px;
    width: 36px;
    justify-content: center;
}
#the-feed-edit-avatar-btn .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}


/* Modal styles for the upload forms */
.the-feed-upload-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.the-feed-modal-content {
    background-color: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    padding: 20px 30px;
}
.the-feed-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    color: #888;
}
.the-feed-modal-content h2 {
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.the-feed-image-preview-area {
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    position: relative;
    background-color: #f0f2f5;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 20px;
}
.the-feed-image-preview-area img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.the-feed-select-file-btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #f0f2f5;
    border: 1px solid #ddd;
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
}

/* --- DYNAMIC REACTION SYSTEM STYLES --- */

/* Main container for the reaction button and popup palette */
.the-feed-reaction-button-container {
    position: relative;
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

/* The reaction palette that appears on hover */
.the-feed-reaction-palette {
    position: absolute;
    bottom: 100%;
    margin-bottom: 5px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: flex;
    padding: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease-in-out;
}
.the-feed-reaction-button-container:hover .the-feed-reaction-palette {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Individual reaction icons in the palette */
.the-feed-reaction-palette .reaction-icon {
    width: 32px;
    height: 32px;
    cursor: pointer;
    transition: transform 0.15s ease;
    margin: 0 3px;
}
.the-feed-reaction-palette .reaction-icon:hover {
    transform: scale(1.2);
}
.the-feed-reaction-palette .reaction-icon img {
    width: 100%;
    height: 100%;
}

/* Styles for the main button after a reaction is chosen */
.the-feed-react-btn.reacted-like { color: #0073aa; }
.the-feed-react-btn.reacted-love { color: #e0245e; }
.the-feed-react-btn.reacted-haha,
.the-feed-react-btn.reacted-wow,
.the-feed-react-btn.reacted-sad,
.the-feed-react-btn.reacted-angry { color: #f7b125; }

/* The summary of reactions shown on the post */
.the-feed-reaction-summary {
    display: flex;
    align-items: center;
    gap: 4px;
}
.the-feed-reaction-summary-icons {
    display: flex;
}
.the-feed-reaction-summary-icons .summary-icon {
    width: 18px;
    height: 18px;
    border: 2px solid #fff;
    border-radius: 50%;
    margin-left: -4px;
    background-color: #f0f2f5; /* BG for icons */
}
.the-feed-reaction-summary-icons .summary-icon img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.the-feed-reaction-summary-count {
    font-weight: 600;
    font-size: 0.85em;
    color: #65676b;
    margin-left: 8px;
}