/* ==========================================
   MOBILE CHAT FIXES - NO JUMPING
   Prevents chat from jumping when typing or 
   when cart notifications appear
   ========================================== */

/* Prevent iOS Safari from zooming on input focus */
@media (max-width: 767px) {
    input[type="text"],
    textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
    }
    
    /* Stable chat container on mobile */
    #chat-messages {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        /* Prevent layout shift during keyboard appearance */
        min-height: 0;
        flex: 1;
    }
    
    /* Prevent content jump when keyboard appears */
    .main-content {
        overflow: hidden;
    }
    
    /* Ensure chat input doesn't cause scroll */
    .chat-input {
        position: sticky;
        bottom: 0;
        background: white;
        z-index: 10;
    }
    
    /* Smooth scroll behavior for messages */
    .chat-messages {
        scroll-behavior: smooth;
        will-change: scroll-position;
    }
    
    /* Prevent cart notification badges from jumping */
    .cart-notification-message {
        will-change: auto;
        backface-visibility: hidden;
        transform: translateZ(0);
    }
    
    /* Optimize message rendering */
    .message-wrapper {
        will-change: auto;
        backface-visibility: hidden;
        transform: translateZ(0);
    }
}

/* Prevent double-tap zoom on buttons */
button,
.message-action-btn,
.chat-send-btn,
.chat-input-btn {
    touch-action: manipulation;
}

/* Improve scrolling performance */
#chat-messages {
    contain: layout style paint;
}

/* Smooth transitions for new messages */
.message-wrapper {
    transition: none; /* Prevent transition jank */
}

/* Optimize cart notification rendering */
.cart-notification-message {
    contain: layout style paint;
    transition: none;
    /* CRITICAL: Force own layer to prevent repaints */
    will-change: transform;
    transform: translateZ(0);
    isolation: isolate;
}

/* Cart notification icon - prevent reflow */
.cart-notification-icon {
    flex-shrink: 0;
    transform: translateZ(0);
}

/* Cart notification content - prevent reflow */
.cart-notification-content {
    flex: 1;
    transform: translateZ(0);
}

/* Cart notification time - prevent reflow */
.cart-notification-time {
    flex-shrink: 0;
    transform: translateZ(0);
}

/* Prevent layout shift on iOS */
@supports (-webkit-touch-callout: none) {
    /* iOS specific fixes */
    .chat-input-field {
        font-size: 16px !important;
    }
    
    #chat-messages {
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
    }
}

/* Prevent horizontal scroll on mobile */
@media (max-width: 767px) {
    body {
        overflow-x: hidden;
    }
    
    .main-content {
        overflow-x: hidden;
    }
    
    #chat-container {
        overflow-x: hidden;
    }
}

/* Optimize rendering for better performance */
.message {
    transform: translateZ(0);
    backface-visibility: hidden;
}

.cart-notification-message {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Prevent flickering on scroll */
#chat-messages * {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Smooth keyboard transitions on mobile */
@media (max-width: 767px) {
    .chat-input-wrapper {
        transition: none;
    }
    
    /* Prevent viewport height changes from affecting layout */
    .main-content {
        height: 100vh;
        height: 100dvh; /* Use dynamic viewport height if supported */
    }
}