/* --- 1. FUNDO DA CONVERSA --- */
.ns-chat-bg {
   /* background-color: #e9edef; */
   height: calc(100vh - 160px); 
   width: 100%; 

}

/* --- 2. CONTAINER DAS MENSAGENS --- */
#chat-bubbles {
   display: flex;
   flex-direction: column-reverse; 
   overflow-y: auto;
   height: 100%;
   padding: 15px 5%; /* Menos padding lateral para aproveitar a tela */
   scrollbar-width: thin;
   scrollbar-color: #cbd5e1 transparent;
}

/* --- 3. BALÃO GENÉRICO (Super Compacto) --- */
.chat-bubble {
   position: relative;
   padding: 6px 8px 4px 8px; /* Muito mais enxuto (Cima, Dir, Baixo, Esq) */
   font-size: 14px;
   line-height: 1.3; /* Linhas de texto mais unidas */
   box-shadow: 0 1px 0.5px rgba(11,20,26,.13); /* Sombra idêntica ao app original */
   max-width: 75%;
   min-width: 80px;
   margin-bottom: 4px; /* Balões bem mais colados uns nos outros */
   font-weight: 500;
}

/* --- 4. BALÃO CLIENTE (Verde Claro - Esquerda) --- */
.bubble-client {
   background-color: var(--lgcor-success);
   color: var(--escor-success);
   align-self: flex-start;
   border-radius: 0 8px 8px 8px; /* Curva mais fechada (8px) igual ao Whats */
}

/* --- 5. BALÃO AGENTE (Azul Claro - Direita) --- */
.bubble-agent {
   background-color: var(--lgcor-info);
   color: var(--escor-info);
   align-self: flex-end;
   border-radius: 8px 0 8px 8px; 
}

/* --- 6. BALÃO HALEA IA (Laranja Claro - Direita) --- */
.bubble-halea {
   background-color: var(--lgcor-alert); 
   color: var(--escor-alert); 
   align-self: flex-end;
   border-radius: 8px 0 8px 8px; 
   border: 1px solid rgba(247, 103, 7, 0.2); 
}

/* --- 7. META DADOS (Hora e Checks - Colado no texto) --- */
.chat-meta {
   font-size: 0.65rem;
   margin-top: -2px; /* Puxa a hora para colar no texto */
   opacity: 0.6;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 3px;
}

/* --- 8. ÁREA DO INPUT (Rodapé) --- */
/* Tira o sublinhado/borda e muda levemente a cor ao passar o mouse */
.chat-footer-wrapper a:hover, .chat-footer-wrapper a:focus, .chat-footer-wrapper a:active {
   text-decoration: none !important;
   outline: none !important;
   box-shadow: none !important;
   filter: brightness(0.8); /* Deixa o ícone levemente mais escuro em vez de sublinhar */

}

.chat-textarea {
   resize: none;
   overflow-y: auto; /* Deixa rolar se passar de 120px */
   min-height: 40px;
   max-height: 120px; /* Limite de umas 5/6 linhas */
   border-radius: 8px !important;
   line-height: 1.5;
   padding-top: 10px;

}

/* --- 9. CAIXA DE EMOJIS --- */
.emoji-picker-box {
   position: absolute;
   bottom: 70px;
   left: 15px;
   width: 320px; /* Mais larguinha para os emojis respirarem */
   background: #ffffff;
   border: 1px solid #ced4da; /* Borda visível para não misturar com o fundo */
   border-radius: 8px 8px 0px 8px; /* O 0px deixa o canto inferior direito quadrado! */
   box-shadow: 0 8px 24px rgba(0,0,0,0.18); /* Sombra mais forte e elegante */
   display: none;
   padding: 15px;
   z-index: 1000;
   max-height: 220px;
   overflow-y: auto; /* Scroll apenas para baixo */
   overflow-x: hidden; /* Mata o scroll horizontal chato */
   grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); /* Responsivo inteligente */
   gap: 8px;

}

.emoji-btn {
   font-size: 1.5rem;
   cursor: pointer;
   padding: 5px;
   border: none;
   background: none;
   border-radius: 6px;
   text-align: center;
}

.emoji-btn:hover {
   background: #f1f5f9;
}