/* =========================================================================
   CHANNELS BAR COMPONENT
   ========================================================================= */

.nav-channel {
    background-color: var(--bg-glass-navbar) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
    white-space: nowrap;
    padding: 0.5rem 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    width: 100%;
    position: relative;
    z-index: 999;
}

.nav-channel .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 0.65rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0.35rem 2.5rem 0.35rem 0.25rem !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
    scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 48px), transparent 100%);
}

.nav-channel .navbar-nav::-webkit-scrollbar {
    height: 4px;
}

.nav-channel .navbar-nav::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: var(--radius-pill);
}

.nav-channel li.channel-item,
.nav-channel li {
    padding: 0.45rem 1.15rem !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-pill) !important;
    background-color: var(--bg-content) !important;
    color: var(--text-light) !important;
    font-family: "OpenSans-Semibold", sans-serif;
    font-weight: 600;
    font-size: 0.8375rem;
    letter-spacing: 0.015em;
    transition: all 0.22s cubic-bezier(0.2, 0, 0, 1) !important;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
    position: relative;
}

/* Light / Dark Mode Surface Nuance */
.nav-channel li.channel-item:not(.active),
.nav-channel li:not(.active) {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .nav-channel li.channel-item:not(.active),
html[data-theme="dark"] .nav-channel li.channel-item:not(.active) {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    color: #cbd5e1 !important;
}

/* Light Mode: Clean, subtle hover */
.nav-channel li.channel-item:not(.active):hover,
.nav-channel li:not(.active):hover {
    transform: translateY(-1px) scale(1.02) !important;
    color: var(--text-main) !important;
    background-color: var(--bg-hover) !important;
    border-color: var(--border-color-dark) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Dark Mode: Vibrant hover with subtle glow */
[data-theme="dark"] .nav-channel li.channel-item:not(.active):hover,
html[data-theme="dark"] .nav-channel li.channel-item:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-color: var(--custom2-color) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 10px color-mix(in srgb, var(--custom2-color) 30%, transparent) !important;
}

.nav-channel li.channel-item:hover i,
.nav-channel li:hover i {
    transform: scale(1.12);
    transition: transform 0.2s ease;
}

/* Active State (Rich Gradient & Balanced Shadow) */
.nav-channel li.channel-item.active,
.nav-channel li.active {
    color: var(--custom2-text-color) !important;
    background: linear-gradient(135deg, var(--custom2-color), color-mix(in srgb, var(--custom2-color) 88%, black 12%)) !important;
    background-color: var(--custom2-color) !important;
    border-color: var(--custom2-color) !important;
    font-weight: 700 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14) !important;
}

[data-theme="dark"] .nav-channel li.channel-item.active,
html[data-theme="dark"] .nav-channel li.channel-item.active {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 12px color-mix(in srgb, var(--custom2-color) 40%, transparent) !important;
}

.nav-channel li.channel-item.active:hover,
.nav-channel li.active:hover {
    transform: translateY(-1px) scale(1.02) !important;
    filter: brightness(1.06);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
}

[data-theme="dark"] .nav-channel li.channel-item.active:hover,
html[data-theme="dark"] .nav-channel li.channel-item.active:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), 0 0 14px color-mix(in srgb, var(--custom2-color) 50%, transparent) !important;
}

/* Tactile Click / Active Response */
.nav-channel li.channel-item:active,
.nav-channel li:active {
    transform: translateY(0) scale(0.97) !important;
    transition: transform 0.08s ease !important;
}

/* Mobile Responsive */
@media (max-width: 767.98px) {
    .nav-channel {
        padding: 0.35rem 0 !important;
    }

    .nav-channel .navbar-nav {
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x proximity;
        padding: 0.25rem 2rem 0.25rem 0.75rem !important;
        gap: 0.45rem !important;
        -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 36px), transparent 100%);
        mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 36px), transparent 100%);
    }

    .nav-channel li.channel-item,
    .nav-channel li {
        scroll-snap-align: start;
        padding: 0.35rem 0.85rem !important;
        font-size: 0.75rem !important;
    }
}