/*
 * Shared chat sidebar reference palette.
 * The shell remains deep navy while item states use the chat view's
 * cyan edge, violet glass, and magenta activation treatment.
 */

:root {
    --sidebar-chat-cyan: #49eaff;
    --sidebar-chat-cyan-soft: #a9f7ff;
    --sidebar-chat-pink: #ff2fa6;
    --sidebar-chat-violet: #9b4dff;
    --sidebar-chat-indigo: #6257ff;
}

#sidebar#sidebar .menu-group-items .sidebar-item,
#sidebar#sidebar .sidebar-item,
body:has(#view-memory.fantasy-memory-view.active) #sidebar#sidebar .menu-group-items .sidebar-item,
body:has(#view-memory.fantasy-memory-view.active) #sidebar#sidebar .sidebar-item {
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    color: rgba(224, 239, 249, 0.78) !important;
    background:
        linear-gradient(96deg, rgba(5, 22, 40, 0.9), rgba(8, 11, 31, 0.92)) padding-box,
        linear-gradient(
            105deg,
            rgba(255, 79, 216, 0.34),
            rgba(50, 246, 255, 0.26) 56%,
            rgba(141, 107, 255, 0.3)
        ) border-box !important;
    box-shadow: none !important;
    filter: none !important;
}

#sidebar#sidebar .menu-group-items .sidebar-item:hover,
#sidebar#sidebar .sidebar-item:hover,
body:has(#view-memory.fantasy-memory-view.active) #sidebar#sidebar .menu-group-items .sidebar-item:hover,
body:has(#view-memory.fantasy-memory-view.active) #sidebar#sidebar .sidebar-item:hover {
    color: var(--sidebar-chat-cyan-soft) !important;
    background:
        linear-gradient(90deg, rgba(50, 246, 255, 0.11), rgba(157, 101, 255, 0.04)) padding-box,
        linear-gradient(
            105deg,
            rgba(50, 246, 255, 0.62),
            rgba(157, 101, 255, 0.34) 62%,
            rgba(255, 58, 200, 0.22)
        ) border-box !important;
    border-color: rgba(50, 246, 255, 0.25) !important;
    box-shadow: inset 2px 0 0 var(--sidebar-chat-cyan) !important;
    filter: drop-shadow(0 0 7px rgba(50, 246, 255, 0.16)) !important;
}

#sidebar#sidebar .menu-group-items .sidebar-item.active,
#sidebar#sidebar .sidebar-item.active,
body:has(#view-memory.fantasy-memory-view.active) #sidebar#sidebar .menu-group-items .sidebar-item.active,
body:has(#view-memory.fantasy-memory-view.active) #sidebar#sidebar .sidebar-item.active {
    border-color: transparent !important;
    color: #ffffff !important;
    background:
        linear-gradient(95deg, rgba(32, 12, 65, 0.96), rgba(4, 42, 57, 0.94)) padding-box,
        linear-gradient(
            102deg,
            var(--sidebar-chat-pink),
            var(--sidebar-chat-cyan) 51%,
            var(--sidebar-chat-violet)
        ) border-box !important;
    box-shadow: none !important;
    filter:
        drop-shadow(0 0 6px rgba(50, 246, 255, 0.28))
        drop-shadow(0 0 11px rgba(255, 58, 200, 0.18)) !important;
}

#sidebar#sidebar .sidebar-item.active::before,
body:has(#view-memory.fantasy-memory-view.active) #sidebar#sidebar .sidebar-item.active::before {
    background: var(--sidebar-chat-cyan) !important;
    box-shadow:
        0 0 10px rgba(50, 246, 255, 0.86),
        0 0 18px rgba(255, 47, 166, 0.34) !important;
}

#sidebar#sidebar .sidebar-item.active::after,
body:has(#view-memory.fantasy-memory-view.active) #sidebar#sidebar .sidebar-item.active::after {
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--sidebar-chat-pink),
            var(--sidebar-chat-cyan)
        ) !important;
    box-shadow: 0 0 10px rgba(50, 246, 255, 0.56) !important;
}

#sidebar#sidebar .sidebar-item .item-icon,
#sidebar#sidebar .sidebar-item .text-cyan-300,
#sidebar#sidebar .sidebar-item .text-emerald-400,
#sidebar#sidebar .sidebar-item .text-primary-400,
body:has(#view-memory.fantasy-memory-view.active) #sidebar#sidebar .sidebar-item .item-icon,
body:has(#view-memory.fantasy-memory-view.active) #sidebar#sidebar .sidebar-item .text-cyan-300,
body:has(#view-memory.fantasy-memory-view.active) #sidebar#sidebar .sidebar-item .text-emerald-400,
body:has(#view-memory.fantasy-memory-view.active) #sidebar#sidebar .sidebar-item .text-primary-400 {
    color: rgba(124, 213, 242, 0.78) !important;
    text-shadow: 0 0 8px rgba(50, 246, 255, 0.18) !important;
}

#sidebar#sidebar .sidebar-item:hover .item-icon,
#sidebar#sidebar .sidebar-item:hover .text-cyan-300,
#sidebar#sidebar .sidebar-item:hover .text-emerald-400,
#sidebar#sidebar .sidebar-item:hover .text-primary-400,
body:has(#view-memory.fantasy-memory-view.active) #sidebar#sidebar .sidebar-item:hover .item-icon,
body:has(#view-memory.fantasy-memory-view.active) #sidebar#sidebar .sidebar-item:hover .text-cyan-300,
body:has(#view-memory.fantasy-memory-view.active) #sidebar#sidebar .sidebar-item:hover .text-emerald-400,
body:has(#view-memory.fantasy-memory-view.active) #sidebar#sidebar .sidebar-item:hover .text-primary-400 {
    color: var(--sidebar-chat-cyan-soft) !important;
    text-shadow: 0 0 10px rgba(50, 246, 255, 0.42) !important;
}

#sidebar#sidebar .sidebar-item.active .item-icon,
#sidebar#sidebar .sidebar-item.active .text-cyan-300,
#sidebar#sidebar .sidebar-item.active .text-emerald-400,
#sidebar#sidebar .sidebar-item.active .text-primary-400,
body:has(#view-memory.fantasy-memory-view.active) #sidebar#sidebar .sidebar-item.active .item-icon,
body:has(#view-memory.fantasy-memory-view.active) #sidebar#sidebar .sidebar-item.active .text-cyan-300,
body:has(#view-memory.fantasy-memory-view.active) #sidebar#sidebar .sidebar-item.active .text-emerald-400,
body:has(#view-memory.fantasy-memory-view.active) #sidebar#sidebar .sidebar-item.active .text-primary-400 {
    color: var(--sidebar-chat-cyan-soft) !important;
    text-shadow: 0 0 11px rgba(50, 246, 255, 0.62) !important;
}