/* Modern Newsfeed Refactor - Custom Styles */

/* --- Card Layout (Structure Only, No Colors) --- */
.newsfeed_post {
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    /* Background color preserved from theme default */
}

/* --- Post Header --- */
.post-header {
    padding: 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
}

.user-info {
    display: flex !important;
    align-items: center !important;
}

.avatar.large {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin-right: 12px !important;
}

.user-details h4 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: inherit;
    /* Use theme text color */
    margin: 0 !important;
}

.user-details span {
    font-size: 13px !important;
    color: #9ca3af;
    /* Light grey for date - usually safe on white/dark */
    display: block !important;
}

/* --- Post Body --- */
.post-body {
    padding: 0 16px 16px 16px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

/* --- Action Bar --- */
.post-stats {
    padding: 0 16px 10px !important;
    font-size: 13px !important;
    color: #65676b;
    /* Muted text */
    display: flex !important;
    justify-content: space-between !important;
}

.action-bar {
    border-top: 1px solid #ced0d4 !important;
    /* Separator */
    border-bottom: 1px solid #ced0d4 !important;
    display: flex !important;
    padding: 4px 16px !important;
    margin: 0 16px !important;
}

.action-btn {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    gap: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    background: transparent !important;
    border: none !important;
}

.action-btn:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* --- Comments Section --- */
.comments-section {
    padding: 0 16px !important;
    /* Removed vertical padding to reduce gaps */
}

.comment-row {
    display: flex !important;
    gap: 10px !important;
    margin-top: 12px !important;
    /* Space above each comment */
    margin-bottom: 0 !important;
    /* Remove bottom margin */
    align-items: flex-start !important;
}


.avatar.small {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
}

.comment-bubble-container {
    display: flex !important;
    flex-direction: column !important;
    max-width: 85% !important;
}

.comment-bubble {
    background-color: #f0f2f5;
    /* Light grey bubble - standard for comments regardless of theme usually, consider checking theme var if available */
    border-radius: 18px !important;
    padding: 8px 12px !important;
    display: inline-block !important;
}

/* Dark mode fallback for bubble if needed - assuming light mode primarily based on request */
body.canvas-dark .comment-bubble {
    background-color: #3b3b3b !important;
    color: #fff !important;
}

.comment-author {
    font-weight: 600 !important;
    font-size: 13px !important;
    margin-bottom: 2px !important;
    display: block !important;
    text-decoration: none !important;
}

.comment-text {
    font-size: 14px !important;
}

.comment-actions {
    font-size: 12px !important;
    color: #65676b !important;
    margin-left: 12px !important;
    margin-top: 4px !important;
    display: flex !important;
    gap: 12px !important;
}

.comment-actions span,
.comment-actions a {
    cursor: pointer !important;
    font-weight: 600 !important;
    color: inherit !important;
}

/* --- Create Post Widget --- */
.create-post-card {
    padding: 16px !important;
}

.cp-header {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 12px !important;
}

.cp-input-trigger {
    background-color: #f0f2f5;
    border-radius: 20px !important;
    padding: 10px 16px !important;
    flex-grow: 1 !important;
    color: #65676b !important;
    cursor: pointer !important;
    font-size: 15px !important;
    border: none !important;
}

.cp-footer {
    border-top: 1px solid #e4e6eb !important;
    padding-top: 12px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.attach-btn {
    font-weight: 600 !important;
    padding: 8px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

/* --- Fixes for Regressions --- */

/* Pinned Post Styling */
/* Pinned Post Styling */
/* Pinned Post Styling */
.newsfeed_post.pinned {
    border: 2px solid #1877F2 !important;
    /* Blue border */
    background-color: #fff !important;
    /* White bg */
    box-shadow: 0 0 10px rgba(24, 119, 242, 0.2) !important;
    /* Blue glow shadow */
}

.pinned-tag {
    display: inline-block;
    background-color: #1877F2;
    /* Match pinned border */
    color: #fff;
    font-size: 9px;
    /* Smaller font */
    font-weight: 800;
    /* Bold */
    padding: 3px 6px;
    /* Tighter padding */
    border-radius: 8px;
    /* Rounded pill */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    margin-top: 4px;
    /* Space below dots */
}

/* Header Right Side Layout */
.post-header-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0 !important;
    /* Gap handled by rows */
}

.options-row {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    height: 24px !important;
    /* Fixed height for dots row */
}

.tag-row {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-top: 2px !important;
    /* Small space between dots and tag */
}

/* Ensure the dots button aligns perfectly and is larger */
.post-header-right .btn-icon {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: auto !important;
    width: auto !important;
    font-size: 20px !important;
    /* Large dots */
    color: #4b5563 !important;
}

/* Liked State (Active) */
.action-btn.active-like {
    color: #1877F2 !important;
    /* Facebook Blue */
    font-weight: 700 !important;
}

.action-btn.active-like i {
    font-weight: 900 !important;
    /* Ensure solid icon */
}

/* Comment Input Gap Fix */
.comment-input-area {
    display: flex !important;
    align-items: center !important;
    margin-top: 8px !important;
    gap: 16px !important;
    padding-bottom: 16px !important;
    /* Added space below */
}

/* Additional padding for the input itself to breathe */
/* Additional padding for the input itself to breathe */
.comment-input {
    flex-grow: 1 !important;
    padding: 10px 16px !important;
}