#individualChatContainer{
   width: 100%;
   height: 100%;
   display: flex;
  flex-direction: column;
}
header#headerChat {
    background: #01387F;
    height: 4em;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.profile{
    color: white;
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0.6em;
    padding-left: 1em;
    background-color: transparent;
    border: none;
    cursor: pointer;
}
.profileText{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-top: 0.6em;
}
#characterName{
    font-size: 1.2em;
}
#moreInfo{
    font-size: 0.7em;
    color: rgba(245, 245, 245, 0.8);
    visibility: hidden; /* Ocultar por defecto */
    opacity: 0; /* Totalmente transparente */
    transition: opacity 0.5s ease, visibility 0s 2s; /* Controla la transición de la visibilidad y opacidad */
  }
  
.profileText:hover #moreInfo {
    visibility: visible; /* Mostrar al hacer hover */
    opacity: 1; /* Hacer visible */
    transition-delay: 0s; /* Aparece inmediatamente */
  }
  
  /* Después de quitar el mouse */
.profileText:not(:hover) #moreInfo {
    transition-delay: 2s; /* Se espera 2 segundos antes de ocultarse */
  }
  
#characterPhotoName{
    height: 3.2em;
    width: 3.2em;
    border-radius: 6em;
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

#characterPhotoName img{
    width: 75%;
    height: 75%;
    object-fit: cover;
}
.background-color-pluto {
    background: linear-gradient(
      180deg,
      #e4c481 1.5%,
      #e5b657 33.5%,
      #af7532 100%
    );
  }
  .background-color-pascal {
    background: linear-gradient(
      180deg,
      #ccf297 1.5%,
      #a2c96d 33.5%,
      #5b8941 100%
    );
  }
  .background-color-abu {
    background: linear-gradient(
      180deg,
      #ecc4aa 1.5%,
      #d4a78a 33.5%,
      #b16955 100%
    );
  }
  .background-color-figaro {
    background: linear-gradient(
      180deg,
      #d3dee7 1.5%,
      #808487 33.5%,
      #292525 100%
    );
  }
  .background-color-sven {
    background: linear-gradient(
      180deg,
      #ffb494 1.5%,
      #db6343 33.5%,
      #a7381a 100%
    );
  }
  .background-color-marie {
    background: linear-gradient(
      180deg,
      #ffe7e9 1.5%,
      #f6b7be 33.5%,
      #d88288 100%
    );
  }
  .background-color-flounder {
    background: linear-gradient(
      180deg,
      #afd4ff 7.5%,
      #56a4ff 49.5%,
      #0f6cae 100%
    );
  }
  .background-color-duquesa {
    background: linear-gradient(
      180deg,
      #ffcd82 7.5%,
      #ffbf5e 49.5%,
      #c16a30 100%
    );
  }
  .background-color-rajah {
    background: linear-gradient(
      180deg,
      #ffffbb 1.5%,
      #fc8f28 34.5%,
      #d96a00 100%
    );
  }
  .background-color-meeko {
    background: linear-gradient(
      180deg,
      #c5c2bd 1.5%,
      #91928f 33.5%,
      #2c3d49 100%
    );
  }
  .background-color-tambor {
    background: linear-gradient(
      180deg,
      #d5b8a9 1.5%,
      #b6b5b6 33.5%,
      #969091 100%
    );
  }
  .background-color-dante {
    background: linear-gradient(
      180deg,
      #dfb0a4 1.5%,
      #c28373 33.5%,
      #a06759 100%
    );
  }
  .background-color-sebastian {
    background: linear-gradient(
      180deg,
      #ffa083 1.5%,
      #ff6247 33.5%,
      #e44c3d 100%
    );
  }
  .background-color-maximus {
    background: linear-gradient(
      180deg,
      #f9eab1 1.5%,
      #c9ae5c 33.5%,
      #957e46 100%
    );
  }
  .background-color-archimedes {
    background: linear-gradient(
      180deg,
      #e3d087 1.5%,
      #de9a44 33.5%,
      #a36005 100%
    );
  }
  .background-color-crikee {
    background: linear-gradient(
      180deg,
      #bfc7f3 1.5%,
      #818cc7 33.5%,
      #8262ab 100%
    );
  }
  .background-color-terk {
    background: linear-gradient(
      180deg,
      #cdb7be 1.5%,
      #a28d93 33.5%,
      #665b66 100%
    );
  }
  .background-color-pongo {
    background: linear-gradient(
      180deg,
      #fff5fa 1.5%,
      #d7c9ce 33.5%,
      #83625b 100%
    );
  }
  .background-color-nana {
    background: linear-gradient(
      180deg,
      #fffbbb 1.5%,
      #f1ea76 33.5%,
      #b8b034 100%
    );
  }
  .background-color-reina {
    background: linear-gradient(
      180deg,
      #dbe8ea 1.5%,
      #65ace6 33.5%,
      #1c85ff 100%
    );
  }
  .background-color-rufus {
    background: linear-gradient(
      180deg,
      #ffb398 1.5%,
      #e68d6c 34.5%,
      #af6947 100%
    );
  }
  .background-color-bolt {
    background: linear-gradient(
      180deg,
      #d7cec6 1.5%,
      #b4a9a3 33.5%,
      #78706a 100%
    );
  }
  .background-color-heihei {
    background: linear-gradient(
      180deg,
      #7fe2ba 1.5%,
      #42ad81 33.5%,
      #167a51 100%
    );
  }
  .background-color-bruno {
    background: linear-gradient(
      180deg,
      #fdd4c4 1.5%,
      #ebb39d 33.5%,
      #c47151 100%
    );
  }

  .btnHomeBack{
    width: 2.6em;
    height: 2.6em;
    border: none;
    border-radius: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: linear-gradient(90deg, #FF891B 17%, #FF9900 74%);
    margin-right: 1em;
}

#mainChat{
    width: 100%;
    height: 675px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#chatContainer{
    width: 90%;
    height: 98%;
    overflow-y: auto;
    overflow-x: hidden;
}
.messageUser{
    background-color: white;
    font-size: 14px;
    border-radius: 1.5em;
    padding: 1em;
    margin: 1em 1em 1.2em 9em;
    height: auto;
    width: 60%;
}
.messageReceiver{
    background-color: white;
    font-size: 14px;
    border-radius: 1.5em;
    padding: 1em;
    margin: 1em 9em 1.2em 1em;
    height: auto;
    width: 60%;
}

#footerIndividualChat {
    position: fixed;
    width: 100%;
    height: 105px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
}
#divTypingBar {
    display: flex;
    width: 90%;
    height: 70%;
    border: 1px solid blue;
    /*border: 2px dashed rgb(255, 51, 0);*/
    background: #FFF;
    box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.10);
    border-radius: 3em;
    align-items: center;
}
#typingBar {
    border-radius: 3em 0 0 3em;
    background: #FFF;
    color: #828282;
    font-family: 'Poppins';
    font-size: 14px;
    width: 80%;
    border: 1px solid purple;
    height: 70px;
    padding: 1em;
}
#btnChatSent {
    position: absolute;
    z-index: 1;
    width: 50px;
    height: 50px;
    background: linear-gradient(90deg, #FF891B 17%, #FF9900 74%);
    border-radius: 100px;
    border: none;
    cursor: pointer;
    right: 32px;
}
img#sendButtonIcon {
    width: 24px;
}

/*TABLET*/
@media (min-width:768px){
    .profile{
        padding-left: 4em;
    }
    .btnHomeBack{
        margin-right: 4em;
    }
    #mainChat{
        height: 855px;
    }
    .messageUser{
        margin: 1em 1em 1.2em 18.5em;
    }
    #btnChatSent {
        right: 50px;
    }
    #typingBar{
        width: 90%;
    }
}

/*PC*/
@media (min-width: 1024px) {
    .profile{
        padding-left: 10em;
    }
    .btnHomeBack{
        margin-right: 10em;
    }
    #characterName{
        font-size: 1.5em;
    }
    #mainChat{
        width: 100%;
        height: 500px;
    }
    #chatContainer{
        width: 80%;
        }
    .messageUser{
         margin: 1em 1em 1em 28em;
        }
    #footerIndividualChat {
        width: 100%;
        height: 70px;
    }
    #divTypingBar {
        width: 70%;
        height: 70%;
    }
    #typingBar {
        width: 93%;
        height: 45px;        
    }
    #btnChatSent {
        width: 40px;
        height: 40px;
        right: 198px;
    }
    img#sendButtonIcon {
        width: 20px;
    }
}