/*
    Styles ONLY for features added after
    the known-good UI foundation.
*/


/* CHIEF */

.chief-stats-060{

    display:grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                0,
                1fr
            )
        );

    gap:
        10px;

    margin-bottom:
        12px;
}


.chief-stats-060 > div{

    padding:
        12px;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    background:
        var(--surface);
}


.chief-layout-060{

    display:grid;

    grid-template-columns:
        250px
        minmax(
            0,
            1fr
        );

    gap:
        12px;
}


.chief-sidebar-060,
.chief-chat-060{

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    background:
        var(--surface);
}


.chief-sidebar-060{

    padding:
        12px;
}


.chief-chat-060{

    min-height:
        570px;

    display:flex;

    flex-direction:
        column;

    overflow:
        hidden;
}


.chief-messages-060{

    flex:
        1;

    padding:
        16px;

    overflow:
        auto;
}


.chief-compose-060{

    display:grid;

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

    gap:
        8px;

    padding:
        12px;

    border-top:
        1px solid
        var(--border);
}


/* AI CHAT */

#page-askai
.ai-chat-layout{

    min-width:
        0;
}


#page-askai
select{

    max-width:
        100%;
}


/* CONNECTOR EXTENSIONS */

.dt-connector-grid-070{

    display:grid;

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

    gap:
        10px;
}


.dt-connector-card-070{

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    background:
        var(--surface);

    padding:
        14px;
}


/* RESPONSIVE */

@media(max-width:900px){

    .chief-layout-060{

        grid-template-columns:
            1fr;
    }


    .dt-connector-grid-070{

        grid-template-columns:
            1fr;
    }
}


@media(max-width:620px){

    .chief-stats-060{

        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }


    .chief-compose-060{

        grid-template-columns:
            1fr;
    }
}