#notifications {
    position: fixed;
    top: 100px;
    left: calc(100% - 1010px);
    width: 400px;
    max-height: 600px;
    border-radius: 12px;
    padding: 20px;
    overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 9999;
    display: none;
}

html[theme="dark"] #notifications {
    background: #1b1a26;
}

html[theme="light"] #notifications {
    background: #fff;
    border: 2px solid #f0f0f0;
}

.notifications-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.notifications-header h2 {
    margin: 0;
    flex: 1;
}

.btn-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    margin-left: 16px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

html[theme="light"] .btn-close {
    color: #666;
}

html[theme="light"] .btn-close:hover {
    background-color: #f0f0f0;
    color: #333;
}

html[theme="dark"] .btn-close {
    color: #999;
}

html[theme="dark"] .btn-close:hover {
    background-color: #2b2a3a;
    color: #fff;
}

#notifications h2 {
    margin-bottom: 8px;
}

.notifications-toggle {
    width: 28px;
    height: 28px;
    position: relative;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: opacity 0.2s ease-in-out;
    z-index: 10000;
    order: 30;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: unset !important;
}

html[theme="light"] .notifications-toggle {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_15_159)'%3E%3Cpath d='M9.5 19C8.89555 19 7.01237 19 5.61714 19C4.87375 19 4.39116 18.2177 4.72361 17.5528L5.57771 15.8446C5.85542 15.2892 6 14.6774 6 14.0564C6 13.2867 6 12.1434 6 11C6 9 7 5 12 5C17 5 18 9 18 11C18 12.1434 18 13.2867 18 14.0564C18 14.6774 18.1446 15.2892 18.4223 15.8446L19.2764 17.5528C19.6088 18.2177 19.1253 19 18.382 19H14.5M9.5 19C9.5 21 10.5 22 12 22C13.5 22 14.5 21 14.5 19M9.5 19C11.0621 19 14.5 19 14.5 19' stroke='%23000' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_15_159'%3E%3Crect width='24' height='24' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") !important;
}

html[theme="dark"] .notifications-toggle {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_15_159)'%3E%3Cpath d='M9.5 19C8.89555 19 7.01237 19 5.61714 19C4.87375 19 4.39116 18.2177 4.72361 17.5528L5.57771 15.8446C5.85542 15.2892 6 14.6774 6 14.0564C6 13.2867 6 12.1434 6 11C6 9 7 5 12 5C17 5 18 9 18 11C18 12.1434 18 13.2867 18 14.0564C18 14.6774 18.1446 15.2892 18.4223 15.8446L19.2764 17.5528C19.6088 18.2177 19.1253 19 18.382 19H14.5M9.5 19C9.5 21 10.5 22 12 22C13.5 22 14.5 21 14.5 19M9.5 19C11.0621 19 14.5 19 14.5 19' stroke='%23fff' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_15_159'%3E%3Crect width='24' height='24' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") !important;
}

.notifications-toggle:hover {
    opacity: 0.7;
}

#notifications-toggle-mobile {
    margin-bottom: 32px;
}

#notifications ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#notifications li {
    position: relative;
    padding: 12px 14px 12px 28px;
    font-size: 14px;
    border-radius: 8px;
    margin-bottom: 10px;
    transition: background 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

html[theme="light"] #notifications li {
    background: #fff;
    border: 1px solid #eee;
    font-weight: 400;
    color: #333;
}

html[theme="dark"] #notifications li {
    background: #1e1d2b;
    border: 1px solid #2b2a3a;
    font-weight: 400;
    color: #bbb;
}

html[theme="light"] #notifications li.unread {
    background: #f0f6ff;
    border: 1px solid #cce0ff;
    font-weight: 600;
}

html[theme="dark"] #notifications li.unread {
    background: #23283b;
    border: 1px solid #3a4260;
    font-weight: 600;
}

#notifications li.unread::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0073e6;
}

html[theme="dark"] #notifications li.unread::before {
    background: #3a74d9;
}

#notifications li:hover {
    opacity: 0.95;
    cursor: pointer;
}

#notifications .btn {
    margin: 8px 0;
    font-size: 12px;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
}

html[theme="light"] #notifications .btn {
    background: #0073e6;
    color: #fff;
}

html[theme="light"] #notifications .btn:hover {
    background: #005bb5;
}

html[theme="dark"] #notifications .btn {
    background: #3a74d9;
    color: #fff;
}

html[theme="dark"] #notifications .btn:hover {
    background: #285ab5;
}

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #2271b1;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, transform 0.1s ease;
}

.btn-icon:hover {
    color: #135e96;
    transform: scale(1.1);
}

.icon-check {
    pointer-events: none;
}


#notifications .info-message {
    margin: 10px 0;
    font-size: 13px;
    color: #555;
}

.mention-list {
    position: absolute;
    border-radius: 6px;
    z-index: 1000;
    display: none;
    max-height: 150px;
    overflow-y: auto;
    min-width: 150px;
    font-size: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    -webkit-overflow-scrolling: touch;
}

html[theme="light"] .mention-list {
    background: #fff;
    border: 1px solid #e0e0e0;
    color: #333;
}

html[theme="dark"] .mention-list {
    background: #1e1d2b;
    border: 1px solid #2b2a3a;
    color: #bbb;
}

.mention-list div {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: background 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html[theme="light"] .mention-list div:hover,
.mention-list div.active {
    background: #0073e6;
    color: #fff;
}

html[theme="dark"] .mention-list div:hover,
.mention-list div.active {
    background: #3a74d9;
    color: #fff;
}

.header-inner-controls {
    display: flex;
    align-items: center;
    gap: 32px;
    order: 40;
}

.notifications-count {
    position: absolute;
    width: 20px;
    height: 20px;
    top: -10px;
    left: 22px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    background-color: red;
    padding: 6px;
    border-radius: 100%;
    box-sizing: border-box;
}

@media (max-width: 2000px) {
    #notifications {
        left: calc(100% - 680px);
    }
}

@media (max-width: 1600px) {
    #notifications {
        left: calc(100% - 480px);
    }
}

@media (max-width: 1024px) {

    #notifications {
        top: calc(10% + 420px);
        left: calc(20% - 90px);
    }

    .header-inner-controls .notifications-toggle {
        display: none;
    }
}

@media (max-width: 500px) {
    .notifications-toggle {
        position: relative;
        right: unset;
        top: unset;
    }

    #notifications {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90vw;
        max-width: 400px;
        max-height: 70vh;
    }

    .mention-list {
        max-height: 120px;
        min-width: 120px;
        font-size: 13px;
    }
}

@keyframes markAsRead {
    0% {
        background-color: #f0f6ff;
        font-weight: 600;
    }
    50% {
        background-color: #d0e4ff;
        font-weight: 600;
    }
    100% {
        background-color: #fff;
        font-weight: 400;
    }
}

@keyframes markAsReadDark {
    0% {
        background-color: #23283b;
        font-weight: 600;
    }
    50% {
        background-color: #2a2f4b;
        font-weight: 600;
    }
    100% {
        background-color: #1e1d2b;
        font-weight: 400;
    }
}

li.animate-read {
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
}

html[theme="light"] li.animate-read {
    animation-name: markAsRead;
}

html[theme="dark"] li.animate-read {
    animation-name: markAsReadDark;
}