/* Icon styling */
.activity-icon {
    width: 16px;
    height: 16px;
    opacity: 0.85;
}

.activity-icon.success {
    color: var(--activityStream-success);
}

.activity-icon.warning {
    color: var(--activityStream-warning);
}

.activity-icon.critical {
    color: var(--activityStream-critical);
}

/* subtle spinner */
.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* LOG STYLES */

/* LOG ENTRY ANIMATION */

.console-line {
    display: grid;
    grid-template-columns: 55px 22px 140px 1fr;
    align-items: center;
    gap: 10px;
    padding: 3px 6px;
    font-size: 14px;
    border-radius: 3px;
    opacity: 0.85;
    transform: translateY(4px);
}

/* ======================================== */
/* Activity Stream Motion */
/* ======================================== */

.console-line.activity .activityStream-event {
    transition: color 1.2s ease;
}

/* Base/current line colors */
.console-line.activity.neutral .activityStream-event {
    color: var(--text-secondary);
}

.console-line.activity.success .activityStream-event {
    color: var(--activityStream-success);
}

.console-line.activity.warning .activityStream-event {
    color: var(--activityStream-warning);
}

.console-line.activity.critical .activityStream-event {
    color: var(--activityStream-critical);
}

/* Newest-line attention */
.console-line.activity.activity-newest.activity-animate.neutral .activityStream-event {
    animation: activityNeutralAttention 3s ease forwards;
}

.console-line.activity.activity-newest.activity-animate.success .activityStream-event {
    animation: activitySuccessAttention 3s ease forwards;
}

/* Historical lines only */
.console-line.activity.neutral:not(.activity-newest) .activityStream-event {
    color: var(--activityStream-neutral-muted);
}

.console-line.activity.success:not(.activity-newest) .activityStream-event {
    color: var(--activityStream-success-muted);
}

.console-line.activity.warning:not(.activity-newest) .activityStream-event {
    color: var(--activityStream-warning-muted);
}

.console-line.activity.critical:not(.activity-newest) .activityStream-event {
    color: var(--activityStream-critical-muted);
}

@keyframes activityNeutralAttention {
    0% {
        color: rgba(0, 0, 0, 0);
    }

    25% {
        color: var(--text-bright);
    }

    45% {
        color: var(--text-bright);
    }

    100% {
        color: var(--text-secondary);
    }
}

@keyframes activitySuccessAttention {
    0% {
        color: rgba(0, 0, 0, 0);
    }

    25% {
        color: #ceffbe;
    }

    45% {
        color: #ceffbe;
    }

    100% {
        color: var(--activityStream-success);
    }
}

@media (prefers-reduced-motion: reduce) {
    .console-line.activity.activity-newest .activityStream-event {
        animation: none;
    }
}

.console-line:nth-child(odd) {
    background: var(--surface-row-odd);
}

.console-line:nth-child(even) {
    background: var(--surface-row-even);
}


#activityStreamConsole {
    position: relative;
    scroll-behavior: smooth;
    flex: 1;
    overflow-y: auto;
    padding-right: 6px;
}

#activityStreamConsole::before {
    content: "";
    position: sticky;
    top: 0;
    height: 10px;
    display: block;
    /*background: linear-gradient(to bottom, #111, transparent); */
    pointer-events: none;
}

/* DIAGNOSTICS */

/* ACTIVITYSTREAM */

.activityStream {
    font-family: var(--font-primary);
    font-size: 14px;
    line-height: 1.6;
}

.activityStream-label {
    width: 70px;
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    font-weight: 500;
    letter-spacing: 0.04em;
}

.activityStream-icon {
    font-size: 16px;
    line-height: 1;
}

.activityStream-message {
    flex: 1;
    color: var(--text-secondary);
}

.activityStream-message-subtle {
    flex: 1;
    color: var(--text-tertiary);
}

.activityStream-time {
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    font-weight: 400;
    white-space: nowrap;
}

.activityStream-component {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    background: var(--surface-pill);
    padding: 2px 6px;
    border-radius: var(--radius-soft);
    text-transform: lowercase;
    min-width: 95px;
    text-align: center;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activityStream-event {
    flex: 1;
    color: var(--text-primary);
    line-height: var(--line-height-normal);
}