/* ==========================================================================
   Empório Grão e Prosa - Estilos Globais e Otimizações de Performance
   ========================================================================== */

/* Suavidade na rolagem e seleção de texto */
html {
    scroll-behavior: smooth;
}

::selection {
    background-color: #E86024;
    color: #FFFFFF;
}

/* Ocultar barra de rolagem em elementos horizontais (Chips do Chat / Categorias) */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Acessibilidade: Contorno de foco visível e elegante para navegação por teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid #2E6B34;
    outline-offset: 2px;
}

/* Animações de Engajamento e Microinterações */
@keyframes bounceSubtle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

.animate-bounce-subtle {
    animation: bounceSubtle 4s ease-in-out infinite;
}

/* Indicador de Digitação com 3 Pontos Animados do Chat */
.typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
}

.typing-dots span {
    width: 6px;
    height: 6px;
    background-color: #2E6B34;
    border-radius: 50%;
    display: inline-block;
    animation: typingBounce 1.2s infinite ease-in-out both;
}

.typing-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typingBounce {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Estilização suave para scrollbar do corpo de mensagens do chat */
#chat-mensagens-body::-webkit-scrollbar {
    width: 5px;
}
#chat-mensagens-body::-webkit-scrollbar-track {
    background: transparent;
}
#chat-mensagens-body::-webkit-scrollbar-thumb {
    background: #E5D5C5;
    border-radius: 10px;
}
#chat-mensagens-body::-webkit-scrollbar-thumb:hover {
    background: #C4B09E;
}