/* --- New Simple Bottom Menu Style --- */
:root {
    --cbm-height: 65px;
    --cbm-bg-color: rgba(15, 15, 15, 0.75);
    --cbm-active-color: #ffffff;
    --cbm-inactive-color: #a0a0a0;
    --cbm-icon-size: 24px;
}

/* 
 * This adds padding to the bottom of your whole page, 
 * preventing content like the comment text area from being hidden
 * underneath the fixed bottom menu.
 */
body {
    padding-bottom: var(--cbm-height) !important;
}

.cbm-bottom-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--cbm-height);
    z-index: 1000;
    display: flex;
    justify-content: space-around;
    align-items: stretch; /* Make items fill the height */
    background: var(--cbm-bg-color);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.6);
    font-family: 'Outfit', sans-serif;
}

.cbm-item {
    flex: 1;
    text-align: center;
    text-decoration: none;
    color: var(--cbm-inactive-color) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.25s ease;
}

.icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cbm-text {
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: inherit !important;
}

.cbm-item svg,
.cbm-profile-avatar {
    width: var(--cbm-icon-size) !important;
    height: var(--cbm-icon-size) !important;
    stroke: var(--cbm-inactive-color);
    transition: all 0.25s ease;
}

.cbm-profile-avatar {
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent; /* Prepare for active state */
}

/* --- Active State Styling --- */
.cbm-item.active {
    color: var(--cbm-active-color) !important;
}

.cbm-item.active svg {
    stroke: var(--cbm-active-color);
    /* Add a subtle glow to the active icon */
    filter: drop-shadow(0 0 5px rgba(255, 60, 60, 0.7));
}

.cbm-item.active .cbm-profile-avatar {
    border-color: var(--cbm-active-color);
    box-shadow: 0 0 8px rgba(255, 60, 60, 0.7);
}

.cbm-item.active .cbm-text {
    font-weight: 600;
}

/* Simple press down effect */
.cbm-item:active {
    transform: scale(0.95);
}


/* --- SVG Icon Animations --- */
.cbm-item.active .cbm-icon-home { animation: cbmPulse 1.5s infinite ease-in-out; }
@keyframes cbmPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.cbm-item.active .cbm-schedule-dot { animation: cbmBlink 1.5s infinite; }
@keyframes cbmBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

.cbm-item.active .cbm-library-bar1 { animation: cbmBarGraph 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1) 0s; }
.cbm-item.active .cbm-library-bar2 { animation: cbmBarGraph 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1) 0.2s; }
.cbm-item.active .cbm-library-bar3 { animation: cbmBarGraph 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1) 0.4s; }
@keyframes cbmBarGraph { 0%, 100% { transform: scaleY(1) translateY(0); } 50% { transform: scaleY(0.5) translateY(4px); } }

/* --- Mobile Friendliness --- */
@media (max-width: 360px) {
    .cbm-text {
        font-size: 11px;
    }
}

/* --- Playlist Icon Animation --- */

/* 1. Play Triangle Pulse */
.cbm-item.active .cbm-pl-tri {
    animation: cbmTriPulse 1.5s infinite ease-in-out;
    transform-box: fill-box;
    transform-origin: center;
}
@keyframes cbmTriPulse {
    0%, 100% { transform: scale(1); fill: transparent; }
    50% { transform: scale(1.15); fill: currentColor; } /* Fills the triangle */
}

/* 2. Lines Wave Animation (Staggered) */
.cbm-item.active .cbm-pl-1 { animation: cbmLineWave 1.5s infinite ease-in-out 0s; }
.cbm-item.active .cbm-pl-2 { animation: cbmLineWave 1.5s infinite ease-in-out 0.2s; }
.cbm-item.active .cbm-pl-3 { animation: cbmLineWave 1.5s infinite ease-in-out 0.4s; }

@keyframes cbmLineWave {
    0%, 100% { opacity: 1; transform: translateX(0); }
    50% { opacity: 0.3; transform: translateX(3px); } /* Moves slightly right & fades */
}


.cbm-notification-popup {
    display: none; /* Initially hidden */
    position: fixed;
    bottom: 60px; /* Slightly above the bottom bar */
    right: 10px; /* Adjust for notification icon alignment */
    background: #ff0000; /* Red background */
    color: #fff; /* White text */
    padding: 10px 20px;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    align-items: center;
    justify-content: space-between;
    z-index: 1001; /* Above the menu bar */
    animation: fadeIn 0.5s ease-out, slideUp 0.5s ease-out; /* Entry animation */
}

.cbm-notification-popup::after {
    content: "";
    position: absolute;
    bottom: -10px; /* Arrow below the bubble */
    right: 20px; /* Adjusted to point near the bell icon */
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ff0000; /* Matches the bubble's red background */
}

.cbm-notification-close {
    margin-left: 10px;
    cursor: pointer;
    font-size: 14px;
    color: white;
    font-weight: bold;
}

.cbm-notification-popup span {
    font-size: 14px;
    font-weight: bold;
}


.cbm-notification-close:hover {
    color: #ff5555;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
    }
    to {
        transform: translateY(0);
    }
}