#dex-back-btn {display:none;}

#dex-chatbox,
.wrap_resposta,
.wrap_cont_resposta {display:flex;}

#dex-submit-btn,
#dex-back-btn:hover,
#dex-hover-input button,
#dex-back-btn {border:none;}

.wrap_resposta,
.resposta_single,
.wrap_pergunta,
.pergunta_aluno,
#dex-hover-input,
#dex-submit-btn,
#dex-back-btn {border-radius:10px}

.resposta_single a,
#dex-hover-input input[type="text"],
#dex-hover-input button {border-radius:5px}

#dex-hover-input button:hover,
.resposta_single a,
#dex-submit-btn:hover {background-color: #fff}

.wrap_resposta,
.wrap_pergunta {background-color:#ddd;}

.resposta_single a:hover,
.pergunta_aluno,
#dex-submit-btn,
#dex-hover-input button {background-color:#ff006e}

#dex-back-btn:hover {background-color: #761bff;}

.resposta_single,
#dex-back-btn:hover,
#dex-submit-btn,
#dex-hover-input button {color:#fff}

#dex-hover-input button:hover,
#dex-submit-btn:hover {color:#FF006E;}

#dex-chatbox,
.wrap_resposta,
.wrap_cont_resposta {flex-direction:column;}

.wrap_resposta {
    width: 100%;
    height: 350px;
    padding:10px;
    box-sizing: border-box;
    justify-content: flex-end;
    background: linear-gradient(-45deg, #eee, #fe73be, #888, #6b43ff);
    background-size: 500% 500%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% { background-position: 0% 50%;}
  50% { background-position: 100% 50%;}
  100% { background-position: 0% 50%;}
}

.wrap_cont_resposta {
    height: 100%;
    padding-right: 10px;
    overflow-y: scroll;
}

.resposta_single {
    margin-bottom: 10px;
    max-width: 80%;}

.resposta_single a {display:inline-block; padding:0 5px;}


.resposta_single p:last-child {margin-bottom:0}

.pergunta_aluno {
    text-align: right;
    margin-left: auto;
    padding: 8px;
    word-wrap: break-word;
    margin-bottom: 10px; }

.resposta_dex {
    text-align: left;
    margin-right: auto;
    background-color: #761bff;
    padding: 8px;
    word-wrap: break-word;}

.wrap_pergunta { margin:10px 0; overflow:hidden;  position:relative;}

#dex-user-input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    height: 50px;
    min-height: 0;
    resize: none;}

#dex-submit-btn {
    float: right;
    padding: 10px 20px;}

#dex-loading-gif {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: auto;}



/**************************** Link rodapé  */
#dex-fixed-link {
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 9999;
    display: block;
}

#dex-fixed-link img {
    max-height: 100px;
    height: auto; /* Mantém a proporção da imagem */
    width: auto; /* Ajusta a largura automaticamente */
}

#dex-hover-input {
    position: fixed;
    bottom: 115px;
    right: -250px; /* Posiciona fora da tela */
    z-index: 9998; /* Um nível abaixo do link fixo para não sobrepor */
    max-width: 300px;
    align-items: center;
    background-color: #ddd;
    padding: 5px;
    opacity: 0; /* Começa invisível */    
    transition: right 0.4s ease, opacity 0.4s ease;
    display: flex; /* Define o display padrão como flex */
}

#dex-hover-input.show {
    right: 95px; /* Altera a posição final para dentro da tela */
    opacity: 1; /* Torna visível */
}


#dex-hover-input input[type="text"] {
    display: inline-block;
    width: 75%; /* Ajusta a largura para o input ocupar a maior parte */
    height: 40px;
    padding: 5px;
    border: 1px solid #ccc;
    margin-right: 5px; /* Espaçamento entre o input e o botão */
}

#dex-hover-input button {
    width: 20%; /* Ajusta a largura do botão */
    height: 40px; /* Mantém a altura em linha com o input */
    padding: 5px;
    cursor: pointer;
}

#dex-back-btn {padding:10px 15px}

/****************************** Media Queries  */
@media (max-width: 768px) {
    #dex-fixed-link { bottom:10px; right:10px;}
    #dex-fixed-link img { max-height:60px; }

    #dex-hover-input {bottom:10px;}
    #dex-hover-input.show {right: 55px;}
}