/* Custom styles for the social blog */
html {
    scroll-behavior: smooth;
}
.post-card {
    scroll-margin-top: 16px;
}
body {
    background-color: #f0f2f5;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.navbar-custom {
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.navbar-brand {
    font-weight: 600;
    color: #1877f2;
}
.offcanvas {
    background-color: #ffffff;
}
.offcanvas .nav-link {
    color: #1c1e21;
    font-weight: 500;
}
.offcanvas .nav-link:hover {
    background-color: #e7f3ff;
    border-radius: 8px;
}
.stories-bar {
    background: #ffffff;
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow-x: auto;
    white-space: nowrap;
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 24px;
}
.story-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    flex: 0 0 auto;
}
.story-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    background-size: 400% 400%;
}
.story-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid #ffffff;
    object-fit: cover;
}
.story-name {
    font-size: 12px;
    color: #65676b;
    margin-top: 4px;
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.post-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 16px;
    margin-bottom: 20px;
}
.post-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.post-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}
.post-author {
    font-weight: 600;
    color: #1c1e21;
}
.post-time {
    font-size: 13px;
    color: #65676b;
}
.post-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 8px;
}
.post-content {
    color: #1c1e21;
    line-height: 1.6;
}
.post-image {
    width: 100%;
    border-radius: 8px;
    margin: 12px 0;
    max-height: 400px;
    object-fit: cover;
}
.post-actions {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #e4e6eb;
    padding-top: 10px;
    margin-top: 18px;
}
.action-btn {
    background: none;
    border: none;
    color: #65676b;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 20px;
    transition: background 0.2s;
    cursor: pointer;
}
.action-btn:hover {
    background: #f0f2f5;
}
.action-btn.liked {
    color: #1877f2;
}
.action-btn i {
    margin-right: 6px;
}

/* ---- Phase 1: Helpful / Save / Report ---- */
.action-btn.helpful-btn.active {
    color: #1877f2;
    font-weight: 700;
}
.action-btn.save-btn.active {
    color: #f0a500;
}
.action-btn.report-post-btn:hover {
    color: #dc3545;
}

/* ---- Phase 2: Comment Like / Report ---- */
.comment-like-btn.active {
    color: #1877f2;
    font-weight: 700;
}
.comment-report-btn:hover {
    color: #dc3545 !important;
}

/* ---- Phase 3: Support Profile / Report Profile ---- */
.support-profile-btn.btn-primary {
    font-weight: 600;
}
.report-profile-btn:hover {
    color: #dc3545 !important;
}
.comment-section {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: 0 solid #e4e6eb;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.4s ease, padding-top 0.4s ease, border-top-width 0.4s ease;
}
.comment-section.expanded {
    max-height: 4000px;
    opacity: 1;
    margin-top: 12px;
    padding-top: 12px;
    border-top-width: 1px;
}
.comment-section {
    position: relative;
}
.comment-collapse-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: #f0f2f5;
    color: #65676b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    z-index: 3;
    transition: background 0.2s ease;
}
.comment-collapse-btn:hover {
    background: #e4e6eb;
}
.comment-just-moved {
    animation: commentMovedFlash 0.9s ease;
}
@keyframes commentMovedFlash {
    0% { background-color: rgba(255, 193, 7, 0.25); }
    100% { background-color: transparent; }
}
.comment-item {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
.comment-bubble {
    background: #f0f2f5;
    border-radius: 18px;
    padding: 8px 14px;
    flex: 1;
}
.comment-author {
    font-weight: 600;
    font-size: 13px;
}
.comment-text {
    font-size: 14px;
    margin: 0;
}
.comment-form {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}
.comment-form input {
    flex: 1;
    border-radius: 20px;
    border: 1px solid #e4e6eb;
    padding: 8px 16px;
    outline: none;
}
.comment-form input:focus {
    border-color: #1877f2;
    box-shadow: 0 0 0 2px rgba(24,119,242,0.2);
}
.comment-form button {
    border-radius: 20px;
    padding: 8px 20px;
}
.stories-title {
    font-weight: 600;
    color: #1c1e21;
    margin-right: 16px;
}
/* Responsive tweaks */
@media (max-width: 576px) {
    .story-avatar {
        width: 56px;
        height: 56px;
    }
    .post-title {
        font-size: 1.1rem;
    }
}
/* Better content spacing */
.container {
    padding-left: 16px;
    padding-right: 16px;
}

.post-card {
    padding: 20px 24px;  /* more internal breathing */
}

.post-content {
    margin-bottom: 12px;
    overflow-wrap: break-word;
    word-break: break-word;
}
.post-link {
    color: #1877f2;
    text-decoration: none;
    word-break: break-all;
}
.post-link:hover {
    text-decoration: underline;
}
html.dark-mode .post-link {
    color: #4a9eff;
}

/* Images inside posts – always fit the card */
.post-image {
    width: 100%;
    height: auto;           /* maintain aspect ratio */
    max-height: 500px;      /* optional: prevent huge vertical images */
    object-fit: cover;      /* cover nicely, or use 'contain' if you prefer */
    border-radius: 8px;
    margin-top: 12px;
    margin-bottom: 12px;
}

/* Story form improvements */
#write-story-form .form-control {
    border-radius: 20px;
    background-color: #f0f2f5;
    border: none;
    padding: 12px 18px;
}
#write-story-form .form-control:focus {
    background-color: #fff;
    border: 1px solid #1877f2;
    box-shadow: 0 0 0 2px rgba(24,119,242,0.2);
}
/* ====== REACTION POPOVER (FINAL) ====== */
.reaction-popover span {
    font-size: 28px;
    cursor: pointer !important;
    padding: 4px 6px;
    transition: transform 0.2s;
    display: inline-block;
    user-select: none !important;
}
.reaction-popover span:hover {
    transform: scale(1.5);
}
/* Make the entire popover clickable */
.reaction-popover,
.reaction-popover span,
.reaction-popover span::before,
.reaction-popover span::after {
    cursor: pointer !important;
    user-select: none !important;
}
/* Responsive adjustments for all screen sizes */

/* Stories bar */
@media (max-width: 576px) {
    .stories-bar {
        gap: 10px;
    }
    .story-avatar {
        width: 48px;
        height: 48px;
    }
    .story-name {
        font-size: 10px;
        max-width: 48px;
    }
}

/* Post cards */
@media (max-width: 576px) {
    .post-card {
        padding: 12px 16px;
    }
    .post-title {
        font-size: 1.1rem;
    }
    .post-content {
        font-size: 0.95rem;
    }
    .post-actions {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
    }
    .action-btn {
        font-size: 13px;
        padding: 4px 10px;
    }
}

/* Typography */
@media (max-width: 576px) {
    h4 { font-size: 1.2rem; }
    h5 { font-size: 1rem; }
}

/* Navbar brand text */
.navbar-brand {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60vw;
}
/* Follow Suggestions */
.follow-suggest-btn {
    transition: all 0.3s ease;
}
.follow-suggest-btn:hover {
    transform: scale(1.05);
}
.follow-suggest-btn.following {
    background: #e4e6eb !important;
    color: #1c1e21 !important;
    border-color: #d0d1d5 !important;
}
.follow-suggest-btn.following:hover {
    background: #ffebee !important;
    color: #d32f2f !important;
    border-color: #d32f2f !important;
}
/* ============================================================
   LOAD MORE ANIMATION
   ============================================================ */
.post-card {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.post-card.loading {
    opacity: 0;
    transform: translateY(-20px);
}

.post-card.loaded {
    opacity: 1;
    transform: translateY(0);
}

#load-more-btn {
    transition: all 0.3s ease;
}

#load-more-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

#load-more-btn:active {
    transform: scale(0.95);
}

#loading-spinner .spinner-border {
    width: 3rem;
    height: 3rem;
}

#no-more-posts {
    font-size: 16px;
    color: #65676b;
}

#no-more-posts .fa-check-circle {
    color: #42b72a;
}
.msg-status {
    margin-left: 6px;
    font-size: 12px;
    color: #65676b;
}
.msg-status .fa-check-double {
    color: #1877f2; /* blue for double tick */
}
.msg-status .fa-eye {
    color: #1877f2;
}
/* ============================================================
   VERIFICATION BADGE IMAGES
   ============================================================ */
.badge-container {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px 4px 10px;
    border-radius: 50px;
    background: #f8f9fa;
    border: 1px solid #e4e6eb;
    transition: all 0.3s ease;
    cursor: default;
}

.badge-container .badge-image {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: inline-block;
}

.badge-container .badge-label {
    font-size: 13px;
    font-weight: 600;
    color: #1c1e21;
}

.badge-container .badge-info-icon {
    color: #6c757d;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.2s;
}
.badge-container .badge-info-icon:hover {
    color: #1877f2;
}

/* ----- Color-specific hover effects ----- */
.badge-container.badge-green:hover {
    border-color: #28a745;
    box-shadow: 0 2px 12px rgba(40, 167, 69, 0.2);
}
.badge-container.badge-blue:hover {
    border-color: #007bff;
    box-shadow: 0 2px 12px rgba(0, 123, 255, 0.2);
}
.badge-container.badge-yellow:hover {
    border-color: #ffc107;
    box-shadow: 0 2px 12px rgba(255, 193, 7, 0.2);
}
/* ============================================================
   APPLE DEVICE FIXES
   ============================================================ */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari specific fixes */
    .badge-container,
    .badge-simple,
    .badge-image-container {
        display: inline-flex;
        align-items: center;
        flex-wrap: nowrap;
        white-space: nowrap;
        max-width: 100%;
    }
    
    .badge-container .badge-label,
    .badge-simple .badge-label {
        font-size: 12px !important; /* Slightly smaller on iOS */
        line-height: 1.2;
    }
    
    .badge-image-style {
        width: 24px !important; /* Slightly smaller on iOS */
        height: 24px !important;
    }
    
    .badge-container .badge-info-icon,
    .badge-simple .badge-info-icon {
        font-size: 12px !important;
        margin-left: 2px;
    }
    
    /* Prevent text wrapping in buttons */
    .btn {
        white-space: nowrap;
        font-size: 13px;
        padding: 6px 14px;
    }
}
.badge-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 100%;
}
/* ============================================================
   REACTIONS DISPLAY
   ============================================================ */
.reactions-display {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #e4e6eb;
    margin-bottom: 6px;
}
.reaction-count-link {
    cursor: pointer;
    font-size: 14px;
    color: #65676b;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}
.reaction-count-link:hover {
    color: #1877f2;
}
.reaction-total-ms {
    font-size: 13px;
    margin-left: 4px;
}
.reaction-group {
    border-bottom: 1px solid #f0f2f5;
    padding-bottom: 8px;
}
.reaction-group-header {
    font-size: 15px;
    padding: 4px 0;
}
.reaction-group ul {
    padding-left: 0;
}
.reaction-group li {
    padding: 6px 0;
}
.reaction-group li a {
    color: #1c1e21;
}
.reaction-group li a:hover {
    text-decoration: underline;
}

/* ====== COMMENT STYLES ====== */
.comment-item {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.comment-item .comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.comment-bubble {
    background: #f0f2f5;
    padding: 8px 14px;
    border-radius: 18px;
    flex: 1;
}
.comment-author-link {
    text-decoration: none;
    color: #1c1e21;
}
.comment-author-link:hover {
    text-decoration: underline;
}
.mention-link {
    font-weight: 600;
    color: #1877f2;
    text-decoration: none;
}
.mention-link:hover {
    text-decoration: underline;
}
.comment-author {
    font-weight: 600;
    font-size: 13px;
    display: block;
}
.comment-text {
    margin: 2px 0 0 0;
    font-size: 14px;
}
.comment-time {
    font-size: 11px;
    color: #65676b;
}

/* ============================================================
   ENHANCED COMMENT STYLES - NEW FEATURES
   ============================================================ */
.pinned-comment {
    background: #fff8e1;
    border-left: 4px solid #ffc107;
    padding-left: 10px;
    border-radius: 0 18px 18px 0;
}

.comment-reply {
    margin-left: 40px;
    padding-left: 10px;
    border-left: 2px solid #e4e6eb;
}

.reply-form {
    display: none;
    margin-top: 8px;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.reply-form input {
    flex: 1;
    min-width: 150px;
    border-radius: 20px;
    border: 1px solid #e4e6eb;
    padding: 6px 14px;
    font-size: 13px;
    outline: none;
}

.reply-form input:focus {
    border-color: #1877f2;
    box-shadow: 0 0 0 2px rgba(24,119,242,0.2);
}

.reply-form .btn {
    font-size: 12px;
    padding: 4px 12px;
}

.reply-toggle-btn,
.show-replies-btn {
    font-size: 12px !important;
    padding: 2px 6px !important;
    color: #65676b !important;
}

.reply-toggle-btn:hover,
.show-replies-btn:hover {
    color: #1877f2 !important;
    text-decoration: underline !important;
}

.comment-actions .btn-sm {
    padding: 2px 6px;
    font-size: 11px;
}

/* Comment Reaction Buttons */
.comment-reaction-btn {
    font-size: 13px !important;
    padding: 0 6px !important;
    border: none !important;
    background: transparent !important;
    color: #65676b !important;
    transition: all 0.2s ease;
}

.comment-reaction-btn:hover {
    transform: scale(1.2);
    color: #1877f2 !important;
}

.comment-reaction-btn.active {
    color: #1877f2 !important;
    font-weight: 600;
}

.comment-reaction-btn .reaction-count {
    font-size: 10px;
    color: #65676b;
    margin-left: 1px;
}

.comment-reaction-btn.active .reaction-count {
    color: #1877f2;
}

/* Edit Comment */
.edit-comment-textarea {
    width: 100%;
    border: 1px solid #1877f2;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    resize: vertical;
    outline: none;
}

.edit-comment-textarea:focus {
    box-shadow: 0 0 0 2px rgba(24,119,242,0.2);
}

.edit-comment-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.edit-comment-actions .btn-sm {
    font-size: 12px;
    padding: 2px 12px;
}

/* Badge styles for comments */
.comment-bubble .badge {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 10px;
    color: #fff;
    margin-left: 4px;
    vertical-align: middle;
}

.comment-bubble .badge-green { background: #28a745; }
.comment-bubble .badge-blue { background: #007bff; }
.comment-bubble .badge-yellow { background: #ffc107; color: #333; }

/* Comment sorting */
.comment-sort-btns {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.comment-sort-btn {
    font-size: 12px;
    padding: 4px 12px;
    border: none;
    border-radius: 20px;
    background: transparent;
    color: #65676b;
    cursor: pointer;
    transition: all 0.2s;
}

.comment-sort-btn:hover {
    background: #f0f2f5;
}

.comment-sort-btn.active {
    background: #1877f2;
    color: #fff;
}

/* Reply container animations */
#replies-container {
    transition: all 0.3s ease;
}

/* Loading states */
.comment-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Toast notifications - ensure they work with existing */
.toast {
    z-index: 9999 !important;
}

/* Responsive fixes for comments */
@media (max-width: 576px) {
    .comment-reply {
        margin-left: 20px;
        padding-left: 8px;
    }
    
    .reply-form {
        flex-direction: column;
        align-items: stretch;
    }
    
    .reply-form input {
        width: 100%;
    }
    
    .comment-bubble {
        padding: 6px 10px;
    }
    
    .comment-reaction-btn {
        font-size: 12px !important;
        padding: 0 4px !important;
    }
    
    .comment-sort-btn {
        font-size: 11px;
        padding: 3px 8px;
    }
}
/* ============================================================
   REACTIONS DISPLAY
   ============================================================ */
.reactions-display {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #e4e6eb;
    margin-bottom: 6px;
}
.reaction-count-link {
    cursor: pointer;
    font-size: 14px;
    color: #65676b;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}
.reaction-count-link:hover {
    color: #1877f2;
}
.reaction-total-ms {
    font-size: 13px;
    margin-left: 4px;
}
.reaction-group {
    border-bottom: 1px solid #f0f2f5;
    padding-bottom: 8px;
}
.reaction-group-header {
    font-size: 15px;
    padding: 4px 0;
}
.reaction-group ul {
    padding-left: 0;
}
.reaction-group li {
    padding: 6px 0;
}
.reaction-group li a {
    color: #1c1e21;
}
.reaction-group li a:hover {
    text-decoration: underline;
}

/* ============================================================
   DARK MODE (site-wide) — toggled via html.dark-mode, driven by
   assets/js/dark-mode.js. Living here in the shared stylesheet
   means every page that already loads style.css gets full dark
   mode coverage automatically, with no per-page CSS needed.
   ============================================================ */
html.dark-mode body {
    background: #18191a;
    color: #e4e6eb;
}
html.dark-mode .navbar-custom {
    background: #242526 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
html.dark-mode .navbar-brand,
html.dark-mode .post-author,
html.dark-mode .comment-author,
html.dark-mode .comment-author-link,
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 {
    color: #e4e6eb !important;
}
html.dark-mode .post-card,
html.dark-mode .profile-header,
html.dark-mode .stories-bar,
html.dark-mode .comment-bubble,
html.dark-mode .card,
html.dark-mode .offcanvas,
html.dark-mode .modal-content,
html.dark-mode .dropdown-menu {
    background: #242526;
    color: #e4e6eb;
}
html.dark-mode .post-content {
    color: #e4e6eb;
}

/* Business & Matrimony structured-fields card - back to the normal light
   gray look, but as real CSS (not an inline style) so it correctly adapts
   in dark mode too, same as everything else on the page. */
.business-details, .matrimony-details {
    background: #f7f9fb;
    color: #1c1e21;
    border-radius: 8px;
}
html.dark-mode .business-details,
html.dark-mode .matrimony-details {
    background: #242526;
    color: #e4e6eb;
}
html.dark-mode .card-header {
    background: #242526;
    border-color: #3a3b3c;
    color: #e4e6eb;
}
html.dark-mode .dropdown-item {
    color: #e4e6eb;
}
html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus {
    background: #3a3b3c;
    color: #e4e6eb;
}
html.dark-mode .text-muted {
    color: #b0b3b8 !important;
}
html.dark-mode .text-dark {
    color: #e4e6eb !important;
}
html.dark-mode .border,
html.dark-mode .border-bottom,
html.dark-mode .border-top,
html.dark-mode hr {
    border-color: #3a3b3c !important;
}
html.dark-mode .form-control,
html.dark-mode .comment-form input,
html.dark-mode textarea,
html.dark-mode select {
    background: #3a3b3c;
    border-color: #4e4f50;
    color: #e4e6eb;
}
html.dark-mode .form-control::placeholder {
    color: #b0b3b8;
}
html.dark-mode .form-control:focus {
    background: #3a3b3c;
    color: #e4e6eb;
}
html.dark-mode .btn-outline-primary {
    color: #4599ff;
    border-color: #4599ff;
}
html.dark-mode .btn-outline-secondary {
    color: #b0b3b8;
    border-color: #6c6d6e;
}
html.dark-mode .btn-light {
    background: #3a3b3c;
    color: #e4e6eb;
    border-color: #4e4f50;
}
html.dark-mode .nav-link {
    color: #e4e6eb;
}
html.dark-mode .action-btn {
    color: #b0b3b8;
}
html.dark-mode .reaction-popover,
html.dark-mode .mention-dropdown {
    background: #242526;
    border-color: #3a3b3c;
}
html.dark-mode .mention-item:hover,
html.dark-mode .mention-item.active {
    background: #3a3b3c;
}
html.dark-mode .pinned-comment {
    background: #3a3620;
    border-left-color: #ffc107;
}
html.dark-mode .alert-light {
    background: #242526;
    color: #e4e6eb;
    border-color: #3a3b3c;
}
html.dark-mode .badge.bg-secondary {
    background-color: #4e4f50 !important;
}
html.dark-mode .toast {
    background: #242526;
    color: #e4e6eb;
}
html.dark-mode a {
    color: #4599ff;
}
html.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Red pulsing bell when an admin/super_admin has an unread 24/7 support message */
.support-alert-bell {
    color: #dc3545 !important;
    animation: supportBellPulse 1s infinite;
}
@keyframes supportBellPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

/* Yellow pulsing bell when the digital wellbeing session is nearing its
   30-minute limit (last 5 minutes) - a heads-up before the full modal fires */
.wellbeing-alert-bell {
    color: #ffc107 !important;
    animation: wellbeingBellPulse 1s infinite;
}
@keyframes wellbeingBellPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

/* Yellow pulsing bell for admins when a Help post is awaiting review */
.help-pending-alert-bell {
    color: #ffc107 !important;
    animation: helpPendingBellPulse 1s infinite;
}
@keyframes helpPendingBellPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

/* Green pulsing bell for the author when their Help post has been approved */
.help-approved-alert-bell {
    color: #28a745 !important;
    animation: helpApprovedBellPulse 1s infinite;
}
@keyframes helpApprovedBellPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

/* Orange pulsing bell for Tamil Nationalist Army volunteers when a Help
   post needing their area's attention comes in */
.volunteer-alert-bell {
    color: #fd7e14 !important;
    animation: volunteerAlertBellPulse 1s infinite;
}
@keyframes volunteerAlertBellPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}

/* Dark mode support for the compact pinned-message bar (messages.php) */
html.dark-mode .pinned-bar {
    background: #1a2733;
    border-bottom-color: #2a3a47;
}
html.dark-mode .pinned-bar-text { color: #d0d3d8; }
html.dark-mode .pinned-bar-counter {
    background: #223447;
    color: #9aa0a6;
}
html.dark-mode .pinned-list-dropdown {
    background: #242526;
    border-bottom-color: #3a3b3c;
}
html.dark-mode .pinned-list-item {
    border-bottom-color: #3a3b3c;
    color: #e4e6eb;
}
html.dark-mode .pinned-list-item:hover { background: #3a3b3c; }

/* Story type structured-fields card (Business / Matrimony) */
.story-details-card {
    background: #f7f9fb;
    border: 1px solid #e4e6eb;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    color: #1c1e21;
}
.story-details-card > div { padding: 2px 0; }
html.dark-mode .story-details-card {
    background: #242526 !important;
    border-color: #3a3b3c !important;
    color: #e4e6eb !important;
}
html.dark-mode .story-details-card strong {
    color: #e4e6eb !important;
}

/* Photo gallery (Business / Matrimony) - horizontal scroll + zoom via lightbox */
.story-gallery {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 8px 0;
    -webkit-overflow-scrolling: touch;
}
.story-gallery-img {
    flex: 0 0 auto;
    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 10px;
    scroll-snap-align: start;
    cursor: zoom-in;
}
@media (max-width: 576px) {
    .story-gallery-img { width: 160px; height: 160px; }
}

/* ============================================================
   DARK MODE — additional coverage for elements that still had a
   white/light background with unreadable text (list groups used by
   search results, admin pages, support inbox; light badges used for
   story-type tags; plain tables; and a couple of safety-net rules).
   ============================================================ */
html.dark-mode .list-group-item {
    background: #242526;
    color: #e4e6eb;
    border-color: #3a3b3c;
}
html.dark-mode .list-group-item-action:hover,
html.dark-mode .list-group-item-action:focus {
    background: #3a3b3c;
    color: #e4e6eb;
}
html.dark-mode .badge.bg-light {
    background-color: #3a3b3c !important;
    color: #e4e6eb !important;
}
html.dark-mode table,
html.dark-mode .table {
    color: #e4e6eb;
    --bs-table-color: #e4e6eb;
    --bs-table-bg: transparent;
    --bs-table-border-color: #3a3b3c;
}
html.dark-mode .table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: #3a3b3c;
    color: #e4e6eb;
}
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
    color-scheme: dark;
}
html.dark-mode .modal-header,
html.dark-mode .modal-footer {
    border-color: #3a3b3c;
}
html.dark-mode label,
html.dark-mode .form-label {
    color: #e4e6eb;
}
html.dark-mode .card-body {
    color: #e4e6eb;
}
html.dark-mode .story-gallery-img {
    border: 1px solid #3a3b3c;
}


/* ============================================================
   VIDEO FACADE (click-to-load thumbnail for YouTube/Vimeo/Rumble/
   Dailymotion embeds - nothing loads or consumes data until clicked
   or held for ~3 seconds)
   ============================================================ */
.video-facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}
.video-facade-fallback {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #2b2b2b, #111);
    z-index: 0;
}
.video-facade-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* hqdefault.jpg is 4:3, forced into a 16:9 box - "contain" letterboxes
       it (whole image visible, small black bars top/bottom) instead of
       cropping/distorting it like "cover" would. */
    object-fit: contain;
    z-index: 1;
}
.video-facade-icon {
    position: absolute;
    top: 10px;
    left: 12px;
    font-size: 22px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    z-index: 2;
}
.video-facade-play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(220, 53, 69, 0.9);
    color: #fff;
    font-size: 24px;
    transition: transform 0.15s ease, background 0.15s ease;
    z-index: 2;
}
.video-facade-play i { margin-left: 3px; } /* optical centering for the play triangle */
.video-facade:hover .video-facade-play {
    transform: scale(1.08);
    background: rgba(220, 53, 69, 1);
}
.video-facade-holding .video-facade-play {
    animation: videoHoldPulse 0.6s ease-in-out infinite;
    background: rgba(220, 53, 69, 1);
}
@keyframes videoHoldPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}
.video-facade-badge {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
}

/* Custom dark mode toggle - a small sliding pill switch, guaranteed to
   animate since it's a plain positioned div being moved via CSS
   transition, not dependent on any framework's built-in switch
   behavior (which was not visibly animating for some users, especially
   inside a Bootstrap offcanvas nav menu). */
.dm-toggle {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    background: #ccd0d5;
    border-radius: 999px;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}
html.dark-mode .dm-toggle {
    background: #3a3b3c;
}
.dm-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    color: #f7b500;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: left 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.dm-toggle-thumb.on {
    left: 24px;
    background: #1c1e21;
    color: #a9b1ff;
}

/* ============================================================
   NAVBAR ICON ROW — shared across index.php, profile.php,
   messages.php, notifications.php, edit_profile.php,
   admin_dashboard.php. One consistent circular-icon treatment
   instead of a mix of text buttons and bare avatar images, so
   the row stays tidy and doesn't crowd on mobile.
   ============================================================ */
.navbar-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    margin-left: auto;
}
.nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f0f2f5;
    color: #444950;
    border: none;
    text-decoration: none;
    font-size: 15px;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.nav-icon-btn:hover, .nav-icon-btn:focus { background: #e4e6eb; color: #1c1e21; }
.nav-icon-avatar { padding: 0; overflow: hidden; background: none; }
.nav-icon-avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e4e6eb;
}
.nav-icon-danger { background: #fdecea; color: #dc3545; }
.nav-icon-danger:hover { background: #fbd7d3; color: #b02a37; }
@media (max-width: 400px) {
    .nav-icon-btn { width: 32px; height: 32px; font-size: 14px; }
    .nav-icon-avatar img { width: 32px; height: 32px; }
    .navbar-icons { gap: 5px; }
}
html.dark-mode .nav-icon-btn { background: #3a3b3c; color: #e4e6eb; }
html.dark-mode .nav-icon-btn:hover { background: #4a4b4c; }
html.dark-mode .nav-icon-danger { background: #4a2a2a; color: #ff6b6b; }