/* MLNF Features CSS - Page-specific features loaded last */
/* Version: 5.4.0 - Fixed mysterious dot and mobile text spacing */
/* Last Updated: 2025-07-06 */
/* Performance: Asynchronously loaded after core styles for enhanced UI features */

/* ==========================================
   HIGHLIGHT ITEM & DEBATE POSITION STYLING
   ========================================== */

.highlight-item,
.debate-position {
    background: linear-gradient(135deg, 
        rgba(var(--accent-rgb, 255, 94, 120), 0.12) 0%,
        rgba(26, 26, 51, 0.8) 50%,
        rgba(13, 13, 26, 0.9) 100%);
    padding: 2rem;
    border-radius: 16px;
    border: 2px solid rgba(var(--accent-rgb, 255, 94, 120), 0.3);
    border-left: 6px solid var(--accent);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(var(--accent-rgb, 255, 94, 120), 0.1),
        inset 0 1px 0 rgba(240, 230, 255, 0.1);
}

.highlight-item:hover,
.debate-position:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: rgba(var(--accent-rgb, 255, 94, 120), 0.5);
    box-shadow: 
        0 16px 40px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(var(--accent-rgb, 255, 94, 120), 0.3),
        inset 0 2px 0 rgba(240, 230, 255, 0.2);
}

/* Add mystical glow effect */
.highlight-item::before,
.debate-position::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, 
        rgba(var(--accent-rgb, 255, 94, 120), 0.05) 0%, 
        transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: -1;
}

.highlight-item:hover::before,
.debate-position:hover::before {
    opacity: 1;
}

/* Enhanced heading styling for highlight items */
.highlight-item h4,
.debate-position h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 1rem;
    line-height: 1.3;
    letter-spacing: 0.02em;
    transition: var(--transition);
}

/* Fallback for browsers that don't support background-clip */
@supports not (background-clip: text) {
    .highlight-item h4,
    .debate-position h4 {
        color: var(--accent);
    }
}

/* Light theme support for headings */
body.light-theme .highlight-item h4,
body.light-theme .debate-position h4 {
    background: linear-gradient(135deg, var(--accent), var(--highlight));
    -webkit-background-clip: text;
    background-clip: text;
}

/* Chronicles highlight card enhancements */
.chronicle-highlight-card {
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    color: inherit;
    display: block;
}

.chronicle-highlight-card:hover {
    transform: translateY(-12px) scale(1.04);
    text-decoration: none;
    color: inherit;
}

.chronicle-highlight-card:visited {
    color: inherit;
}

/* Prominent title styling for Chronicles highlights */
.chronicle-title-prominent {
    font-size: 1.9rem !important;
    margin-bottom: 1.25rem !important;
    line-height: 1.2 !important;
}

/* Chronicle excerpt with reduced prominence */
.chronicle-excerpt {
    font-size: 1rem !important;
    opacity: 0.85 !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
}

/* Chronicle Author Display - Legacy Support */
.chronicle-author-display,
.author-avatar,
.author-username {
    /* Backward compatibility - Use Nexus Avatar System for new implementations */
    opacity: 0.9;
    transition: var(--transition);
}

/* Read more indicator */
.read-more-indicator {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* ==========================================
   SOUL SCROLLS HIGHLIGHT SECTION - Enhanced Design
   ========================================== */

/* Soul Scrolls Section - Additional specific styling */
#blog {
    z-index: 1;
}

/* Remove distracting animated artifact - keep section clean */



/* Enhanced section title for Soul Scrolls */
#blogHeading {
    /* Use consistent styling with other section headings */
    position: relative;
    z-index: 1;
}

@keyframes soulTitlePulse {
    0%, 100% { 
        text-shadow: 0 0 20px rgba(var(--accent-rgb, 255, 94, 120), 0.4);
        transform: scale(1);
    }
    50% { 
        text-shadow: 
            0 0 30px rgba(var(--accent-rgb, 255, 94, 120), 0.8),
            0 0 50px rgba(255, 202, 40, 0.4);
        transform: scale(1.02);
    }
}

/* Soul Scroll Highlight Cards - Refined Elegant Design */
.scroll-highlight-card {
    background: linear-gradient(135deg,
        rgba(26, 26, 51, 0.9) 0%,
        rgba(42, 64, 102, 0.85) 50%,
        rgba(26, 26, 51, 0.92) 100%);
    border: 2px solid rgba(var(--accent-rgb, 255, 94, 120), 0.25);
    border-radius: 20px;
    padding: 3rem 2.5rem !important;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(12px);
    transition: all 0.3s ease;
    z-index: 1;
    text-decoration: none !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(var(--accent-rgb, 255, 94, 120), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Remove underlines from all elements inside scroll highlight cards */
.scroll-highlight-card * {
    text-decoration: none !important;
}

/* Echo Highlight Cards - Enhanced Visibility */
.echo-highlight-card {
    background: linear-gradient(135deg,
        rgba(26, 26, 51, 0.9) 0%,
        rgba(42, 64, 102, 0.85) 50%,
        rgba(26, 26, 51, 0.95) 100%);
    border: 2px solid rgba(var(--accent-rgb, 255, 94, 120), 0.4);
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(var(--accent-rgb, 255, 94, 120), 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-decoration: none !important;
}

.echo-highlight-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(var(--accent-rgb, 255, 94, 120), 0.6);
    box-shadow: 
        0 16px 48px rgba(0, 0, 0, 0.7),
        0 0 30px rgba(var(--accent-rgb, 255, 94, 120), 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.15);
}

/* Remove underlines from all elements inside echo highlight cards */
.echo-highlight-card * {
    text-decoration: none !important;
}

/* Echo Title - Enhanced Typography */
.echo-title-prominent {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    background: var(--gradient-accent) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    margin-bottom: 1rem !important;
    line-height: 1.3 !important;
    letter-spacing: 0.02em !important;
    transition: var(--transition);
    text-decoration: none !important;
    text-shadow: 0 0 8px rgba(var(--accent-rgb, 255, 94, 120), 0.3);
}

/* Echo Excerpt - Enhanced Readability */
.echo-excerpt {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 1.5rem !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
    position: relative;
}

/* Echo Author - Enhanced Styling */
.echo-author {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    margin-bottom: 1rem !important;
}

/* Enhanced metadata section for echo cards */
.echo-highlight-card .highlight-meta {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(var(--accent-rgb, 255, 94, 120), 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.echo-highlight-card .date {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-style: italic;
}

.echo-highlight-card .read-more-indicator {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.9rem;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.echo-highlight-card:hover .read-more-indicator {
    color: var(--text);
    transform: translateX(3px);
    opacity: 1;
}

/* Subtle border glow effect */
.scroll-highlight-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(45deg,
        rgba(var(--accent-rgb, 255, 94, 120), 0.3),
        rgba(255, 202, 40, 0.2),
        rgba(var(--accent-rgb, 255, 94, 120), 0.3));
    background-size: 200% 200%;
    border-radius: 21px;
    z-index: -1;
    opacity: 0;
    animation: subtleBorderGlow 6s ease-in-out infinite;
    transition: opacity 0.3s ease;
}

/* Subtle border animation */
@keyframes subtleBorderGlow {
    0%, 100% { 
        background-position: 0% 50%; 
        opacity: 0;
    }
    50% { 
        background-position: 100% 50%; 
        opacity: 0.4;
    }
}

/* Gentle title shimmer */
@keyframes titleShimmer {
    0%, 100% { 
        background-position: 0% 50%; 
    }
    50% { 
        background-position: 100% 50%; 
    }
}

@keyframes scrollBorderGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* .scroll-highlight-card:hover::before - removed */

/* Outer card hover effect removed - only inner elements animate */

/* Soul Scroll Title - Clean Typography */
.scroll-title-prominent {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg,
        var(--accent) 0%,
        rgba(255, 202, 40, 0.9) 50%,
        var(--accent) 100%) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.3 !important;
    letter-spacing: 0.01em !important;
    animation: titleShimmer 8s ease-in-out infinite !important;
    transition: var(--transition);
    text-decoration: none !important;
}

/* Soul Scroll Content - Spacious Design */
.scroll-highlight-card .scroll-excerpt {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 2.5rem !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    font-weight: 400 !important;
    letter-spacing: 0.002em !important;
}

/* Enhanced metadata section for scroll cards */
.scroll-highlight-card .highlight-meta {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(var(--accent-rgb, 255, 94, 120), 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.scroll-highlight-card .date {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
    font-style: italic;
    font-weight: 500;
}

/* Subtle read-more indicator for scroll cards */
.scroll-highlight-card .read-more-indicator {
    color: rgba(255, 202, 40, 0.8);
    font-weight: 600;
    font-size: 0.9rem;
    opacity: 0.8;
    transition: all 0.3s ease;
}

/* .scroll-highlight-card:hover .read-more-indicator - Transform removed to prevent 3D context */
.scroll-highlight-card:hover .read-more-indicator {
    color: rgba(255, 202, 40, 0.95);
    /* transform: translateX(3px); - REMOVED: This was creating the 3D pop-out effect */
    opacity: 1;
}

/* Mobile responsiveness with better spacing */
@media (max-width: 768px) {
    .scroll-highlight-card {
        padding: 3rem 3rem !important;
        border-radius: 18px;
        margin-bottom: 2rem;
    }
    
    .scroll-title-prominent {
        font-size: 1.5rem !important;
        margin-bottom: 1.25rem !important;
    }
    
    .scroll-highlight-card .scroll-excerpt {
        font-size: 1rem !important;
        line-height: 1.65 !important;
        margin-bottom: 2rem !important;
    }
    
    .scroll-highlight-card .highlight-meta {
        margin-top: 2rem;
        padding-top: 1.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .scroll-highlight-card .date {
        display: block;
        margin-bottom: 0.5rem;
    }
    
    /* Mobile: Outer card hover effect removed */
}

/* Extra spacing for very small mobile screens */
@media (max-width: 480px) {
    .scroll-highlight-card {
        padding: 2.5rem 2.5rem !important;
        margin: 0 1rem 2rem 1rem;
    }
}

/* Enhanced Scroll Excerpt */
.scroll-excerpt {
    font-size: 1.1rem !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 2rem !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    position: relative;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.01em;
}

/* Enhanced metadata section */
.scroll-highlight-card .highlight-meta {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: none; /* Remove harsh line */
    position: relative;
    z-index: 2;
}

/* Elegant separator for metadata */
.scroll-highlight-card .highlight-meta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 94, 120, 0.3) 20%,
        rgba(255, 202, 40, 0.5) 50%,
        rgba(255, 94, 120, 0.3) 80%,
        transparent 100%);
    transform: translateX(-50%);
    box-shadow: 0 0 8px rgba(var(--accent-rgb, 255, 94, 120), 0.2);
}

/* Enhanced date styling */
.scroll-highlight-card .date {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-style: italic;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Enhanced read more indicator */
.scroll-highlight-card .read-more-indicator {
    color: var(--accent);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    opacity: 0.8;
    position: relative;
    transition: all 0.3s ease;
}

.scroll-highlight-card:hover .read-more-indicator {
    color: var(--text);
    transform: translateX(3px);
}

/* Enhanced avatar styling for scroll highlights */
.scroll-highlight-card .nexus-user-display {
    background: rgba(var(--accent-rgb, 255, 94, 120), 0.08);
    border: 1px solid rgba(var(--accent-rgb, 255, 94, 120), 0.2);
    border-radius: 12px;
    padding: 0.75rem;
    transition: all 0.3s ease;
}

.scroll-highlight-card:hover .nexus-user-display {
    background: rgba(var(--accent-rgb, 255, 94, 120), 0.12);
    border-color: rgba(var(--accent-rgb, 255, 94, 120), 0.3);
    transform: translateY(-2px);
}

.scroll-highlight-card .nexus-avatar {
    border: 2px solid rgba(var(--accent-rgb, 255, 94, 120), 0.4);
    box-shadow: 
        0 0 12px rgba(var(--accent-rgb, 255, 94, 120), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.scroll-highlight-card:hover .nexus-avatar {
    border-color: rgba(var(--accent-rgb, 255, 94, 120), 0.7);
    box-shadow: 
        0 0 20px rgba(var(--accent-rgb, 255, 94, 120), 0.5),
        inset 0 2px 0 rgba(255, 255, 255, 0.2);
}

/* Enhanced username styling in scroll highlights */
.scroll-highlight-card .nexus-username {
    color: rgba(255, 202, 40, 0.9);
    text-shadow: 0 0 8px rgba(255, 202, 40, 0.3);
}

.scroll-highlight-card .nexus-user-title {
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
}

/* Removed floating particle effect - was causing unwanted dots */

@keyframes soulParticle {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.4;
    }
    25% {
        transform: translate(-10px, -15px) scale(1.2);
        opacity: 0.8;
    }
    50% {
        transform: translate(5px, -25px) scale(0.8);
        opacity: 0.4;
    }
    75% {
        transform: translate(15px, -10px) scale(1.1);
        opacity: 0.7;
    }
}

.highlight-item p,
.debate-position p {
    font-size: 1.1rem;
    line-height: 1.7;
    opacity: 0.95;
    letter-spacing: 0.02em;
}

.highlight-meta {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--accent-rgb, 255, 94, 120), 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.highlight-meta .date {
    color: var(--text);
    opacity: 0.7;
}

.highlight-meta .read-more {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.highlight-meta .read-more:hover {
    color: var(--text);
    transform: translateX(3px);
}

/* ==========================================
   ENHANCED CHRONICLES SECTION
   ========================================== */

/* Enhanced Chronicles Section - Additional specific styling */
#news {
    position: relative;
}


#newsHeading {
    font-family: 'Cinzel', serif;
    background: linear-gradient(135deg, var(--accent), rgba(255, 202, 40, 0.9));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 20px rgba(var(--accent-rgb, 255, 94, 120), 0.5);
    position: relative;
}


/* ==========================================
   DEBATE ARENA SPECIFIC SECTION
   ========================================== */

/* Debate Arena Specific Section - Additional specific styling */
.highlights.debate-arena {
    width: calc(100% - 4rem) !important;
}

.debate-arena .section-title {
    margin-bottom: 2rem;
}

.debate-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    align-items: stretch;
    margin-top: 2rem;
}

/* ==========================================
   MINDMAP PREVIEW SECTION
   ========================================== */

/* Mindmap Preview Section - Consistent with highlight sections */
.mindmap-preview {
    height: 500px;
    background: linear-gradient(135deg, 
        rgba(26, 26, 51, 0.9) 0%,
        rgba(42, 64, 102, 0.85) 50%,
        rgba(13, 13, 26, 0.95) 100%);
    border-radius: 24px;
    position: relative;
    margin: 3rem auto;
    border: 2px solid rgba(255, 94, 120, 0.25);
    max-width: 1440px;
    overflow: hidden;
}

.mindmap-node {
    position: absolute;
    background: var(--accent);
    color: var(--primary);
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
    animation: floatEternal 4.5s ease-in-out infinite;
}

.mindmap-node:hover {
    transform: scale(1.12);
    animation-play-state: paused;
    box-shadow: 0 0 15px rgba(var(--accent-rgb, 255, 94, 120), 0.5);
}

.mindmap-line {
    position: absolute;
    background: var(--accent);
    height: 3px;
}

/* ==========================================
   PROFILE PREVIEW MODAL SYSTEM
   ========================================== */

/* Interactive user display hover effects */
.nexus-user-display--interactive {
    transition: all 0.3s ease;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.nexus-user-display--interactive::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(var(--accent-rgb, 255, 94, 120), 0.1) 0%,
        rgba(var(--secondary-rgb, 76, 175, 80), 0.1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.nexus-user-display--interactive:hover::before {
    opacity: 1;
}

.nexus-user-display--interactive:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(var(--accent-rgb, 255, 94, 120), 0.2);
}

.nexus-user-display--interactive:hover .nexus-username:not(.nexus-username--mystical):not(.nexus-username--immortal):not(.nexus-username--eternal) {
    color: var(--accent);
    text-shadow: 0 0 8px rgba(var(--accent-rgb, 255, 94, 120), 0.5);
}

.nexus-user-display--interactive:hover .nexus-avatar {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(var(--accent-rgb, 255, 94, 120), 0.3);
}

/* Profile Preview Modal */
.nexus-profile-preview {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.nexus-profile-preview--visible {
    opacity: 1;
    visibility: visible;
}

.nexus-profile-preview--closing {
    opacity: 0;
    visibility: hidden;
}

.nexus-profile-preview__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
}

.nexus-profile-preview__content {
    position: relative;
    background: var(--background-elevated);
    border-radius: 16px;
    max-width: 480px;
    width: 90vw;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(var(--accent-rgb, 255, 94, 120), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.nexus-profile-preview--visible .nexus-profile-preview__content {
    transform: scale(1);
}

.nexus-profile-preview__header {
    position: relative;
    padding: 1.5rem;
    background: linear-gradient(135deg, 
        rgba(var(--accent-rgb, 255, 94, 120), 0.1) 0%,
        rgba(var(--secondary-rgb, 76, 175, 80), 0.1) 100%);
    border-bottom: 1px solid rgba(var(--accent-rgb, 255, 94, 120), 0.2);
}

.nexus-profile-preview__loading {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-secondary);
}

.nexus-loading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(var(--accent-rgb, 255, 94, 120), 0.3);
    border-top: 2px solid var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.nexus-profile-preview__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    color: var(--text-primary);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.2s ease;
}

.nexus-profile-preview__close:hover {
    background: var(--accent);
    color: white;
    transform: scale(1.1);
}

.nexus-profile-preview__body {
    padding: 1.5rem;
    max-height: 400px;
    overflow-y: auto;
}

.nexus-profile-preview__bio {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(var(--accent-rgb, 255, 94, 120), 0.2);
}

.nexus-profile-preview__bio h4 {
    color: var(--accent);
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

.nexus-profile-preview__bio p {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.95rem;
}

.nexus-profile-preview__stats {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(var(--accent-rgb, 255, 94, 120), 0.2);
}

.nexus-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.nexus-stat {
    text-align: center;
    padding: 1rem;
    background: rgba(var(--accent-rgb, 255, 94, 120), 0.05);
    border-radius: 8px;
    border: 1px solid rgba(var(--accent-rgb, 255, 94, 120), 0.1);
}

.nexus-stat__value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--accent);
    font-family: 'Cinzel', serif;
}

.nexus-stat__label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    font-family: 'Caesar Dressing', serif;
}

.nexus-profile-preview__actions {
    padding: 1.5rem;
    background: rgba(var(--background-elevated), 0.5);
    border-top: 1px solid rgba(var(--accent-rgb, 255, 94, 120), 0.2);
    display: flex;
    gap: 1rem;
}

.nexus-profile-preview__actions .nexus-btn {
    flex: 1;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.nexus-btn--primary {
    background: var(--accent);
    color: white;
}

.nexus-btn--primary:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--accent-rgb, 255, 94, 120), 0.3);
}

.nexus-btn--accent {
    background: rgba(var(--secondary-rgb, 76, 175, 80), 0.1);
    color: var(--secondary);
    border: 1px solid rgba(var(--secondary-rgb, 76, 175, 80), 0.3);
}

.nexus-btn--accent:hover {
    background: var(--secondary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--secondary-rgb, 76, 175, 80), 0.3);
}

/* ==========================================
   FOOTER STYLES
   ========================================== */

/* Footer Styles */
footer {
    background: var(--gradient-secondary);
    border-top: 3px solid var(--accent);
    padding: 2rem 2rem 1.5rem 2rem;
    margin-top: auto; /* Pushes footer to bottom if content is short */
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto !important;
}

.footer-links-grid {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.footer-feedback-section {
    text-align: center;
    margin-bottom: var(--space-2);
}

.footer-divider {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 94, 120, 0.3), transparent);
    margin: var(--space-2) 0 var(--space-1) 0;
}

.footer-column {
    text-align: center;
    min-width: 200px;
}

.footer-column h3 {
    color: var(--accent);
    font-size: 1rem;
    margin-bottom: var(--space-2);
    font-weight: 600;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: var(--space-1);
}

.footer-column ul li a {
    color: var(--text);
    text-decoration: none;
    font-size: 0.95rem;
    transition: var(--transition);
    opacity: 0.9;
}

.footer-column ul li a:hover {
    color: var(--accent);
    opacity: 1;
    transform: translateX(5px);
}

.footer-bottom {
    text-align: center;
    border-top: none !important;
    padding-top: 0 !important;
}

.footer-bottom p {
    font-size: 0.9rem;
    line-height: 1.4;
    opacity: 0.9;
    margin-bottom: var(--space-1);
}

.social-links {
    margin-top: var(--space-2);
    display: flex;
    justify-content: center;
    gap: var(--space-4);
}

.social-links a {
    color: var(--text);
    font-size: 1.5rem;
    transition: var(--transition);
}

.social-links a:hover {
    color: var(--accent);
    transform: scale(1.2) rotate(5deg);
}

/* ==========================================
   SPECIALTY ANIMATIONS
   ========================================== */

@keyframes pulseGlow { /* Used by logo icon */
    0%, 100% { transform: scale(1); opacity: 0.8; box-shadow: 0 0 5px rgba(var(--accent-rgb,255,94,120),0.2); }
    50% { transform: scale(1.05); opacity: 1; box-shadow: 0 0 15px rgba(var(--accent-rgb,255,94,120),0.4); }
}

@keyframes floatEternal { /* Used by mindmap nodes */
    0%, 100% { transform: translateY(0px) translateX(0px); }
    25% { transform: translateY(-8px) translateX(3px); }
    50% { transform: translateY(-3px) translateX(-2px); }
    75% { transform: translateY(-12px) translateX(1px); }
}

/* ==========================================
   FLOATING ACTION BUTTONS
   ========================================== */

/* Floating Action Buttons */
.floating-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important; /* Increased gap to prevent overlap */
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    z-index: 1000 !important;
}

/* Theme toggle button positioning and sizing */
.floating-buttons .theme-toggle,
.floating-buttons #themeToggle,
#themeToggle {
    position: static !important; /* Remove fixed positioning from active-users.css */
    bottom: auto !important;
    right: auto !important;
    order: 2 !important; /* Theme toggle second */
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    margin: 0 !important;
}

/* Active users button positioning and sizing */
.floating-buttons .show-users-btn,
.floating-buttons #showUsersBtn {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    order: 1 !important; /* Active users button first */
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    margin: 0 !important;
}

/* Z-index management */
body .floating-buttons button.show-users-btn#showUsersBtn {
    z-index: 1001 !important;
}

body .floating-buttons button.theme-toggle#themeToggle {
    z-index: 1001 !important; /* Same z-index since they don't overlap now */
}

.top-button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--primary); /* Ensure good contrast */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-size: 1.2rem;
    opacity: 0; /* Hidden by default, made visible by JS */
    transform: translateY(20px); /* Start off-screen for animation */
    pointer-events: none; /* Not interactive when hidden */
}

.top-button.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.top-button:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    background: var(--highlight); /* Or a slightly different accent shade */
}

/* ==========================================
   ECHOES UNBOUND AGORA SECTION
   ========================================== */

/* Echoes Unbound Agora Section - Greek Democracy Theme */
/* Unified Highlight Section Styling - Consistent Modern Card Style */
.highlights {
    background: linear-gradient(135deg, 
        rgba(26, 26, 51, 0.9) 0%,
        rgba(42, 64, 102, 0.85) 50%,
        rgba(13, 13, 26, 0.95) 100%);
    border-radius: 24px;
    padding: 4rem 2rem;
    margin: 3rem auto;
    max-width: 1440px;
    border: 2px solid rgba(255, 94, 120, 0.25);
    position: relative;
    overflow: hidden;
}

/* Add top gradient line to all highlight sections */
.highlights::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 6px !important;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #ff5e78 20%, 
        #ffca28 50%, 
        #ff5e78 80%, 
        transparent 100%) !important;
    pointer-events: none !important;
    z-index: 100 !important;
    border-radius: 0 !important;
    display: block !important;
    animation: none !important;
}

/* Removed duplicate border - using clean border-image instead */

/* Add subtle overlay effect to all highlight sections */
.highlights::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 94, 120, 0.03) 0%, transparent 50%, rgba(255, 202, 40, 0.03) 100%);
    pointer-events: none;
}

.agora-subtitle {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.agora-subtitle i {
    color: var(--accent);
}

.souls-highlight-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin: 3rem auto;
    position: relative;
    z-index: 1;
    max-width: 900px;
    align-items: stretch;
    animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.soul-highlight-card {
    background: var(--background-secondary);
    border-radius: 16px;
    padding: 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    position: relative;
    overflow: hidden;
    min-height: 480px;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.soul-highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
                rgba(255, 94, 120, 0.02) 0%, 
                transparent 50%, 
                rgba(255, 94, 120, 0.02) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.soul-highlight-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 94, 120, 0.15);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15),
                0 0 0 1px rgba(255, 94, 120, 0.05);
}

.soul-highlight-card:hover::before {
    opacity: 1;
}

.soul-card-founder {
    background: linear-gradient(135deg, 
                rgba(255, 94, 120, 0.08) 0%, 
                rgba(255, 202, 40, 0.08) 100%);
    position: relative;
}

.soul-card-founder::before {
    background: linear-gradient(45deg, transparent, #ffca28, #ff5e78, transparent);
}

/* Remove decorative icons - they were causing issues */

.soul-card-featured {
    background: linear-gradient(135deg, 
                rgba(74, 222, 128, 0.08) 0%, 
                rgba(96, 165, 250, 0.08) 100%);
}

.soul-card-featured::before {
    background: linear-gradient(45deg, transparent, #60a5fa, #4ade80, transparent);
}

/* Featured card styling handled by gradient borders */

.soul-card-content {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    min-height: 200px;
    gap: 1rem;
}

.soul-display-container {
    margin: 2rem 0;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    padding: 1.5rem;
    position: relative;
    background: radial-gradient(circle at center, 
                rgba(255, 255, 255, 0.02) 0%, 
                transparent 70%);
    border-radius: 50%;
}

.soul-display-container::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle at center,
                rgba(255, 94, 120, 0.05) 0%,
                transparent 60%);
    filter: blur(15px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.soul-highlight-card:hover .soul-display-container::before {
    opacity: 0.6;
}

.loading-soul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--text-secondary);
}

.soul-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 94, 120, 0.3);
    border-top: 3px solid var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.soul-highlight-card .soul-card-actions {
    display: flex !important;
    gap: 1rem;
    justify-content: center !important;
    align-items: stretch;
    margin-top: 2rem;
    flex-wrap: nowrap;
    width: 100%;
    padding: 0 !important;
    flex-shrink: 0;
    box-sizing: border-box;
}

.soul-highlight-card .soul-message-btn, 
.soul-highlight-card .soul-profile-btn {
    background: linear-gradient(135deg, #ff5e78, #ff8fa3) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: 25px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    flex: 1;
    min-width: 0;
    max-width: 130px;
    text-align: center !important;
    margin: 0 !important;
    display: inline-flex !important;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-transform: none;
    letter-spacing: normal;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.soul-highlight-card .soul-profile-btn {
    background: linear-gradient(135deg, #1a1a33, #2a4066) !important;
    border: 1px solid rgba(255, 94, 120, 0.3) !important;
}

.soul-card-featured .soul-message-btn {
    background: linear-gradient(135deg, #4ade80, #60a5fa) !important;
}

.soul-profile-btn {
    background: linear-gradient(135deg, rgba(26, 26, 51, 0.9), rgba(42, 64, 102, 0.8));
    border: 2px solid var(--accent);
}

.soul-highlight-card .soul-message-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(255, 94, 120, 0.3);
}

.soul-highlight-card .soul-profile-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(42, 64, 102, 0.3);
    border-color: rgba(255, 94, 120, 0.4) !important;
    background: rgba(42, 64, 102, 0.9) !important;
}

.soul-card-featured .soul-message-btn:hover {
    box-shadow: 0 5px 16px rgba(74, 222, 128, 0.3);
}

.soul-card-featured .soul-message-btn {
    background: linear-gradient(135deg, #4ade80, #60a5fa);
}

.soul-card-featured .soul-message-btn:hover {
    box-shadow: 0 8px 25px rgba(74, 222, 128, 0.4);
}

/* Agora Preview Section */
.agora-preview {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid rgba(255, 94, 120, 0.2);
    position: relative;
    z-index: 1;
}

.agora-info {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}

.agora-info i {
    color: var(--accent);
    font-size: 1.5rem;
    margin-bottom: 1rem;
    display: block;
}

.agora-info p {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.agora-info small {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Soul Highlight Avatar Customization */
.soul-highlight-card .nexus-user-display {
    background: transparent;
    border: none;
    padding: 0;
}

.soul-highlight-card .nexus-user-display--lg {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
}

.soul-highlight-card .nexus-avatar--xl {
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.soul-highlight-card:hover .nexus-avatar--xl {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    transform: scale(1.02);
}

.soul-highlight-card .nexus-username--mystical {
    /* Font now properly inherited from !important rules above */
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
    background: linear-gradient(45deg, var(--accent), #ffca28);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    font-weight: 700;
}

.soul-highlight-card .nexus-user-title {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.soul-highlight-card .nexus-user-status {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-muted);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

/* Enhanced Loading Animation */
.soul-loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 94, 120, 0.2);
    border-top: 3px solid var(--accent);
    border-radius: 50%;
    animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Responsive Design for Soul Highlight Cards */
@media (max-width: 768px) {
    .souls-highlight-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin: 2rem auto;
        animation: mobileSlideUp 0.8s ease-out;
    }
    
    .soul-highlight-card {
        min-height: 450px;
        padding: 2.5rem 2rem;
        transform: none !important;
        margin-bottom: 1rem;
    }
    
    .soul-highlight-card:hover {
        transform: translateY(-5px) !important;
    }
    
    .soul-display-container {
        min-height: 180px;
        padding: 1rem;
    }
    
    .soul-highlight-card .soul-card-actions {
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 2rem;
    }
    
    .soul-highlight-card .soul-message-btn, 
    .soul-highlight-card .soul-profile-btn {
        min-width: 120px;
        max-width: none;
        flex: 1 1 45%;
        padding: 1rem 1.5rem !important;
        font-size: 0.875rem !important;
    }
}

@keyframes mobileSlideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}"

@media (max-width: 480px) {
    .soul-highlight-card {
        padding: 2rem 1.5rem;
        min-height: 400px;
    }
    
    .soul-highlight-card .soul-message-btn, 
    .soul-highlight-card .soul-profile-btn {
        flex: 1 1 100%;
        max-width: none;
        margin-bottom: 0.5rem;
    }
    
    .soul-highlight-card .nexus-username--mystical {
        font-size: 1.3rem;
    }
}

/* ==========================================
   ANONYMOUS MESSAGE MODAL STYLING
   ==========================================

/* Anonymous Message Modal Styling */
.anonymous-message-modal {
    max-width: 500px;
}

.anonymous-message-modal h3 {
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.recipient-info {
    background: var(--background-tertiary);
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--accent);
}

.recipient-info p {
    margin: 0;
    font-style: italic;
    color: var(--text-secondary);
}

.anonymous-message-modal .form-group {
    margin-bottom: 1.2rem;
}

.anonymous-message-modal label {
    display: block;
    color: var(--text);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.anonymous-message-modal input[type="text"] {
    width: 100%;
    padding: 0.8rem;
    background: var(--background-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text);
    font-size: 1rem;
    transition: var(--transition);
}

.anonymous-message-modal input[type="text"]:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 10px rgba(255, 94, 120, 0.3);
}

.anonymous-message-modal textarea {
    width: 100%;
    min-height: 120px;
    padding: 1rem;
    background: var(--background-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
    transition: var(--transition);
}

.anonymous-message-modal textarea:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 10px rgba(255, 94, 120, 0.3);
}

.anonymous-message-modal small {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.85rem;
    margin-top: 0.3rem;
    display: block;
}

/* Error/Loading States for Soul Cards */
.error-soul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--text-secondary);
    padding: 2rem;
}

.error-soul i {
    font-size: 2rem;
    color: var(--accent);
    opacity: 0.7;
}


/* ==========================================
   MODAL STATES & BUTTON OVERRIDES
   ========================================== */

/* Styles for .modal-loading and .modal-error if used by JS directly */
.modal-loading {
    text-align: center;
    padding: 1rem;
    color: var(--highlight);
}

.modal-error {
    color: var(--danger);
    text-align: center;
    padding: 0.5rem;
}

/* Removed center alignment - now using proper section-footer structure */

/* Unified CTA button styling - works in any highlight section container */
.highlight-grid > .btn.btn-primary,
.section-footer .btn.btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.7rem 1.25rem !important;
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
    height: fit-content !important;
    align-self: center !important;
    margin: 0 !important;
    border-radius: var(--border-radius) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    color: var(--primary) !important;
    background: linear-gradient(to bottom, #ff5e78, #ff8f00) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow:
        0 0 8px rgba(255, 94, 120, 0.3),
        0 0 15px rgba(255, 94, 120, 0.2),
        inset 0 0 5px rgba(255, 255, 255, 0.1) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    animation: none !important;
    position: relative !important;
    z-index: 5 !important;
    white-space: nowrap !important;
    min-width: 140px !important;
    max-width: 200px !important;
}

.highlight-grid > .btn.btn-primary:hover,
.section-footer .btn.btn-primary:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow:
        0 0 12px rgba(255, 94, 120, 0.5),
        0 0 25px rgba(255, 94, 120, 0.3),
        inset 0 0 8px rgba(255, 255, 255, 0.15) !important;
}

/* ==========================================
   SOUL SCROLLS RESPONSIVE DESIGN
   ========================================== */

/* Tablet responsive adjustments for Soul Scrolls */
@media (max-width: 1024px) {
    #blog {
        padding: 3rem 1.5rem;
        border-radius: 20px;
    }
    
    .scroll-title-prominent {
        font-size: 1.7rem !important;
    }
    
    .scroll-highlight-card {
        padding: 2rem;
    }
}

/* Mobile responsive adjustments for Soul Scrolls */
@media (max-width: 768px) {
    #blog {
        padding: 2.5rem 1rem;
        margin: 2rem auto;
        border-radius: 16px;
    }
    
    #blogHeading {
        font-size: 2.2rem;
    }
    
    .scroll-title-prominent {
        font-size: 1.5rem !important;
        margin-bottom: 1.2rem !important;
    }
    
    .scroll-excerpt {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .scroll-highlight-card {
        padding: 1.5rem;
        border-radius: 16px;
    }
    
    .scroll-highlight-card .highlight-meta::before {
        width: 80%;
    }
}

/* Soul Highlight Card Tablet/Medium Screen Fixes */
@media (max-width: 768px) and (min-width: 481px) {
    .souls-highlight-container .soul-highlight-card {
        padding: 1.8rem;
        margin: 0 auto;
        text-align: center;
        width: 100%;
        max-width: 500px;
    }
    
    .soul-card-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
    .soul-card-actions {
        flex-direction: row;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 1.5rem;
    }
    
    .soul-message-btn, .soul-profile-btn {
        flex: 0 1 auto;
        min-width: 140px;
        max-width: 180px;
        padding: 0.9rem 1.2rem;
    }
}

@media (max-width: 480px) {
    #blog {
        padding: 2rem 0.75rem;
        border-radius: 12px;
    }
    
    #blogHeading {
        font-size: 1.8rem;
    }
    
    .scroll-title-prominent {
        font-size: 1.3rem !important;
    }
    
    .scroll-highlight-card {
        padding: 1.2rem;
    }
    
    .scroll-highlight-card .nexus-user-display {
        padding: 0.5rem;
    }
    
    .scroll-highlight-card .read-more-indicator {
        font-size: 0.9rem;
    }
    
    /* Soul Highlight Card Mobile Fixes */
    .soul-highlight-card {
        padding: 1.5rem;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .soul-card-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .soul-display-container {
        margin: 1rem 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .soul-card-actions {
        width: 100%;
        justify-content: center;
        gap: 0.8rem;
        margin-top: 1rem;
        flex-direction: column;
    }
    
    .soul-message-btn, .soul-profile-btn {
        width: 100%;
        max-width: 200px;
        justify-content: center;
        padding: 0.8rem 1rem;
        font-size: 0.85rem;
    }
}

/* ==========================================
   RESPONSIVE FEATURES
   ========================================== */

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .nexus-profile-preview__content {
        max-width: 95vw;
        max-height: 90vh;
    }
    
    .nexus-profile-preview__header,
    .nexus-profile-preview__body,
    .nexus-profile-preview__actions {
        padding: 1rem;
    }
    
    .nexus-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .nexus-profile-preview__actions {
        flex-direction: column;
    }
    
    .highlight-item, .debate-position { padding: 1.5rem; }
    .highlight-item h4, .debate-position h4 { font-size: 1.5rem; }
    .chronicle-title-prominent { font-size: 1.6rem !important; }
    
    footer { padding: 2rem 1rem; }
    
    .footer-links-grid {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    
    .footer-column {
        min-width: auto;
        width: 100%;
        max-width: 300px;
    }
    
    .highlight-grid {
        grid-template-columns: 1fr; /* Stack items on smaller screens */
    }
    .highlight-grid .highlight-item {
        padding-right: 0; /* Remove right padding if it was for connector lines */
    }
     .highlight-grid > .btn.btn-primary {
        width: 100%; /* Make button full width in its column */
        margin-top: 1rem !important; /* Add space if stacked */
    }
    
    .echoes-unbound-agora {
        padding: 2rem 1.5rem;
        margin: 2rem 0;
    }
    
    .souls-highlight-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .soul-highlight-card {
        padding: 1.5rem 1rem;
        min-height: 380px;
        margin: 0 0.5rem 4rem 0.5rem;
    }
    
    .soul-highlight-card .soul-card-actions {
        flex-direction: column !important;
        gap: 0.6rem !important;
        margin-top: 1rem !important;
        padding: 0 1rem !important;
        align-items: stretch !important;
        justify-content: center !important;
    }
    
    .soul-highlight-card .soul-message-btn, 
    .soul-highlight-card .soul-profile-btn {
        width: 100% !important;
        max-width: none !important;
        justify-content: center !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
        border-radius: 20px !important;
        min-width: auto !important;
        margin: 0 !important;
        display: block !important;
    }
    
    .agora-subtitle {
        flex-direction: column;
        gap: 0.3rem;
    }
}

@media (max-width: 480px) {
    .nexus-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .highlight-item h4, .debate-position h4 { font-size: 1.3rem; }
    .chronicle-title-prominent { font-size: 1.4rem !important; }
    
    footer {
        padding: 2rem 1rem;
    }
    
    .footer-links-grid {
        gap: 1.5rem;
    }
    
    .echoes-unbound-agora {
        padding: 1.5rem 1rem;
    }
    
    .soul-highlight-card {
        padding: 1rem 0.75rem;
        min-height: 360px;
        margin: 0 0.25rem 3.5rem 0.25rem;
    }
    
    .soul-display-container {
        min-height: 120px;
        margin: 0.75rem 0;
    }
    
    .soul-highlight-card .nexus-username--mystical {
        font-size: 1.1rem;
    }
    
    .soul-highlight-card .nexus-user-title {
        font-size: 0.9rem;
    }
    
    .soul-highlight-card .nexus-username--mystical {
        font-size: 1.1rem;
    }
    
    .agora-info p {
        font-size: 1rem;
    }
    
    .anonymous-message-modal {
        max-width: 95vw;
        width: 95vw;
        padding: 1.5rem 1rem;
        margin: 1rem;
    }
    
    .anonymous-message-modal h3 {
        font-size: 1.2rem;
    }
    
    .recipient-info {
        padding: 0.8rem;
        font-size: 0.9rem;
    }
    
    .anonymous-message-modal input[type="text"],
    .anonymous-message-modal textarea {
        padding: 0.7rem;
        font-size: 0.9rem;
    }
    
    .anonymous-message-modal textarea {
        min-height: 100px;
    }
}