/* Mobile polish for the Pam-2D constructor */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font-size: 16px;
}

@media (max-width: 768px) {
    body {
        min-width: 0;
        overscroll-behavior: contain;
    }

    .conpam-constructor-container {
        width: 100vw;
        max-width: 100vw;
        height: calc(100svh - 58px);
        overflow: hidden;
    }

    .conpam-main-area,
    .conpam-workspace,
    .conpam-workspace-area {
        min-width: 0;
        max-width: 100vw;
    }

    #conpam-canvas {
        max-width: 100%;
        touch-action: none;
    }

    .conpam-left-block,
    .conpam-right-block,
    .conpam-specification-panel,
    .conpam-modal,
    .conpam-modal-content {
        max-width: calc(100vw - 20px) !important;
    }

    .conpam-bottom-toolbar {
        gap: 8px;
        overflow-x: auto;
        padding: 8px 10px;
        -webkit-overflow-scrolling: touch;
    }

    .conpam-btn,
    .conpam-action-btn,
    .conpam-toolbar-btn,
    .conpam-overlay-btn,
    .conpam-zoom-btn,
    .conpam-mobile-toggle {
        min-width: 44px;
        min-height: 44px;
        flex: 0 0 auto;
    }

    .conpam-modal-body,
    .conpam-specification-content {
        max-height: calc(100svh - 160px);
        overflow: auto;
    }
}

@media (max-width: 420px) {
    .conpam-bottom-toolbar {
        padding-left: 6px;
        padding-right: 6px;
    }

    .conpam-btn img {
        width: 30px;
        height: 30px;
    }
}

/* VENOK_PAM2D_MOBILE_STAGE2_START */
@media (max-width: 768px) {
    :root {
        --conpam-safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    .conpam-mobile-site-header {
        height: 56px;
        min-height: 56px;
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
    }

    .conpam-constructor-container {
        height: calc(100svh - 56px) !important;
        min-height: 0 !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }

    .conpam-top-block {
        min-height: 52px !important;
        height: auto !important;
    }

    .conpam-top-toolbar {
        width: 100%;
        min-height: 52px;
        gap: 8px !important;
        padding: 6px 58px !important;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .conpam-top-toolbar::-webkit-scrollbar,
    .conpam-bottom-toolbar::-webkit-scrollbar {
        display: none;
    }

    .conpam-face-switcher {
        display: flex;
        gap: 6px;
        flex: 0 0 auto;
    }

    .conpam-workspace,
    .conpam-workspace-area {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
    }

    .conpam-workspace-area {
        padding: 8px !important;
    }

    #conpam-canvas {
        width: 100% !important;
        height: auto !important;
        max-height: calc(100svh - 168px) !important;
        object-fit: contain;
    }

    .conpam-mobile-toggle {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        border-radius: 12px !important;
        z-index: 80 !important;
    }

    .conpam-left-block,
    .conpam-right-panel {
        width: min(88vw, 370px) !important;
        max-width: min(88vw, 370px) !important;
        box-shadow: 0 18px 42px rgba(0,0,0,.45);
        -webkit-overflow-scrolling: touch;
    }

    .conpam-bottom-panel {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        padding-bottom: var(--conpam-safe-bottom) !important;
        z-index: 60 !important;
    }

    .conpam-bottom-toolbar {
        width: 100%;
        gap: 8px !important;
        padding: 8px 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;
    }

    .conpam-sketch-actions,
    .conpam-external-actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        flex: 0 0 auto;
    }

    .conpam-btn,
    .conpam-action-btn,
    .conpam-toolbar-btn,
    .conpam-overlay-btn,
    .conpam-zoom-btn {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .conpam-specification-panel,
    .conpam-modal-content {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100svh - 24px) !important;
        border-radius: 12px !important;
    }

    .conpam-modal-body,
    .conpam-specification-content {
        max-height: calc(100svh - 150px) !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .conpam-model-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .conpam-modal input[type="text"],
    .conpam-modal input[type="number"],
    .conpam-modal textarea,
    .conpam-modal select {
        min-height: 44px !important;
        font-size: 16px !important;
    }
}

@media (max-width: 420px) {
    .conpam-top-toolbar {
        padding-left: 54px !important;
        padding-right: 54px !important;
    }

    .conpam-left-block,
    .conpam-right-panel {
        width: min(92vw, 350px) !important;
        max-width: min(92vw, 350px) !important;
    }

    .conpam-model-grid {
        grid-template-columns: 1fr !important;
    }
}
/* VENOK_PAM2D_MOBILE_STAGE2_END */