/**
 * PIONEER - Community Page Responsive Layout
 * Single unified CSS file for all screen sizes
 * Replaces: community-mobile-enhancements.css, community-discord-mobile.css,
 *           community-mobile-fix.css, community-fixes-v2.css
 */

/* ============================================================================
   MOBILE LAYOUT (Phone - Portrait: < 600px)
   Thin sidebar with icons only, full-width main content
   ============================================================================ */

@media (max-width: 600px) {
    /* Layout wrapper - Full viewport */
    .dc-layout {
        display: block !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: calc(100vh - 120px) !important;
        overflow: hidden !important;
        position: relative !important;
    }

    /* SIDEBAR - Full width when no channel selected, hidden when channel active */
    .dc-sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 60px !important;
        bottom: 60px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        background: var(--pioneer-navy, #0f1419) !important;
        z-index: 200 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 1rem !important;
        transition: transform 0.3s ease !important;
    }

    /* Hide sidebar when channel is active */
    .dc-sidebar.hidden {
        transform: translateX(-100%) !important;
        pointer-events: none !important;
    }

    /* Sidebar header - show full PIONEER text */
    .dc-sidebar-header {
        font-size: 1.5rem !important;
        font-weight: 800 !important;
        color: var(--pioneer-gold, #c8a03c) !important;
        text-align: left !important;
        margin-bottom: 1.5rem !important;
        padding-bottom: 1rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    /* Show all sidebar text - Full width list */
    .dc-section-label {
        display: block !important;
        font-size: 0.75rem !important;
        color: rgba(255, 255, 255, 0.5) !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        margin: 1.5rem 0 0.75rem !important;
        letter-spacing: 0.5px !important;
    }

    .dc-channel-name,
    .dc-dm-item-name {
        display: block !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
    }

    /* Channel/DM items as full-width rows */
    .dc-channel-item,
    .dc-dm-item {
        width: 100% !important;
        min-height: 52px !important;
        padding: 0.75rem 1rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        border-radius: 8px !important;
        background: transparent !important;
        margin-bottom: 0.5rem !important;
        cursor: pointer;
        transition: all 0.2s ease !important;
    }

    .dc-channel-item:active,
    .dc-dm-item:active {
        background: rgba(255, 255, 255, 0.05) !important;
    }

    .dc-channel-item.active,
    .dc-dm-item.active {
        background: rgba(200, 160, 60, 0.15) !important;
    }

    /* Show hash icon */
    .dc-channel-hash {
        display: inline-block !important;
        font-size: 1.2rem !important;
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* Hide channel initial on mobile (show full name instead) */
    .dc-channel-initial {
        display: none !important;
    }

    /* Unread badges */
    .dc-channel-badge {
        margin-left: auto !important;
        min-width: 20px !important;
        height: 20px !important;
        border-radius: 10px !important;
        background: #ff3b30 !important;
        color: white !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        padding: 0 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Show buttons */
    .dc-add-channel-btn,
    .dc-new-dm-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.5rem 1rem !important;
        border-radius: 6px !important;
        background: rgba(200, 160, 60, 0.2) !important;
        color: var(--pioneer-gold, #c8a03c) !important;
        border: none !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
        margin-top: 0.5rem !important;
        width: 100% !important;
    }

    .dc-sidebar-footer {
        display: block !important;
        margin-top: 2rem !important;
        padding-top: 1rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .dc-online-count {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        color: rgba(255, 255, 255, 0.7) !important;
        font-size: 0.85rem !important;
    }

    /* MAIN CONTENT - Full width, initially hidden */
    .dc-main {
        position: fixed !important;
        left: 0 !important;
        top: 60px !important;
        bottom: 60px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        display: flex !important;
        flex-direction: column !important;
        background: var(--pioneer-navy, #0f1419) !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 100 !important;
    }

    /* Show main when channel is active */
    .dc-main.active {
        transform: translateX(0) !important;
    }

    /* Header with back button */
    .dc-main-header {
        display: flex !important;
        align-items: center !important;
        padding: 1rem !important;
        background: rgba(10, 22, 40, 0.98) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
        min-height: 56px !important;
        max-height: 56px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 150 !important;
        gap: 0.75rem !important;
    }

    /* Back button - styled like Discord */
    .dc-dm-back-btn,
    .dc-channel-back-btn {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        background: transparent !important;
        border: none !important;
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 0.9rem !important;
        font-weight: 500 !important;
        padding: 0.5rem !important;
        cursor: pointer;
        flex-shrink: 0 !important;
    }

    .dc-main-title {
        flex: 1 !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: white !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Hide members sidebar on mobile */
    .dc-right,
    .dc-members-sidebar {
        display: none !important;
    }

    /* Feed area */
    .dc-feed,
    .dm-messages {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 1rem 0.75rem !important;
        padding-bottom: 180px !important;
        background: var(--pioneer-navy, #0f1419) !important;
    }

    /* Post cards */
    .post-card,
    .dm-msg {
        background: rgba(255, 255, 255, 0.03) !important;
        border-radius: 12px !important;
        padding: 1rem !important;
        margin-bottom: 0.75rem !important;
        border: none !important;
    }

    .post-text,
    .dm-msg-body {
        font-size: 15px !important;
        line-height: 1.5 !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }

    /* COMPOSER - FIXED at bottom of screen like Discord */
    .dc-inline-composer {
        position: fixed !important;
        bottom: 60px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        background: rgba(10, 22, 40, 0.99) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
        padding: 0.75rem !important;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)) !important;
        z-index: 500 !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3) !important;
    }

    /* Composer row - horizontal layout with icons on left */
    .dc-ic-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
        align-items: flex-end !important;
    }

    /* Tool buttons - horizontal row on LEFT of textarea */
    .dc-ic-tool-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 50% !important;
        background: transparent !important;
        border: none !important;
        color: rgba(255, 255, 255, 0.6) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .dc-ic-tool-btn:active {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    /* GIF button */
    .dc-ic-tool-btn[id*="gif"] {
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }

    /* Textarea - grows to fill space */
    .dc-ic-textarea,
    #dc-post-input,
    #dm-input-main {
        flex: 1 !important;
        min-height: 40px !important;
        max-height: 120px !important;
        padding: 0.65rem 1rem !important;
        font-size: 16px !important;
        border-radius: 20px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: white !important;
        resize: none !important;
        overflow-y: auto !important;
    }

    /* Send/Post button */
    .dc-ic-post-btn {
        height: 40px !important;
        min-width: 70px !important;
        padding: 0 1rem !important;
        border-radius: 20px !important;
        background: var(--pioneer-gold, #c8a03c) !important;
        color: var(--pioneer-navy, #0f1419) !important;
        font-weight: 700 !important;
        font-size: 0.9rem !important;
        flex-shrink: 0 !important;
        border: none !important;
    }
}

/* ============================================================================
   TABLET LAYOUT (iPad - Portrait: 601px - 1024px)
   Wider sidebar with text, proper spacing
   ============================================================================ */

@media (min-width: 601px) and (max-width: 1024px) {
    /* Layout wrapper - CRITICAL: This is the top-level container */
    .dc-layout {
        display: flex !important;
        flex-direction: row !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: calc(100vh - 120px) !important;
        overflow-x: hidden !important;
        position: relative !important;
    }

    /* Sidebar - 240px width with text */
    .dc-sidebar {
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
        flex-shrink: 0 !important;
        background: rgba(10, 22, 40, 0.98) !important;
        border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
        overflow-y: auto !important;
        padding: 1rem !important;
    }

    /* Sidebar sections */
    .dc-section-label {
        display: block !important;
        font-size: 0.75rem !important;
        color: rgba(255, 255, 255, 0.5) !important;
        font-weight: 700 !important;
        margin: 1rem 0 0.5rem !important;
    }

    /* Channel/DM items with text */
    .dc-channel-item,
    .dc-dm-item {
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        padding: 0.75rem !important;
        border-radius: 8px !important;
        margin-bottom: 0.25rem !important;
        cursor: pointer;
        transition: all 0.2s;
    }

    .dc-channel-item.active,
    .dc-dm-item.active {
        background: rgba(200, 160, 60, 0.15) !important;
    }

    .dc-channel-name,
    .dc-dm-item-name {
        display: block !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 0.95rem !important;
    }

    /* Main content area */
    .dc-main,
    .dc-layout {
        flex: 1 !important;
        width: calc(100% - 240px) !important;
        max-width: calc(100% - 240px) !important;
    }

    /* Feed area */
    .dc-feed {
        padding: 1.5rem !important;
        padding-bottom: 140px !important;
        width: 100% !important;
    }

    /* Composer at bottom */
    .dc-inline-composer {
        position: fixed !important;
        bottom: 60px !important;
        left: 240px !important;
        right: 0 !important;
        width: calc(100% - 240px) !important;
        max-width: calc(100% - 240px) !important;
        background: rgba(10, 22, 40, 0.98) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding: 1rem !important;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    }

    /* Tool buttons in horizontal row */
    .dc-ic-tools-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Text input */
    .dc-ic-textarea,
    #dc-post-input,
    #dm-input-main {
        width: 100% !important;
        min-height: 48px !important;
        padding: 1rem !important;
    }
}

/* ============================================================================
   DESKTOP LAYOUT (> 1024px)
   Full layout with members sidebar
   ============================================================================ */

@media (min-width: 1025px) {
    /* Use default desktop layout from app.js */
    /* This media query intentionally minimal - desktop works well */

    .dc-inline-composer {
        position: sticky !important;
        bottom: 0 !important;
    }
}

/* ============================================================================
   COMMON FIXES (All Screen Sizes)
   ============================================================================ */

/* Prevent layout shifts */
.dc-layout {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Smooth scrolling */
.dc-feed,
.dm-messages {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* No black backgrounds */
.dc-layout,
.dc-main,
.dc-feed {
    background: var(--pioneer-navy, #0f1419) !important;
}

/* Empty state */
.dc-empty {
    min-height: 150px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 14px !important;
    text-align: center !important;
    padding: 2rem 1rem !important;
}