/* =============================================
   💅 Estilos para API.js — Alertas (EmberCode Theme)
   ============================================= */

:root {
    --api-bgbase: #151311;
    --api-surface: #26211C;
    --api-gold: #C19A6B;
    --api-light: #D1C7B7;
}

.api-alert-container {
    position: fixed;
    z-index: 99999; /* Garantir que fique acima da Navbar e Loaders */
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

/* ======== POSIÇÕES ======== */
.api-alert-container.top-left { top: 24px; left: 24px; align-items: flex-start; }
.api-alert-container.top-right { top: 24px; right: 24px; align-items: flex-end; }
.api-alert-container.top-center { top: 24px; left: 50%; transform: translateX(-50%); align-items: center; }

.api-alert-container.bottom-left { bottom: 24px; left: 24px; align-items: flex-start; }
.api-alert-container.bottom-right { bottom: 24px; right: 24px; align-items: flex-end; }
.api-alert-container.bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); align-items: center; }

/* ======== ALERTA (A Placa do Terminal) ======== */
.api-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(38, 33, 28, 0.95); /* surface com leve transparência */
    backdrop-filter: blur(8px);
    color: var(--api-light);
    padding: 14px 20px;
    
    /* Estilo EmberCode: Bordas retas, contorno dourado e sombra dura */
    border: 1px solid rgba(193, 154, 107, 0.2); 
    border-radius: 2px; 
    box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.5);
    
    /* Tipografia de Sistema */
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem; /* 12px para visual de log de sistema */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-10px);
    animation: apiSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.api-alert.hide {
    opacity: 0;
    transform: translateY(-15px) scale(0.98);
}

/* ======== CORES POR TIPO (Adaptadas ao tema escuro) ======== */
/* Em vez de cores neon, usamos tons pastéis que combinam com a madeira/dourado */
.api-alert.success { border-left: 3px solid #4ade80; } /* Verde Esmeralda */
.api-alert.error   { border-left: 3px solid #f87171; } /* Vermelho Desbotado */
.api-alert.warning { border-left: 3px solid #fbbf24; } /* Âmbar */
.api-alert.info    { border-left: 3px solid var(--api-gold); } /* Dourado da EmberCode */

/* ======== ÍCONE E MENSAGEM ======== */
.api-alert .icon {
    font-size: 1rem;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.2)); /* Leve brilho no emoji */
}

.api-alert .message {
    line-height: 1.4;
}

/* Efeito sutil de "Log de terminal" no início da mensagem */
.api-alert .message::before {
    content: "> ";
    color: var(--api-gold);
    opacity: 0.7;
}

/* ======== ANIMAÇÃO ======== */
@keyframes apiSlideIn {
    from { 
        opacity: 0; 
        transform: translateY(-15px) scale(0.95); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}