/* Mobile-specific fixes for touch interactions */

/* Improve touch targets and interactions for mobile devices */
@media (max-width: 768px) {
    /* Ensure chips have adequate touch targets */
    .chip {
        min-height: 44px !important;
        min-width: 44px !important;
        position: relative !important;
        overflow: visible !important;
    }
    
    /* Removed invisible touch area that was blocking input
    .chip::before {
        content: '';
        position: absolute;
        top: -8px;
        right: -8px;
        bottom: -8px;
        left: -8px;
        z-index: 1;
    } */
    
    /* Ensure proper stacking context */
    .suggestion-chips {
        position: relative;
        z-index: 10;
    }
    
    /* Fix potential overlay issues */
    .welcome-screen {
        position: relative;
        z-index: 1;
    }
    
    /* Improve input area for mobile */
    .input-area {
        position: sticky;
        bottom: 0;
        z-index: 100;
        background-color: var(--bg-primary);
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }
    
    /* Ensure message input is properly accessible */
    #messageInput {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    /* Fix scrolling issues */
    body {
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
    }
    
    /* Prevent double-tap zoom on buttons */
    button {
        touch-action: manipulation;
    }
}

/* Additional fixes for very small screens */
@media (max-width: 480px) {
    /* Ensure chips don't overlap */
    .chip {
        margin: 2px !important;
    }
    
    /* Better text overflow handling */
    .chip span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }
    
    /* Ensure icons remain visible */
    .chip i {
        flex-shrink: 0;
    }
}

/* iOS-specific fixes */
@supports (-webkit-touch-callout: none) {
    /* Fix iOS button styling */
    .chip {
        -webkit-appearance: none;
        -webkit-touch-callout: none;
    }
    
    /* Allow text selection but prevent callout menu */
    .chip * {
        -webkit-touch-callout: none;
    }
}

/* Android-specific fixes */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .chip:hover {
        box-shadow: none !important;
    }

    /* Use active state for feedback */
    .chip:active {
        background-color: var(--bg-tertiary) !important;
    }
}