/* 通知下拉選單動畫 */
#notification-dropdown {
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

/* 通知項目樣式 */
.notification-item {
    position: relative;
}

.notification-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background-color: transparent;
    transition: background-color 0.2s ease;
}

.notification-item:hover::before {
    background-color: var(--color-primary, #6366f1);
}

/* 滾動條美化 */
#notification-list::-webkit-scrollbar {
    width: 6px;
}

#notification-list::-webkit-scrollbar-track {
    background: transparent;
}

#notification-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

#notification-list::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

.dark #notification-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

.dark #notification-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* 響應式調整 */
@media (max-width: 640px) {
    #notification-dropdown {
        width: calc(100vw - 8rem);
        right: 1rem;
        left: auto;
    }
}

@media (min-width: 1024px) {
    #notification-dropdown {
        width: 520px;
    }
}

/* ==============================================
   我的帳號浮動視窗
   ============================================== */

/* 浮動視窗選單動畫 */
#account-dropdown {
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

/* 響應式調整 */
@media (max-width: 640px) {
    #account-dropdown {
        width: calc(100vw - 8rem);
        right: 1rem;
        left: auto;
    }
}

@media (min-width: 1024px) {
    #account-dropdown {
        width: 250px;
    }
}

/* ==============================================
   側邊欄收合
   ============================================== */
/* 側邊欄過渡動畫設定 */
#sidebar {
    transition: transform 0.3s ease-in-out;
}

/* 手機版隱藏狀態：移出螢幕左側 */
@media (max-width: 1023px) {
    #sidebar {
        transform: translateX(-100%);
    }

    #sidebar.active {
        transform: translateX(0);
    }
}

/* 遮罩層動畫 */
#sidebar-overlay {
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

#sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
}