.notification-center {
    position: relative;
    flex: 0 0 auto;
}

.notification-bell {
    position: relative;
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(61, 128, 164, 0.35);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.92);
    color: #1d516e;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.notification-bell:hover,
.notification-bell:focus-visible,
.notification-bell[aria-expanded="true"] {
    border-color: #2d83b5;
    background: #eaf7ff;
    transform: translateY(-1px);
}

.notification-bell svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notification-badge {
    position: absolute;
    top: -5px;
    inset-inline-end: -7px;
    min-width: 21px;
    height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
}

.notification-panel {
    position: absolute;
    z-index: 1200;
    top: calc(100% + 0.65rem);
    inset-inline-end: 0;
    width: min(390px, calc(100vw - 1.5rem));
    max-height: min(620px, calc(100vh - 110px));
    overflow: hidden;
    border: 1px solid rgba(90, 151, 184, 0.42);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 20px 55px rgba(24, 68, 93, 0.24);
    backdrop-filter: blur(14px);
}

.notification-panel[hidden] {
    display: none;
}

.notification-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border-bottom: 1px solid #d7e7ef;
    background: #f3faff;
}

.notification-panel-header h2 {
    margin: 0;
    color: #174a68;
    font-size: 1rem;
}

.notification-mark-all {
    border: 0;
    padding: 0.2rem 0;
    background: transparent;
    color: #2577a6;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
}

.notification-mark-all:hover,
.notification-mark-all:focus-visible {
    text-decoration: underline;
}

.notification-list {
    max-height: min(520px, calc(100vh - 180px));
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.notification-item {
    border-bottom: 1px solid #e2edf3;
}

.notification-item:last-child {
    border-bottom: 0;
}

.notification-item-link {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 25px;
    gap: 0.7rem;
    align-items: center;
    min-height: 72px;
    padding: 0.72rem 0.85rem;
    color: #17384b;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.notification-item-link:hover,
.notification-item-link:focus-visible {
    background: #edf8ff;
}

.notification-item.is-unread .notification-item-link {
    background: #e7f5ff;
}

.notification-item.is-unread .notification-item-link:hover,
.notification-item.is-unread .notification-item-link:focus-visible {
    background: #d9effd;
}

.notification-avatar-wrap {
    position: relative;
    width: 46px;
    height: 46px;
}

.notification-avatar,
.notification-avatar-placeholder {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: #d8edf7;
    color: #185476;
    object-fit: cover;
    font-weight: 900;
}

.notification-type-icon {
    position: absolute;
    inset-inline-end: -3px;
    bottom: -3px;
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #247fb1;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
}

.notification-type-icon.is-heart {
    background: #dc4b64;
}

.notification-type-icon.is-comment {
    background: #3579c8;
}

.notification-type-icon.is-relationship {
    background: #8f5ac6;
}

.notification-copy {
    min-width: 0;
}

.notification-message {
    display: block;
    color: #17384b;
    font-size: 0.84rem;
    line-height: 1.35;
}

.notification-time {
    display: block;
    margin-top: 0.22rem;
    color: #6b8797;
    font-size: 0.7rem;
}

.notification-unread-dot {
    width: 9px;
    height: 9px;
    justify-self: center;
    border-radius: 50%;
    background: #2388be;
}

.notification-item:not(.is-unread) .notification-unread-dot {
    visibility: hidden;
}

.notification-empty,
.notification-status {
    margin: 0;
    padding: 1.25rem 1rem;
    color: #648091;
    text-align: center;
    font-size: 0.84rem;
}

.notification-status.is-error {
    color: #a12d3a;
}

@media (max-width: 620px) {
    .notification-panel {
        position: fixed;
        top: 72px;
        right: 0.65rem;
        left: 0.65rem;
        width: auto;
        max-height: calc(100vh - 86px);
    }

    .notification-list {
        max-height: calc(100vh - 150px);
    }
}