/* إصلاحات CSS للجوال */

/* 1. منع Zoom على الجوال */
@media (max-width: 768px) {
    input, textarea, select {
        font-size: 16px !important; /* منع zoom على iOS */
        min-height: 44px !important; /* حجم مناسب للإصبع */
    }
    
    /* 2. إصلاح Message Input */
    .message-input,
    #messageInput,
    input[name="message"],
    .chat-input {
        font-size: 16px !important;
        padding: 12px !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        width: 100% !important;
        -webkit-user-select: text !important;
        user-select: text !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-appearance: none !important;
    }
    
    /* 3. إصلاح Profile Card على الجوال */
    .user-profile-card,
    .profile-card,
    .user-details-card {
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 15px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    .user-details,
    .profile-info {
        font-size: 14px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }
    
    .profile-image,
    .user-avatar {
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }
    
    /* 4. أزرار الاتصال والمراسلة - تحت البيانات */
    .action-buttons,
    .contact-buttons {
        position: relative !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        padding: 15px !important;
        margin-top: 20px !important;
        background: #fff !important;
        border-top: 1px solid #ddd !important;
        gap: 10px !important;
    }
    
    .action-buttons button,
    .contact-buttons button,
    .action-buttons a,
    .contact-buttons a {
        flex: 1 !important;
        margin: 0 !important;
        padding: 12px !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }
    
    /* 5. Chat Container */
    .chat-container,
    .messages-container {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding: 10px !important;
    }
    
    .chat-message {
        max-width: 85% !important;
        word-wrap: break-word !important;
    }
    
    /* 6. إصلاح Favourite Button */
    .favourite-btn,
    .fav-btn,
    .btn-favourite {
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
    }
    
    /* 7. Overlay Prevention */
    .modal-backdrop {
        display: none !important;
    }
    
    body.modal-open {
        overflow: auto !important;
        padding-right: 0 !important;
    }
}

/* 8. عام - منع المشاكل */
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}

input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: #007bff !important;
}

/* 9. Loading Overlay - لا يبقى عالق */
.loading-overlay,
.overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 9999 !important;
    display: none !important; /* مخفي بشكل افتراضي */
}

.loading-overlay.active,
.overlay.active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 10. Responsive Tables */
@media (max-width: 768px) {
    table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
}