.annotation-box {
    background-color: rgba(30, 41, 59, 0.8); /* Slate 800 with some transparency */
    border: 1px solid rgba(71, 85, 105, 0.6); /* Slate 600 border */
    backdrop-filter: blur(4px);
}

/* Connector Line Base */
.connector {
    position: absolute;
    background-color: #64748b; /* Slate 500 line color */
    z-index: 10;
}

/* Arrow head pseudo-elements */
.arrow-right::after {
    content: '';
    position: absolute;
    right: -4px;
    top: -3px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid #64748b;
}

.arrow-left::after {
    content: '';
    position: absolute;
    left: -4px;
    top: -3px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 6px solid #64748b;
}

.arrow-down::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: -3px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #64748b;
}
@keyframes customBounce {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px); /* Pehle default se kam */
  }
}

.animate-custom-bounce {
  animation: customBounce 2s ease-in-out infinite;
}

/* Custom scrollbar for better look if needed */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #1f2833;
}
::-webkit-scrollbar-thumb {
    background: #45a29e;
    border-radius: 4px;
}

/* Highlight animation for dashboard sections */
.dashboard-highlight {
    transition: all 0.3s ease;
    box-shadow: 0 0 0 1px transparent; /* Base state */
}

.dashboard-highlight.active-section {
    border-color: #f97316; /* Orange border */
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.2);
    position: relative;
    z-index: 10;
}

/* Specific styles for the orange glow text in active sections */
.active-section .active-indicator-text {
    color: #f97316;
    opacity: 1;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.inactive-indicator-text {
    opacity: 0;
    transition: opacity 0.2s;
}

/* Responsive Changes Start */
/* Mobile/Tablet responsive logic to stack and show only the active section */
@media (max-width: 1023px) {
    /* Hide all right-side panels by default on small screens */
    .responsive-panel:not(.active-section) {
        display: none !important;
    }
    /* Only show the active section */
    .responsive-panel.active-section {
        display: block !important;
    }
    /* Remove gaps and margins from grid wrappers so hidden elements don't leave empty space */
    .responsive-grid-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin-bottom: 0 !important;
    }
}
/* Responsive Changes End */