/* =========================================================
   CODSHIPX_AI_R36_R22_CANONICAL_SETUP_UI

   Canonical last-loaded setup layout.
   This file intentionally overrides legacy accumulated
   R36 setup/status CSS without adding more rules there.
   ========================================================= */


/* ---------- LEFT SETUP SIDEBAR ---------- */

.codi-conversation-side{
    min-height:0!important;

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

    overscroll-behavior:contain!important;
    scrollbar-width:thin!important;

    padding-bottom:24px!important;

    box-sizing:border-box!important;
}


/* ---------- STATUS CARD ---------- */

.codi-conversation-side .codi-side-status-bar{
    display:grid!important;

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

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

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

    height:auto!important;
    min-height:194px!important;

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

    gap:0!important;

    overflow:hidden!important;

    border-radius:22px!important;

    box-sizing:border-box!important;
}


/* ---------- OVERALL PROGRESS ---------- */

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

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

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

    padding:17px 16px 13px!important;

    overflow:visible!important;

    box-sizing:border-box!important;
}

.codi-conversation-side
.codi-conversation-progress > div{
    width:100%!important;
    min-width:0!important;
}

.codi-conversation-side
.codi-conversation-progress > div > span{
    display:block!important;

    width:100%!important;

    font-size:8.5px!important;
    line-height:1.2!important;
    letter-spacing:.035em!important;

    white-space:nowrap!important;

    overflow:visible!important;
}

.codi-conversation-side
.codi-conversation-progress > div > b{
    display:block!important;

    margin-top:8px!important;

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

.codi-conversation-side
.codi-conversation-progress > i{
    display:block!important;

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

    margin-top:15px!important;
}

.codi-conversation-side
.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:11px 0 0!important;
    padding:0!important;

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

    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;

    overflow:visible!important;

    box-sizing:border-box!important;
}


/* ---------- PRODUCTS ---------- */

.codi-conversation-side
.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:126px!important;

    padding:12px 7px!important;

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

    border-radius:0!important;

    overflow:visible!important;

    box-sizing:border-box!important;
}

.codi-conversation-side
.codi-products-launch strong{
    font-size:10px!important;
    line-height:1.2!important;

    white-space:normal!important;
    text-align:center!important;
}

.codi-conversation-side
.codi-products-launch small{
    display:none!important;
}


/* ---------- CURRENT FOCUS ---------- */

.codi-conversation-side
.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;
    max-width:100%!important;

    height:auto!important;
    min-height:68px!important;

    padding:12px 16px!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;
}

.codi-conversation-side
.codi-conversation-context span{
    display:block!important;

    flex:0 0 auto!important;

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

    margin:0 14px 0 0!important;

    font-size:8px!important;
    line-height:1!important;
    letter-spacing:.035em!important;

    white-space:nowrap!important;
}

.codi-conversation-side
.codi-conversation-context strong{
    display:block!important;

    flex:1 1 auto!important;

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

    margin:0!important;

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

    white-space:nowrap!important;

    word-break:keep-all!important;
    overflow-wrap:normal!important;

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


/* ---------- READY CARD ---------- */

.codi-conversation-ready{
    width:100%!important;

    margin-top:14px!important;

    padding:16px!important;

    border-radius:17px!important;

    box-sizing:border-box!important;
}


/* Existing sidebar Final Review button:
   keep it usable as secondary access. */

.codi-conversation-side .codi-review-launch{
    display:flex!important;

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

    width:100%!important;

    min-height:54px!important;

    margin-top:12px!important;

    padding:0 18px!important;

    border:
        1px solid rgba(90,150,10,.45)!important;

    border-radius:15px!important;

    background:
        linear-gradient(
            135deg,
            #a8ef24,
            #8bda17
        )!important;

    color:#173600!important;

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

    cursor:pointer!important;

    box-shadow:
        0 10px 24px
        rgba(83,139,12,.18)!important;
}


/* =========================================================
   MAIN VISIBLE FINAL REVIEW DOCK

   This replaces the chat composer once ready_for_review=true.
   Critical continuation no longer depends on sidebar height.
   ========================================================= */

.codi-final-review-dock{
    flex:0 0 auto!important;

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

    gap:16px!important;

    width:calc(100% - 36px)!important;

    margin:10px 18px 14px!important;
    padding:13px 14px!important;

    border:
        1px solid rgba(122,177,28,.25)!important;

    border-radius:17px!important;

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

    box-shadow:
        0 12px 30px
        rgba(48,83,20,.08)!important;

    box-sizing:border-box!important;
}

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

    min-width:0!important;
}

.codi-final-review-dock > span > strong{
    color:#24351d!important;

    font-size:13px!important;
    line-height:1.25!important;
}

.codi-final-review-dock > span > small{
    margin-top:3px!important;

    color:#7b8876!important;

    font-size:10px!important;
    line-height:1.35!important;
}

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

    flex:0 0 auto!important;

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

    gap:9px!important;

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

    min-height:50px!important;

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

    border:
        1px solid rgba(90,150,10,.46)!important;

    border-radius:13px!important;

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

    color:#173600!important;

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

    cursor:pointer!important;

    box-shadow:
        0 10px 24px
        rgba(83,139,12,.18)!important;

    transform:none!important;

    box-sizing:border-box!important;
}

.codi-final-review-dock
.codi-review-main-cta:hover{
    transform:translateY(-1px)!important;
}


/* ---------- CHAT VIEW ---------- */

.codi-conversation-main{
    min-height:0!important;
}

.codi-conversation-messages{
    min-height:0!important;

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

    overscroll-behavior:contain!important;
}


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

@media (max-width:720px){

    .codi-conversation-side{
        overflow:visible!important;

        padding-bottom:14px!important;
    }

    .codi-conversation-side .codi-side-status-bar{
        grid-template-columns:
            minmax(0,1fr)
            84px!important;

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

        min-height:184px!important;
    }

    .codi-conversation-side
    .codi-conversation-progress{
        min-height:120px!important;

        padding:15px 13px 12px!important;
    }

    .codi-conversation-side
    .codi-conversation-progress > div > span{
        font-size:7.8px!important;
    }

    .codi-conversation-side
    .codi-conversation-progress > div > b{
        font-size:26px!important;
    }

    .codi-conversation-side
    .codi-conversation-progress > small{
        font-size:7.6px!important;
    }

    .codi-conversation-side
    .codi-products-launch{
        min-height:120px!important;
    }

    .codi-conversation-side
    .codi-conversation-context{
        min-height:64px!important;

        padding:11px 13px!important;
    }

    .codi-conversation-side
    .codi-conversation-context span{
        font-size:7.5px!important;
    }

    .codi-conversation-side
    .codi-conversation-context strong{
        font-size:11.5px!important;
    }

    .codi-final-review-dock{
        flex-direction:column!important;
        align-items:stretch!important;

        gap:10px!important;

        width:calc(100% - 24px)!important;

        margin:8px 12px 12px!important;
        padding:12px!important;
    }

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

}