/* Variáveis CSS para facilitar a personalização das cores */
:root {
    --bg-dark: #0A0A0A; /* Fundo bem escuro, quase preto */
    --text-light: #FAFAFA; /* Texto claro */
    --accent-cyan: #00FFFF; /* Ciano vibrante para destaque */
    --accent-magenta: #FF00FF; /* Magenta vibrante para hover e destaque secundário */
    --message-bg-avia: #1A1A1A; /* Fundo da mensagem do AVIA, um pouco mais claro que o fundo */
    --message-bg-user: #005050; /* Verde-azulado escuro para a mensagem do usuário */
}

/* Estilos globais e de corpo */
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--bg-dark);
    color: var(--text-light);
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem; /* Tamanho base de fonte grande para imersão */
    line-height: 1.6;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Ocupa a altura total da viewport */
    overflow: hidden; /* Esconde barras de rolagem desnecessárias no corpo */
}

/* Container principal do chat para tela cheia e centralização */
.chat-wrapper {
    width: 100vw; /* Ocupa a largura total da viewport */
    height: 100vh; /* Ocupa a altura total da viewport */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: 1400px; /* Limita a largura máxima do conteúdo para melhor leitura em telas muito largas */
    box-shadow: 0 0 50px rgba(0, 255, 255, 0.1); /* Efeito de brilho sutil ciano nas bordas */
    background-color: rgba(10, 10, 10, 0.9); /* Um fundo ligeiramente menos escuro para o conteúdo interno, dando profundidade */
}

/* Container das mensagens com rolagem e estilo limpo */
.messages-container {
    flex-grow: 1; /* Ocupa o espaço restante verticalmente */
    padding: 3vh 3vw; /* Preenchimento responsivo */
    overflow-y: auto; /* Permite rolagem vertical */
    scroll-behavior: smooth; /* Rolagem suave */
    -ms-overflow-style: none; /* Esconde a barra de rolagem no IE/Edge */
    scrollbar-width: none; /* Esconde a barra de rolagem no Firefox */
}

/* Esconde a barra de rolagem no Chrome/Safari/Opera */
.messages-container::-webkit-scrollbar {
    display: none;
}

/* Estilo básico de cada caixa de mensagem */
.message-box {
    display: flex;
    margin-bottom: 2.5vh; /* Margem responsiva entre as mensagens */
    animation: fadeIn 0.8s ease-out forwards; /* Animação de fade-in ao aparecer */
    opacity: 0; /* Começa invisível para ser animado pelo JS */
}

/* Alinhamento da mensagem do usuário à direita */
.message-box.user {
    justify-content: flex-end;
}

/* Alinhamento da mensagem do AVIA à esquerda */
.message-box.avia {
    justify-content: flex-start;
}

/* Conteúdo da mensagem (o "balão" de texto) */
.message-content {
    max-width: 70%; /* Limita a largura da mensagem */
    padding: 2vh 2.5vw;
    border-radius: 15px; /* Bordas arredondadas */
    background-color: var(--message-bg-avia);
    word-wrap: break-word; /* Garante que palavras longas quebrem a linha */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Sombra suave para destacar */
}

/* Estilos específicos para a mensagem do usuário */
.message-box.user .message-content {
    background-color: var(--message-bg-user);
    color: var(--text-light);
    font-weight: 500; /* Texto ligeiramente mais forte */
}

/* Estilos específicos para a mensagem do AVIA */
.message-box.avia .message-content {
    background-color: var(--message-bg-avia);
    color: var(--text-light);
    font-weight: 400; /* Texto normal */
}

/* Destaque para texto em negrito dentro das mensagens */
.message-content strong {
    color: var(--accent-cyan); /* Cor vibrante para destaque */
    font-weight: 600;
}

/* Estilo para parágrafos dentro das mensagens */
.message-content p {
    margin: 0 0 1vh 0; /* Margem inferior para separar parágrafos */
    font-size: 1.15rem; /* Levemente menor que a fonte base para densidade de texto */
}
.message-content p:last-child {
    margin-bottom: 0; /* Remove margem do último parágrafo */
}

/* Área de input de texto na parte inferior */
.input-area {
    display: flex;
    padding: 2vh 3vw;
    background-color: rgba(0, 0, 0, 0.7); /* Fundo semi-transparente */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Borda superior fina */
    align-items: center;
    gap: 1.5vw; /* Espaço entre input e botão */
}

/* Campo de texto */
.input-area input[type="text"] {
    flex-grow: 1; /* Ocupa o máximo de espaço possível */
    padding: 1.5vh 2vw;
    border: none;
    border-radius: 10px;
    background-color: var(--message-bg-avia);
    color: var(--text-light);
    font-size: 1.1rem;
    outline: none; /* Remove a borda de foco padrão */
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5); /* Sombra interna para profundidade */
    transition: background-color 0.3s ease; /* Transição suave no foco */
}

/* Efeito de foco no input */
.input-area input[type="text"]:focus {
    background-color: #2A2A2A; /* Levemente mais claro no foco */
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7), 0 0 0 2px var(--accent-cyan); /* Borda vibrante no foco */
}

/* Botão de envio */
.input-area button {
    background-color: var(--accent-cyan); /* Cor vibrante */
    color: var(--bg-dark); /* Texto escuro no botão claro */
    border: none;
    padding: 1.5vh 3vw;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 700; /* Negrito */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transições suaves */
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3); /* Brilho no botão */
}

/* Efeito hover no botão de envio */
.input-area button:hover {
    background-color: var(--accent-magenta); /* Mudar para outra cor vibrante */
    transform: translateY(-2px); /* Efeito de "levantar" */
    box-shadow: 0 7px 20px rgba(255, 0, 255, 0.4); /* Brilho com a nova cor */
}

/* Container para as opções de botões do AVIA */
.options-container {
    display: flex; /* Para organizar os botões em linha/quebra */
    flex-wrap: wrap; /* Permite que os botões quebrem a linha */
    gap: 1.5vh; /* Espaçamento entre os botões */
    margin-top: 2vh;
}

/* Estilo para cada botão de opção do AVIA */
.option-button {
    background-color: rgba(0, 255, 255, 0.15); /* Fundo semi-transparente vibrante */
    color: var(--accent-cyan); /* Cor do texto principal */
    border: 2px solid var(--accent-cyan); /* Borda vibrante */
    padding: 1.2vh 2vw;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 3px 10px rgba(0, 255, 255, 0.2); /* Sombra/brilho para o botão */
    text-align: left; /* Alinha o texto à esquerda para descrições */
}

/* Destaque para o título da opção */
.option-button strong {
    display: block; /* Garante que o título fique em sua própria linha */
    font-size: 1.1rem;
    margin-bottom: 0.5vh;
    color: var(--text-light); /* Título em branco para contraste */
}
/* Descrição da opção */
.option-button span {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7); /* Cor mais suave para a descrição */
}

/* Efeito hover nos botões de opção */
.option-button:hover {
    background-color: rgba(255, 0, 255, 0.25); /* Mudar para outra cor vibrante */
    border-color: var(--accent-magenta);
    color: var(--accent-magenta);
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(255, 0, 255, 0.3);
}

/* Cursor do efeito de digitação */
.typing-cursor {
    display: inline-block;
    width: 8px; /* Largura do cursor */
    height: 1.2em; /* Altura do cursor igual à altura da linha do texto */
    background-color: var(--accent-cyan);
    margin-left: 2px;
    animation: blink 0.7s step-end infinite; /* Animação de piscar */
    vertical-align: middle; /* Alinha o cursor verticalmente com o texto */
}

/* Animação de piscar para o cursor */
@keyframes blink {
    from, to { background-color: transparent }
    50% { background-color: var(--accent-cyan) }
}

/* Animação de fade-in para as mensagens */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsividade básica para telas menores */
@media (max-width: 768px) {
    body {
        font-size: 1rem;
    }
    .chat-wrapper {
        max-width: 100vw;
    }
    .message-content {
        max-width: 90%;
        padding: 1.5vh 2vw;
    }
    .input-area {
        padding: 1.5vh 2vw;
        gap: 1vw;
    }
    .input-area input[type="text"] {
        padding: 1vh 1.5vw;
    }
    .input-area button {
        padding: 1vh 2.5vw;
    }
    .option-button {
        padding: 1vh 1.5vw;
        font-size: 0.9rem;
    }
    .option-button strong {
        font-size: 1rem;
    }
    .option-button span {
        font-size: 0.8rem;
    }
}