/* ==========================================================
   DIGITAL TEAM
   Compact desktop + tablet + mobile responsive layer
   ========================================================== */


/* ---------- COMPACT DESKTOP ---------- */

html{
    font-size:14px;
}

body{
    font-size:14px;
    line-height:1.45;
    overflow-x:hidden;
}

.sidebar{
    width:224px !important;
    height:100dvh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
}

.main{
    margin-left:224px !important;
    min-width:0;
}

.brand{
    font-size:17px !important;
    line-height:1.15;
    padding-top:16px !important;
    padding-bottom:12px !important;
}

.nav{
    padding-bottom:24px;
}

.nav-group-title{
    font-size:9px !important;
    letter-spacing:.12em !important;
    padding:
        12px
        12px
        4px !important;
}

.nav a{
    font-size:13px !important;
    line-height:1.25 !important;
    padding:
        7px
        11px !important;
    margin:
        1px
        7px !important;
    min-height:34px;
    display:flex !important;
    align-items:center;
}

.nav a.active::before{
    top:6px !important;
    bottom:6px !important;
}

.topbar{
    min-height:58px !important;
    padding:
        8px
        20px !important;
}

.topbar h1,
.topbar h2{
    font-size:18px !important;
}

.content{
    padding:
        18px
        20px
        30px !important;
}

h1{
    font-size:25px;
}

h2{
    font-size:20px;
}

h3{
    font-size:16px;
}

.page-hero{
    margin-bottom:17px !important;
}

.page-hero h2{
    font-size:22px !important;
}

.eyebrow{
    font-size:9px !important;
}

.panel,
.metric-card,
.feature-card,
.channel-card,
.integration-card,
.agent-card{
    padding:16px !important;
}

.dashboard-grid{
    gap:10px !important;
}

.metric-card{
    min-height:100px;
}

.metric-value{
    font-size:23px !important;
    margin-top:5px !important;
}

.metric-label{
    font-size:11px !important;
}

button,
.button,
.primary,
.secondary,
.danger{
    font-size:13px !important;
}

input,
select,
textarea{
    font-size:13px;
}

.runtime-pill,
.badge{
    font-size:11px !important;
}

.channel-route{
    padding:
        9px
        0 !important;
}

.route-source,
.route-agent{
    padding:10px !important;
}


/* ---------- SCROLLBAR ---------- */

.sidebar{
    scrollbar-width:thin;
    scrollbar-color:
        rgba(148,163,184,.45)
        transparent;
}

.sidebar::-webkit-scrollbar{
    width:5px;
}

.sidebar::-webkit-scrollbar-track{
    background:transparent;
}

.sidebar::-webkit-scrollbar-thumb{
    background:
        rgba(148,163,184,.4);

    border-radius:20px;
}


/* ---------- MOBILE NAV ---------- */

.mobile-nav-button{
    display:none;
}

.mobile-nav-overlay{
    display:none;
}


/* ---------- TABLES ---------- */

table{
    max-width:100%;
}

.table-scroll{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}


/* ---------- MOBILE / TABLET ---------- */

@media(max-width:900px){

    html{
        font-size:14px;
    }

    body{
        overflow-x:hidden;
    }

    .sidebar{
        position:fixed !important;
        z-index:10020 !important;
        top:0 !important;
        left:0 !important;

        width:
            min(
                82vw,
                288px
            ) !important;

        height:100dvh !important;

        transform:
            translateX(-105%);

        transition:
            transform .22s ease;

        box-shadow:
            18px 0 55px
            rgba(0,0,0,.35);
    }

    body.mobile-nav-open
    .sidebar{
        transform:
            translateX(0);
    }

    .main{
        margin-left:
            0 !important;

        width:
            100% !important;

        min-width:
            0 !important;
    }

    .mobile-nav-overlay{
        display:block;

        position:fixed;

        inset:0;

        z-index:10010;

        background:
            rgba(2,6,23,.58);

        backdrop-filter:
            blur(3px);

        opacity:0;

        pointer-events:none;

        transition:
            opacity .2s;
    }

    body.mobile-nav-open
    .mobile-nav-overlay{
        opacity:1;
        pointer-events:auto;
    }

    .mobile-nav-button{
        display:inline-grid;

        place-items:center;

        width:42px;
        height:42px;

        min-width:42px;

        padding:0 !important;

        border-radius:11px;

        font-size:20px !important;

        background:
            var(--surface);

        color:
            var(--text);

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

    .topbar{
        position:sticky !important;

        top:0;

        z-index:9000;

        min-height:58px !important;

        padding:
            max(
                8px,
                env(
                    safe-area-inset-top
                )
            )
            12px
            8px !important;

        gap:8px;

        background:
            color-mix(
                in srgb,
                var(--surface) 92%,
                transparent
            );

        backdrop-filter:
            blur(18px);
    }

    .topbar > div{
        min-width:0;
    }

    .topbar h1,
    .topbar h2{
        font-size:
            16px !important;

        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .content{
        padding:
            14px
            12px
            calc(
                24px
                + env(
                    safe-area-inset-bottom
                )
            ) !important;
    }

    .page-hero{
        flex-direction:column;

        gap:12px !important;

        margin-bottom:
            14px !important;
    }

    .page-hero h2{
        font-size:
            20px !important;
    }

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

        gap:9px !important;
    }

    .dashboard-two,
    .work-grid,
    .appearance-grid,
    .settings-profile-grid,
    .ask-ai-layout{
        grid-template-columns:
            minmax(0,1fr)
            !important;
    }

    .metric-card{
        min-width:0;
        min-height:93px;
        padding:13px !important;
    }

    .metric-value{
        font-size:
            21px !important;
    }

    .panel,
    .feature-card,
    .channel-card,
    .integration-card,
    .agent-card{
        border-radius:
            14px !important;

        padding:
            14px !important;
    }

    .cards,
    .agents-grid{
        grid-template-columns:
            1fr !important;
    }

    .channel-head{
        flex-direction:column;
        gap:10px !important;
    }

    .channel-route{
        grid-template-columns:
            1fr !important;
    }

    .channel-tree{
        padding-left:
            14px !important;
    }

    .route-source,
    .route-agent{
        min-width:0;
    }

    .modal-bg{
        padding:
            8px !important;

        align-items:
            flex-end !important;
    }

    .modal{
        width:
            100% !important;

        max-width:
            none !important;

        max-height:
            92dvh !important;

        overflow-y:
            auto !important;

        border-radius:
            18px
            18px
            0
            0 !important;

        padding-bottom:
            calc(
                18px
                + env(
                    safe-area-inset-bottom
                )
            ) !important;
    }

    input,
    textarea,
    select{
        /*
         * 16px prevents automatic
         * Safari zoom on iPhone.
         */
        font-size:
            16px !important;

        max-width:
            100% !important;
    }

    button,
    .button,
    .primary,
    .secondary,
    .danger{
        min-height:
            42px;
    }

    .actions{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
    }

    .actions > *{
        flex:
            1 1 auto;
    }

    .ask-ai-main{
        height:
            calc(
                100dvh
                - 145px
            ) !important;

        min-height:
            520px !important;
    }

    .ask-ai-side{
        order:2;
    }

    .ask-ai-compose{
        position:sticky;
        bottom:0;

        background:
            var(--surface);

        padding-bottom:
            env(
                safe-area-inset-bottom
            );
    }

    .chat-message{
        max-width:
            92% !important;
    }

    .profile-avatar-preview{
        width:96px !important;
        height:96px !important;

        border-radius:
            24px !important;
    }

    canvas{
        max-width:
            100% !important;
    }
}


/* ---------- SMALL PHONES ---------- */

@media(max-width:520px){

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

    .metric-label{
        font-size:
            10px !important;
    }

    .metric-value{
        font-size:
            19px !important;
    }

    .topbar{
        padding-left:
            8px !important;

        padding-right:
            8px !important;
    }

    .content{
        padding-left:
            9px !important;

        padding-right:
            9px !important;
    }

    .runtime-pill{
        max-width:100%;
    }

    .ask-ai-toolbar{
        flex-direction:
            column;
    }

    .ask-ai-compose{
        flex-direction:
            column;
    }

    .ask-ai-compose button{
        width:100%;
    }
}


/* ---------- VERY SMALL PHONES ---------- */

@media(max-width:370px){

    .dashboard-grid{
        grid-template-columns:
            1fr !important;
    }

    .topbar h1,
    .topbar h2{
        max-width:
            130px;
    }
}


/* ---------- TELEGRAM CONTROL CENTER ---------- */

.channel-example{
    display:grid;
    gap:5px;

    margin:
        14px
        0;

    padding:
        13px;

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

    border-radius:
        12px;

    background:
        var(--surface-2);

    font-size:
        12px;
}

.channel-meta{
    display:flex;
    flex-wrap:wrap;
    gap:7px;

    margin-top:12px;
}

.telegram-send-box{
    margin-top:18px;

    padding:14px;

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

    border-radius:
        14px;

    background:
        var(--surface-2);
}

.telegram-send-grid{
    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:9px;

    margin:
        10px
        0;
}

.telegram-send-box textarea{
    min-height:82px;
}

.outbox-details{
    margin-top:14px;
}

.outbox-details summary{
    cursor:pointer;

    color:
        var(--muted);

    font-size:
        12px;
}

.outbox-row{
    display:grid;

    grid-template-columns:
        minmax(
            140px,
            .35fr
        )
        minmax(
            0,
            1fr
        );

    gap:10px;

    padding:
        9px
        0;

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

    font-size:
        12px;
}

.outbox-message{
    overflow:hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.compact-empty{
    padding:
        12px !important;
}


@media(max-width:700px){

    .telegram-send-grid{
        grid-template-columns:
            1fr;
    }

    .outbox-row{
        grid-template-columns:
            1fr;
    }

    .outbox-message{
        white-space:
            normal;
    }
}