/**
 * FIX COMMUNITY MOBILE DISPLAY
 * Ensures community shows on all devices and composer is properly laid out
 */

/* ============================================================================
   CRITICAL: Ensure community page is visible on ALL mobile devices
   ============================================================================ */

@media (max-width: 1024px) {
    /* Force community page to display */
    .community-page {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: 100vh !important;
    }

    /* Force main layout to display */
    .dc-layout {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .dc-main {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .dc-feed,
    #dm-messages-main {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ============================================================================
   FIX iPad Composer - Allow wrapping on tablet
   ============================================================================ */

@media (min-width: 601px) and (max-width: 1024px) {
    /* iPad composer should wrap like mobile when needed */
    .dc-inline-composer {
        position: relative !important;
        width: 100% !important;
        padding: 1rem !important;
        background: rgba(15, 24, 35, 0.98) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .dc-ic-row {
        display: flex !important;
        flex-wrap: wrap !important; /* Changed from nowrap to wrap */
        gap: 0.75rem !important;
        align-items: stretch !important;
    }

    /* Textarea takes full width on iPad too */
    .dc-ic-textarea {
        flex: 1 1 100% !important;
        min-width: 100% !important;
        min-height: 44px !important;
        font-size: 1rem !important;
        padding: 12px 14px !important;
        margin-bottom: 0.5rem !important;
    }

    /* Icons spread across row below textarea */
    .dc-ic-tool-btn {
        flex: 1 1 auto !important;
        min-width: 50px !important;
        height: 48px !important;
        padding: 10px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 8px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .dc-ic-tool-btn svg {
        width: 22px !important;
        height: 22px !important;
    }

    /* Send button larger */
    .dc-ic-post-btn {
        flex: 2 1 auto !important;
        min-width: 100px !important;
        height: 48px !important;
        font-size: 1rem !important;
        padding: 12px 24px !important;
        border-radius: 8px !important;
    }

    /* Feed padding for composer */
    .dc-feed {
        padding-bottom: 140px !important;
    }

    #dm-messages-main {
        padding-bottom: 140px !important;
    }
}

/* ============================================================================
   Phone composer - ensure it stays fixed at bottom
   ============================================================================ */

@media (max-width: 600px) {
    .dc-inline-composer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        z-index: 600 !important;
    }
}