/* DEX.CSS - ESTILOS DO CHAT DEX */

/* CARD DO CHAT */
#dex-chat .card {
  background: linear-gradient(
    135deg,
    #182235 0%,
    #131b2d 100%
  ) !important;
  border-radius: 16px;
  overflow: hidden;
}

/* ÁREA DAS MENSAGENS */
#dexMessages {
  height: 400px;
  overflow-y: auto;
  background: linear-gradient(
    90deg,
    #56a7b5 0%,
    #9a9a9a 100%
  ) !important;
  border-radius: 12px;
  padding: 14px !important;
  scrollbar-width: thin;
  scrollbar-color: #ffffff80 transparent;
}

/* SCROLL CHROME */
#dexMessages::-webkit-scrollbar {
  width: 8px;
}

#dexMessages::-webkit-scrollbar-track {
  background: transparent;
}

#dexMessages::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.4);
  border-radius: 10px;
}

/* BADGE DEX */
#dexMessages .badge.bg-accent {
  display: none;
}

/* BADGE USUÁRIO */
#dexMessages .badge.bg-secondary {
  display: none;
}

/* MENSAGEM BASE */
.dex-message {
  max-width: 78%;
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 12px;
  font-size: 1rem;
  line-height: 1.5;
  color: #fff;
  word-break: break-word;
}

/* DEX */
.dex-message.dex {
  background: #22b8cc;
  margin-right: auto;
}

/* USUÁRIO */
.dex-message.user {
  background: #ff0a5f;
  margin-left: auto;
  text-align: right;
}

/* INPUT */
#dexInput {
  height: 56px;
  border-radius: 10px;
  border: none;
  background: #efefef;
  color: #444;
}

/* BOTÃO */
#dexChatForm .btn-accent {
  min-width: 110px;
  border-radius: 10px;
  background: #ff0a5f !important;
  border-color: #ff0a5f !important;
}

#dexChatForm .btn-accent:hover {
  transform: translateY(-2px);
}

/* WRAP */
.dex-wrap{
    display:flex;
    flex-direction:column;
    margin-bottom:16px;
}

/* ESQUERDA */
.dex-wrap-left{
    align-items:flex-start;
}

/* DIREITA */
.dex-wrap-right{
    align-items:flex-end;
}

/* NOME */
.dex-author{
    font-size:.75rem;
    font-weight:700;
    margin-bottom:6px;
    padding:0 6px;
    opacity:.95;
    letter-spacing:.5px;
}

/* NOME DEX */
.dex-author-left{
    color:#ffffff;
}

/* NOME USER */
.dex-author-right{
    color:#ffffff;
}

/* BALÕES */
.dex-message{
    max-width:78%;
    padding:14px 18px;
    border-radius:12px;
    line-height:1.5;
    color:#fff;
    word-break:break-word;
}

/* DEX */
.dex-message.dex{
    background:#22b8cc;
    border-top-left-radius:4px;
}

/* USER */
.dex-message.user{
    background:#ff0a5f;
    border-top-right-radius:4px;
}