/**
 * ===============================================================================
 * BALAM AI - Status Indicator Component
 * ===============================================================================
 *
 * Unified status dots with GPU-friendly pulse animations.
 * Uses transform + opacity only (compositor-layer, no layout thrash).
 *
 * HTML Patterns:
 *   <span class="balam-status-dot active"></span>
 *   <span class="balam-status-dot warning"></span>
 *   <span class="balam-status-dot error"></span>
 *   <span class="balam-status-dot inactive"></span>
 *   <span class="balam-status-dot active sm"></span>
 *
 * With text label (recommended for a11y):
 *   <span class="balam-status">
 *     <span class="balam-status-dot active"></span>
 *     <span class="balam-status-text">Connected</span>
 *   </span>
 *
 * @requires shared-variables.css
 * @version 1.0.0
 * ===============================================================================
 */

/* ===============================================================================
   Status Dot Base
   =============================================================================== */

.balam-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--balam-gray-400);
}

/* Active / Connected (green pulse) */
.balam-status-dot.active,
.balam-status-dot.connected {
    background: var(--balam-success);
    box-shadow: 0 0 8px rgba(var(--balam-success-rgb), 0.5);
    animation: balam-pulse 2s ease-in-out infinite;
}

/* Warning (amber pulse) */
.balam-status-dot.warning {
    background: var(--balam-warning);
    box-shadow: 0 0 8px rgba(var(--balam-warning-rgb), 0.5);
    animation: balam-pulse 2s ease-in-out infinite;
}

/* Error (red pulse) */
.balam-status-dot.error {
    background: var(--balam-danger);
    box-shadow: 0 0 8px rgba(var(--balam-danger-rgb), 0.5);
    animation: balam-pulse 2s ease-in-out infinite;
}

/* Connecting (amber pulse) */
.balam-status-dot.connecting {
    background: var(--balam-warning);
    box-shadow: 0 0 8px rgba(var(--balam-warning-rgb), 0.5);
    animation: balam-pulse 1.5s ease-in-out infinite;
}

/* Inactive / Disconnected (static gray, no pulse) */
.balam-status-dot.inactive,
.balam-status-dot.disconnected {
    background: var(--balam-gray-400);
    box-shadow: none;
    animation: none;
}

/* ===============================================================================
   Size Variants
   =============================================================================== */

.balam-status-dot.sm {
    width: 6px;
    height: 6px;
}

.balam-status-dot.lg {
    width: 12px;
    height: 12px;
}

/* ===============================================================================
   Status with Text Label
   =============================================================================== */

.balam-status {
    display: inline-flex;
    align-items: center;
    gap: var(--balam-spacing-2);
}

.balam-status-text {
    font-size: var(--balam-text-xs);
    font-weight: var(--balam-font-medium);
    color: var(--balam-text-secondary);
}

/* ===============================================================================
   Pulse Animation (GPU-composited: transform + opacity only)
   =============================================================================== */

@keyframes balam-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.15);
    }
}

/* ===============================================================================
   Reduced Motion
   =============================================================================== */

@media (prefers-reduced-motion: reduce) {
    .balam-status-dot {
        animation: none;
    }
}