/* =========================================
   9. MESSAGES - STYLE APP MESSENGER MOBILE
   ========================================= */

@media (max-width: 768px) {

    /* Section Messages - Plein écran fixe */
    .messages-section-new,
    #section-messages {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        padding-top: 0 !important;
        overflow: hidden !important;
        z-index: 4000 !important;
        /* Augmenté pour passer au-dessus de la navbar */
        background: #000000 !important;
    }

    /* Container principal - FULL WIDTH for conversations */
    .messages-container-new {
        display: block !important;
        /* Not flex - single column */
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        overflow: hidden !important;
        background: #000000 !important;
    }

    /* ===== LISTE DES CONVERSATIONS - FULL SCREEN ===== */
    .conversations-list-new {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: #000000 !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 50 !important;
        transition: transform 0.3s ease !important;
        border-right: none !important;
        transform: translateX(0) !important;
        padding-top: 0 !important;
    }

    .conversations-list-new.hidden-mobile {
        transform: translateX(-100%) !important;
    }

    /* Header conversations - PURPLE BAND - COMPACT ADJUSTED */
    .conversations-header-new {
        position: relative !important;
        width: 100% !important;
        height: 55px !important;
        /* Slightly taller */
        min-height: 55px !important;
        padding: 15px 15px 5px 15px !important;
        /* More padding top, less bottom */
        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important;
        border-bottom: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-shrink: 0 !important;
    }

    .conversations-header-title {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .conversations-header-title i {
        display: none !important;
    }

    .conversations-header-title h3 {
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        color: white !important;
        margin: 0 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    }

    /* HIDE create conversation button */
    .conversations-header-btn {
        display: none !important;
    }

    /* Remove Search Bar pseudo-element */
    .conversations-header-new::after {
        display: none !important;
        content: none !important;
    }

    /* Liste scrollable - Takes remaining space */
    .conversations-scroll-new {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 0 !important;
        margin-top: 0 !important;
        -webkit-overflow-scrolling: touch !important;
        background: #000000 !important;
        border: none !important;
    }

    /* Remove any border/line in conversations list */
    .conversations-scroll-new::before,
    .conversations-scroll-new::after {
        display: none !important;
    }

    /* Items conversation - REMOVE ALL BORDERS/LINES */
    .conversations-scroll-new .conversation-item {
        padding: 8px 15px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        border-bottom: none !important;
        /* Remove bottom border */
        box-shadow: none !important;
        /* Remove shadow */
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: 50px !important;
        height: auto !important;
    }

    /* Remove hover effects that might look like lines */
    .conversations-scroll-new .conversation-item:hover,
    .conversations-scroll-new .conversation-item:active,
    .conversations-scroll-new .conversation-item.active {
        background: #1c1c1e !important;
        /* Subtle highlight instead of border */
        border: none !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .conversations-scroll-new .conversation-avatar {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
        border: none !important;
        object-fit: cover !important;
    }

    .conversations-scroll-new .conversation-info {
        flex: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
    }

    .conversations-scroll-new .conversation-name {
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        color: white !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        display: block !important;
    }

    .conversations-scroll-new .conversation-time {
        font-size: 0.65rem !important;
        color: #8e8e93 !important;
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .conversations-scroll-new .conversation-preview {
        font-size: 0.75rem !important;
        color: #8e8e93 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        margin: 0 !important;
        display: block !important;
    }

    .conversations-scroll-new .unread-badge {
        min-width: 16px !important;
        height: 16px !important;
        border-radius: 8px !important;
        background: #a855f7 !important;
        color: white !important;
        font-size: 0.65rem !important;
        font-weight: 600 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 4px !important;
        flex-shrink: 0 !important;
    }

    /* ===== ZONE DE CHAT - HIDDEN BY DEFAULT ===== */
    .chat-area-new {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        background: #000000 !important;
        z-index: 60 !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease !important;
    }

    .chat-area-new.active-mobile {
        transform: translateX(0) !important;
    }

    /* Header chat - FIXED at top with EXTRA space for navbar */
    .chat-header-new {
        position: relative !important;
        flex-shrink: 0 !important;
        height: 70px !important;
        /* Increased height */
        min-height: 70px !important;
        padding: 25px 10px 10px 10px !important;
        /* Added top padding */
        background: #1c1c1e !important;
        border-bottom: 1px solid #2c2c2e !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        z-index: 1001 !important;
        /* Ensure on top of navbar if needed */
    }

    .chat-back-btn-mobile {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        background: transparent !important;
        border: none !important;
        color: #a855f7 !important;
        font-size: 1.1rem !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }

    .chat-user-info-new {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    .chat-avatar-wrapper-new {
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0 !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        background: rgba(168, 85, 247, 0.2) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .chat-avatar-wrapper-new img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .chat-avatar-wrapper-new i {
        font-size: 0.9rem !important;
        color: #a855f7 !important;
    }

    .chat-user-details-new {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .chat-user-details-new h4,
    #chatName {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        color: white !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .chat-status-new,
    #chatStatus {
        font-size: 0.7rem !important;
        color: rgba(255, 255, 255, 0.5) !important;
    }

    .chat-actions-new {
        flex-shrink: 0 !important;
    }

    .chat-action-btn-new {
        width: 32px !important;
        height: 32px !important;
        background: transparent !important;
        border: none !important;
        color: #a855f7 !important;
        font-size: 0.9rem !important;
    }

    /* Zone messages - Scrollable area */
    .messages-area-new,
    #messagesArea {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 10px !important;
        padding-bottom: 160px !important;
        /* Space for fixed input bar */
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        /* Augmenté de 4px à 12px pour éviter le chevauchement */
        background: #000000 !important;
        background-image: none !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0 !important;
    }

    /* FORCE REMOVE GREEN BACKGROUND ON ALL MESSAGE ELEMENTS */
    .messages-area-new>*,
    #messagesArea>*,
    .message,
    .message-content,
    .message-bubble,
    .message-sent,
    .message-received,
    .message-sent .message-content,
    .message-received .message-content,
    [class*="message"] {
        background-color: transparent !important;
        background-image: none !important;
    }

    /* État vide */
    .messages-empty-state-new {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        color: rgba(255, 255, 255, 0.4) !important;
    }

    .messages-empty-state-new i {
        font-size: 2rem !important;
        margin-bottom: 8px !important;
        color: rgba(168, 85, 247, 0.3) !important;
    }

    .messages-empty-state-new p {
        font-size: 0.85rem !important;
        margin: 0 !important;
    }

    /* Bulles de messages - REMOVED DUPLICATE RULES - Now in mobile.css */
    /* .message {
        display: flex !important;
        margin-bottom: 4px !important;
        background: none !important;
        background-color: transparent !important;
    } */

    /* Wrapper message - REMOVED DUPLICATE RULES - Now in mobile.css */
    /* .message,
    .messages-area-new .message,
    #messagesArea .message,
    .message.sent,
    .message.received {
        display: flex !important;
        margin-bottom: 3px !important;
        background: none !important;
        background-color: transparent !important;
        align-items: flex-start !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        gap: 6px !important;
    } */

    /* Only keep the essential color and alignment rules */
    .message,
    .messages-area-new .message,
    #messagesArea .message {
        background: none !important;
        background-color: transparent !important;
        align-items: flex-start !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        gap: 6px !important;
    }

    /* Avatar dans message - petit */
    .message-avatar,
    .message .message-avatar {
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0 !important;
    }

    /* ========================================
       MESSAGES MOBILE - HYPER MINIMAL
       ======================================== */

    /* RESET TOTAL */
    #messagesArea *,
    .messages-area-new * {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    /* Container - REMOVED DUPLICATE RULES - Now in mobile.css with proper margins */
    /* html body #messagesArea .message-sent,
    html body #messagesArea .message-received,
    html body #messagesArea .message.sent,
    html body #messagesArea .message.received {
        display: flex !important;
        margin-bottom: 1px !important;
        background: transparent !important;
    } */

    .message-sent,
    .message.sent {
        justify-content: flex-end !important;
    }

    .message-received,
    .message.received {
        justify-content: flex-start !important;
    }

    /* BULLE - MINIMAL */
    /* BULLE - MINIMAL - MAXIMUM SPECIFICITY */
    html body #messagesArea .message-sent .message-content,
    html body #messagesArea .message-received .message-content,
    html body #messagesArea .message.sent .message-content,
    html body #messagesArea .message.received .message-content,
    html body .messages-area-new .message-sent .message-content,
    html body .messages-area-new .message-received .message-content {
        display: inline-block !important;
        max-width: 85% !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 4px 8px !important;
        /* Ultra compact */
        border-radius: 12px !important;
        font-size: 14px !important;
        line-height: 1.1 !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
    }

    /* Force remove margins from all children - MAXIMUM SPECIFICITY */
    html body #messagesArea .message-content *,
    html body #messagesArea .message-content p,
    html body #messagesArea .message-content div,
    html body #messagesArea .message-content span {
        margin: 0 !important;
        padding: 0 !important;
        line-height: inherit !important;
        min-height: 0 !important;
    }

    /* Couleurs */
    .message-sent .message-content,
    .message.sent .message-content {
        background: #1e3a5f !important;
        color: white !important;
    }

    .message-received .message-content,
    .message.received .message-content {
        background: #262626 !important;
        color: white !important;
    }

    /* TEXTE */
    .message-bubble,
    .message-content .message-bubble,
    #messagesArea .message-bubble {
        display: inline !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* HEURE - inline collée */
    .message-time,
    .message-content .message-time,
    #messagesArea .message-time {
        display: inline-block !important;
        font-size: 10px !important;
        /* Larger timestamp */
        color: rgba(255, 255, 255, 0.6) !important;
        margin-left: 4px !important;
        vertical-align: bottom !important;
    }

    /* Avatar caché */
    .message-avatar,
    #messagesArea .message-avatar {
        display: none !important;
    }

    /* Zone de saisie - Bottom bar - SIMPLE: attach + input + send */
    /* Zone de saisie - Bottom bar - FIXED */
    .message-input-area-new {
        position: fixed !important;
        bottom: max(75px, env(safe-area-inset-bottom, 75px)) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        z-index: 9999 !important;
        padding: 10px !important;
        background: #000000 !important;
        border-top: 1px solid #1c1c1e !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        transform: translateZ(0) !important;
    }

    /* Bouton joindre fichier - VIOLET */
    .message-attach-btn-new {
        width: 32px !important;
        height: 32px !important;
        background: #a855f7 !important;
        border: none !important;
        border-radius: 50% !important;
        color: white !important;
        font-size: 0.9rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    /* Input wrapper */
    .message-input-wrapper-new {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        background: #1c1c1e !important;
        border-radius: 18px !important;
        padding: 6px 12px !important;
        min-height: 36px !important;
        border: none !important;
    }

    .message-input-new,
    #messageInput {
        flex: 1 !important;
        background: transparent !important;
        border: none !important;
        color: white !important;
        font-size: 16px !important;
        padding: 0 8px !important;
        outline: none !important;
        min-width: 0 !important;
    }

    .message-input-new::placeholder,
    #messageInput::placeholder {
        color: #8e8e93 !important;
    }

    /* Bouton envoyer */
    .message-send-btn-new,
    #sendMessage {
        width: 32px !important;
        height: 32px !important;
        background: #a855f7 !important;
        border-radius: 50% !important;
        border: none !important;
        color: white !important;
        font-size: 0.9rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    /* File preview - hide if not needed */
    .file-preview-new {
        display: none !important;
    }

    .file-preview-new[style*="display: block"],
    .file-preview-new.active {
        display: flex !important;
        padding: 6px 10px !important;
        margin-bottom: 6px !important;
        background: rgba(30, 41, 59, 0.8) !important;
        border-radius: 8px !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* =========================================
       11. RESERVATION CARD IN MESSAGES - PREMIUM NEW STRUCTURE
       ========================================= */

    .proposal-card-new {
        width: 100% !important;
        max-width: 510px !important;
        /* Élargi de 50% (340px → 510px) */
        background: #2d3748 !important;
        /* Slate 700 - Plus clair que l'original */
        border: 1px solid rgba(168, 85, 247, 0.4) !important;
        border-radius: 20px !important;
        padding: 20px !important;
        margin-top: 10px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Header */
    .proposal-header-new {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
        padding-bottom: 16px !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.2) !important;
    }

    .proposal-header-new i {
        font-size: 1.3rem !important;
        color: #a855f7 !important;
    }

    .proposal-header-new h4 {
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        color: white !important;
        margin: 0 !important;
        letter-spacing: 0.3px !important;
    }

    /* Grid Layout */
    .proposal-grid-new {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
        margin-bottom: 20px !important;
    }

    .proposal-item-new {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .proposal-item-new .label {
        font-size: 0.68rem !important;
        color: #94a3b8 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        font-weight: 700 !important;
    }

    .proposal-item-new .value {
        font-size: 1rem !important;
        color: white !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }

    /* Mode Section */
    .proposal-mode-new {
        margin-bottom: 20px !important;
        padding: 12px !important;
        background: rgba(148, 163, 184, 0.08) !important;
        border-radius: 12px !important;
    }

    .proposal-mode-new .label {
        display: block !important;
        font-size: 0.68rem !important;
        color: #94a3b8 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.8px !important;
        font-weight: 700 !important;
        margin-bottom: 8px !important;
    }

    .proposal-mode-new .mode-value {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        color: white !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
    }

    .proposal-mode-new .mode-value i {
        color: #cbd5e1 !important;
        font-size: 1rem !important;
    }

    /* Recurrence */
    .proposal-recurrence-new {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        background: rgba(168, 85, 247, 0.15) !important;
        padding: 10px 14px !important;
        border-radius: 10px !important;
        margin-bottom: 20px !important;
        border: 1px solid rgba(168, 85, 247, 0.3) !important;
    }

    .proposal-recurrence-new i {
        color: #a855f7 !important;
        font-size: 0.95rem !important;
    }

    .proposal-recurrence-new span {
        color: #e2e8f0 !important;
        font-size: 0.88rem !important;
        font-weight: 600 !important;
    }

    /* Actions */
    .proposal-actions-new {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .proposal-actions-new button {
        width: 100% !important;
        padding: 14px 16px !important;
        border-radius: 12px !important;
        font-weight: 700 !important;
        font-size: 0.92rem !important;
        cursor: pointer !important;
        border: 2px solid transparent !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        transition: all 0.2s ease !important;
        text-transform: none !important;
        letter-spacing: 0.3px !important;
    }

    .proposal-actions-new button:active {
        transform: scale(0.98) !important;
    }

    .btn-accept {
        background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
        color: white !important;
        border-color: transparent !important;
        box-shadow: 0 4px 14px rgba(168, 85, 247, 0.4) !important;
    }

    .btn-reject {
        background: rgba(30, 41, 59, 0.9) !important;
        border-color: rgba(239, 68, 68, 0.6) !important;
        color: #f87171 !important;
    }

    .btn-cancel {
        background: rgba(45, 55, 72, 0.8) !important;
        border-color: rgba(148, 163, 184, 0.4) !important;
        color: #cbd5e1 !important;
    }

    .btn-cancel i {
        font-size: 1rem !important;
    }

    /* Status Badge - HIGH CONTRAST */
    .proposal-status {
        display: flex !important;
        justify-content: center !important;
        margin-top: 8px !important;
    }

    .status-badge {
        padding: 6px 12px !important;
        border-radius: 24px !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        text-transform: none !important;
        letter-spacing: 0.5px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    }

    .status-pending {
        background: #FEF3C7 !important;
        color: #92400E !important;
        border: 1px solid #F59E0B !important;
    }

    .status-accepted {
        background: #D1FAE5 !important;
        color: #065F46 !important;
        border: 1px solid #10B981 !important;
    }

    .status-cancelled,
    .status-rejected {
        background: #FEE2E2 !important;
        color: #991B1B !important;
        border: 1px solid #EF4444 !important;
    }

    .status-paid {
        background: #D1FAE5 !important;
        color: #065F46 !important;
        border: 1px solid #10B981 !important;
    }

    /* Force Proposal Card Style on Mobile */
    .proposal-card {
        background: #1e293b !important;
        /* Dark slate blue */
        border: 1px solid rgba(148, 163, 184, 0.2) !important;
        border-radius: 12px !important;
        padding: 12px !important;
        margin-top: 4px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .proposal-card h4 {
        color: white !important;
        margin-bottom: 8px !important;
    }

    .proposal-details p {
        color: #cbd5e1 !important;
        /* Light gray text */
    }
}