/* =====================================================
   AI STUDIO MOBILE v4.0 - ПРОСТОЕ СКРЫТИЕ HEADER
   
   Этот CSS работает ТОЛЬКО на ai-studio.html
   потому что использует класс .studio-header
   (такого класса нет на других страницах)
   ===================================================== */

/* ═══════════════════════════════════════════════════════
   МОБИЛЬНЫЕ СТИЛИ (< 768px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    
    /* ПОЛНОСТЬЮ СКРЫВАЕМ HEADER AI STUDIO */
    .studio-header {
        display: none !important;
    }
    
    /* Trial/Credits баннер - компактнее */
    #trialBanner {
        position: relative !important;
        margin: 0 !important;
    }
    
    #trialBanner > div {
        padding: 8px 12px !important;
        font-size: 12px !important;
        border-radius: 0 !important;
    }
    
    /* Табы поднимаем вверх (сразу после баннера) */
    .content-tabs {
        margin-top: 5px !important;
        padding: 5px !important;
        gap: 4px !important;
    }
    
    /* Табы - компактнее */
    .tab-btn {
        padding: 10px 6px !important;
        flex-direction: column !important;
        gap: 2px !important;
        min-width: 0 !important;
    }
    
    .tab-btn .tab-icon {
        font-size: 20px !important;
    }
    
    .tab-btn .tab-name {
        font-size: 10px !important;
    }
    
    .tab-btn .coming-soon {
        font-size: 8px !important;
        padding: 1px 3px !important;
    }
    
    /* Основная область */
    .studio-main {
        margin-top: 0 !important;
        padding: 10px !important;
    }
    
    /* Шаблоны - скрываем (экономим место) */
    .templates-panel {
        display: none !important;
    }
    
    /* Генерация карточки */
    .generation-card {
        padding: 15px !important;
        margin: 0 !important;
    }
    
    .generation-card h2 {
        font-size: 18px !important;
        margin-bottom: 8px !important;
    }
    
    .generation-card .description {
        font-size: 12px !important;
        margin-bottom: 12px !important;
    }
    
    /* Форма */
    .form-group {
        margin-bottom: 12px !important;
    }
    
    .form-group label {
        font-size: 12px !important;
        margin-bottom: 4px !important;
    }
    
    .form-textarea {
        min-height: 80px !important;
        font-size: 14px !important;
        padding: 10px !important;
    }
    
    .form-select {
        padding: 10px !important;
        font-size: 14px !important;
    }
    
    /* Кнопка генерации */
    .btn-generate {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 16px !important;
    }
    
    /* Результаты */
    .result-area {
        padding: 12px !important;
        margin-top: 15px !important;
    }
    
    .result-area h3 {
        font-size: 14px !important;
    }
    
    .result-content {
        font-size: 14px !important;
        padding: 10px !important;
    }
    
    .result-actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-top: 10px !important;
    }
    
    .result-actions .btn {
        flex: 1 1 45% !important;
        min-width: 45% !important;
        padding: 10px 8px !important;
        font-size: 11px !important;
    }
    
    /* Generation area на всю ширину */
    .generation-area {
        width: 100% !important;
        max-width: none !important;
    }
}

/* ═══════════════════════════════════════════════════════
   ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ (< 480px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    
    /* Скрываем названия табов, оставляем иконки */
    .tab-btn .tab-name {
        display: none !important;
    }
    
    .tab-btn {
        padding: 12px 8px !important;
    }
    
    .tab-btn .tab-icon {
        font-size: 22px !important;
    }
    
    .generation-card {
        padding: 12px !important;
    }
    
    .generation-card h2 {
        font-size: 16px !important;
    }
    
    #trialBanner > div {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }
}

/* ═══════════════════════════════════════════════════════
   ДЕСКТОП - ВСЁ КАК БЫЛО
   ═══════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    .studio-header {
        display: flex !important;
    }
}