/* =========================================================
   CODSHIPX_AI_R36_R25_CANONICAL_SETUP_UI_FINAL
   Last-loaded canonical visual layer.
   No backend / setup-state authority lives here.
   ========================================================= */


/* =========================================================
   CONVERSATION LAYOUT
   ========================================================= */

body .codi-mandatory-gate
.codi-setup-conversation{
    min-height:0!important;
    overflow:hidden!important;
}

body .codi-mandatory-gate
.codi-conversation-side{
    display:flex!important;
    flex-direction:column!important;

    min-width:0!important;
    min-height:0!important;

    overflow-y:auto!important;
    overflow-x:hidden!important;

    overscroll-behavior:contain!important;

    padding-bottom:24px!important;

    scrollbar-width:thin!important;

    box-sizing:border-box!important;
}


/* =========================================================
   STATUS CARD
   ========================================================= */

body .codi-mandatory-gate
.codi-conversation-side
.codi-side-status-bar{
    flex:0 0 auto!important;

    display:grid!important;

    grid-template-columns:
        minmax(0,1fr)
        92px!important;

    grid-template-areas:
        "progress products"
        "focus focus"!important;

    grid-template-rows:
        auto
        auto!important;

    width:100%!important;
    max-width:100%!important;
    min-width:0!important;

    height:auto!important;
    min-height:0!important;
    max-height:none!important;

    margin:0!important;
    padding:0!important;

    gap:0!important;

    overflow:hidden!important;

    border-radius:22px!important;

    box-sizing:border-box!important;
}


/* OVERALL PROGRESS */

body .codi-mandatory-gate
.codi-side-status-bar
.codi-conversation-progress{
    grid-area:progress!important;

    width:100%!important;
    min-width:0!important;

    height:auto!important;
    min-height:116px!important;
    max-height:none!important;

    padding:
        15px 14px
        12px!important;

    overflow:visible!important;

    box-sizing:border-box!important;
}

body .codi-mandatory-gate
.codi-conversation-progress > div > span{
    display:block!important;

    width:100%!important;

    font-size:8px!important;
    line-height:1.1!important;

    letter-spacing:.025em!important;

    white-space:nowrap!important;

    overflow:visible!important;
}

body .codi-mandatory-gate
.codi-conversation-progress > div > b{
    display:block!important;

    margin-top:8px!important;

    font-size:27px!important;
    line-height:1!important;
}

body .codi-mandatory-gate
.codi-conversation-progress > i{
    display:block!important;

    width:100%!important;
    max-width:100%!important;

    margin-top:13px!important;
}

body .codi-mandatory-gate
.codi-conversation-progress > small{
    display:block!important;

    position:static!important;

    width:100%!important;
    max-width:100%!important;

    height:auto!important;
    min-height:0!important;
    max-height:none!important;

    margin:10px 0 0!important;
    padding:0!important;

    font-size:7.7px!important;
    line-height:1.25!important;

    white-space:normal!important;

    overflow:visible!important;

    box-sizing:border-box!important;
}


/* PRODUCTS */

body .codi-mandatory-gate
.codi-side-status-bar
.codi-products-launch{
    grid-area:products!important;

    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;

    width:100%!important;
    min-width:0!important;

    height:auto!important;
    min-height:116px!important;
    max-height:none!important;

    padding:12px 7px!important;

    overflow:visible!important;

    border-left:
        1px solid rgba(255,255,255,.12)!important;

    box-sizing:border-box!important;
}

body .codi-mandatory-gate
.codi-products-launch strong{
    font-size:10px!important;
    line-height:1.15!important;

    text-align:center!important;

    white-space:normal!important;
}

body .codi-mandatory-gate
.codi-products-launch small{
    display:none!important;
}


/* CURRENT FOCUS */

body .codi-mandatory-gate
.codi-side-status-bar
.codi-conversation-context{
    grid-area:focus!important;

    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;

    width:100%!important;
    min-width:0!important;

    height:auto!important;
    min-height:58px!important;
    max-height:none!important;

    padding:
        11px 14px!important;

    border-top:
        1px solid rgba(255,255,255,.12)!important;

    border-left:0!important;
    border-right:0!important;

    overflow:hidden!important;

    box-sizing:border-box!important;
}

body .codi-mandatory-gate
.codi-conversation-context span{
    flex:0 0 auto!important;

    width:auto!important;

    margin-right:13px!important;

    font-size:7.8px!important;
    line-height:1!important;

    letter-spacing:.025em!important;

    white-space:nowrap!important;
}

body .codi-mandatory-gate
.codi-conversation-context strong{
    display:block!important;

    flex:1 1 auto!important;

    min-width:0!important;

    margin:0!important;

    font-size:12px!important;
    line-height:1.15!important;

    white-space:nowrap!important;

    overflow:hidden!important;
    text-overflow:ellipsis!important;
}


/* =========================================================
   SETUP INFORMATION READY
   ========================================================= */

body .codi-mandatory-gate
.codi-conversation-side
.codi-conversation-ready{
    flex:0 0 auto!important;

    display:flex!important;
    align-items:flex-start!important;

    gap:11px!important;

    width:100%!important;
    min-width:0!important;

    height:auto!important;
    min-height:82px!important;
    max-height:none!important;

    margin:
        14px 0
        0!important;

    padding:
        15px 15px
        16px!important;

    overflow:visible!important;

    border-radius:17px!important;

    box-sizing:border-box!important;
}

body .codi-mandatory-gate
.codi-conversation-ready > b{
    flex:0 0 auto!important;
}

body .codi-mandatory-gate
.codi-conversation-ready > span{
    display:block!important;

    flex:1 1 auto!important;

    min-width:0!important;

    overflow:visible!important;
}

body .codi-mandatory-gate
.codi-conversation-ready strong{
    display:block!important;

    margin:0!important;

    font-size:14px!important;
    line-height:1.2!important;

    white-space:normal!important;
}

body .codi-mandatory-gate
.codi-conversation-ready small{
    display:block!important;

    width:100%!important;

    margin-top:5px!important;

    font-size:10.5px!important;
    line-height:1.45!important;

    white-space:normal!important;

    overflow:visible!important;
    text-overflow:clip!important;

    max-height:none!important;
}


/* Sidebar Final Review = secondary access */

body .codi-mandatory-gate
.codi-conversation-side
.codi-review-launch{
    flex:0 0 auto!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    gap:9px!important;

    width:100%!important;

    min-height:50px!important;

    margin:
        11px 0
        0!important;

    padding:
        0 16px!important;

    border:
        1px solid rgba(89,147,11,.46)!important;

    border-radius:14px!important;

    background:
        linear-gradient(
            135deg,
            #a9f126 0%,
            #8ddd18 100%
        )!important;

    color:#173700!important;

    font-size:12px!important;
    font-weight:900!important;

    cursor:pointer!important;

    box-shadow:
        0 10px 24px
        rgba(76,129,10,.16)!important;
}


/* =========================================================
   FULL CHAT HISTORY / SCROLL
   ========================================================= */

body .codi-mandatory-gate
.codi-conversation-main{
    display:flex!important;
    flex-direction:column!important;

    min-width:0!important;
    min-height:0!important;

    overflow:hidden!important;
}

body .codi-mandatory-gate
.codi-conversation-main > header{
    flex:0 0 auto!important;
}

body .codi-mandatory-gate
.codi-conversation-messages{
    flex:1 1 auto!important;

    min-height:0!important;

    overflow-y:auto!important;
    overflow-x:hidden!important;

    overscroll-behavior:contain!important;
    scroll-behavior:smooth!important;

    scrollbar-width:thin!important;
}

body .codi-mandatory-gate
.codi-conversation-composer,
body .codi-mandatory-gate
.codi-final-review-dock,
body .codi-mandatory-gate
.codi-conversation-main > footer{
    flex:0 0 auto!important;
}


/* =========================================================
   SETUP COMPLETE / FINAL REVIEW DOCK
   ========================================================= */

body .codi-mandatory-gate
.codi-final-review-dock{
    display:grid!important;

    grid-template-columns:
        minmax(0,1fr)
        auto!important;

    align-items:center!important;

    gap:16px!important;

    width:auto!important;
    max-width:none!important;

    min-height:82px!important;

    margin:
        12px 20px
        14px!important;

    padding:
        14px 15px
        14px 17px!important;

    border:
        1px solid rgba(116,173,23,.26)!important;

    border-radius:17px!important;

    background:
        linear-gradient(
            135deg,
            #fbfff6 0%,
            #eff9dc 100%
        )!important;

    box-shadow:
        0 12px 30px
        rgba(55,90,22,.08)!important;

    box-sizing:border-box!important;
}

body .codi-mandatory-gate
.codi-final-review-dock > span{
    display:flex!important;
    flex-direction:column!important;

    min-width:0!important;
}

body .codi-mandatory-gate
.codi-final-review-dock > span > strong{
    display:block!important;

    color:#20351a!important;

    font-size:14px!important;
    line-height:1.2!important;
}

body .codi-mandatory-gate
.codi-final-review-dock > span > small{
    display:block!important;

    margin-top:5px!important;

    color:#74806f!important;

    font-size:10.5px!important;
    line-height:1.4!important;

    white-space:normal!important;
}


/* Real green button */

body .codi-mandatory-gate
.codi-final-review-dock
.codi-review-main-cta{
    position:static!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    gap:9px!important;

    width:auto!important;
    min-width:226px!important;
    max-width:none!important;

    min-height:52px!important;

    margin:0!important;
    padding:0 20px!important;

    border:
        1px solid rgba(91,151,12,.48)!important;

    border-radius:13px!important;

    background:
        linear-gradient(
            135deg,
            #adf52d 0%,
            #8ddb17 100%
        )!important;

    color:#163500!important;

    font-size:12px!important;
    font-weight:950!important;

    line-height:1!important;

    cursor:pointer!important;

    box-shadow:
        0 10px 26px
        rgba(76,132,10,.20)!important;

    transform:none!important;
}


/* =========================================================
   FINAL REVIEW SCREEN
   ========================================================= */

body .codi-mandatory-gate
.codi-r50-final-review{
    display:grid!important;

    grid-template-rows:
        auto
        minmax(0,1fr)
        auto!important;

    width:
        min(
            1520px,
            calc(100vw - 72px)
        )!important;

    height:
        min(
            760px,
            calc(100vh - 72px)
        )!important;

    max-height:
        calc(100vh - 72px)!important;

    margin:auto!important;

    overflow:hidden!important;

    border-radius:28px!important;

    box-sizing:border-box!important;
}


/* Header must never crop */

body .codi-mandatory-gate
.codi-r50-final-review > header{
    position:relative!important;

    display:flex!important;
    align-items:center!important;

    gap:24px!important;

    min-height:0!important;

    padding:
        25px 40px
        22px!important;

    overflow:visible!important;

    box-sizing:border-box!important;
}

body .codi-mandatory-gate
.codi-r50-final-review > header h1{
    margin:
        5px 0
        9px!important;

    font-size:
        clamp(
            34px,
            4vw,
            58px
        )!important;

    line-height:.98!important;

    letter-spacing:-.045em!important;
}

body .codi-mandatory-gate
.codi-r50-final-review > header p{
    max-width:900px!important;

    margin:0!important;

    font-size:12px!important;
    line-height:1.55!important;
}


/* Scroll review information, not the whole page */

body .codi-mandatory-gate
.codi-r50-review-body{
    min-height:0!important;

    overflow-y:auto!important;
    overflow-x:hidden!important;

    padding:
        26px 40px
        30px!important;

    overscroll-behavior:contain!important;

    scrollbar-width:thin!important;

    box-sizing:border-box!important;
}

body .codi-mandatory-gate
.codi-r50-review-heading{
    display:block!important;

    margin-bottom:14px!important;

    font-size:10px!important;
    letter-spacing:.04em!important;
}

body .codi-mandatory-gate
.codi-r50-review-grid{
    display:grid!important;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        )!important;

    gap:
        0 38px!important;
}


/* Review footer always accessible */

body .codi-mandatory-gate
.codi-r50-final-review > footer{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;

    gap:14px!important;

    min-height:88px!important;

    padding:
        16px 34px!important;

    border-top:
        1px solid rgba(147,213,36,.18)!important;

    background:
        rgba(1,14,7,.96)!important;

    box-sizing:border-box!important;
}

body .codi-mandatory-gate
.codi-r50-back{
    min-height:50px!important;

    padding:0 22px!important;

    border-radius:14px!important;
}

body .codi-mandatory-gate
.codi-r50-setup{
    min-height:52px!important;

    padding:
        0 26px!important;

    border:
        1px solid rgba(116,190,16,.5)!important;

    border-radius:14px!important;

    background:
        linear-gradient(
            135deg,
            #b2f83a,
            #94e51c
        )!important;

    color:#102f00!important;

    font-size:13px!important;
    font-weight:950!important;

    box-shadow:
        0 10px 28px
        rgba(87,145,13,.20)!important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:720px){

    body .codi-mandatory-gate
    .codi-side-status-bar{
        grid-template-columns:
            minmax(0,1fr)
            82px!important;
    }

    body .codi-mandatory-gate
    .codi-conversation-progress{
        min-height:112px!important;

        padding:
            14px 12px
            11px!important;
    }

    body .codi-mandatory-gate
    .codi-products-launch{
        min-height:112px!important;
    }

    body .codi-mandatory-gate
    .codi-conversation-context{
        min-height:56px!important;

        padding:
            10px 12px!important;
    }

    body .codi-mandatory-gate
    .codi-conversation-ready{
        min-height:0!important;

        padding:13px!important;
    }

    body .codi-mandatory-gate
    .codi-final-review-dock{
        grid-template-columns:1fr!important;

        gap:10px!important;

        margin:
            9px 12px
            11px!important;

        padding:12px!important;
    }

    body .codi-mandatory-gate
    .codi-final-review-dock
    .codi-review-main-cta{
        width:100%!important;
        min-width:0!important;
    }

    body .codi-mandatory-gate
    .codi-r50-final-review{
        width:
            calc(100vw - 20px)!important;

        height:
            calc(100vh - 20px)!important;

        max-height:
            calc(100vh - 20px)!important;

        border-radius:20px!important;
    }

    body .codi-mandatory-gate
    .codi-r50-final-review > header{
        gap:13px!important;

        padding:
            18px 16px
            15px!important;
    }

    body .codi-mandatory-gate
    .codi-r50-final-review > header h1{
        font-size:30px!important;
    }

    body .codi-mandatory-gate
    .codi-r50-review-body{
        padding:
            18px 16px
            24px!important;
    }

    body .codi-mandatory-gate
    .codi-r50-review-grid{
        grid-template-columns:1fr!important;

        gap:0!important;
    }

    body .codi-mandatory-gate
    .codi-r50-final-review > footer{
        min-height:0!important;

        padding:
            12px!important;

        flex-direction:column-reverse!important;

        align-items:stretch!important;
    }

    body .codi-mandatory-gate
    .codi-r50-back,
    body .codi-mandatory-gate
    .codi-r50-setup{
        width:100%!important;
    }

}