.ai-status-timeline {
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 20px;
   margin: 10px 0;
}

.timeline-header {font-size: 1.3em;}
.timeline-header>span{font-weight: 500;}

.engine-timeline {
   margin-bottom: 20px;
   padding: 10px;
   border-radius: 4px;
}

.engine-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 10px;
}

.engine-name {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
}

.status-indicator {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   flex-shrink: 0;
}

.timeline-container {
   position: relative;
   height: 24px;
   background: var(--color-primary);
   border-radius: 4px;
   overflow: hidden;
}

.time-marks {
   display: flex;
   justify-content: space-between;
   margin-top: 5px;
   padding: 0 5px;
}

.time-mark {
   color: var(--gray);
}

.timeline-bar {
   position: absolute;
   height: 100%;
   background: var(--color-primary);
}

.error-bar {
   background: #ff3852;
}

.legend {
   display: flex;
   gap: 20px;
   margin-top: 15px;
   padding: 10px;
}

.legend-item {
   display: flex;
   align-items: center;
   gap: 8px;
}

.error-count {
   color: #ff3852;
}

.stats-count {font-size: .95em; color: var(--gray);}

.last-updated {
   color: var(--gray);
   text-align: right;
   margin-top: 10px;
   font-size: .9em;
   opacity: .8;
}

.statusInfoBox{background: var(--light-gray); padding: 1em; border-radius: 5px; font-size: .98em; margin-top: 15px; text-align: center;}

@media (max-width: 1000px) {
    .stats-count{width: 100%;}
}