/* Mobile PWA Specific Styles - v1.86 */

/* Mobile adjustments for PWA */
@media (max-width: 768px) {
    :root {
        font-size: 18px !important;
    }
    
    body {
        font-size: 1rem !important;
    }
    
    /* Scale up common text elements */
    .message-content {
        font-size: 1rem !important;
    }
    
    .user-message, .assistant-message {
        font-size: 1rem !important;
    }
    
    .form-control, .form-select, textarea {
        font-size: 16px !important;
    }
    
    /* Code blocks should be readable */
    pre, code {
        font-size: 0.9rem !important;
    }
    
    /* Buttons */
    .btn {
        font-size: 1rem !important;
        padding: 0.5rem 1rem !important;
    }
    
    /* CRITICAL: Fix button row layout on mobile - use body selector for higher specificity */
    body .input-area .input-buttons-row,
    body .input-buttons-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 4px !important;
        padding: 0 !important;
        margin-top: 4px !important;
        margin-bottom: 0 !important;
        min-height: auto !important;
        justify-content: flex-start !important;
    }
    
    /* Remove padding from chat input on mobile to maximize space */
    .chat-input {
        padding: 0 !important;
    }
    
    /* Reduce padding on chat messages for mobile */
    .chat-messages {
        padding: 10px !important; /* Reduced from 20px */
        padding-left: 10px !important; /* Override the 25px desktop padding */
    }
    
    /* Allow messages to use full width on mobile */
    .message {
        max-width: 100% !important; /* Override the 90% limit */
    }
    
    /* Remove gap between textarea and buttons */
    .chat-textarea-container {
        margin-bottom: 0 !important;
        margin-top: 4px !important;
    }
    
    /* Ensure Run button is prominent and first */
    .run-btn {
        order: -1 !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        margin-right: 8px !important;
    }
    
    /* Make icon buttons smaller but still tappable */
    .icon-btn {
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 6px !important;
        flex-shrink: 0 !important;
    }
    
    .icon-btn i {
        font-size: 16px !important;
    }
    
    /* Override Bootstrap margins */
    .input-buttons-row.mb-2 {
        margin-bottom: 0 !important;
    }
    
    /* Remove me-3 class margin from run button */
    .run-btn.me-3 {
        margin-right: 8px !important;
    }
}

/* High DPI displays (like S25 Ultra) */
@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 3) {
    :root {
        font-size: 20px !important;
    }
}