/* =========================================
   1. BASE & LAYOUT
   ========================================= */
body {
    min-height: 100vh; 
    margin: 0;         
    background-image: url('../soenergy_back.png'); /* Certifique-se que a imagem existe */
    background-repeat: no-repeat;
    background-position: top right; 
    background-size: 100% 75%;
    overflow-x: hidden; 
    background-color: #f1f5f9; /* Slate-100 */      
}

/* Forest fade effect (Rodapé) */
.forest-fade {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 300px;
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(to top, black 35%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 35%, transparent 100%);
}

@media (max-width: 640px) {
    .forest-fade {
        height: 280px;
    }
}

/* =========================================
   2. COMPONENTS (CHAT & UI)
   ========================================= */

/* Language Selector Animation */
#language-selector {
    transition: transform 0.4s ease-in-out;
    cursor: pointer;
}
#language-selector.is-retracted {
    transform: translateX(-98%) translateY(0); /* Ajustei para ficar alinhado */
}

/* Chat Container */
#chat-messages {
    flex: 1;
    min-height: 0;
    padding-bottom: 1rem;
    scroll-behavior: smooth;
}

@media (min-width: 1024px) {
    #chat-messages {
        max-height: calc(100vh - 200px); /* Ajuste conforme header/footer */
    }
}

/* Custom Scrollbar */
#chat-messages::-webkit-scrollbar {
    width: 6px;
}
#chat-messages::-webkit-scrollbar-track {
    background: transparent;
}
#chat-messages::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 10px;
}
#chat-messages::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

/* =========================================
   3. CATALOG DRAWER (SLIDE PANEL)
   ========================================= */

.drawer-open { transform: translateX(0); }
.drawer-closed { transform: translateX(100%); } /* Joga pra fora da tela à direita */

#catalog-drawer { z-index: 60; } /* Acima de tudo */
#catalog-overlay { z-index: 55; } /* Abaixo do drawer, acima do resto */

/* =========================================
   4. ANIMATIONS & EFFECTS
   ========================================= */

/* Shine Effect (Botão Login) */
.btn-shine::before {
  content: "";
  position: absolute;
  top: -120%;
  left: -60%;
  width: 70%;
  height: 340%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.0) 30%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.0) 70%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-200%);
  opacity: 0;
  animation: btn-shine-move 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes btn-shine-move {
  0% { transform: translateX(-200%); opacity: 0; }
  10% { opacity: 1; }
  40% { transform: translateX(250%); opacity: 1; }
  50% { opacity: 0; }
  100% { transform: translateX(250%); opacity: 0; }
}

/* SPA Fade In Up */
.spa-fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  animation: spaFadeInUp 0.4s ease-out forwards;
}
@keyframes spaFadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* SPA Fade Out Down */
.spa-fade-out-down {
  opacity: 1;
  transform: translateY(0);
  animation: spaFadeOutDown 0.3s ease-in forwards;
}
@keyframes spaFadeOutDown {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(16px); }
}

/* Message Bubble Entrance */
@keyframes fadeInUp { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}
.animate-enter { animation: fadeInUp 0.4s ease-out forwards; }
.filter-enter { animation: fadeInUp 0.3s ease-out forwards; }

/* Loader (Dot Bounce) */
.dot-bounce { animation: bounce 1.4s infinite ease-in-out both; }
.dot-bounce:nth-child(1) { animation-delay: -0.32s; }
.dot-bounce:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 
    0%, 80%, 100% { transform: scale(0); } 
    40% { transform: scale(1); } 
}

/* Bot Avatar Breathe */
@keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    30% { transform: scale(0.7); opacity: 1; }
    70% { transform: scale(0.85); opacity: 0.5; }
}
.bot-avatar {
    animation: breathe 10s ease-in-out infinite;
}

/* Error Shake */
@keyframes shake-horizontal {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}
.shake-no {
    animation: shake-horizontal 0.4s ease-in-out;
    border: 1px solid #ef4444; 
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}