/**
 * FIX COMMUNITY iPad FULL WIDTH
 * When channel/DM is selected, hide sidebar and give composer full width
 */

/* ============================================================================
   iPad: Full-width composer when channel/DM is active
   ============================================================================ */

@media (min-width: 601px) and (max-width: 1024px) {

    /* When a channel or DM is active, hide the sidebar */
    .dc-layout.channel-active .dc-sidebar,
    .dc-layout.dm-active .dc-sidebar {
        display: none !important;
    }

    /* Main content takes full width when sidebar is hidden */
    .dc-layout.channel-active .dc-main,
    .dc-layout.dm-active .dc-main {
        width: 100vw !important;
        max-width: 100vw !important;
        flex: 1 1 100% !important;
    }

    /* Feed takes full width */
    .dc-layout.channel-active .dc-feed,
    .dc-layout.dm-active .dc-feed,
    .dc-layout.channel-active #dm-messages-main,
    .dc-layout.dm-active #dm-messages-main {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Composer takes FULL width of iPad */
    .dc-layout.channel-active .dc-inline-composer,
    .dc-layout.dm-active .dc-inline-composer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 1rem !important;
        background: rgba(15, 24, 35, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        z-index: 600 !important;
    }

    /* Composer row - wrap for better layout */
    .dc-layout.channel-active .dc-ic-row,
    .dc-layout.dm-active .dc-ic-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    /* Textarea takes FULL width on first row */
    .dc-layout.channel-active .dc-ic-textarea,
    .dc-layout.dm-active .dc-ic-textarea {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        min-height: 48px !important;
        font-size: 1rem !important;
        padding: 14px 16px !important;
        margin-bottom: 0.75rem !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: rgba(255, 255, 255, 0.95) !important;
    }

    /* Icons spread across bottom row */
    .dc-layout.channel-active .dc-ic-tool-btn,
    .dc-layout.dm-active .dc-ic-tool-btn {
        flex: 1 1 auto !important;
        min-width: 52px !important;
        height: 52px !important;
        padding: 12px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        transition: all 0.2s ease !important;
    }

    .dc-layout.channel-active .dc-ic-tool-btn:hover,
    .dc-layout.dm-active .dc-ic-tool-btn:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        transform: translateY(-2px) !important;
    }

    .dc-layout.channel-active .dc-ic-tool-btn svg,
    .dc-layout.dm-active .dc-ic-tool-btn svg {
        width: 24px !important;
        height: 24px !important;
    }

    /* Send button larger and prominent */
    .dc-layout.channel-active .dc-ic-post-btn,
    .dc-layout.dm-active .dc-ic-post-btn {
        flex: 2 1 auto !important;
        min-width: 120px !important;
        height: 52px !important;
        font-size: 1.05rem !important;
        font-weight: 600 !important;
        padding: 14px 28px !important;
        border-radius: 12px !important;
        background: #c8a03c !important;
        color: white !important;
        border: none !important;
        transition: all 0.2s ease !important;
    }

    .dc-layout.channel-active .dc-ic-post-btn:hover,
    .dc-layout.dm-active .dc-ic-post-btn:hover {
        background: #d32f47 !important;
        transform: translateY(-2px) !important;
    }

    /* Adjust feed padding for fixed composer */
    .dc-layout.channel-active .dc-feed,
    .dc-layout.dm-active .dc-feed,
    .dc-layout.channel-active #dm-messages-main,
    .dc-layout.dm-active #dm-messages-main {
        padding-bottom: 150px !important;
    }

    /* Back button to show sidebar again */
    .dc-layout.channel-active .dc-back-btn,
    .dc-layout.dm-active .dc-back-btn {
        display: block !important;
        position: fixed !important;
        top: 70px !important;
        left: 1rem !important;
        z-index: 700 !important;
        padding: 8px 16px !important;
        background: rgba(15, 24, 35, 0.95) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 8px !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 0.9rem !important;
        cursor: pointer !important;
    }
}

/* ============================================================================
   Add JavaScript class toggling hints
   ============================================================================ */

/*
   JavaScript should add these classes when user selects a channel or DM:

   - Add .channel-active to .dc-layout when channel is selected
   - Add .dm-active to .dc-layout when DM is selected
   - Remove classes when back button is clicked

   Example:
   document.querySelector('.dc-layout').classList.add('channel-active');
*/