:root { 
    --green: #004D40; 
    --pink: #f91880; 
    --gray: #65676b; 
    --border: #eff3f4; 
    --bg: #f7f9f9; 
    --indigo: #1877F7; 
}

body { 
    background: var(--bg); 
    font-family: 'Inter', sans-serif; 
    margin: 0; 
    color: #0f1419; 
    overflow-x: hidden; 
}

.container { display: block; justify-content: center; }

@media (min-width: 769px) {
    .container { padding-top: 20px; }
}

@media (max-width: 768px) { 
    body { background: #F0F2F5; } 
}

main { width: 100%; max-width: 600px; padding-bottom: 20px; }

/* SMART FAB (Unique to Index/Feed) */
.sticky-add-btn { position: fixed; bottom: 30px; right: 30px; width: 56px; height: 56px; border-radius: 50%; background: var(--green); color: white; border: none; box-shadow: 0 4px 15px rgba(0,0,0,0.2); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2100; transition: transform 0.2s, bottom 0.3s; }
@media (max-width: 768px) { .sticky-add-btn { bottom: 85px; right: 20px; } .sticky-add-btn.fab-down { bottom: 25px; } }

/* SUGGESTION RAIL (Lives on the Index Feed) */
.suggestion-rail { background: white; margin-bottom: 12px; padding: 15px 0; border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); }
@media (min-width: 769px) { .suggestion-rail { border: 1px solid var(--border); border-radius: 16px; margin-bottom: 15px; } }
.rail-header { padding: 0 16px 12px; font-weight: 800; font-size: 16px; font-family: 'Montserrat'; color: #000; }
.rail-track { display: flex; overflow-x: auto; gap: 12px; padding: 0 16px; scrollbar-width: none; }
.rail-card { flex: 0 0 150px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; display: flex; flex-direction: column; position: relative; cursor: pointer; }
.rail-cover { width: 100%; height: 75px; object-fit: cover; background: var(--green); border-bottom: 1px solid var(--border); }
.rail-info { padding: 12px; display: flex; flex-direction: column; flex: 1; }
.rail-name { font-weight: 700; font-size: 14px; color: #0f1419; text-decoration: none; }
.rail-join-btn { margin-top: auto; background: var(--green); color: white; border: none; padding: 8px 0; border-radius: 14px; font-weight: 700; }
.rail-meta { 
    font-size: 12px; 
    color: var(--gray); 
    margin-bottom: 8px; 
    display: block; 
}

/* REACTION PARTICLES (Global Utility) */
.particle { position: absolute; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; opacity: 0; z-index: 10; background-color: var(--pink); }





/* Fix for the overlapping circular avatars */
.social-proof { 
    display: flex; 
    align-items: center; 
    margin-bottom: 6px; 
    font-size: 10px; 
    color: var(--gray); 
    font-weight: 500;
    overflow: hidden; /* Prevents text from pushing out */
}

.social-proof img { 
    width: 14px; 
    height: 14px; 
    border-radius: 50%; 
    border: 1.5px solid white; 
    margin-left: -6px; /* This creates the 'overlap' effect */
    flex-shrink: 0;    /* CRITICAL: Prevents images from stretching/distorting */
    object-fit: cover;
}

.social-proof img:first-child { 
    margin-left: 0; 
}












/* --- HIGH-QUALITY "ALIVE" SKELETON REFINEMENTS --- */

@keyframes shimmer {
    0% { background-position: -468px 0; }
    100% { background-position: 468px 0; }
}

.skeleton {
    background: #f0f2f5;
    background-image: linear-gradient(
        to right, 
        #f0f2f5 0%, 
        #e1e4e8 20%, 
        #f0f2f5 40%, 
        #f0f2f5 100%
    );
    background-repeat: no-repeat;
    background-size: 800px 104px; 
    display: inline-block;
    position: relative;
    animation: shimmer 1.2s infinite linear forwards;
    border-radius: 4px;
}

.skeleton-card {
    background: white;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
    margin-bottom: 0px;
}

@media (min-width: 769px) {
    .skeleton-card {
        border: 1px solid var(--border);
        border-radius: 16px;
        margin-bottom: 9px;
    }
}

/* Matching your .post-row padding */
.sk-row {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 16px;
}

@media (max-width: 768px) {
    .sk-row {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Header */
.sk-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.sk-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: block; }

.sk-name {
    width: 100px;
    height: 14px;
    margin-bottom: 6px;
}

.sk-handle {
    width: 60px;
    height: 10px;
}

/* Body Content */
.sk-body {
    margin-top: 4px;
}

.sk-text {
    width: 100%;
    height: 14px;
    margin-bottom: 8px;
}

.sk-img { width: 100%; height: 280px; margin-top: 12px; display: block; border-left: none; border-right: none; }

/* Stats/Interaction Bar */
.sk-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 4px;
}

.sk-stat {
    width: 45px;
    height: 18px;
    border-radius: 12px;
}














/* NEW */
.app-layout {
    display: grid;
    grid-template-columns: 1fr minmax(0, 600px) 1fr; 
    gap: 32px;
    width: 100%;
    max-width: 1300px; 
    margin: 0 auto;
    align-items: start;
    min-height: 100vh;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* SIDEBAR STICKY LOGIC */
.sidebar-left, .sidebar-right {
    display: none; 
    position: sticky;
    /* Sync: 56px Header + 20px gap = 76px */
    top: 76px; 
    
    /* FIX: Force sidebar to stay fixed to screen height so it doesn't scroll away */
    height: calc(100vh - 76px); 
    overflow-y: auto;
    
    /* Optional: Hide scrollbars for a cleaner 'X' style look */
    scrollbar-width: none; 
    overscroll-behavior: contain;
}
.sidebar-left::-webkit-scrollbar, .sidebar-right::-webkit-scrollbar { display: none; }

.sidebar-sticky {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding-bottom: 20px; /* Extra room at the bottom of the sidebar list */
}

/* --- RESPONSIVE BREAKPOINTS --- */

/* 1. Desktop: Show everything */
@media (min-width: 1200px) {
    .sidebar-left, .sidebar-right {
        display: block;
    }
}

/* 2. Tablet: Hide right sidebar, keep left */
@media (min-width: 850px) and (max-width: 1199px) {
    .app-layout {
        grid-template-columns: 280px minmax(0, 600px);
        justify-content: center;
        gap: 20px;
        padding-left: 10px;
    }
    .sidebar-left { display: block; }
    .sidebar-right { display: none; }
}

@media (max-width: 849px) {
    .app-layout {
        display: block;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    main { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; }
}

.sidebar-label {
    font-weight: 600; font-size: 15px; color: #050505; font-family: 'Inter', sans-serif; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 5px;
    text-decoration: none;
    color: #000000; 
    border-radius: 8px;
    transition: background 0.2s;
}

.sidebar-item:hover { background: rgba(0, 0, 0, 0.05); }

.sidebar-icon {
    width: 24px; height: 24px; flex-shrink: 0; display: block; color: #536471;
}

.sidebar-pfp {
    width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
    background: #eff3f4; display: flex; align-items: center; justify-content: center;
}

.sidebar-pfp img { width: 100%; height: 100%; object-fit: cover; }

.sidebar-divider { border: 0; border-top: 1px solid var(--border); margin: 8px 12px; }





.sidebar-footer { padding: 20px 10px; display: flex; flex-wrap: wrap; gap: 0 8px; }
.sidebar-footer a { font-size: 13px; color: var(--gray); text-decoration: none; opacity: 0.8; }
.sidebar-footer a:hover { text-decoration: underline; }
.sidebar-footer .dd-copyright { font-size: 12px; color: var(--gray); opacity: 0.6; margin-top: 8px; width: 100%; }























/* INDEX SIDEBAR - WHO TO FOLLOW */
.who-follow-card {
    background: transparent;
    border: none;
    padding: 0;
}

.sidebar-title {
    padding: 0 16px 12px 0; 
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: #0f1419;
}

.who-row {
    display: flex;
    align-items: center;
    padding: 12px 0;
    gap: 12px;
    cursor: pointer;
    transition: background 0.2s;
    background: transparent;
    border-bottom: 1px solid var(--border);
}

.who-row:last-child { border-bottom: none; }
.who-row:hover { background: rgba(0, 0, 0, 0.02); }

.who-info {
    flex: 1;
    min-width: 0; /* Critical for text-overflow to work */
}

.who-name {
    font-weight: 700;
    font-size: 14px;
    color: #000;
    display: flex;
    align-items: center;
    gap: 4px;
}

.who-name span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.who-handle {
    color: var(--gray);
    font-size: 14px;
}

.btn-follow-sm {
    background: var(--green);
    color: white;
    border: none;
    padding: 7px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.1s;
}

.btn-follow-sm:active { transform: scale(0.95); }

/* The "Following" state style */
.btn-follow-sm.following {
    background: #fff;
    color: #000;
    border: 1px solid var(--border);
}