/* ============================================================================
 * zen/components/status-pill/status-pill.css
 * ----------------------------------------------------------------------------
 * Tiny status label attached to a node (agent, service, component) that
 * mutates its text + color as the node moves through a lifecycle.
 *
 * HTML:
 *   <span class="zen-status" data-status="joining">joining…</span>
 *   <span class="zen-status" data-status="ok">online</span>
 *
 * Unlike `zen-badge` (binary reveal) or `zen-label` (world-anchored), a
 * status-pill is INLINE inside its owner component and re-renders its text
 * when the status changes.
 *
 * Legacy alias: `.agent-state` (used by onboarding/token-join).
 * ============================================================================ */

.zen-status, .agent-state {
    display: inline-block;
    font-size: 0.72rem;
    padding: 3px 8px;
    border-radius: 10px;
    border: 1px solid var(--border);
    color: var(--gray);
    background: rgba(0, 0, 0, 0.2);
    font-family: 'Courier New', monospace;
    transition: color var(--d-fast), border-color var(--d-fast),
                background var(--d-fast);
    white-space: nowrap;
}

/* States — addressed by data-status OR legacy modifier class --------------- */
.zen-status[data-status="idle"],
.agent-state.idle {
    border-color: var(--border); color: var(--gray);
}

.zen-status[data-status="joining"],
.zen-status[data-status="pending"],
.agent-state.joining {
    border-color: var(--yellow); color: var(--yellow);
    background: rgba(251, 191, 36, 0.08);
}

.zen-status[data-status="ok"],
.zen-status[data-status="online"],
.agent-state.ok {
    border-color: var(--green); color: var(--green);
    background: rgba(0, 230, 118, 0.08);
}

.zen-status[data-status="error"],
.zen-status[data-status="fail"],
.agent-state.fail {
    border-color: var(--red); color: var(--red);
    background: rgba(239, 68, 68, 0.08);
}

.zen-status[data-status="warn"],
.agent-state.warn {
    border-color: var(--yellow); color: var(--yellow);
}

.zen-status[data-status="info"],
.agent-state.info {
    border-color: var(--cyan); color: var(--cyan);
    background: rgba(34, 211, 238, 0.08);
}

/* Pulse animation for transient states ------------------------------------ */
.zen-status.a-pulse,
.agent-state.a-pulse {
    animation: zen-status-pulse 1.2s ease-in-out infinite;
}
@keyframes zen-status-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}