/**
 * FIX COMPOSER LAYOUT - Mobile & iPad
 * Spread composer icons across bottom instead of cramped in corner
 */

/* Mobile phones (< 600px) */
@media (max-width: 600px) {
    .dc-inline-composer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        padding: 0.75rem 0.5rem calc(0.75rem + env(safe-area-inset-bottom, 0)) !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;
    }

    .dc-ic-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        align-items: stretch !important;
    }

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

    /* Icons spread across second row */
    .dc-ic-tool-btn {
        flex: 1 1 auto !important;
        min-width: 44px !important;
        height: 44px !important;
        padding: 8px !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: 20px !important;
        height: 20px !important;
    }

    /* Send button prominent */
    .dc-ic-post-btn {
        flex: 2 1 auto !important;
        min-width: 80px !important;
        height: 44px !important;
        font-size: 0.95rem !important;
        padding: 10px 20px !important;
        border-radius: 8px !important;
    }

    /* Adjust main content to account for fixed composer */
    .dc-feed {
        padding-bottom: calc(140px + env(safe-area-inset-bottom, 0)) !important;
    }

    /* DM messages area */
    #dm-messages-main {
        padding-bottom: calc(140px + env(safe-area-inset-bottom, 0)) !important;
    }

    /* GIF picker above composer */
    .dc-ic-gif-picker,
    .dc-gif-picker {
        position: fixed !important;
        bottom: calc(120px + env(safe-area-inset-bottom, 0)) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-height: 300px !important;
        background: rgba(15, 24, 35, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        z-index: 599 !important;
        padding: 0.75rem !important;
    }

    /* Media preview */
    .dc-ic-media-preview {
        margin-bottom: 0.75rem !important;
    }
}

/* Tablets (601px - 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
    .dc-inline-composer {
        padding: 1rem !important;
    }

    .dc-ic-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.75rem !important;
        align-items: flex-end !important;
    }

    /* Textarea takes most space */
    .dc-ic-textarea {
        flex: 1 1 auto !important;
        min-height: 44px !important;
        font-size: 1rem !important;
    }

    /* Icons adequate size for touch */
    .dc-ic-tool-btn {
        min-width: 44px !important;
        height: 44px !important;
        padding: 10px !important;
    }

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

    .dc-ic-post-btn {
        min-width: 80px !important;
        height: 44px !important;
        font-size: 0.95rem !important;
        padding: 10px 20px !important;
    }
}

/* Desktop - default styles apply */
@media (min-width: 1025px) {
    /* Use default styles, no overrides */
}