.clairyfi-public-feed {
    box-sizing: border-box;
    display: grid;
    gap: 1rem;
    width: 100%;
    max-width: 52rem;
    max-height: 42rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0.9rem;
    background: #f8fafc;
}

.clairyfi-public-feed:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.clairyfi-public-feed *,
.clairyfi-public-feed *::before,
.clairyfi-public-feed *::after {
    box-sizing: inherit;
}

.clairyfi-public-feed__event {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 1rem 1.1rem 1.05rem 1.2rem;
    border: 1px solid rgba(0, 0, 0, 0.13);
    border-inline-start: 0.3rem solid #64748b;
    border-radius: 0.8rem;
    background: #fff;
    color: #1f2937;
    box-shadow: 0 0.15rem 0.55rem rgba(0, 0, 0, 0.07);
}

.clairyfi-public-feed__event--critical {
    border-inline-start-color: #b91c1c;
}

.clairyfi-public-feed__event--warning {
    border-inline-start-color: #d97706;
}

.clairyfi-public-feed__event--elevated {
    border-inline-start-color: #ca8a04;
}

.clairyfi-public-feed__event--normal,
.clairyfi-public-feed__event--resolved {
    border-inline-start-color: #15803d;
}

.clairyfi-public-feed__event--unknown {
    border-inline-start-color: #64748b;
}

.clairyfi-public-feed__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    margin: 0 0 0.7rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #64748b;
}

.clairyfi-public-feed__meta time {
    font-variant-numeric: tabular-nums;
}

.clairyfi-public-feed__rule-group,
.clairyfi-public-feed__severity {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.74rem;
    line-height: 1.2;
}

.clairyfi-public-feed__severity {
    font-weight: 600;
}

.clairyfi-public-feed__event--critical .clairyfi-public-feed__severity {
    background: #fee2e2;
    color: #991b1b;
}

.clairyfi-public-feed__event--warning .clairyfi-public-feed__severity {
    background: #ffedd5;
    color: #9a3412;
}

.clairyfi-public-feed__event--elevated .clairyfi-public-feed__severity {
    background: #fef9c3;
    color: #854d0e;
}

.clairyfi-public-feed__event--normal .clairyfi-public-feed__severity,
.clairyfi-public-feed__event--resolved .clairyfi-public-feed__severity {
    background: #dcfce7;
    color: #166534;
}

.clairyfi-public-feed__message {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: normal;
}

.clairyfi-public-feed__empty {
    margin: 0;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 0.8rem;
    background: #f8fafc;
    color: #475569;
}

@media (max-width: 600px) {
    .clairyfi-public-feed {
        gap: 0.75rem;
        max-height: 70vh;
        padding: 0.6rem;
    }

    .clairyfi-public-feed__event {
        padding: 0.9rem 0.9rem 0.95rem 1rem;
        border-radius: 0.7rem;
    }

    .clairyfi-public-feed__meta {
        margin-bottom: 0.6rem;
    }

    .clairyfi-public-feed__message {
        font-size: 0.95rem;
    }
}