/*
   DIGITAL TEAM 0.5.8.1

   Existing product pages inherit their original
   layout and typography.

   This file now styles only the new 0.5.8
   components and the two visual skins.
*/

.product-section{
    margin-top:24px;
}

.product-loading,
.product-empty,
.product-error{
    padding:18px;
    border:1px solid var(--border);
    border-radius:13px;
    background:var(--surface);
}

.product-error{
    border-color:
        color-mix(
            in srgb,
            var(--danger) 45%,
            var(--border)
        );
}


/* AI CHAT */

.chat-mode-switch{
    display:inline-flex;
    gap:4px;
    padding:4px;
    margin-bottom:10px;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--surface-2);
}

.chat-mode-switch button{
    border:none;
    background:transparent;
    color:var(--muted);
    min-height:34px !important;
}

.chat-mode-switch button.active{
    background:var(--surface);
    color:var(--text);
    box-shadow:var(--shadow);
}

.developer-notice{
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin-bottom:11px;
    padding:11px 13px;
    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent) 40%,
            var(--border)
        );
    border-radius:11px;
    background:
        color-mix(
            in srgb,
            var(--accent) 7%,
            var(--surface)
        );
}

.developer-notice.hidden{
    display:none;
}

.developer-notice span{
    color:var(--muted);
}

.ai-chat-layout{
    display:grid;
    grid-template-columns:
        235px
        minmax(0,1fr);
    gap:10px;
    min-height:
        calc(
            100dvh
            - 220px
        );
}

.ai-chat-history,
.ai-chat-workspace{
    min-width:0;
    border:1px solid var(--border);
    border-radius:13px;
    background:var(--surface);
}

.ai-chat-history{
    padding:11px;
    overflow:auto;
}

.section-mini-title{
    margin-bottom:8px;
    font-weight:750;
}

.chat-history-item{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    margin-bottom:4px;
    padding:8px 9px !important;
    text-align:left;
    background:var(--surface-2);
    color:var(--text);
    border:1px solid transparent;
}

.chat-history-item:hover{
    border-color:var(--accent);
}

.chat-history-item span{
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.chat-history-item small{
    white-space:nowrap;
    color:var(--muted);
}

.ai-chat-workspace{
    display:flex;
    flex-direction:column;
    min-height:590px;
    overflow:hidden;
}

.ai-chat-modelbar{
    display:grid;
    grid-template-columns:
        220px
        minmax(300px,1fr);
    gap:9px;
    padding:11px;
    border-bottom:1px solid var(--border);
}

.model-price-line{
    margin-top:4px;
    min-height:16px;
    font-size:10.5px;
    color:var(--muted);
    line-height:1.35;
}

.ai-chat-messages-v58{
    flex:1;
    overflow:auto;
    padding:15px;
}

.chat-message-v58{
    max-width:84%;
    margin-bottom:10px;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface-2);
}

.chat-message-v58.user{
    margin-left:auto;
    background:
        color-mix(
            in srgb,
            var(--accent) 9%,
            var(--surface)
        );
}

.message-role-v58{
    margin-bottom:4px;
    font-size:9.5px;
    font-weight:800;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.08em;
}

.message-usage-v58{
    display:flex;
    gap:8px;
    margin-top:7px;
    font-size:10.5px;
    color:var(--muted);
}

.message-usage-v58 strong{
    color:var(--success);
}

.ai-chat-compose-v58{
    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        auto;
    gap:8px;
    padding:11px;
    border-top:1px solid var(--border);
}

.ai-chat-compose-v58 textarea{
    min-height:72px;
}


/* INTEGRATIONS */

.integration-grid-058{
    display:grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );
    gap:11px;
}

.provider-policy-note-058{
    display:grid;
    gap:5px;
    margin:10px 0 14px;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--surface-2);
}

.provider-policy-note-058 span{
    color:var(--muted);
    line-height:1.45;
}

.provider-primary-current{
    color:var(--success, #168653);
    border-color:rgba(22,134,83,.28);
    background:rgba(22,134,83,.08);
    cursor:default;
}

.integration-card-058{
    min-width:0;
    padding:16px;
    border:1px solid var(--border);
    border-radius:13px;
    background:var(--surface);
}

.card-row-058{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
}

.integration-card-058 h2{
    margin:3px 0 5px;
    font-size:18px;
}

.integration-stats-058{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin-top:12px;
}

.integration-stats-058 > div{
    padding:9px;
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--surface-2);
}

.integration-stats-058 small{
    display:block;
    color:var(--muted);
}

.integration-stats-058 b{
    font-size:15px;
}

.card-actions-058{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:13px;
}

.coming-grid-058{
    display:grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );
    gap:8px;
}

.coming-card-058{
    display:flex;
    flex-direction:column;
    gap:5px;
    min-height:72px;
    padding:11px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface);
}

.coming-card-058 small{
    color:var(--muted);
}


/* ALERTS */

.alerts-grid-058{
    display:grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );
    gap:8px;
}

.alert-card-058{
    padding:12px;
    border:1px solid var(--border);
    border-radius:11px;
    background:var(--surface);
}

.alert-card-058.warn{
    border-color:
        color-mix(
            in srgb,
            var(--warning) 45%,
            var(--border)
        );
}

.alert-card-058.error{
    border-color:
        color-mix(
            in srgb,
            var(--danger) 45%,
            var(--border)
        );
}

.section-row-058{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}

.log-row-058{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:8px 0;
    border-bottom:1px solid var(--border);
}

.log-row-058 small{
    white-space:nowrap;
    color:var(--muted);
}


/* HELP */

.help-button-058{
    width:32px;
    height:32px;
    min-width:32px;
    min-height:32px !important;
    padding:0 !important;
    margin-left:7px;
    border-radius:50% !important;
    display:grid;
    place-items:center;
    background:var(--surface);
    color:var(--text);
    border:1px solid var(--border);
    font-weight:850;
}

.help-grid-058{
    display:grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );
    gap:9px;
}

.help-card-058{
    width:100%;
    min-height:140px;
    padding:14px !important;
    text-align:left;
    color:var(--text);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:11px !important;
}

.help-card-058:hover{
    border-color:var(--accent);
    transform:translateY(-1px);
}

.help-card-058 p{
    color:var(--muted);
}

.help-card-058 span{
    color:var(--accent);
    font-weight:750;
}

.help-overlay-058{
    display:none;
    position:fixed;
    inset:0;
    z-index:40000;
    background:rgba(2,6,23,.52);
    backdrop-filter:blur(4px);
}

.help-overlay-058.show{
    display:block;
}

.help-drawer-058{
    position:absolute;
    right:0;
    top:0;
    width:min(460px,95vw);
    height:100dvh;
    overflow:auto;
    padding:24px;
    color:var(--text);
    background:var(--surface);
    box-shadow:
        -25px 0 80px
        rgba(0,0,0,.27);
}

.help-close-058{
    position:absolute;
    right:14px;
    top:14px;
}

.help-section-058{
    margin-top:13px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface-2);
}

.help-section-058 p{
    margin-bottom:0;
}


/* APPEARANCE */

.appearance-grid-058{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}


/* EXECUTIVE */

html[data-ui-style="executive"]{
    --accent:#4f46e5;
    --accent-2:#6366f1;
}

html[data-ui-style="executive"][data-theme="light"] body,
html[data-ui-style="executive"][data-theme="light"] .main{
    background:#f4f6f9 !important;
}

html[data-ui-style="executive"][data-theme="light"] .sidebar{
    background:#ffffff !important;
    color:#334155 !important;
    border-right:1px solid #e5e7eb !important;
    box-shadow:
        8px 0 24px
        rgba(15,23,42,.035);
}

html[data-ui-style="executive"][data-theme="light"] .brand{
    color:#111827 !important;
}

html[data-ui-style="executive"][data-theme="light"] .nav a{
    color:#475569 !important;
}

html[data-ui-style="executive"][data-theme="light"] .nav a.active{
    color:#3730a3 !important;
    background:#eef2ff !important;
}

html[data-ui-style="executive"][data-theme="light"] .topbar{
    background:rgba(255,255,255,.94) !important;
    border-bottom:1px solid #e5e7eb;
}

html[data-ui-style="executive"] .panel,
html[data-ui-style="executive"] .metric-card,
html[data-ui-style="executive"] .integration-card-058,
html[data-ui-style="executive"] .agent-v2-card{
    border-radius:12px !important;
    box-shadow:
        0 2px 10px
        rgba(15,23,42,.045)
        !important;
}


/* NEXUS */

html[data-ui-style="nexus"]{
    --accent:#25d7ff;
    --accent-2:#a855f7;
    --success:#27e6a1;
}

html[data-ui-style="nexus"] body{
    background:#030711 !important;
}

html[data-ui-style="nexus"] .sidebar{
    background:
        linear-gradient(
            180deg,
            #020617,
            #09031c
        )
        !important;

    border-right:
        1px solid
        rgba(37,215,255,.2)
        !important;

    box-shadow:
        14px 0 55px
        rgba(0,0,0,.32);
}

html[data-ui-style="nexus"] .main{
    background-color:#050817 !important;

    background-image:
        linear-gradient(
            rgba(37,215,255,.035)
            1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(37,215,255,.035)
            1px,
            transparent 1px
        ),

        radial-gradient(
            circle at 10% 0%,
            rgba(37,215,255,.17),
            transparent 34%
        ),

        radial-gradient(
            circle at 90% 5%,
            rgba(168,85,247,.2),
            transparent 36%
        )
        !important;

    background-size:
        38px 38px,
        38px 38px,
        auto,
        auto
        !important;
}

html[data-ui-style="nexus"][data-theme="light"] .main{
    background-color:#edf7fb !important;

    background-image:
        linear-gradient(
            rgba(14,165,233,.055)
            1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(14,165,233,.055)
            1px,
            transparent 1px
        ),

        radial-gradient(
            circle at 10% 0%,
            rgba(6,182,212,.16),
            transparent 35%
        ),

        radial-gradient(
            circle at 90% 0%,
            rgba(168,85,247,.13),
            transparent 35%
        )
        !important;

    background-size:
        38px 38px,
        38px 38px,
        auto,
        auto
        !important;
}

html[data-ui-style="nexus"][data-theme="dark"]{
    --surface:
        rgba(8,18,34,.82);
    --surface-2:
        rgba(14,29,50,.76);
    --text:#e9faff;
    --muted:#87a7b8;
    --border:
        rgba(56,189,248,.17);
}

html[data-ui-style="nexus"] .panel,
html[data-ui-style="nexus"] .metric-card,
html[data-ui-style="nexus"] .integration-card-058,
html[data-ui-style="nexus"] .agent-v2-card,
html[data-ui-style="nexus"] .ai-chat-history,
html[data-ui-style="nexus"] .ai-chat-workspace,
html[data-ui-style="nexus"] .alert-card-058,
html[data-ui-style="nexus"] .help-card-058{
    border:
        1px solid
        color-mix(
            in srgb,
            var(--accent) 28%,
            var(--border)
        )
        !important;

    border-radius:18px !important;

    backdrop-filter:blur(20px);

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.2),

        0 0 26px
        rgba(37,215,255,.035)
        !important;
}

html[data-ui-style="nexus"] .eyebrow{
    color:var(--accent) !important;
    text-shadow:
        0 0 15px
        rgba(37,215,255,.42);
}

html[data-ui-style="nexus"] .primary{
    background:
        linear-gradient(
            120deg,
            #06b6d4,
            #7c3aed
        )
        !important;

    border:none !important;
}


/* RESPONSIVE */

@media(max-width:1000px){

    .coming-grid-058{
        grid-template-columns:
            repeat(2,1fr);
    }

    .alerts-grid-058,
    .help-grid-058{
        grid-template-columns:
            repeat(2,1fr);
    }
}


@media(max-width:900px){

    .ai-chat-layout{
        grid-template-columns:1fr;
        min-height:0;
    }

    .ai-chat-history{
        max-height:190px;
    }

    .ai-chat-modelbar{
        grid-template-columns:1fr;
    }

    .ai-chat-workspace{
        min-height:68dvh;
    }

    .integration-grid-058{
        grid-template-columns:1fr;
    }
}


@media(max-width:620px){

    .content{
        padding:11px 9px 28px !important;
    }

    .coming-grid-058,
    .alerts-grid-058,
    .help-grid-058,
    .integration-stats-058,
    .appearance-grid-058{
        grid-template-columns:1fr;
    }

    .ai-chat-compose-v58{
        grid-template-columns:1fr;
    }

    .chat-message-v58{
        max-width:95%;
    }

    .card-row-058{
        flex-direction:column;
    }

    .log-row-058{
        flex-direction:column;
        gap:2px;
    }
}