/**
 * The Activities notch (appjs/common/ux2/activityNotch.js; LXP-2655): a small dark circle where the header's bell was.
 * data-state: idle (hidden; its slot closes up) | working (a turning ring) | new (a green "+3") | done | failed (the
 * card, grown to the left over the header). The script sets the sizes; the transitions here make them glide, without
 * overshooting (LXP-2667). Slower computers (.is-lite, the sidebar glide's check) get a short fade in place instead.
 */
html.ux2-notch-on #ux2Bell {
    display: none !important;
}

.ux2-notch-slot {
    position: relative;
    display: inline-block;
    flex: none;
    width: 36px;
    height: 36px;
    margin-left: 6px;
    transition: width .3s ease, margin .3s ease;
}

.ux2-notch-slot:has(> .ux2-notch[data-state="idle"]) {
    width: 0;
    margin-left: 0;
}

.ux2-notch {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 105;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0;
    overflow: hidden;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
    background: #0b0d10;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 6px 18px -8px rgb(0 0 0 / .5);
    transform: translateY(-50%);
 transition: width .4s cubic-bezier(.2, .8, .2, 1), height .4s cubic-bezier(.2, .8, .2, 1),
        opacity .2s ease, transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}

.ux2-notch:focus-visible {
    outline: 2px solid var(--sko-primary, #1e5f69);
    outline-offset: 3px;
}

/* Nothing to say: gone */
.ux2-notch[data-state="idle"] {
    pointer-events: none;
    visibility: hidden; /* not focusable either; after it has faded */
    opacity: 0;
    transform: translateY(-50%) scale(.4);
    transition: opacity .2s ease, transform .3s ease, visibility 0s linear .3s;
}

/* Appearing: pops in from small */
@starting-style {
    .ux2-notch:not([data-state="idle"]) {
        opacity: 0;
        transform: translateY(-50%) scale(.4);
    }
}

.ux2-notch-lead {
    display: inline-grid;
    flex: none;
    place-items: center;
}

.ux2-notch-lead:empty,
.ux2-notch-text:empty {
    display: none;
}

.ux2-notch-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    min-width: 0;
}

.ux2-notch-text b {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
}

.ux2-notch-text small {
    overflow: hidden;
    font-size: 12px;
    font-weight: 500;
    color: rgb(255 255 255 / .62);
    text-overflow: ellipsis;
}

.ux2-notch-text.is-in {
    animation: ux2-notch-in .35s ease .12s both;
}

/* New: a green "+3" */
.ux2-notch[data-state="new"] .ux2-notch-text b {
    font-size: 13px;
    font-weight: 700;
    color: #4ade80;
    letter-spacing: -.01em;
}

/* Running: a thin ring turning; also around the "+3" while more is still running */
.ux2-notch-ring {
    width: 18px;
    height: 18px;
    border: 2px solid rgb(255 255 255 / .16);
    border-top-color: #4ade80;
    border-radius: 50%;
    animation: ux2-notch-spin .9s linear infinite;
}

.ux2-notch.is-running[data-state="new"] {
    box-shadow: 0 0 0 2px rgb(74 222 128 / .35), 0 6px 18px -8px rgb(0 0 0 / .5);
}

/* Just finished: the card, a round green ✓ or red ✕ and two lines */
.ux2-notch[data-state="done"],
.ux2-notch[data-state="failed"] {
    justify-content: flex-start;
    max-width: min(380px, 60vw);
    height: 52px;
    padding: 0 20px 0 8px;
    box-shadow: 0 18px 40px -16px rgb(0 0 0 / .55);
}

.ux2-notch[data-state="done"] .ux2-notch-lead,
.ux2-notch[data-state="failed"] .ux2-notch-lead {
    width: 36px;
    height: 36px;
    background: #16a34a;
    border-radius: 50%;
}

.ux2-notch[data-state="failed"] .ux2-notch-lead {
    background: #dc2626;
}

.ux2-notch-lead > :is(i.bi, svg.sko-i) {
    font-size: 18px;
    line-height: 1;
    color: #fff !important; /* the app colours every icon grey */
}

.ux2-notch[data-state="done"] .ux2-notch-text b,
.ux2-notch[data-state="failed"] .ux2-notch-text b {
    max-width: 300px;
    font-size: 13.5px;
}

.ux2-notch[data-state="done"] .ux2-notch-text small,
.ux2-notch[data-state="failed"] .ux2-notch-text small {
    max-width: 300px;
}

/* Slower computers: the new size at once, with a short fade (only opacity moves) */
.ux2-notch.is-fade {
    animation: ux2-notch-fade .2s ease-out;
}

@keyframes ux2-notch-fade {
    from { opacity: .35; }
}

@keyframes ux2-notch-spin {
    to { transform: rotate(360deg); }
}

@keyframes ux2-notch-in {
    from { opacity: 0; filter: blur(3px); }
}

/* Calm and reduced motion: no growing, popping or turning */
html.ux2-calm .ux2-notch,
html.ux2-calm .ux2-notch-slot,
html.ux2-calm .ux2-notch-text.is-in,
html.ux2-calm .ux2-notch-ring,
html.ux2-calm .ux2-notch.is-fade {
    transition: none;
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
   .ux2-notch,
    .ux2-notch-slot,
    .ux2-notch-text.is-in,
    .ux2-notch-ring,
    .ux2-notch.is-fade {
        transition: none;
        animation: none;
    }
}