/* ============================================================
   SITE PANELS: LEFT STREAM LIST, OWNER AVATAR, TOOLBAR
   ============================================================ */

/* Base card: white over panel gray */
.left-panel-record-card {
    background: #ffffff;
    border-radius: var(--radius);
    margin-bottom: 4px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    text-align: left;
    min-height: 48px;
    border: none;
    box-sizing: border-box;
    box-shadow: none;
    transition: background-color 0.14s, color 0.14s;
    cursor: pointer;
}

    /* Title text in card  */
    .left-panel-record-card .left-panel-record-title {
        font-weight: 500;
        font-size: 1.08em;
        color: var(--color-text-main);
        text-align: left;
    }

    /* Selected stream row background */
    .left-panel-record-card.selected {
        background: var(--color-header-gray);
    }

        /* Selected stream row text: darker + bolder */
        .left-panel-record-card.selected .left-panel-record-link,
        .left-panel-record-card.selected .left-panel-record-title {
            color: var(--color-black-soft);
            font-weight: 700;
        }

    /* Hover: only lighten non-selected rows */
    .left-panel-record-card:not(.selected):hover {
        background: var(--color-panel-gray);
    }



    /* Avatar / icon inside the card */
    .left-panel-record-card img {
        width: 36px;
        height: 36px;
        object-fit: cover;
        border-radius: 50%;
        margin-right: 12px;
    }


    /* Secondary line / description text */
    .left-panel-record-card .text-muted {
        font-size: 0.97em;
        color: var(--color-text-muted);
        text-align: left;
    }

    /* Make the entire card clearly clickable when you use JS navigation */
    .left-panel-record-card.clickable {
        cursor: pointer;
    }

    /* Anchor inside stream card should look like label, not classic link */
    .left-panel-record-card .left-panel-record-link {
        color: inherit;
        text-decoration: none;
    }

    /* ------------------------------------------------------------
   Unread badges on stream rows
   ------------------------------------------------------------ */

    /* Hidden by default, shown when parent has .has-unread */
    .left-panel-record-card .unread-badge {
        display: inline-flex;
        min-width: 18px;
        height: 18px;
        padding: 0 6px;
        border-radius: 9px;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        line-height: 18px;
        background: #d33;
        color: #ffffff;
        visibility: hidden;
    }

    /* When there are unread shorts */
    .left-panel-record-card.has-unread .unread-badge {
        visibility: visible;
    }

/* ------------------------------------------------------------
   Owner avatar / circle (stream owner initial)
   ------------------------------------------------------------ */

.owner-pic {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-border-subtle);
    margin-right: 12px;
    display: inline-block;
    text-align: center;
    font-weight: 600;
    font-size: 1.15em;
    line-height: 36px;
    color: var(--color-text-main);
}

/* For pure circle / fallback without image */
.owner-circle {
    background: var(--color-border-subtle);
}

/* ------------------------------------------------------------
   Gear link (settings) – usually in header or row
   ------------------------------------------------------------ */

.gear-link {
    margin-left: 12px;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 1.18em;
    vertical-align: middle;
    transition: color 0.15s;
}

    .gear-link:hover .gear-icon {
        color: var(--color-soft-orange);
    }

.gear-icon {
    vertical-align: middle;
    cursor: pointer;
}

/* ------------------------------------------------------------
   Vertical toolbar icons (leftmost column)
   ------------------------------------------------------------ */

.toolbar-icon-slot {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

/* Button wrapper around icon + label */
.toolbar-icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    text-align: center;
    background: none;
    border: none;
    border-radius: 12px;
    text-decoration: none;
    outline: none;
    font-size: 1.19rem;
    color: var(--color-text-muted);
    transition: background 0.14s, color 0.14s;
    cursor: pointer;
}

/* Circular background behind the icon symbol */
.toolbar-icon-bg {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-panel-gray);
    color: var(--color-border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3px;
    font-size: 1.22em;
    transition: background 0.18s, color 0.18s;
}

/* On hover/focus: slightly darker background, icon stays muted */
.toolbar-icon-btn:hover .toolbar-icon-bg,
.toolbar-icon-btn:focus-visible .toolbar-icon-bg {
    background: var(--color-border-subtle);
    color: var(--color-text-muted);
}

/* Active (current view): icon tinted soft-blue */
.toolbar-icon-btn.active .toolbar-icon-bg {
    background: var(--color-panel-gray);
    color: var(--color-soft-blue);
}

/* Ensure no underline for toolbar links */
.toolbar-icon-btn,
.toolbar-icon-btn:hover,
.toolbar-icon-btn:focus-visible {
    text-decoration: none !important;
}

/* Toolbar label under the icon */
.toolbar-label {
    display: block;
    font-size: 0.83em;
    margin-top: 2px;
    color: var(--color-text-main);
    text-align: center;
}

    /* Active label colored soft blue */
    .toolbar-label.active {
        color: var(--color-soft-blue);
    }

/* ------------------------------------------------------------
   Dimmed toolbar items (non-clickable for some users)
   ------------------------------------------------------------ */

.toolbar-icon-btn.dimmed {
    opacity: 0.45;
    filter: grayscale(40%);
}

    .toolbar-icon-btn.dimmed .toolbar-label {
        opacity: 0.75;
    }

    /* Softer hover, but no actual click */
    .toolbar-icon-btn.dimmed:hover {
        opacity: 0.55;
        text-decoration: none;
    }

/* Fully non-clickable: no pointer and no pointer events */
.toolbar-icon-slot .toolbar-icon-btn.dimmed,
.toolbar-icon-slot .toolbar-icon-btn.dimmed *,
.toolbar-icon-slot .toolbar-icon-btn.dimmed:hover,
.toolbar-icon-slot .toolbar-icon-btn.dimmed:hover * {
    cursor: default !important;
    pointer-events: none !important;
}