/* ================= MOBILE ================= */
@media (max-width: 768px) {
    html {
        font-size: 16px;
    }
    .sidebar {
        position: fixed;
        left: -240px;
        top: 0;
        height: 100%;
        z-index: 2000;
    }

        .sidebar.active {
            left: 0;
        }

    .main-content {
        margin-left: 0;
        width: 100%;
    }

    .search-box {
        width: 100%;
        margin: 0 10px;
    }

    .topbar {
        padding: 10px;
    }

    .layout-profile-photo {
        height: 35px;
        width: 35px;
    }
    
    /*------ profile page -------*/
    .profile-header {
        flex-direction: column !important;
        text-align: center;
    }

        .profile-header .ms-auto {
            margin-top: 10px;
        }

    /*------------ comment --------*/
    .comment-row {
        align-items: flex-start;
    }

    .comment-avatar {
        width: 30px;
        height: 30px;
    }

    .comment-bubble {
        max-width: 100%;
        font-size: 14px;
        padding: 10px;
    }

    /* ALWAYS SHOW MENU ON MOBILE */
    .comment-menu {
        display: block !important;
        top: 5px;
        right: 5px;
    }

        /* Bigger tap area */
        .comment-menu i {
            padding: 6px;
        }

    /* Dropdown better spacing */
    .comment-dropdown {
        right: 0;
        top: 28px;
        min-width: 100px;
    }

}

@media (max-width:575px) {
    .birthday-card {
        flex-direction: column;
        align-items: center !important;
        gap: 10px;
    }

    .wish-btn {
        text-align: center !important;
    }
    .birthday-card .info span {
        text-align:center;
    }

    /*-------- forum -----------*/
        .forum-page {
            padding: 12px 10px 30px;
        }

        /* Post card spacing */
        .post-item {
            padding: 10px 12px;
            gap: 8px;
        }

        /* Avatar smaller */
        .post-avatar {
            width: 30px;
            height: 30px;
            font-size: 11px;
        }

        /* Header stack properly */
        .post-header-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
        }

        /* Author row wrap clean */
        .post-author-info {
            flex-wrap: wrap;
            gap: 6px;
        }

        /* Time smaller */
        .post-time {
            font-size: 10px;
        }

        /* Text size */
        .post-body-text {
            font-size: 13px;
            line-height: 1.5;
        }

        /* Reply button spacing */
        .post-actions {
            gap: 6px;
        }

        /* Nested reply FIX */
        .post-nested {
            margin-left: 20px !important;
        }

        /* Inline reply box */
        .inline-reply-box {
            margin-left: 20px;
            padding: 10px;
            gap: 8px;
        }

        /* Fix long names breaking */
        .post-author-name {
            font-size: 13px;
            word-break: break-word;
        }
    
}

/* MOBILE */
@media (max-width: 480px) {
    .notification-dropdown {
        position: fixed;
        top: 60px;
        right: 8px;
        left: 8px;
        width: auto;
        max-height: 75vh;
        border-radius: 12px;
    }
}