/* ===== Portfolio V2 Mobile (app-like) =====
   ATIVA quando:
   - body[data-portfolio-version="2.0"]
   - viewport <= 992px
*/
@media (max-width: 992px) {

    body[data-portfolio-version="2.0"] {
        --v2m-top: 140px; /* JS recalcula */
        --v2m-bottom: 74px; /* JS recalcula */

        --v2m-bg: #00060c;
        --v2m-card: rgba(6, 25, 41, .72);
        --v2m-border: rgba(0, 206, 209, .22);
        --v2m-cyan: #00ced1;
        --v2m-cyan-2: #00ffff;
        --v2m-text: #f0f8ff;
        --v2m-sub: #c4f0ff;
        /*background: var(--v2m-bg) !important;*/
        overflow: hidden; /* rolagem fica dentro das rails */
        -webkit-text-size-adjust: 100%;
    }

        /* some com a navbar original no mobile v2 */
        body[data-portfolio-version="2.0"] nav.custom-navbar,
        body[data-portfolio-version="2.0"] .navbar {
            display: none !important;
        }

        /* viewport */
        body[data-portfolio-version="2.0"] #viewport {
            height: 100dvh;
            overflow: hidden;
          /*  background: var(--v2m-bg);*/
        }

        /* ===== STACK: ocupa exatamente a área útil (entre header e dock) ===== */
        body[data-portfolio-version="2.0"] #stack {
            display: flex !important;
            flex-direction: row !important;
            /* começa abaixo do header */
            margin-top: var(--v2m-top);
            /* altura exata disponível */
            height: calc(100dvh - var(--v2m-top) - var(--v2m-bottom));
            /* full-bleed */
            padding: 0 !important;
            gap: 0 !important;
            /* carrossel */
            overflow-x: auto !important;
            overflow-y: hidden !important;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            /* swipe */
            touch-action: pan-x !important;
            /* evita “puxar” o body no iOS */
            overscroll-behavior-x: contain;
            overscroll-behavior-y: contain;
        }

            body[data-portfolio-version="2.0"] #stack::-webkit-scrollbar {
                display: none;
            }

            /* ===== RAIL: 100% da largura da tela, 100% da altura útil ===== */
            body[data-portfolio-version="2.0"] #stack > .rail {
                position: relative !important;
                top: auto !important;
                left: auto !important;
                opacity: 1 !important;
                pointer-events: auto !important;
                filter: none !important;
                transform: none !important;
                flex: 0 0 100%;
                width: 100vw;
                max-width: 100vw;
                height: 100%;
                scroll-snap-align: start;
                scroll-snap-stop: always;
                /* “app-like” sem desperdício de espaço */
                border-radius: 0;
                border: 0;
                box-shadow: none;
                overflow-y: auto;
                overflow-x: hidden;
                overscroll-behavior: contain;
                /* rail vertical scroll */
                touch-action: auto;
            }

        /* IMPORTANTÍSSIMO: rails realmente hidden continuam hidden */
        body[data-portfolio-version="2.0"] .rail.hidden {
            display: none !important;
        }

        /* padding real do conteúdo */
        body[data-portfolio-version="2.0"] .rail .rail-content {
            padding: 14px 14px 18px !important;
            width: 100% !important; /* mata clamp do desktop */
            max-width: 100% !important; /* mata clamp do desktop */
            min-width: 0 !important; /* evita overflow */
            box-sizing: border-box !important;
        }

            /* se existir wrapper dentro do rail-content com clamp também */
            body[data-portfolio-version="2.0"] .rail .rail-content > * {
                max-width: 100% !important;
                min-width: 0 !important;
            }

            /* ===== “ANTI-DESKTOP”: neutraliza layouts de colunas/grids dentro da rail ===== */
            body[data-portfolio-version="2.0"] .rail .rail-content .container,
            body[data-portfolio-version="2.0"] .rail .rail-content .container-fluid {
                max-width: 100% !important;
                width: 100% !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            body[data-portfolio-version="2.0"] .rail .rail-content .row {
                margin-left: 0 !important;
                margin-right: 0 !important;
            }

                /* força qualquer “col-” a virar 1 coluna (full width) no V2 mobile */
                body[data-portfolio-version="2.0"] .rail .rail-content .row > [class*="col-"] {
                    flex: 0 0 100% !important;
                    max-width: 100% !important;
                    width: 100% !important;
                    padding-left: 0 !important;
                    padding-right: 0 !important;
                }

            /* grids “desktop” típicos: vira 1 coluna */
            body[data-portfolio-version="2.0"] .rail .rail-content .grid-layout {
                display: grid !important;
                grid-template-columns: 1fr !important;
                gap: 12px !important;
                width: 100% !important;
                max-width: 100% !important;
            }

            /* remove espaços mortos no topo do primeiro bloco dentro da rail */
            body[data-portfolio-version="2.0"] .rail .rail-content > :first-child {
                margin-top: 0 !important;
            }

        /* limita mídia */
        body[data-portfolio-version="2.0"] img,
        body[data-portfolio-version="2.0"] video,
        body[data-portfolio-version="2.0"] canvas {
            max-width: 100%;
            height: auto;
        }

        /* ===== Header novo (fixo) ===== */
        body[data-portfolio-version="2.0"] #v2m-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9999;
            padding: 12px 14px 10px;
            /* background: rgba(0, 6, 12, .92);
            border-bottom: 1px solid rgba(0, 206, 209, .16);*/
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

            /* garante que conteúdo do header fique acima do orb */
            body[data-portfolio-version="2.0"] #v2m-header .v2m-toprow,
            body[data-portfolio-version="2.0"] #v2m-header .v2m-tools {
                position: relative;
                z-index: 2;
            }

        body[data-portfolio-version="2.0"] .v2m-toprow {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        body[data-portfolio-version="2.0"] .v2m-profile {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }

        body[data-portfolio-version="2.0"] .v2m-avatar {
            width: 44px;
            height: 44px;
            border-radius: 14px;
            object-fit: cover;
            border: 1px solid rgba(0, 206, 209, .35);
            box-shadow: 0 0 14px rgba(0, 206, 209, .14);
            flex: 0 0 auto;
        }

        body[data-portfolio-version="2.0"] .v2m-title {
            display: grid;
            min-width: 0;
        }

        body[data-portfolio-version="2.0"] .v2m-name {
            color: var(--v2m-cyan-2);
            font-weight: 800;
            letter-spacing: .2px;
            font-size: 1.02rem;
            line-height: 1.1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        body[data-portfolio-version="2.0"] .v2m-sub {
            color: var(--v2m-sub);
            font-size: .82rem;
            line-height: 1.1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            opacity: .95;
        }

        body[data-portfolio-version="2.0"] .v2m-right {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 0 0 auto;
        }

        /* ===== ORB SLOT: 200x200, top-right, “atrás” do header ===== */
        body[data-portfolio-version="2.0"] .v2m-orb-slot {
            width: 200px;
            height: 200px;
            display: grid;
            place-items: center;
            position: absolute;
            top: 0;
            right: 6px;
            z-index: 1; /* orb atrás */
            pointer-events: none; /* não rouba clique */
        }

        /* orb: mata qualquer posicionamento antigo */
        body[data-portfolio-version="2.0"] #v2m-header #orb-stage {
            position: static !important;
            inset: auto !important;
            width: 100% !important;
            height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            /*background: transparent !important;*/
        }

            body[data-portfolio-version="2.0"] #v2m-header #orb-stage ai-orb-test {
                width: 100% !important;
                height: 100% !important;
                display: block !important;
            }

        /* ferramentas (versão + idioma) movidas pro header */
        body[data-portfolio-version="2.0"] .v2m-tools {
            margin-top: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

            body[data-portfolio-version="2.0"] .v2m-tools .version-wrap label {
                color: var(--v2m-sub);
                font-weight: 700;
                margin-right: 6px;
            }

            body[data-portfolio-version="2.0"] .v2m-tools .version-wrap select {
                /*background: rgba(15, 23, 42, .85);*/
                border: 1px solid rgba(0, 206, 209, .35);
                color: var(--v2m-text);
                border-radius: 10px;
                padding: 6px 10px;
                font-weight: 800;
            }

            /* LANG: border-radius 0 (sem “bolinha”) */
            body[data-portfolio-version="2.0"] .v2m-tools .lang-switch a,
            body[data-portfolio-version="2.0"] .v2m-tools .lang-switch a img {
                border-radius: 0 !important;
            }

        /* ===== NAV MENU (hamburger) ===== */
        body[data-portfolio-version="2.0"] .v2m-menubtn {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            border: 1px solid rgba(0, 206, 209, .35);
            background: rgba(15, 23, 42, .65);
            color: var(--v2m-text);
            display: grid;
            place-items: center;
            cursor: pointer;
            z-index: 3; /* acima do orb */
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

            body[data-portfolio-version="2.0"] .v2m-menubtn:active {
                transform: scale(.98);
            }

            body[data-portfolio-version="2.0"] .v2m-menubtn .bars {
                width: 18px;
                height: 12px;
                display: grid;
                gap: 3px;
            }

                body[data-portfolio-version="2.0"] .v2m-menubtn .bars i {
                    display: block;
                    height: 2px;
                    background: rgba(0, 255, 255, .95);
                    border-radius: 2px;
                }

        /* backdrop do menu */
        body[data-portfolio-version="2.0"] .v2m-menu-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .35);
            z-index: 9998;
            opacity: 0;
            pointer-events: none;
            transition: opacity .15s ease;
        }

            body[data-portfolio-version="2.0"] .v2m-menu-backdrop.open {
                opacity: 1;
                pointer-events: auto;
            }

        /* dropdown */
        body[data-portfolio-version="2.0"] .v2m-menu {
            position: fixed;
            right: 12px;
            top: calc(var(--v2m-top) + 8px);
            width: min(320px, calc(100vw - 24px));
            max-height: calc(100dvh - var(--v2m-top) - var(--v2m-bottom) - 20px);
            overflow: auto;
            background: rgba(0, 6, 12, .92);
            border: 1px solid rgba(0, 206, 209, .26);
            border-radius: 14px;
            box-shadow: 0 0 18px rgba(0, 206, 209, .14);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            z-index: 9999;
            display: none;
        }

            body[data-portfolio-version="2.0"] .v2m-menu.open {
                display: block;
            }

            body[data-portfolio-version="2.0"] .v2m-menu .item {
                width: 100%;
                text-align: right; /* texto colado à direita */
                padding: 12px 12px;
                background: transparent;
                border: 0;
                color: var(--v2m-text);
                font-weight: 900;
                cursor: pointer;
                white-space: nowrap;
            }

                body[data-portfolio-version="2.0"] .v2m-menu .item + .item {
                    border-top: 1px solid rgba(0, 206, 209, .14);
                }

                body[data-portfolio-version="2.0"] .v2m-menu .item.active {
                    color: #001017;
                    background: var(--v2m-cyan);
                }

        /* chips OFF (caso ainda exista no DOM de builds antigas) */
        body[data-portfolio-version="2.0"] .v2m-chips {
            display: none !important;
        }

        /* ===== Dock do chat ===== */
        body[data-portfolio-version="2.0"] #v2m-chatdock {
            position: fixed;
            left: 12px;
            right: 12px;
            bottom: 12px;
            z-index: 9999;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 16px;
            background: rgba(0, 6, 12, .92);
            border: 1px solid rgba(0, 206, 209, .26);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            box-shadow: 0 0 16px rgba(0, 206, 209, .12);
        }

        body[data-portfolio-version="2.0"] .v2m-chatbtn {
            flex: 1;
            border: 1px solid rgba(0, 206, 209, .28);
            background: rgba(17, 17, 17, .75);
            color: var(--v2m-text);
            border-radius: 14px;
            padding: 10px 12px;
            text-align: left;
            font-weight: 800;
            cursor: pointer;
        }

            body[data-portfolio-version="2.0"] .v2m-chatbtn span {
                color: var(--v2m-cyan);
                font-weight: 900;
            }

        body[data-portfolio-version="2.0"] .v2m-chatopen {
            border: none;
            background: var(--v2m-cyan);
            color: #001017;
            border-radius: 14px;
            padding: 10px 14px;
            font-weight: 900;
            cursor: pointer;
            box-shadow: 0 0 12px rgba(0, 206, 209, .22);
        }

        /* esconde o toggle antigo (abrimos via JS clicando nele) */
        body[data-portfolio-version="2.0"] #mind-toggle {
            display: none !important;
        }

        /* chat overlay ocupando largura no mobile (e sem translateX!) */
        body[data-portfolio-version="2.0"] #leoai-chat.leoai-chat-overlay {
            right: 12px !important;
            left: 12px !important;
            width: auto !important;
            max-width: 520px;
            /*bottom: calc(var(--v2m-bottom) + 12px) !important;*/
            transform: none !important;
        }

        /* form contato: garante contraste no V2 */
        body[data-portfolio-version="2.0"] .contato-campos input,
        body[data-portfolio-version="2.0"] .contato-campos textarea {
            background: rgba(15, 23, 42, .85) !important;
            color: var(--v2m-text) !important;
            border: 1px solid rgba(0, 206, 209, .35) !important;
        }
}

/* telas bem pequenas: só tipografia (sem mexer no orb-slot) */
@media (max-width: 420px) {
    body[data-portfolio-version="2.0"] .v2m-name {
        font-size: .98rem;
    }

    body[data-portfolio-version="2.0"] .v2m-sub {
        font-size: .80rem;
    }
}

/* fundo “hex” em telas mais baixas (pedido) */
@media (max-height: 900px) {
    body {
        /*background-color: #0B0F1A !important;
        background-image: url('/img/imgbg-hex2.png') !important;*/
        background-repeat: repeat !important;
        background-size: auto !important;
        background-attachment: fixed !important;
        background-position: center top !important;
    }
    #form-contato {
        display:flex;
    }
}

@media (max-width: 992px) {
    body[data-portfolio-version="2.0"] #v2m-mind-toggle.v2m-mind-toggle {
        position: fixed;
        width: 80% !important;
        z-index: 9999;
        /* visual dock */


        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    body[data-portfolio-version="2.0"] #v2m-mind-toggle .mind-line {
        width:100% !important;
        border-radius: 50px;
    }

    body[data-portfolio-version="2.0"] #v2m-mind-toggle .mind-label {
        color: #00ffff;
        font-weight: 900;
        letter-spacing: .3px;
    }
}