/* TradingView Widget Loading Skeleton */
.tradingview-widget-container {
    background-color: #131722 !important; /* TradingView Dark Theme Background */
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    /* Default heights to prevent layout shift */
    min-height: 44px; 
}

/* Specific heights based on widget types found in the codebase */
.tradingview-widget-container[style*="height: 150px"] {
    min-height: 150px;
}

.tradingview-widget-container[style*="height: 126px"] {
    min-height: 126px;
}

/* Skeleton Shimmer Animation */
.tradingview-widget-container::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.05) 40%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.05) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: tv-shimmer 2s infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes tv-shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Ensure the actual widget (iframe) appears above the skeleton */
.tradingview-widget-container iframe,
.tradingview-widget-container .tradingview-widget-container__widget {
    position: relative;
    z-index: 1;
}

/* Hide the skeleton effect once the iframe is presumably loaded or if it's already there */
/* Note: We can't easily detect iframe load in pure CSS without JS, 
   but since the iframe is opaque, it will naturally cover the shimemr. */