/* Painel flutuante do código: aplicado somente em telas pequenas com toque. */
.mobile-code-backdrop[hidden] { display: none !important; }
.mobile-code-header { display: none; }

@media (max-width: 980px) and (pointer: coarse) {
    body.kt-mobile-code .mobile-code-backdrop:not([hidden]) {
        position: fixed;
        z-index: 9000;
        inset: 0;
        display: block;
        background: rgba(12, 19, 33, .58);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    body.kt-mobile-code #code-panel {
        display: none !important;
    }

    body.kt-mobile-code #code-panel.open {
        position: fixed !important;
        z-index: 9001 !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: min(94vw, 780px) !important;
        min-width: 0 !important;
        max-width: 94vw !important;
        height: 76vh !important;
        height: min(76dvh, 700px) !important;
        max-height: calc(100dvh - 24px) !important;
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        transform: translate(-50%, -50%) !important;
        border: 1px solid rgba(255, 255, 255, .75) !important;
        border-radius: 16px !important;
        box-shadow: 0 24px 70px rgba(0, 0, 0, .42) !important;
    }

    body.kt-mobile-code #code-panel.open .mobile-code-header {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 48px;
        padding: 8px 10px 8px 15px;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        background: #252526;
        color: #e8e8e8;
        font: 700 14px/1.2 "Segoe UI", Arial, sans-serif;
    }

    body.kt-mobile-code .mobile-code-close {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 0;
        border-radius: 9px;
        background: #41434a;
        color: #fff;
        font: 24px/1 "Segoe UI", Arial, sans-serif;
        cursor: pointer;
        touch-action: manipulation;
    }

    body.kt-mobile-code .mobile-code-close:active { background: #5a5d65; }

    body.kt-mobile-code #code-panel.open #code,
    body.kt-mobile-code #code-panel.open #code-output {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    body.kt-mobile-code #code-resizer { display: none !important; }

    body.kt-mobile-code #toggle-code {
        position: fixed !important;
        z-index: 9002 !important;
        top: auto !important;
        right: 16px !important;
        bottom: 16px !important;
        left: auto !important;
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        display: grid !important;
        place-items: center !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        transform: none !important;
        writing-mode: horizontal-tb !important;
        box-shadow: 0 7px 22px rgba(0, 0, 0, .25) !important;
        font: 800 17px/1 "Segoe UI", Arial, sans-serif !important;
        touch-action: manipulation;
    }

    body.kt-mobile-code.kt-code-open #toggle-code { display: none !important; }
}