/* DGX OS Runtime / AI Operations Center */
.dgx-ai-ops-center {
    gap: 14px !important;
    align-content: start !important;
    min-height: auto !important;
    padding: 18px !important;
    overflow-y: auto !important;
}

.dgx-ai-ops-center::after {
    display: none !important;
}

.dgx-ai-ops-center .dgx-ops-card,
.dgx-ai-ops-center .dgx-agent-meter {
    margin: 0 !important;
}

.dgx-ops-top {
    display: flex !important;
    align-items: start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(148,163,184,.16) !important;
}

.dgx-ops-top span,
.dgx-ops-section-title {
    color: #7dd3fc !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}

.dgx-ops-top strong {
    display: block !important;
    margin-top: 4px !important;
    color: #f8fafc !important;
    font-size: 18px !important;
}

.dgx-ops-top b {
    color: #22c55e !important;
    font-size: 14px !important;
}

.dgx-ops-card,
.dgx-agent-meter {
    border: 1px solid rgba(125,211,252,.16) !important;
    background: rgba(2,6,23,.48) !important;
    border-radius: 16px !important;
    padding: 14px !important;
}

.dgx-ops-card-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.dgx-ops-card-head span {
    color: #f8fafc !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}

#opsConfidence {
    color: #f8fafc !important;
    font-size: 24px !important;
}

.dgx-ops-card p {
    margin: 10px 0 0 !important;
    color: #cbd5e1 !important;
    line-height: 1.45 !important;
}

.dgx-ops-meter {
    height: 9px !important;
    margin-top: 12px !important;
    border-radius: 999px !important;
    background: rgba(51,65,85,.78) !important;
    overflow: hidden !important;
}

.dgx-ops-meter div {
    height: 100% !important;
    width: 0%;
    border-radius: 999px !important;
    background: linear-gradient(90deg,#38bdf8,#8b5cf6) !important;
    transition: width .35s ease !important;
}

.dgx-ops-agents {
    display: grid !important;
    gap: 12px !important;
    padding-top: 4px !important;
}

.dgx-agent-meter {
    display: grid !important;
    grid-template-columns: 46px 1fr 52px !important;
    gap: 12px !important;
    align-items: center !important;
}

.dgx-agent-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 13px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 24px !important;
    background: rgba(15,23,42,.82) !important;
}

.dgx-agent-meter strong {
    color: #f8fafc !important;
    font-size: 14px !important;
}

.dgx-agent-meter p {
    margin: 5px 0 9px !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.dgx-agent-meter > b {
    text-align: right !important;
    font-size: 20px !important;
    font-weight: 900 !important;
}

.dgx-agent-bar {
    height: 8px !important;
    border-radius: 999px !important;
    background: rgba(51,65,85,.78) !important;
    overflow: hidden !important;
}

.dgx-agent-bar div {
    width: 0%;
    height: 100% !important;
    border-radius: 999px !important;
    transition: width .35s ease !important;
}

.dgx-agent-meter.green .dgx-agent-bar div { background: #22c55e !important; }
.dgx-agent-meter.green > b { color: #22c55e !important; }
.dgx-agent-meter.purple .dgx-agent-bar div { background: #8b5cf6 !important; }
.dgx-agent-meter.purple > b { color: #a855f7 !important; }
.dgx-agent-meter.blue .dgx-agent-bar div { background: #3b82f6 !important; }
.dgx-agent-meter.blue > b { color: #3b82f6 !important; }
.dgx-agent-meter.orange .dgx-agent-bar div { background: #f97316 !important; }
.dgx-agent-meter.orange > b { color: #f97316 !important; }

.dgx-ops-events {
    display: grid !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

.dgx-ops-events span {
    color: #cbd5e1 !important;
    font-size: 12px !important;
    padding-left: 10px !important;
    border-left: 2px solid rgba(125,211,252,.35) !important;
}

#opsTimelineButton {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    color: #7dd3fc !important;
    font-size: 12px !important;
    box-shadow: none !important;
}

.dgx-agent-runtime-panel{
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,.08);
}

.dgx-agent-runtime-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.agent-runtime-row{
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:10px;
    padding:8px 10px;
    border-radius:8px;
    background:rgba(255,255,255,.04);
}

.agent-runtime-name{
    font-weight:600;
}

.agent-runtime-state{
    opacity:.8;
}

.agent-runtime-progress{
    font-weight:600;
}

/* DGX BETA 07: LIVE AGENT RUNTIME */

.dgx-agent-runtime-panel {
    min-width: 0;
}

.dgx-agent-runtime-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.agent-runtime-empty {
    padding: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    font-size: 12px;
    opacity: 0.68;
}

.agent-runtime-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.035);
}

.agent-runtime-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.agent-runtime-identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.agent-runtime-indicator {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.72;
}

.agent-runtime-name {
    overflow: hidden;
    font-size: 12px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-runtime-state {
    flex: 0 0 auto;
    font-size: 10px;
    letter-spacing: 0.06em;
    opacity: 0.68;
    text-transform: uppercase;
}

.agent-runtime-task {
    overflow: hidden;
    font-size: 11px;
    line-height: 1.45;
    opacity: 0.76;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-runtime-progress-track {
    position: relative;
    width: 100%;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.agent-runtime-progress-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: currentColor;
    opacity: 0.74;
    transition: width 240ms ease;
}

.agent-runtime-metadata {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 5px 10px;
    font-size: 9px;
    opacity: 0.52;
}

.agent-runtime-row.is-running .agent-runtime-indicator {
    animation: dgx-agent-runtime-pulse 1.3s ease-in-out infinite;
}

.agent-runtime-row.is-completed {
    opacity: 0.82;
}

.agent-runtime-row.is-failed {
    border-color: rgba(255, 255, 255, 0.18);
}

@keyframes dgx-agent-runtime-pulse {
    0%,
    100% {
        opacity: 0.38;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.25);
    }
}

@media (prefers-reduced-motion: reduce) {
    .agent-runtime-row.is-running .agent-runtime-indicator {
        animation: none;
    }

    .agent-runtime-progress-fill {
        transition: none;
    }
}