/* =========================================================
   TIMELINE — лента событий с карточками
   ========================================================= */

.ui-kit-timeline { position: relative; padding-left: 32px; }
.ui-kit-timeline::before {
    content: ''; position: absolute; top: 8px; bottom: 8px; left: 8px;
    width: 2px; background: var(--ui-kit-border);
}

.ui-kit-timeline__date-separator {
    display: flex; align-items: center; gap: 10px;
    margin: 12px 0 16px; padding-left: 0;
    font-size: var(--ui-kit-fs-xs);
    font-weight: var(--ui-kit-fw-bold);
    color: var(--ui-kit-text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.ui-kit-timeline__date-separator::before,
.ui-kit-timeline__date-separator::after {
    content: ''; flex: 1; height: 1px; background: var(--ui-kit-border);
}

.ui-kit-timeline__item { position: relative; padding-bottom: var(--ui-kit-space-xl); }
.ui-kit-timeline__item:last-child { padding-bottom: 0; }
.ui-kit-timeline__item::before {
    content: ''; position: absolute; left: -32px; top: 18px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--ui-kit-white);
    border: 2px solid var(--ui-kit-border);
    z-index: 1;
}
.ui-kit-timeline__item--done::before {
    background: var(--ui-kit-success); border-color: var(--ui-kit-success);
    box-shadow: 0 0 0 4px var(--ui-kit-success-tint);
}
.ui-kit-timeline__item--active::before {
    background: var(--ui-kit-blue); border-color: var(--ui-kit-blue);
    box-shadow: 0 0 0 4px var(--ui-kit-blue-ring);
    animation: ui-kit-timeline-pulse 2s ease-out infinite;
}
.ui-kit-timeline__item--warning::before {
    background: var(--ui-kit-warning); border-color: var(--ui-kit-warning);
    box-shadow: 0 0 0 4px var(--ui-kit-warning-tint);
}
.ui-kit-timeline__item--danger::before {
    background: var(--ui-kit-danger); border-color: var(--ui-kit-danger);
    box-shadow: 0 0 0 4px var(--ui-kit-danger-tint);
}
@keyframes ui-kit-timeline-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(43, 44, 132, 0.5); }
    70%  { box-shadow: 0 0 0 12px rgba(43, 44, 132, 0); }
    100% { box-shadow: 0 0 0 0 rgba(43, 44, 132, 0); }
}

.ui-kit-timeline__card {
    position: relative;
    display: flex; flex-direction: column; gap: 8px;
    padding: 16px 18px;
    padding-right: 130px;
    background: var(--ui-kit-white);
    border: 1px solid var(--ui-kit-border);
    border-radius: var(--ui-kit-radius-md);
    transition: transform var(--ui-kit-trans-fast), box-shadow var(--ui-kit-trans-fast), border-color var(--ui-kit-trans-fast);
}
.ui-kit-timeline__card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ui-kit-shadow-md);
    border-color: transparent;
}

.ui-kit-timeline__head { display: flex; align-items: center; gap: 10px; }
.ui-kit-timeline__avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--ui-kit-blue-tint); color: var(--ui-kit-blue);
    font-size: var(--ui-kit-fs-xs); font-weight: var(--ui-kit-fw-bold);
    text-transform: uppercase; flex-shrink: 0;
}
.ui-kit-timeline__author { font-size: var(--ui-kit-fs-sm); font-weight: var(--ui-kit-fw-semibold); color: var(--ui-kit-navy); line-height: 1.2; }
.ui-kit-timeline__role { font-size: var(--ui-kit-fs-xs); color: var(--ui-kit-text-muted); line-height: 1.2; }
.ui-kit-timeline__time { margin-left: auto; font-size: var(--ui-kit-fs-xs); color: var(--ui-kit-text-muted); white-space: nowrap; }

.ui-kit-timeline__type {
    position: absolute;
    right: 16px;
    bottom: 14px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px;
    border-radius: var(--ui-kit-radius-pill);
    font-size: 10px; font-weight: var(--ui-kit-fw-bold);
    text-transform: uppercase; letter-spacing: 0.04em;
    white-space: nowrap;
    background: var(--ui-kit-blue-tint); color: var(--ui-kit-blue);
    z-index: 1;
}
.ui-kit-timeline__type--success { background: var(--ui-kit-success-tint); color: var(--ui-kit-success); }
.ui-kit-timeline__type--warning { background: var(--ui-kit-warning-tint); color: #B87A08; }
.ui-kit-timeline__type--danger  { background: var(--ui-kit-danger-tint);  color: var(--ui-kit-danger); }
.ui-kit-timeline__type--accent  { background: var(--ui-kit-accent-tint);  color: var(--ui-kit-accent); }

.ui-kit-timeline__title { font-size: var(--ui-kit-fs-base); font-weight: var(--ui-kit-fw-semibold); color: var(--ui-kit-navy); margin: 0; line-height: 1.35; }
.ui-kit-timeline__desc { font-size: var(--ui-kit-fs-sm); color: var(--ui-kit-text-muted); margin: 0; line-height: var(--ui-kit-lh-loose); }

.ui-kit-timeline__attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ui-kit-timeline__attach {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: var(--ui-kit-bg-soft);
    border: 1px solid var(--ui-kit-border-soft);
    border-radius: var(--ui-kit-radius-sm);
    font-size: var(--ui-kit-fs-xs); color: var(--ui-kit-navy);
    text-decoration: none;
    transition: background var(--ui-kit-trans-fast), border-color var(--ui-kit-trans-fast);
}
.ui-kit-timeline__attach:hover { background: var(--ui-kit-blue-tint); border-color: var(--ui-kit-blue); color: var(--ui-kit-blue); }

.ui-kit-timeline__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ui-kit-timeline__tag {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: var(--ui-kit-radius-pill);
    background: var(--ui-kit-bg-soft); color: var(--ui-kit-text-muted);
    font-size: var(--ui-kit-fs-xs); font-weight: var(--ui-kit-fw-medium);
}

.ui-kit-timeline__actions {
    display: flex; align-items: center; gap: 12px;
    margin-top: 6px; padding-top: 10px;
    border-top: 1px dashed var(--ui-kit-border-soft);
}
.ui-kit-timeline__action {
    display: inline-flex; align-items: center; gap: 5px;
    background: transparent; border: none; padding: 0;
    color: var(--ui-kit-text-muted); cursor: pointer;
    font-family: inherit; font-size: var(--ui-kit-fs-xs);
    font-weight: var(--ui-kit-fw-medium);
    transition: color var(--ui-kit-trans-fast);
}
.ui-kit-timeline__action:hover { color: var(--ui-kit-blue); }
.ui-kit-timeline__action--danger:hover { color: var(--ui-kit-danger); }

.ui-kit-timeline--compact .ui-kit-timeline__card {
    background: transparent; border: none; padding: 0;
    padding-right: 130px;
    box-shadow: none;
}
.ui-kit-timeline--compact .ui-kit-timeline__card:hover { transform: none; box-shadow: none; }