/**
 * Fix gap below footer on community page
 * Ensures content extends to bottom without gaps
 */

/* Remove any bottom margin/padding from body on community page */
body {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure community layout extends to bottom nav */
.dc-layout {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Fix bottom navigation bar positioning */
.bottom-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure no gap between content and bottom nav */
#app {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    min-height: 100vh !important;
}

/* Fix for iOS safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-nav {
        padding-bottom: env(safe-area-inset-bottom) !important;
    }

    /* Adjust body to account for safe area */
    body {
        padding-bottom: 0 !important;
    }
}

/* Mobile specific fixes */
@media (max-width: 768px) {
    /* Ensure content container fills viewport */
    .content-wrapper,
    .page-content,
    #app > div {
        min-height: calc(100vh - 60px) !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Fix community layout specifically */
    .dc-layout {
        position: fixed !important;
        top: 60px !important;
        bottom: 60px !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ensure feed extends to composer */
    .dc-feed,
    .dm-messages {
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 20px)) !important;
    }
}

/* Prevent white gap at bottom */
html,
body {
    background-color: #0a1628 !important;
    overflow-x: hidden !important;
}

/* Ensure all full-height containers actually fill */
.full-height,
.vh-100 {
    height: 100vh !important;
    min-height: 100vh !important;
}
