/**
 * SynX Economy - Toast Component
 *
 * Canal único de feedback transitório do sistema. O vocabulário visual é o
 * mesmo do `.alert` (título + mensagem) e da `.card` (superfície elevada:
 * bg-card + borda 1px + raio), para o toast ler como parte do sistema e não
 * como componente importado.
 *
 * Estrutura:
 *   .toast > .toast-icon + .toast-content(.toast-title? + .toast-message)
 *            + .toast-count? + .toast-close + .toast-progress > .toast-progress-bar
 *
 * A CONTAGEM REGRESSIVA É A PRÓPRIA ANIMAÇÃO DA BARRA (ver .toast-progress-bar):
 * o JS ouve `animationend` para remover o toast, então barra e descarte são
 * sempre o mesmo relógio — inclusive quando o hover pausa os dois.
 *
 * @version 2.0.0
 */

/* ============================================
   CONTAINER
   ============================================ */

.toast-container {
    position: fixed;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    pointer-events: none;
    width: min(380px, calc(100vw - var(--spacing-6) * 2));
}

.toast-container-top-right {
    top: var(--spacing-6);
    right: var(--spacing-6);
}

.toast-container-top-left {
    top: var(--spacing-6);
    left: var(--spacing-6);
}

.toast-container-top-center {
    top: var(--spacing-6);
    left: 50%;
    transform: translateX(-50%);
}

.toast-container-bottom-right {
    bottom: var(--spacing-6);
    right: var(--spacing-6);
    flex-direction: column-reverse;
}

.toast-container-bottom-left {
    bottom: var(--spacing-6);
    left: var(--spacing-6);
    flex-direction: column-reverse;
}

.toast-container-bottom-center {
    bottom: var(--spacing-6);
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column-reverse;
}

/* ============================================
   TOAST
   ============================================ */

.toast {
    position: relative;            /* âncora da .toast-progress */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    padding-bottom: calc(var(--spacing-3) + 2px);   /* espaço da barra */
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    pointer-events: auto;
    animation: toast-in 180ms ease-out;
}

.toast-exit {
    animation: toast-out 140ms ease-in forwards;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(12px); }
}

.toast-container-top-left .toast,
.toast-container-bottom-left .toast { animation-name: toast-in-left; }

.toast-container-top-left .toast-exit,
.toast-container-bottom-left .toast-exit { animation-name: toast-out-left; }

@keyframes toast-in-left {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out-left {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-12px); }
}

.toast-container-top-center .toast,
.toast-container-bottom-center .toast { animation-name: toast-in-center; }

.toast-container-top-center .toast-exit,
.toast-container-bottom-center .toast-exit { animation-name: toast-out-center; }

@keyframes toast-in-center {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out-center {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}

/* ============================================
   CONTEÚDO
   ============================================ */

.toast-icon {
    display: flex;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--color-text-tertiary);
}

.toast-icon svg {
    width: 18px;
    height: 18px;
}

.toast-content {
    min-width: 0;
}

.toast-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.4;
}

/* Só há respiro quando o título tem um corpo abaixo dele. */
.toast-title + .toast-message {
    margin-top: 2px;
}

.toast-message {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Sem título, a mensagem é a linha principal e assume o peso dela. */
.toast-message:first-child {
    color: var(--color-text-primary);
}

/* Repetições do mesmo aviso viram contador, em vez de empilhar cópias. */
.toast-count {
    align-self: center;
    flex-shrink: 0;
    min-width: 20px;
    padding: 1px var(--spacing-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--color-text-tertiary);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
}

.toast-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin: -2px -4px 0 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.toast-close:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.toast-close:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.toast-close svg {
    width: 14px;
    height: 14px;
}

/* ============================================
   BARRA DE PROGRESSO
   ============================================ */

.toast-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--color-bg-tertiary);
}

.toast-progress-bar {
    height: 100%;
    transform-origin: left center;
    background: currentColor;      /* herda a cor de destaque da variante */
    /* Baixa de propósito: a barra informa o tempo, não disputa atenção com a
       borda de destaque nem com o texto. Medido na tela — acima de ~0,4 ela
       vira um segundo elemento colorido competindo no card. */
    opacity: 0.35;
    animation: toast-progress var(--toast-duration, 15s) linear forwards;
}

@keyframes toast-progress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Ler com calma não deve custar o aviso: o ponteiro (ou o foco do teclado)
   sobre o toast congela a barra E o descarte, porque são o mesmo relógio. */
.toast:hover .toast-progress-bar,
.toast:focus-within .toast-progress-bar,
.toast-paused .toast-progress-bar {
    animation-play-state: paused;
}

/* ============================================
   VARIANTES
   ============================================ */

.toast-success { border-left-color: var(--color-success); }
.toast-success .toast-icon,
.toast-success .toast-progress-bar { color: var(--color-success); }

.toast-error { border-left-color: var(--color-error); }
.toast-error .toast-icon,
.toast-error .toast-progress-bar { color: var(--color-error); }

.toast-warning { border-left-color: var(--color-warning); }
.toast-warning .toast-icon,
.toast-warning .toast-progress-bar { color: var(--color-warning); }

.toast-info { border-left-color: var(--color-info); }
.toast-info .toast-icon,
.toast-info .toast-progress-bar { color: var(--color-info); }

/* ============================================
   AÇÃO NO TOAST
   ============================================ */

.toast-actions {
    grid-column: 2 / -1;
    display: flex;
    gap: var(--spacing-2);
    margin-top: var(--spacing-2);
}

.toast-action {
    padding: var(--spacing-1) var(--spacing-2);
    font-family: inherit;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.toast-action:hover {
    background: var(--color-bg-tertiary);
}

/* ============================================
   RESPONSIVO
   ============================================ */

@media (max-width: 640px) {
    .toast-container {
        top: var(--spacing-3);
        right: var(--spacing-3);
        left: var(--spacing-3);
        width: auto;
    }

    /* No celular a origem do movimento é o topo — a folga lateral some. */
    .toast,
    .toast-container-top-left .toast,
    .toast-container-top-center .toast { animation-name: toast-in-center; }

    .toast-exit,
    .toast-container-top-left .toast-exit,
    .toast-container-top-center .toast-exit { animation-name: toast-out-center; }

    /* Alvo de toque na régua do sistema (UX-004: mínimo de 40px no mobile).
       O X é o único jeito de dispensar antes dos 15s — o ícone segue com 14px,
       só a área de toque cresce. */
    .toast-close {
        width: 40px;
        height: 40px;
        margin: -10px -12px 0 0;
    }
}

/* ============================================
   MOVIMENTO REDUZIDO
   ============================================ */

/* A barra CONTINUA animando de propósito: ela não é enfeite, é o relógio que
   dispara o descarte. O que sai é o deslocamento de entrada e saída. */
@media (prefers-reduced-motion: reduce) {
    .toast { animation: toast-fade-in 120ms ease-out; }
    .toast-exit { animation: toast-fade-out 120ms ease-in forwards; }

    @keyframes toast-fade-in  { from { opacity: 0; } to { opacity: 1; } }
    @keyframes toast-fade-out { from { opacity: 1; } to { opacity: 0; } }
}