/**
 * Mobile Override CSS for WritingML Editor V3
 * Prevents mobile font sizes from applying on narrow desktop browsers
 * 
 * This file is loaded once per page for desktop users only.
 * It overrides media query styles that would otherwise make
 * editor UI elements inappropriately large on narrow desktop viewports.
 */

/* Prevent mobile font sizes from applying on narrow desktop browsers */
@media (max-width: 768px) {
    textarea.mobile-no-zoom,
    select.mobile-no-zoom,
    .writingml-editor-v2-wrapper .writingml-editor-v2,
    .macro-menu input[type="text"],
    .macro-menu input[type="search"],
    .giphy-menu input[type="text"],
    .giphy-menu input[type="search"] {
        font-size: 16px !important;
    }
    
    .writingml-codeview-v2 {
        font-size: 14px !important;
        line-height: 1.5 !important;
        padding: 10px !important;
    }
    
    .font-option {
        font-size: 14px !important;
        padding: 12px !important;
        min-height: 44px !important;
    }
    
    .size-option,
    .linespace-option {
        font-size: 14px !important;
        padding: 10px 5px !important;
        min-height: 44px !important;
    }
    
    .emoticon-categories label,
    .color-label {
        font-size: 15px !important;
        padding: 8px !important;
    }
    
    .giphy-menu,
    .macro-menu,
    .giphy-suggestion,
    .macro-item,
    .macro-category,
    .writingml-autocomplete-item,
    .writingml-autocomplete-item .autocomplete-title,
    .writingml-autocomplete-item .autocomplete-id {
        font-size: 14px !important;
    }
    
    .writingml-autocomplete-item .example {
        font-size: 12px !important;
    }
    
    .status-text,
    .help-text {
        font-size: 12px !important;
    }
    
    .giphy-no-results,
    .macro-no-results {
        font-size: 14px !important;
        padding: 20px !important;
    }
    
    .writingml-inline-options .alignment-option {
        font-size: 14px !important;
        min-height: 44px !important;
    }
    
    .writingml-inline-options .alignment-option span {
        font-size: 12px !important;
    }
    
    .writingml-inline-options .special-option .option-title {
        font-size: 14px !important;
    }
    
    .writingml-inline-options .special-option .option-desc {
        font-size: 12px !important;
    }
    
    .macro-manage-link,
    a[href*="macro"] {
        font-size: 14px !important;
    }
    
    .writingml-autocomplete-dropdown {
        font-size: 14px !important;
        min-width: 280px !important;
        max-width: calc(100vw - 20px) !important;
    }
    
    .writingml-autocomplete-item {
        font-size: 15px !important;
        padding: 8px 12px !important;
        min-height: 32px !important;
    }
    
    .writingml-autocomplete-item:hover {
        font-size: 15px !important;
        padding: 10px 14px !important;
        min-height: 40px !important;
    }
    
    .writingml-autocomplete-item.selected {
        font-size: 15px !important;
        padding: 8px 12px !important;
        min-height: 32px !important;
    }
    
    .giphy-menu input[type="text"],
    .giphy-menu input[type="search"] {
        min-height: 44px !important;
        padding: 10px !important;
    }
    
    .giphy-suggestion {
        min-height: 36px !important;
        padding: 8px 12px !important;
    }
    
    .giphy-suggestion:hover {
        min-height: 44px !important;
        padding: 10px 16px !important;
    }
    
    .giphy-suggestions {
        font-size: 14px !important;
    }
    
    .macro-item {
        min-height: 44px !important;
        padding: 12px !important;
    }
    
    .settings-tab-btn {
        font-size: 14px !important;
        padding: 10px 16px !important;
    }
}

@media (max-width: 480px) {
    .settings-tab-btn {
        font-size: 14px !important;
        padding: 10px 16px !important;
    }
}