[x-cloak] { display: none !important; }
.pulse-green { animation: pulse-green 2s infinite; }
.pulse-red { animation: pulse-red 2s infinite; }
@keyframes pulse-green {
    0%, 100% { background-color: #10b981; }
    50% { background-color: #34d399; }
}
@keyframes pulse-red {
    0%, 100% { background-color: #ef4444; }
    50% { background-color: #f87171; }
}
.websocket-indicator {
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Chart container heights */
.chart-container-small {
    height: 250px;
    position: relative;
}

.chart-container-medium {
    height: 300px;
    position: relative;
}

.chart-container-large {
    height: 400px;
    position: relative;
}

/* Ensure canvas takes full container */
.chart-container-small canvas,
.chart-container-medium canvas,
.chart-container-large canvas {
    width: 100% !important;
    height: 100% !important;
}