/* ==========================================================================
   Eesier Conversa (design system component)
   Razor: Views/Shared/_ChatMessage.cshtml · Model: ChatMessageViewModel
   Documentação: /Design/Conversa.

   A leitura de conversa do sistema — a MESMA anatomia em admin e console:
   quem recebe fala à esquerda sobre a folha; quem envia (nós/o agente) fala à
   direita sobre a superfície primária suave. Avatar de inicial (24px compacto),
   balão de raio 12 com o canto do lado do autor reto (a "cauda" da fala),
   meta muda embaixo. O indicador de digitação pulsa em opacidade — nada cresce.

   Cores fluem dos tokens com fallback literal — este arquivo também é
   consumido standalone, sem site.css carregado.
   ========================================================================== */

.eesier-chat {
    --ech-surface: var(--color-surface, #ffffff);
    --ech-border: var(--color-border, #e2e8f0);
    --ech-text: var(--color-text-dark, #0f172a);
    --ech-muted: var(--color-muted, #475569);
    --ech-out-surface: var(--color-palette-primary-surface, #eef7ff);
    --ech-out-text: var(--color-text-dark, #0f172a);

    display: flex;
    flex-direction: column;
    gap: var(--space-medium, 24px);
    width: 100%;
}


.dark .eesier-chat,
.eesier-chat.dark {
    --ech-surface: var(--color-surface-dark, #101f38);
    --ech-border: var(--color-border-on-dark, rgba(255, 255, 255, 0.12));
    --ech-text: var(--color-text-on-dark, #ffffff);
    --ech-muted: var(--color-muted-on-dark, rgba(255, 255, 255, 0.6));
    --ech-out-surface: color-mix(in srgb, var(--color-palette-secondary, #4fbefe) 16%, transparent);
    --ech-out-text: var(--color-text-on-dark, #ffffff);
}


/* MENSAGEM — AVATAR + COLUNA (BALÃO, META). QUEM ENVIA ESPELHA PARA A DIREITA. */

.eesier-chat > .eesier-chat-message {
    display: flex;
    align-items: flex-end;
    gap: var(--space-small, 12px);
    max-width: 75%;
}


/* EXCEÇÃO DE MARGEM — margin-left:auto LEVA A FALA DE SAÍDA PARA A DIREITA,
   UMA COMPOSIÇÃO QUE gap NÃO EXPRESSA. */

.eesier-chat > .eesier-chat-message.is-outbound {
    margin-left: auto;
    flex-direction: row-reverse;
}


.eesier-chat > .eesier-chat-message > .eesier-chat-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-tight, 6px);
    min-width: 0;
}


.eesier-chat > .eesier-chat-message.is-outbound > .eesier-chat-column {
    align-items: flex-end;
}


/* BALÃO — FOLHA COM O CANTO DO LADO DO AUTOR RETO (A CAUDA DA FALA) */

.eesier-chat > .eesier-chat-message > .eesier-chat-column > .eesier-chat-bubble {
    padding: var(--space-small, 12px) var(--space-medium, 24px);
    border: 1px solid var(--ech-border);
    border-radius: var(--radius-standard, 12px);
    border-bottom-left-radius: 0;
    background: var(--ech-surface);
    color: var(--ech-text);
    font-family: 'Quicksand', sans-serif;
    font-size: var(--type-size-small, 0.875rem);
    font-weight: 500;
    line-height: var(--space-medium, 24px);
    overflow-wrap: anywhere;
}


.eesier-chat > .eesier-chat-message.is-outbound > .eesier-chat-column > .eesier-chat-bubble {
    border-radius: var(--radius-standard, 12px);
    border-bottom-right-radius: 0;
    border-color: transparent;
    background: var(--ech-out-surface);
    color: var(--ech-out-text);
}


/* MESSAGE DATA PRESERVES ITS ORIGINAL CASING AND LINE BREAKS. */
.eesier-chat-plain {
    display: flex;
    flex-direction: column;
    gap: var(--space-small, 12px);
    text-transform: none;
}

.eesier-chat-text { white-space: pre-wrap; }

/* META — AUTOR E HORA, MUDOS, FORA DO BALÃO */

.eesier-chat > .eesier-chat-message > .eesier-chat-column > .eesier-chat-meta {
    font-size: var(--type-size-xs, 0.75rem);
    font-weight: 500;
    color: var(--ech-muted);
    text-transform: lowercase;
}


/* DIGITANDO — TRÊS PONTOS QUE PULSAM EM OPACIDADE DENTRO DE UM BALÃO NORMAL */

.eesier-chat > .eesier-chat-message > .eesier-chat-column > .eesier-chat-bubble > .eesier-chat-typing {
    display: inline-flex;
    align-items: center;
    gap: var(--space-tight, 6px);
}


.eesier-chat > .eesier-chat-message > .eesier-chat-column > .eesier-chat-bubble > .eesier-chat-typing > span {
    width: var(--space-tight, 6px);
    height: var(--space-tight, 6px);
    border-radius: var(--radius-pill, 999px);
    background: var(--ech-muted);
    animation: eesier-chat-typing calc(var(--motion-standard, 0.36s) * 3) var(--ease-state, ease-in-out) infinite;
}


.eesier-chat > .eesier-chat-message > .eesier-chat-column > .eesier-chat-bubble > .eesier-chat-typing > span:nth-child(2) {
    animation-delay: var(--motion-quick, 0.18s);
}


.eesier-chat > .eesier-chat-message > .eesier-chat-column > .eesier-chat-bubble > .eesier-chat-typing > span:nth-child(3) {
    animation-delay: var(--motion-standard, 0.36s);
}


@keyframes eesier-chat-typing {
    0%, 60%, 100% {
        opacity: 0.3;
    }


    30% {
        opacity: 1;
    }
}


/* DIVISOR DE DATA — UM PONTO DE CALMA NO MEIO DO FLUXO: PÍLULA MUDA CENTRADA */

.eesier-chat > .eesier-chat-divider {
    display: flex;
    justify-content: center;
}


.eesier-chat > .eesier-chat-divider > .eesier-chat-divider-label {
    padding: var(--space-tight, 6px) var(--space-small, 12px);
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--color-text-dark, #0f172a) 5%, transparent);
    color: var(--ech-muted);
    font-size: var(--type-size-xs, 0.75rem);
    font-weight: 700;
    text-transform: lowercase;
}


.dark .eesier-chat > .eesier-chat-divider > .eesier-chat-divider-label {
    background: color-mix(in srgb, var(--color-palette-secondary, #4fbefe) 8%, transparent);
}


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

    .eesier-chat > .eesier-chat-message > .eesier-chat-column > .eesier-chat-bubble > .eesier-chat-typing > span {
        animation: none;
    }
}