.notifications-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.notifications-button {
    position: relative;

    width: 42px;
    height: 42px;

    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--border);
    border-radius: 50%;

    background: var(--bg-panel);
    color: var(--text-main);

    cursor: pointer;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.notifications-button i {
    font-size: 22px;
    color: var(--text-muted);
}

.notifications-button:hover,
.notifications-button[aria-expanded="true"] {
    border-color: rgba(175, 0, 161, 0.45);
    background: var(--bg-panel-soft);
}

.notifications-button:hover {
    transform: translateY(-1px);

    box-shadow:
        0 4px 14px
        rgba(175, 0, 161, 0.12);
}

.notifications-button:hover i,
.notifications-button[aria-expanded="true"] i {
    color: var(--primary-color);
}

.notifications-count {
    position: absolute;

    top: -5px;
    right: -6px;

    min-width: 18px;
    height: 18px;

    padding: 0 5px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border:
        2px solid
        var(--bg-panel);

    border-radius: 999px;

    background:
        var(--error-color);

    color: #ffffff;

    font-size: 0.64rem;
    font-weight: 800;

    pointer-events: none;
}

.notifications-panel {
    position: absolute;

    top: calc(100% + 12px);
    right: 0;

    width:
        min(
            390px,
            calc(100vw - 24px)
        );

    max-height:
        min(
            560px,
            calc(100vh - 110px)
        );

    display: none;
    flex-direction: column;

    background:
        var(--bg-panel);

    border:
        1px solid
        var(--border);

    border-radius: 16px;

    box-shadow:
        0 18px 45px
        rgba(35, 20, 40, 0.18);

    overflow: hidden;

    z-index: 3000;
}

.notifications-panel.show {
    display: flex;

    animation:
        notification-panel-appear
        0.18s ease;
}

@keyframes notification-panel-appear {

    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.notifications-panel-header {
    min-height: 58px;

    padding: 14px 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    border-bottom:
        1px solid
        var(--border);

    background:
        var(--bg-panel);
}

.notifications-panel-header strong {
    color: var(--text-main);

    font-size: 0.95rem;
    font-weight: 800;
}

.notifications-read-all {
    padding: 6px 8px;

    border: 0;
    border-radius: 7px;

    background: transparent;

    color:
        var(--primary-color);

    cursor: pointer;

    font-size: 0.72rem;
    font-weight: 700;
}

.notifications-read-all:hover {
    background:
        var(--bg-panel-soft);

    color:
        var(--primary-hover-color);
}

.notifications-read-all:disabled {
    opacity: 0.5;
    cursor: default;
}

.notifications-list {
    width: 100%;

    max-height: 390px;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;

    background:
        var(--bg-panel);
}

.notifications-list::-webkit-scrollbar {
    width: 7px;
}

.notifications-list::-webkit-scrollbar-track {
    background: transparent;
}

.notifications-list::-webkit-scrollbar-thumb {
    background:
        var(--medium-gray);

    border-radius: 999px;
}

.notification-item {
    position: relative;

    width: 100%;

    padding: 15px 17px;

    display: flex;

    border-bottom:
        1px solid
        var(--border);

    background:
        var(--bg-panel);

    cursor: pointer;

    transition:
        background-color 0.2s ease;
}

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

.notification-item:hover {
    background:
        var(--bg-panel-soft);
}

.notification-item.unread {
    background:
        rgba(
            175,
            0,
            161,
            0.055
        );
}

.notification-item.unread::before {
    content: "";

    position: absolute;

    top: 19px;
    left: 7px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--primary-color);
}

.notification-content {
    min-width: 0;
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: 5px;
}

.notification-title {
    color:
        var(--text-main);

    font-size: 0.86rem;
    font-weight: 750;

    line-height: 1.35;

    overflow-wrap: anywhere;
}

.notification-message {
    margin: 0;

    color:
        var(--text-muted);

    font-size: 0.79rem;

    line-height: 1.45;

    overflow-wrap: anywhere;
}

.notification-date {
    display: block;

    margin-top: 2px;

    color:
        var(--text-muted);

    opacity: 0.8;

    font-size: 0.68rem;
}

.notifications-empty {
    padding: 38px 22px;

    color:
        var(--text-muted);

    text-align: center;

    font-size: 0.82rem;

    line-height: 1.5;
}

.notifications-panel-footer {
    padding: 9px;

    border-top:
        1px solid
        var(--border);

    background:
        var(--bg-panel);
}

.notifications-panel-footer button {
    width: 100%;
    min-height: 40px;

    padding: 9px 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border: 0;
    border-radius: 9px;

    background: transparent;

    color:
        var(--primary-color);

    cursor: pointer;

    font-size: 0.8rem;
    font-weight: 700;
}

.notifications-panel-footer button:hover {
    background:
        var(--bg-panel-soft);

    color:
        var(--primary-hover-color);
}

.external-notifications-prompt {
    position: relative;

    width:
        min(
            calc(100% - 32px),
            var(--content-width)
        );

    margin: 18px auto 0;

    border:
        1px solid
        rgba(175, 0, 161, 0.18);

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            var(--bg-panel),
            var(--bg-panel-soft)
        );

    box-shadow:
        0 6px 22px
        rgba(175, 0, 161, 0.08);

    overflow: hidden;
}

.external-notifications-prompt::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background:
        var(--primary-color);
}

.external-notifications-prompt-content {
    min-height: 68px;

    padding:
        13px
        16px
        13px
        20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.external-notifications-prompt-text {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;
}

.external-notifications-prompt-text strong {
    color:
        var(--text-main);

    font-size: 0.9rem;
    font-weight: 800;
}

.external-notifications-prompt-text span {
    color:
        var(--text-muted);

    font-size: 0.78rem;

    line-height: 1.45;
}

.external-notifications-prompt-actions {
    display: flex;
    align-items: center;

    gap: 8px;

    flex-shrink: 0;
}

.notification-prompt-later,
.notification-prompt-settings {
    min-height: 36px;

    padding: 7px 12px;

    border-radius: 8px;

    cursor: pointer;

    font-size: 0.76rem;
    font-weight: 700;

    white-space: nowrap;
}

.notification-prompt-later {
    border:
        1px solid
        var(--border);

    background:
        var(--bg-panel);

    color:
        var(--text-muted);
}

.notification-prompt-later:hover {
    background:
        var(--bg-panel-soft);

    color:
        var(--primary-color);
}

.notification-prompt-settings {
    border:
        1px solid
        var(--primary-color);

    background:
        var(--primary-color);

    color: #ffffff;
}

.notification-prompt-settings:hover {
    background:
        var(--primary-hover-color);

    border-color:
        var(--primary-hover-color);
}

body.dark-mode .notifications-panel {
    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.5);
}

body.dark-mode .notification-item.unread {
    background:
        rgba(
            214,
            66,
            223,
            0.08
        );
}

body.dark-mode .notification-item.unread:hover {
    background:
        rgba(
            214,
            66,
            223,
            0.13
        );
}

@media (max-width: 700px) {

    .notifications-button {
        width: 40px;
        height: 40px;
    }

    .notifications-panel {
        position: fixed;

        top: 72px;
        right: 12px;
        left: 12px;

        width: auto;

        max-height:
            calc(
                100vh - 88px
            );

        border-radius: 14px;
    }

    .notifications-list {
        max-height:
            calc(
                100vh - 220px
            );
    }

    .external-notifications-prompt {
        width:
            calc(
                100% - 24px
            );
    }
}

@media (max-width: 480px) {

    .notifications-panel-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 7px;
    }

    .external-notifications-prompt-content {
        align-items: stretch;

        flex-direction: column;
    }

    .external-notifications-prompt-actions {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}