header#headerChat {
  position: fixed;
  display: flex;
  background: #01387f;
  height: 5em;
  align-items: center;
  width: 100%;
}
figure#characterPhotoName {
  display: flex;
  width: 46px;
  height: 46px;
  border-radius: 100px;
  margin-left: 16px;
  overflow: hidden;
  justify-content: center;
  align-items: center;
}
.profilePhoto-pluto {
  background: linear-gradient(
    180deg,
    #e4c481 1.5%,
    #e5b657 33.5%,
    #af7532 100%
  );
}
.profilePhoto-pascal {
  background: linear-gradient(
    180deg,
    #ccf297 1.5%,
    #a2c96d 33.5%,
    #5b8941 100%
  );
}
.profilePhoto-abu {
  background: linear-gradient(
    180deg,
    #ecc4aa 1.5%,
    #d4a78a 33.5%,
    #b16955 100%
  );
}
.profilePhoto-figaro {
  background: linear-gradient(
    180deg,
    #d3dee7 1.5%,
    #808487 33.5%,
    #292525 100%
  );
}
.profilePhoto-sven {
  background: linear-gradient(
    180deg,
    #ffb494 1.5%,
    #db6343 33.5%,
    #a7381a 100%
  );
}
.profilePhoto-marie {
  background: linear-gradient(
    180deg,
    #ffe7e9 1.5%,
    #f6b7be 33.5%,
    #d88288 100%
  );
}
.profilePhoto-flounder {
  background: linear-gradient(
    180deg,
    #afd4ff 7.5%,
    #56a4ff 49.5%,
    #0f6cae 100%
  );
}
.profilePhoto-duquesa {
  background: linear-gradient(
    180deg,
    #ffcd82 7.5%,
    #ffbf5e 49.5%,
    #c16a30 100%
  );
}
.profilePhoto-rajah {
  background: linear-gradient(
    180deg,
    #ffffbb 1.5%,
    #fc8f28 34.5%,
    #d96a00 100%
  );
}
.profilePhoto-meeko {
  background: linear-gradient(
    180deg,
    #c5c2bd 1.5%,
    #91928f 33.5%,
    #2c3d49 100%
  );
}
.profilePhoto-tambor {
  background: linear-gradient(
    180deg,
    #d5b8a9 1.5%,
    #b6b5b6 33.5%,
    #969091 100%
  );
}
.profilePhoto-dante {
  background: linear-gradient(
    180deg,
    #dfb0a4 1.5%,
    #c28373 33.5%,
    #a06759 100%
  );
}
.profilePhoto-sebastian {
  background: linear-gradient(
    180deg,
    #ffa083 1.5%,
    #ff6247 33.5%,
    #e44c3d 100%
  );
}
.profilePhoto-maximus {
  background: linear-gradient(
    180deg,
    #f9eab1 1.5%,
    #c9ae5c 33.5%,
    #957e46 100%
  );
}
.profilePhoto-archimedes {
  background: linear-gradient(
    180deg,
    #e3d087 1.5%,
    #de9a44 33.5%,
    #a36005 100%
  );
}
.profilePhoto-crikee {
  background: linear-gradient(
    180deg,
    #bfc7f3 1.5%,
    #818cc7 33.5%,
    #8262ab 100%
  );
}
.profilePhoto-terk {
  background: linear-gradient(
    180deg,
    #cdb7be 1.5%,
    #a28d93 33.5%,
    #665b66 100%
  );
}
.profilePhoto-pongo {
  background: linear-gradient(
    180deg,
    #fff5fa 1.5%,
    #d7c9ce 33.5%,
    #83625b 100%
  );
}
.profilePhoto-nana {
  background: linear-gradient(
    180deg,
    #fffbbb 1.5%,
    #f1ea76 33.5%,
    #b8b034 100%
  );
}
.profilePhoto-reina {
  background: linear-gradient(
    180deg,
    #dbe8ea 1.5%,
    #65ace6 33.5%,
    #1c85ff 100%
  );
}
.profilePhoto-rufus {
  background: linear-gradient(
    180deg,
    #ffb398 1.5%,
    #e68d6c 34.5%,
    #af6947 100%
  );
}
.profilePhoto-bolt {
  background: linear-gradient(
    180deg,
    #d7cec6 1.5%,
    #b4a9a3 33.5%,
    #78706a 100%
  );
}
.profilePhoto-heihei {
  background: linear-gradient(
    180deg,
    #7fe2ba 1.5%,
    #42ad81 33.5%,
    #167a51 100%
  );
}
.profilePhoto-bruno {
  background: linear-gradient(
    180deg,
    #fdd4c4 1.5%,
    #ebb39d 33.5%,
    #c47151 100%
  );
}
img#photoCharacter {
  width: 70%;
  height: auto;
}
p#characterName {
  margin-left: 12px;
  color: white;
  font-family: "Poppins";
  font-size: 16px;
  font-weight: 600;
}
button#chatOptions {
  position: fixed;
  right: 10px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
i#optionIcons {
  font-size: 16px;
  border: none;
  display: flex;
  align-items: center;
  color: white;
  justify-content: center;
}
.hidden {
  opacity: 0;
  transform: translateY(-10px); /* Mueve ligeramente hacia arriba */
  transition: opacity 0.3s ease, transform 0.3s ease; /* Añade transición */
  visibility: hidden;
  pointer-events: none; /* Evita la interacción cuando está oculto */
}
#optionsIndividual {
  transition: opacity 0.3s ease, transform 0.3s ease;
  visibility: visible;
  pointer-events: auto;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  width: 220px;
  height: auto;
}
div#optionsIndividualChat {
  display: flex;
  position: absolute;
  top: 60px;
  right: 20px;
  width: 220px;
  height: auto;
  flex-wrap: wrap;
  flex-direction: column;
  background: rgba(245, 245, 245, 0.6);
  background-blend-mode: color-dodge, normal;
  backdrop-filter: blur(30px);
  border-radius: 18px;
  filter: drop-shadow(0px 0px 32px rgba(0, 0, 0, 0.2));
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.btnsBox {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 12px;
  border-style: none;
  font-family: "Poppins";
  background: none;
  cursor: pointer;
}
.btnsBoxOption {
  width: 20px;
}
#conocerMasBtn {
  border-top: 0.5px solid;
  border-bottom: 0.5px solid;
  border-color: #b3b3b3;
}
main#mainChat {
  position: absolute;
  height: unset;
  top: 5.2em;
  bottom: 7em;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 12px;
  width: 100%;
  z-index: -3;
  overflow-y: auto;
}
.containerMessage {
  display: flex;
  width: auto;
}
.containerMessage.user {
  display: flex;
  justify-content: flex-end;
}
.dialogueBubbles {
  width: 70%;
  padding: 16px;
  background: #ffffff;
  border-radius: 20px;
  margin-right: 16px;
  margin-left: 16px;
}
.dialogueBubbles.user {
  margin-left: 30%;
  width: auto;
}
#footerIndividualChat {
  position: fixed;
  /* border: 1px solid red; */
  width: 100%;
  height: 100px;
  display: flex;
  align-items: flex-end;
  bottom: 0;
}
#divTypingBar {
  display: flex;
  width: inherit;
  height: 70px;
  /* border: 1px solid blue; */
  background: #fff;
  box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
  border-radius: 3em;
  margin: 32px 16px;
  align-items: center;
}
#typingBar {
  position: relative;
  z-index: 0;
  border-radius: 3em 0 0 3em;
  background: #fff;
  /* margin: 32px 16px; */
  color: #333333;
  font-family: "Poppins";
  font-size: 16px;
  border: none;
  width: 80%;
  /* border: 1px solid purple; */
  height: 70px;
  left: 0;
  padding-left: 32px;
}
input#typingBar::placeholder {
  color: #828282;
}
input#typingBar:focus {
  outline: none;
}
#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;
  /* margin-right: 16px; */
  right: 32px;
}
img#sendButtonIcon {
  width: 24px;
}

/*TABLET*/
@media (min-width: 768px) {
  #typingBar {
    width: 90%;
  }
}