/**
 * MOBILE CREATE POST MODAL OVERRIDE (PROFESSIONAL UX)
 * High-End Mobile App Experience
 */

@media (max-width: 768px) {
    /* =========================================
       STRUCTURE & LAYOUT
       ========================================= */

    /* 1. Full Screen Immersive Container */
    #modern-publication-modal .modal-container,
    .modern-create-modal .modal-container {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        z-index: 999999 !important;
    }

    /* 2. App-Like Header */
    #modern-publication-modal .modal-header,
    .modern-create-modal .modal-header {
        padding: 12px 16px !important;
        height: 60px !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
        background: #ffffff;
    }

    /* 3. Scrollable Content Body */
    #modern-publication-modal .modal-content,
    .modern-create-modal .modal-content {
        padding: 20px 16px !important;
        flex: 1 !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff;
    }

    /* 4. Footer Area */
    #modern-publication-modal .modal-footer,
    .modern-create-modal .modal-footer {
        padding: 16px !important;
        background: #ffffff;
        border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
        display: flex !important;
        gap: 12px !important;
    }

    /* =========================================
       COMPONENTS
       ========================================= */

    /* Type Switcher (Publicación/En Vivo) */
    .content-type-selector {
        background: rgba(0, 0, 0, 0.05) !important;
        padding: 4px !important;
        border-radius: 20px !important;
        margin-right: auto !important;
    }

    .type-btn {
        padding: 8px 16px !important;
        border-radius: 16px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    .type-btn i {
        font-size: 14px !important;
        margin-right: 6px !important;
    }

    /* Close Button (Large Touch Target) */
    .close-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        background: rgba(0, 0, 0, 0.05) !important;
        border: none !important;
        color: #333 !important;
        margin-left: 12px !important;
    }

    /* Text Area (Seamless) */
    .modern-textarea {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        font-size: 18px !important;
        line-height: 1.5 !important;
        min-height: 150px !important;
        resize: none !important;
        box-shadow: none !important;
    }

    .modern-textarea:focus {
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Options Bar (Horizontal Scroll) */
    .content-options {
        display: flex !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        gap: 12px !important;
        padding-bottom: 8px !important;
        margin-top: auto !important;
        /* Push to bottom of content area */
        margin-bottom: 0 !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Hide scrollbar Firefox */
    }

    .content-options::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar Chrome/Safari */
    }

    .option-btn {
        flex: 0 0 auto !important;
        height: 44px !important;
        /* Min touch size */
        padding: 0 16px !important;
        border-radius: 22px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        background: rgba(0, 0, 0, 0.05) !important;
        border: none !important;
        color: #555 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .option-btn i {
        font-size: 18px !important;
        margin-right: 8px !important;
    }

    /* Action Buttons (Footer) */
    .modern-create-modal .btn-cancel,
    .modern-create-modal .btn-publish {
        height: 48px !important;
        border-radius: 24px !important;
        font-weight: 600 !important;
        font-size: 16px !important;
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* =========================================
       DARK MODE PREMIUM (OLED/DEEP GREY)
       ========================================= */

    html.dark-mode #modern-publication-modal .modal-container,
    body.dark-mode #modern-publication-modal .modal-container,
    [data-theme="dark"] .modern-create-modal .modal-container {
        background: #000000 !important;
    }

    /* Header Dark */
    html.dark-mode #modern-publication-modal .modal-header,
    [data-theme="dark"] .modern-create-modal .modal-header {
        background: #0d0d0d !important;
        /* Subtle contrast */
        border-bottom: 1px solid #1f1f1f !important;
    }

    html.dark-mode .content-type-selector,
    [data-theme="dark"] .content-type-selector {
        background: #1f1f1f !important;
    }

    /* Active State for Type */
    html.dark-mode .type-btn.active,
    [data-theme="dark"] .type-btn.active {
        background: #333 !important;
        color: #fff !important;
    }

    html.dark-mode .type-btn:not(.active),
    [data-theme="dark"] .type-btn:not(.active) {
        color: #999 !important;
    }

    /* Content Dark */
    html.dark-mode #modern-publication-modal .modal-content,
    [data-theme="dark"] .modern-create-modal .modal-content {
        background: #000000 !important;
        color: #ffffff !important;
    }

    /* Text Area Dark */
    html.dark-mode .modern-textarea,
    [data-theme="dark"] .modern-textarea {
        background: #000000 !important;
        color: #ffffff !important;
    }

    html.dark-mode .modern-textarea::placeholder,
    body.dark-mode .modern-textarea::placeholder,
    [data-theme="dark"] .modern-textarea::placeholder {
        color: #B0B3B8 !important;
        /* Lighter grey for better contrast */
        opacity: 1 !important;
    }

    /* Option Buttons Dark */
    html.dark-mode .option-btn,
    [data-theme="dark"] .option-btn {
        background: #1a1a1a !important;
        color: #ccc !important;
        border: 1px solid #333 !important;
    }

    html.dark-mode .option-btn:active,
    [data-theme="dark"] .option-btn:active {
        background: #333 !important;
        transform: scale(0.96);
    }

    /* Footer Dark */
    html.dark-mode #modern-publication-modal .modal-footer,
    [data-theme="dark"] .modern-create-modal .modal-footer {
        background: #0d0d0d !important;
        border-top: 1px solid #1f1f1f !important;
    }

    /* Close Button Dark */
    html.dark-mode .close-btn,
    [data-theme="dark"] .close-btn {
        background: #1a1a1a !important;
        color: #fff !important;
        border: 1px solid #333 !important;
    }
}