/**
 * Адаптивное позиционирование кнопок управления
 */

/* Базовые стили для кнопок управления */
#conpam-zoomControls,
#conpam-undoBtn {
    transition: all 0.3s ease;
}

/* Десктоп версия */
@media (min-width: 1025px) {
    #conpam-zoomControls {
        /* Кнопки зума по центру внизу */
        position: fixed !important;
        bottom: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    #conpam-undoBtn {
        /* Кнопка отмены слева */
        position: fixed !important;
        bottom: auto !important;
        left: 20px !important;
    }
    
    /* Дополнительные стили для лучшей видимости на десктопе */
    #conpam-zoomControls button,
    #conpam-undoBtn {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        background: rgba(255, 255, 255, 0.95);
    }
    
    #conpam-zoomControls button:hover,
    #conpam-undoBtn:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        background: rgba(255, 255, 255, 1);
    }
}

/* Планшеты */
@media (min-width: 769px) and (max-width: 1024px) {
    #conpam-zoomControls,
    #conpam-undoBtn {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    }
}

/* Мобильные устройства */
@media (max-width: 768px) {
    #conpam-zoomControls,
    #conpam-undoBtn {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }
}

/* Фикс для overlay режима нижней панели */
.conpam-bottom-panel.overlay-mode ~ #conpam-zoomControls,
.conpam-bottom-panel.overlay-mode ~ #conpam-undoBtn {
    /* Кнопки не должны учитывать высоту панели в overlay режиме */
    transition: none;
}

/* Z-index для правильного порядка слоев */
#conpam-zoomControls {
    z-index: 9999 !important;
}

#conpam-undoBtn {
    z-index: 9998 !important;
}

/* Анимация появления кнопок */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#conpam-zoomControls,
#conpam-undoBtn {
    animation: fadeInUp 0.3s ease-out;
}

/* Убираем анимацию при изменении размера окна для плавности */
.resizing #conpam-zoomControls,
.resizing #conpam-undoBtn {
    animation: none;
    transition: none;
}