.private-start.has-unread {
    border-color: #ffcf45;
    background: linear-gradient(135deg, #ff315f, #a832ff);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 0 0 3px #ffcf4529, 0 0 22px #ff3d8e99;
    animation: private-unread-pulse 1.25s ease-in-out infinite;
}

.drawer-toggle--online.has-private-unread {
    border-color: #ffcf45;
    background: linear-gradient(180deg, #ff315f, #8c2cff);
    color: #fff;
    box-shadow: 0 0 0 4px #ffcf4533, 0 0 30px #ff3d8ecc;
    animation: private-online-pulse 1.25s ease-in-out infinite;
}

.drawer-toggle--online.has-private-unread::after {
    content: attr(data-private-unread);
    display: grid;
    position: absolute;
    top: .3rem;
    right: .25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    padding: 0 .2rem;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #ffcf45;
    color: #2b102e;
    font-size: .65rem;
    font-weight: 1000;
    line-height: 1;
}

@keyframes private-online-pulse {
    0%, 100% { filter: brightness(1); box-shadow: 0 0 0 3px #ffcf4529, 0 0 20px #ff3d8e99; }
    50% { filter: brightness(1.3); box-shadow: 0 0 0 7px #ffcf4540, 0 0 38px #ff3d8ee6; }
}

@keyframes private-unread-pulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.09); filter: brightness(1.25); }
}

@media (prefers-reduced-motion: reduce) {
    .private-start.has-unread,
    .drawer-toggle--online.has-private-unread { animation: none; }
}