/* Container que agrupa o textarea e os botões. Este agora terá a aparência da caixa de input. */ 
.ia-input-container {
    display: flex; /* Para alinhar o textarea e o grupo de botões lado a lado */
    align-items: flex-end; /* Alinha o conteúdo (textarea/botões) na base */
    width: 100%;
    position: relative; 
    
    /* Estiliza o container para parecer a caixa de input */
    border: 1px solid #ccc; 
    border-radius: 15px;
    padding: 5px; /* Padding interno do container principal */
}

/* O textarea deve preencher o espaço restante e ser transparente */
.ia-input-container .search-input {
    flex-grow: 1;
    margin: 0;
    border: none; /* REMOVE A BORDA DO TEXTAREA */
    background: transparent; /* Fundo transparente */
    min-height: 32px; /* Altura mínima para linha única */
    resize: none;
    /* Ajuste o padding para dar mais espaço à esquerda da área de texto */
    padding: 5px 10px 5px 15px; 
}

/* Grupo de botões (Mic e Enviar) */
.ia-button-group {
    display: flex;
    align-items: flex-end; /* Alinha os botões à base */
    /* Remove o padding lateral aqui para controlar o espaçamento com margin-left nos botões */
}

/* Estilos para o botão de Microfone e de Envio */
.ia-mic-button, .ia-send-button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 35px; /* Tamanho ligeiramente maior para melhor toque */
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #808080; 
    transition: color 0.3s ease;
    /* Move os botões para cima para alinhar com o padding interno do textarea */
}

/* AUMENTA O ESPAÇAMENTO ENTRE O MICROFONE E O BOTÃO DE ENVIO */
.ia-mic-button {
    margin-right: 5px; 
}

.ia-send-button {
    color: #00549D; /* Cor do botão de envio */
}

.ia-mic-button:hover, .ia-send-button:hover {
    color: #007bff; 
}

/* Estilo para indicar que a gravação está ativa */
.ia-mic-button.recording {
    color: red !important;
    animation: pulse 1.5s infinite;
    background: #d5d5d5;
    border-radius: 20px;
}

/* CORREÇÃO: Estilo para o player de áudio no histórico do usuário */
.chat-message.user audio {
    width: 100%;
    /* Remove a cor de fundo aqui se ela estiver sendo aplicada ao player inteiro */
    background-color: transparent; 
    border-radius: 10px;
    outline: none;
    /* Opcional: Garante que o player se destaque na bolha */
    max-width: 100%;
    display: block; 
}

/* Se precisar de estilo para as partes internas do player em navegadores WebKit (Chrome/Safari): */
.chat-message.user audio::-webkit-media-controls-panel {
    background-color: #f1f3f4; /* Fundo mais neutro para o player */
    border-radius: 10px;
}
.chat-message.user audio::-webkit-media-controls-play-button,
.chat-message.user audio::-webkit-media-controls-current-time-display,
.chat-message.user audio::-webkit-media-controls-time-remaining-display {
    color: #00549D;
}
.chat-message.user audio::-webkit-media-controls-timeline {
    border-radius: 5px;
}

@keyframes pulse {
  25% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Ajusta o textarea para ocupar o espaço restante e remover a margem inferior */
.ia-input-container textarea.search-input {
    flex-grow: 1;
    min-height: 80px;
    resize: none; /* Impede que o usuário redimensione */
    overflow-y: hidden; /* Controlado pelo JS se precisar crescer */
    padding-right: 40px; /* Espaço para o botão */
    margin: 0; /* Remove margens extras */
    font-family: 'Arial';
    font-size: 16px;
}

/* Estilo do botão de envio (seta) */
.ia-send-button {
    background: none;
    border: none;
    color: #00549D; /* Cor da sua marca */
    cursor: pointer;
    padding: 8px;
    margin-left: -40px; /* Posiciona o botão dentro do textarea */
    height: 40px; /* Altura igual ao input */
    transition: color 0.2s;
    outline: none;
    z-index: 2;
    margin-bottom: -2px; 

}

.ia-send-button:hover {
    color: #007bff; /* Efeito hover */
}

.ia-send-button svg {
    display: block;
}

/* Estilos para o Histórico de Chat */
.chat-history {
    background-color: #f7f7f7;
    border-radius: 10px;
    padding: 10px;
    height: 300px;
    overflow-y: auto;
    margin-bottom: 10px;
    display: none; /* MUDANÇA 1: Usa Flexbox para alinhamento */
    flex-direction: column; /* MUDANÇA 2: Garante que as mensagens se empilhem verticalmente */
    border: 1px solid #e1e1e1;
    
    /* Remove text-align: right; pois será substituído por margin: auto */
    /* text-align: right; <--- REMOVER */
}

/* Estilo para as mensagens no chat */
.chat-message {
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 15px;
    
    /* MUDANÇA 3: Mudar para display: block para que margin: auto funcione
       Se você mantiver inline-block, o margin: auto será ignorado.
       A bolha ainda se ajustará ao conteúdo, pois width não está definida. */
    display: block; /* Volta para block para aceitar margin: auto */
    width: fit-content; /* GARANTE que o bloco se ajuste ao conteúdo (o mesmo que inline-block faria) */
    
    max-width: 90%;
    line-height: 1.4;
    
    /* Remover clear: both; pois float não está mais sendo usado */
    clear: both; /* <--- REMOVER */
    text-align: left; /* Mantém o texto dentro da bolha sempre alinhado à esquerda */
}

/* Mensagens do Usuário (RIGHT) */
.chat-message.user {
    background-color: #00549D;
    color: white;
    
    /* ESSENCIAL: Empurra o elemento block para a direita dentro do Flexbox */
    margin-left: auto; 
    margin-right: 0; 
}

.chat-message.audio {
    background-color: transparent;
    
    /* ESSENCIAL: Empurra o elemento block para a direita dentro do Flexbox */
    margin-left: auto; 
    margin-right: 0; 
}

/* Mensagens da IA (LEFT) */
.chat-message.ai {
    background-color: #e1e1e1;
    color: #333;
    
    /* ESSENCIAL: Empurra o elemento block para a esquerda (padrão do Flexbox) */
    margin-right: auto;
    margin-left: 0; 
}
.tabs-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 0; /* Remove margem inferior para grudar no conteúdo */
    border-bottom: 2px solid #e1e1e1; /* Linha que separa as abas do conteúdo */
}

/* O wrapper das abas deve ter a mesma largura do filter-box e ser posicionado logo acima */
.tabs-wrapper {
    display: flex;
    justify-content: space-between;
    width: 400px; /* Adapte à largura máxima do seu filter-box se for diferente */
    max-width: 100%;
    margin: 0; /* Centraliza junto com o filter-box */
    
    /* Posição vertical logo acima do filter-box */
    transform: translateY(2px); /* Eleva ligeiramente para sobrepor a borda do filter-box */
    z-index: 1; /* Garante que fique acima da borda do filter-box */
    
    /* O padding horizontal deve casar com o padding do filter-box para alinhar as bordas */
    padding: 0 40px;
  	margin-top: 20px; 
}

/* Estilo Base do Botão de Aba */
.tab-button {
    flex-grow: 1; 
    background-color: #f0f0f0; /* Cor de fundo para aba inativa */
    border: 1px solid #e1e1e1;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: bold;
    color: #808080;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s, color 0.3s, border 0.3s;
    
    /* Arredondamento apenas nas quinas superiores */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: none; /* Remove a borda inferior para 'colar' no filter-box */
}

/* Estilo da Aba Ativa */
.tab-button.active {
    background-color: #fff; /* Fundo branco para parecer parte do filter-box */
    color: #00549D; 
    border-color: #e1e1e1; /* Cor da borda do filter-box */
    border-bottom-color: #fff; /* Borda inferior branca para simular que a aba continua no filter-box */
}

.tab-button:hover:not(.active) {
    background-color: #eaeaea;
    color: #555;
}

/* Ajusta o filter-box (agora o conteúdo da aba) para remover o padding superior que não é mais necessário */
.filter-box {
    /* Mantém o padding, mas ajusta a borda superior para compensar a aba */
    border-radius: 15px;
    border-top-left-radius: 0; /* Remove o arredondamento superior-esquerdo do box */
    border-top-right-radius: 0; /* Remove o arredondamento superior-direito do box */
    padding-top: 20px; /* Garante que o conteúdo não fique muito colado */
    padding-bottom: 20px;
}

/* --- Container do Chat e Input (Mantido do prompt anterior) --- */

.tab-content {
    padding-top: 0; /* Remove padding superior interno */
}