/* notification ========================================= */
.notification-button > .notification-badge {
    display: grid;
    top: -5px;
    inset-inline-end: -5px;
    min-width: 19px;
    width: auto;
    height: 19px;
    padding: 0 5px;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 99px;
    background: var(--color-danger);
    color: #fff;
    font-size: 9px;
    line-height: 1;
}
.notification-button > .notification-badge[hidden] { display: none; }
.notification-panel {
    position: fixed;
    inset-block-start: calc(var(--header-height) + 8px);
    inset-inline-end: 20px;
    z-index: 1250;
    width: min(380px, calc(100vw - 28px));
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(24,32,52,.18);
}
.notification-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 17px;
    border-bottom: 1px solid var(--color-border);
}
.notification-panel__header strong { font-size: 13px; }
.notification-panel__header button {
    border: 0;
    background: transparent;
    color: #5b5ce2;
    font: inherit;
    font-size: 10px;
    cursor: pointer;
}
.notification-panel__list { max-height: min(480px, calc(100vh - 120px)); overflow-y: auto; }
.notification-panel__empty { margin: 0; padding: 32px 18px; color: #8a92a4; font-size: 11px; text-align: center; }
.notification-item {
    display: grid;
    width: 100%;
    grid-template-columns: 8px minmax(0,1fr);
    gap: 11px;
    padding: 14px 17px;
    border: 0;
    border-bottom: 1px solid #edf0f5;
    background: #fff;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}
.notification-item.is-unread { background: #f7f7ff; }
.notification-item__dot { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: transparent; }
.notification-item.is-unread .notification-item__dot { background: #5b5ce2; }
.notification-item__content { display: grid; gap: 5px; min-width: 0; }
.notification-item__content strong { color: #3e4659; font-size: 11px; }
.notification-item__content span { overflow: hidden; color: #747d90; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.notification-item__content time { color: #9aa1b0; font-size: 9px; }


@media (max-width: 600px) {
    .notification-panel { inset-block-start: 68px; inset-inline: 14px; width: auto; }
    .notification-item__content strong,.notification-item__content span,.notification-panel__empty { font-size: 12px; }
}


.notification-button {
    position: relative;
}
.notification-button > span {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-danger);
    border: 1px solid #fff;
}