/* ==========================================================================
   Eesier Ao Vivo (design system component)
   JS: js/live.js (EesierLive.bump / set / push)
   Documentação: /Design/AoVivo.

   O vocabulário de tempo real do sistema — trazido da sala de guerra de
   entregabilidade do servidor de e-mail, onde nasceu. Três peças:

   1. O PONTO AO VIVO (.eesier-live-dot) — um ponto de 6px com um anel que
      respira: "esta tela está recebendo eventos agora".

   2. A BARRA DE HISTÓRICO (.eesier-live-bar) — os últimos N desfechos como
      células coloridas, a mais nova entrando pela direita com um scale-in
      curto. As células só falam as tintas semânticas do sistema; quem consome
      mapeia seus desfechos de domínio para elas.

   3. O NÚMERO VIVO ([data-e-live] + .eesier-live-bubble) — a coreografia do
      KPI da sala de guerra: o número rola até o novo valor, um balão +N/−N
      entra UMA vez, acumula no lugar enquanto a rajada dura e só flutua para
      longe quando ela silencia. O valor pisca na cor primária a cada mudança.

   Durações na escala de movimento do sistema (0.18s / 0.36s e múltiplos via
   calc — mesma técnica do pulso do badge). Cores e medidas fluem dos tokens
   com fallback literal — este arquivo também é consumido standalone.
   ========================================================================== */

.eesier-live-dot {
    display: inline-block;
    flex-shrink: 0;
    width: var(--space-tight, 6px);
    height: var(--space-tight, 6px);
    border-radius: var(--radius-pill, 999px);
    background: var(--color-success, #22c55e);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success, #22c55e) 60%, transparent);
    animation: eesier-live-ring calc(var(--motion-standard, 0.36s) * 4) ease-out infinite;
}


/* O ANEL EXPANDE E DESVANECE — O PONTO EM SI NUNCA MUDA DE TAMANHO */

@keyframes eesier-live-ring {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success, #22c55e) 60%, transparent);
    }


    70% {
        box-shadow: 0 0 0 calc(var(--space-tight, 6px) + var(--space-tight, 6px) / 2) color-mix(in srgb, var(--color-success, #22c55e) 0%, transparent);
    }


    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-success, #22c55e) 0%, transparent);
    }
}


/* ------------------------------------------------------------------------------ */


/* A BARRA DE HISTÓRICO — UMA FAIXA DE 24px ONDE CADA CÉLULA É UM DESFECHO,
   O MAIS NOVO NA DIREITA. AS CÉLULAS DIVIDEM A LARGURA POR IGUAL E O FILETE
   INTERNO É O VÉU DO SISTEMA. */

.eesier-live-bar {
    --elv-border: var(--color-border, #e2e8f0);
    --elv-surface: color-mix(in srgb, var(--color-border, #e2e8f0) 25%, var(--color-surface, #ffffff));
    --elv-veil: color-mix(in srgb, var(--color-text-dark, #0f172a) 12%, transparent);

    display: flex;
    height: var(--space-medium, 24px);
    border: 1px solid var(--elv-border);
    border-radius: var(--radius-standard, 12px);
    background: var(--elv-surface);
    overflow: hidden;
}


.dark .eesier-live-bar,
.eesier-live-bar.dark {
    --elv-border: var(--color-border-on-dark, rgba(255, 255, 255, 0.12));
    --elv-surface: var(--color-surface-dark, #101f38);
    --elv-veil: color-mix(in srgb, var(--color-canvas-dark, #0a1628) 48%, transparent);
}


.eesier-live-bar > .eesier-live-bar-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-disabled, #94a3b8);
    font-family: 'Quicksand', sans-serif;
    font-size: var(--type-size-xs, 0.75rem);
    text-transform: lowercase;
}


/* A CÉLULA ENTRA COM UM scale-in CURTO — MOVIMENTO NO MENOR ELEMENTO QUE
   CARREGA O SIGNIFICADO, NUNCA NA BARRA INTEIRA. */

.eesier-live-bar > .eesier-live-cell {
    flex: 1 1 0;
    min-width: 0;
    box-shadow: inset -1px 0 0 var(--elv-veil);
    animation: eesier-live-cell-in var(--motion-quick, 0.18s) var(--ease-state, ease-in-out);
}


@keyframes eesier-live-cell-in {
    from {
        opacity: 0;
        transform: scaleY(0.5);
    }


    to {
        opacity: 1;
        transform: scaleY(1);
    }
}


/* AS CÉLULAS SÓ FALAM AS TINTAS DO SISTEMA — QUEM CONSOME MAPEIA SEUS
   DESFECHOS (entregue, bounce, rejeição...) PARA ESTAS CINCO SEMÂNTICAS. */

.eesier-live-bar > .eesier-live-cell.eesier-live-cell-success {
    background: var(--color-success, #22c55e);
}


.eesier-live-bar > .eesier-live-cell.eesier-live-cell-danger {
    background: var(--color-danger, #ef4444);
}


.eesier-live-bar > .eesier-live-cell.eesier-live-cell-warning {
    background: var(--color-warning, #f59e0b);
}


.eesier-live-bar > .eesier-live-cell.eesier-live-cell-primary {
    background: var(--color-palette-primary, #1c91e4);
}


.eesier-live-bar > .eesier-live-cell.eesier-live-cell-neutral {
    background: var(--color-disabled, #94a3b8);
}


/* ------------------------------------------------------------------------------ */


/* O BALÃO +N/−N — O NÚMERO PEQUENO AO LADO DO NÚMERO GRANDE: js/live.js O
   INSERE COMO IRMÃO DO VALOR, LOGO DEPOIS DELE, ENTÃO NA LINHA DO VALOR DO
   CARTÃO DE INDICADOR ELE SENTA A UM gap DO NÚMERO. ENTRA UMA VEZ, ACUMULA NO
   LUGAR E SÓ FLUTUA PARA LONGE QUANDO A RAJADA SILENCIA (O JS REARMA A SAÍDA
   A CADA DELTA). */

.eesier-live-bubble {
    display: inline-block;
    flex-shrink: 0;
    font-family: 'Quicksand', sans-serif;
    font-size: var(--type-size-xs, 0.75rem);
    font-weight: 700;
    pointer-events: none;
    opacity: 1;
}


.eesier-live-bubble.is-pos {
    color: color-mix(in srgb, var(--color-success, #22c55e) 75%, var(--color-canvas-dark, #0a1628));
}


.eesier-live-bubble.is-neg {
    color: var(--color-muted, #475569);
}


.dark .eesier-live-bubble.is-pos {
    color: var(--color-success, #22c55e);
}


.dark .eesier-live-bubble.is-neg {
    color: var(--color-muted-on-dark, rgba(255, 255, 255, 0.6));
}


/* BALÃO NOVO = RAJADA NOVA — A ENTRADA (SUBIR ASSENTANDO) RODA EXATAMENTE UMA
   VEZ; ENQUANTO O MESMO BALÃO ACUMULA, NADA REENTRA. */

.eesier-live-bubble.is-entering {
    animation: eesier-live-bubble-in var(--motion-quick, 0.18s) var(--ease-travel, cubic-bezier(0.22, 1, 0.36, 1));
}


/* A RAJADA SILENCIOU — O BALÃO FLUTUA PARA CIMA E DESVANECE (animationend O REMOVE) */

.eesier-live-bubble.is-leaving {
    animation: eesier-live-bubble-out calc(var(--motion-standard, 0.36s) * 3) var(--ease-state, ease-in-out) forwards;
}


@keyframes eesier-live-bubble-in {
    from {
        opacity: 0;
        transform: translateY(var(--space-tight, 6px));
    }


    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes eesier-live-bubble-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }


    to {
        opacity: 0;
        transform: translateY(calc(var(--space-medium, 24px) * -1));
    }
}


/* O PRÓPRIO NÚMERO PISCA NA COR PRIMÁRIA QUANDO MUDA — ESTADO, NÃO MOVIMENTO */

.eesier-live-flash {
    animation: eesier-live-value-flash calc(var(--motion-quick, 0.18s) * 3) var(--ease-state, ease-in-out);
}


@keyframes eesier-live-value-flash {
    from {
        color: var(--color-palette-primary, #1c91e4);
    }


    to {
        color: inherit;
    }
}


/* ------------------------------------------------------------------------------ */


/* MOVIMENTO REDUZIDO — UMA TELA AO VIVO FICA ABERTA POR HORAS: TODO MOVIMENTO
   CONTÍNUO OU FLUTUANTE SAI, MAS A INFORMAÇÃO FICA (CÉLULAS APARECEM, NÚMEROS
   ATUALIZAM, O BALÃO AINDA DESVANECE NO LUGAR). GUARDA PRÓPRIA PARA CONSUMO
   STANDALONE, SEM site.css. */

@media (prefers-reduced-motion: reduce) {

    .eesier-live-dot {
        animation: none;
    }


    .eesier-live-bar > .eesier-live-cell {
        animation: none;
    }


    .eesier-live-bubble.is-entering {
        animation: none;
    }


    .eesier-live-bubble.is-leaving {
        animation: eesier-live-bubble-fade calc(var(--motion-standard, 0.36s) * 3) var(--ease-state, ease-in-out) forwards;
    }


    .eesier-live-flash {
        animation: none;
    }
}


/* SAÍDA SEM MOVIMENTO — DESVANECE NO LUGAR, DO ESTADO PLENO, SEM SUBIR */

@keyframes eesier-live-bubble-fade {
    from {
        opacity: 1;
    }


    to {
        opacity: 0;
    }
}