@use '@angular/material' as mat;
@use '../../../../../../ui/styles/portal-layout' as portal;
@use '../../../../../../ui/styles/portal-sidebar';

@include portal.live-layout;

// ─── Sidebar-header overrides ──────────────────────────────────────────────
// Base .sidebar-header styles come from portal-sidebar
.sidebar-header button {
    @include mat.form-field-density(-5);
}

// ─── Side-panel channel list ───────────────────────────────────────────────
.sidebar {
    app-portal-channels-list {
        flex: 1;
        overflow: hidden;
        width: 100%;
    }
}

.loading-indicator {
    display: flex;
    justify-content: center;
    padding: 16px;
}

.archive-unavailable-banner {
    margin: 12px 12px 0;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
        rgba(127, 127, 127, 0.05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 20px -20px rgba(0, 0, 0, 0.35);
}

.archive-unavailable-banner__title {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.archive-unavailable-banner__description {
    margin-top: 4px;
    font-size: 0.78rem;
    line-height: 1.45;
    opacity: 0.74;
}