/** MUAADH TIMELINE — Activity timeline / event stream. Single source. */


/* ============================================================================
 * APPENDED (Phase 13 Wave 17 — 2026-05-13): rules pulled from muaadh-core.css
 * ============================================================================ */

.muaadh-timeline {
    position: relative;
    padding-left: 30px;
}

.muaadh-timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-default);
}

.muaadh-timeline-item {
    position: relative;
    padding-bottom: var(--space-5);
}

.muaadh-timeline-item:last-child {
    padding-bottom: 0;
}

.muaadh-timeline-marker {
    position: absolute;
    left: -30px;
    top: 0;
    width: var(--size-control-xs);
    height: var(--size-control-xs);
    border-radius: var(--chassis-radius-circle);
    border: var(--chassis-border-normal) solid var(--theme-card-bg);
    box-shadow: 0 0 0 2px var(--theme-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-on-primary);
    font-size: var(--text-xs);
}

.muaadh-timeline-item.active .muaadh-timeline-marker {
    width: 16px;
    height: 16px;
    left: -27px;
}

.muaadh-timeline-user {
    position: relative;
    padding-left: 30px;
}

.muaadh-timeline-user::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-default);
}

.muaadh-timeline-item-user {
    position: relative;
    padding-bottom: 15px;
}

.muaadh-timeline-marker-user {
    position: absolute;
    left: -30px;
    width: 22px;
    height: 22px;
    border-radius: var(--chassis-radius-circle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-on-primary);
    font-size: var(--text-xs);
}

.muaadh-timeline-content-user {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border-radius: 5px;
}

.muaadh-timeline-content {
    padding: 10px 15px;
    background: var(--bg-secondary);
    border-radius: 5px;
}