/* =============================================================================
   work-composer-avatar.css
   ----------------------------------------------------------------------------
   Avatar bubble shown next to a work entry (worksView library + queue-works).
   Single-composer: just an image / gradient circle with initials.
   Multi-composer: stacked layers; only one is visible at a time, and a global
   JS interval (in worksView.js) bumps a `data-active-layer="i"` attribute on
   the outer container every 3 seconds — the CSS below reveals layer `i` and
   cross-fades between layers.
   ============================================================================= */

.work-composer-avatar {
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-accent, #fff);
    font-weight: 600;
    font-size: 13px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    user-select: none;
}

/* Default standalone shape — circular bubble at 40px. Narrowed via
   :not(.work-composer-as-cover) so the as-cover variant lets the
   `.qah-cover` cascade rules drive size + shape in context. */
.work-composer-avatar:not(.work-composer-as-cover) {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

/* As-cover variant: takes the album-thumb slot in queue work-group headers.
   The element ALSO has class `.qah-cover`, so width/height come from the
   contextual qah-cover rules (40px in right-panel-queue, 44px in
   queue-tg-header, 60px in queue-album-header). We just override the shape
   to a rounded square instead of a circle. */
.work-composer-avatar.work-composer-as-cover {
    border-radius: 8px;
}

.work-composer-avatar.work-composer-multi {
    /* Layer elements are absolutely positioned over each other. */
    background: var(--surface-elevated, #2a2a2a);
}

.work-composer-avatar-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-accent, #fff);
    font-weight: 600;
    font-size: 13px;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    will-change: opacity;
}

/* Layer shape mirrors the parent avatar. */
.work-composer-avatar:not(.work-composer-as-cover) > .work-composer-avatar-layer {
    border-radius: 50%;
}
.work-composer-avatar.work-composer-as-cover > .work-composer-avatar-layer {
    border-radius: 8px;
}

/* Reveal the layer whose index matches the parent's data-active-layer. */
.work-composer-avatar.work-composer-multi[data-active-layer="0"] > .work-composer-avatar-layer[data-layer-index="0"],
.work-composer-avatar.work-composer-multi[data-active-layer="1"] > .work-composer-avatar-layer[data-layer-index="1"],
.work-composer-avatar.work-composer-multi[data-active-layer="2"] > .work-composer-avatar-layer[data-layer-index="2"],
.work-composer-avatar.work-composer-multi[data-active-layer="3"] > .work-composer-avatar-layer[data-layer-index="3"],
.work-composer-avatar.work-composer-multi[data-active-layer="4"] > .work-composer-avatar-layer[data-layer-index="4"],
.work-composer-avatar.work-composer-multi[data-active-layer="5"] > .work-composer-avatar-layer[data-layer-index="5"],
.work-composer-avatar.work-composer-multi[data-active-layer="6"] > .work-composer-avatar-layer[data-layer-index="6"],
.work-composer-avatar.work-composer-multi[data-active-layer="7"] > .work-composer-avatar-layer[data-layer-index="7"] {
    opacity: 1;
}