@import url("https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&family=Berkshire+Swash&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-optical-sizing: auto;
  font-family: "accidentalpresidency";
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@font-face {
  font-family: "accidentalpresidency";
  src: url("https://res.cloudinary.com/dftv3avvh/raw/upload/v1744146959/Chat%20widget/yasuze%C2%B4s%20chat%20widget/accidental_presidency.ttf")
    format("truetype");

  font-style: normal;
}

#log {
  width: 760px;
  padding: 50px 48px 50px;
  border-radius: 30px;
  gap: 55px;
  display: flex;
  overflow-y: none;
  align-content: center;
  align-items: start;
  height: 100vh;
  flex-direction: {{alignMessages}};
}

.chatbox-container-mssg {
  position: relative;
  z-index: 9999 !important;
}
.chat-name {
  min-width: 230px;
  max-width: 370px;
  height: 40px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: start;
  padding-left: 62px;
  font-size: {{usernameSize}}px;
  color: {{userColor}};
  font-weight: {{fontWeightUser}};
}

.img-lateral {
  width: 60px;
  position: absolute;
}

.chat-name-container {
  border-radius: 17px;
  border: 3.5px solid #a699a0;
  position: absolute;
  top: -31px;
  left: 63px;

  box-shadow: 0px 0px 31px -3px {{BoxShadowGlowName}};
}

.chat-mssg-container {
  min-width: 530px;
  max-width: 664px;
  height: 104px;

  display: flex;
  align-items: center;

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c5103a",endColorstr="#300204",GradientType=1);
  color: white;
  padding: 18px 30px;
  border-radius: 37px;
  border: 4px solid #a699a0;

  box-shadow: 1px -1px 34px -7px {{BoxShadowGlowMessage}};
}

.text-mssg {
  padding: 0 53px 5px 40px;
  font-size: 18px;
  line-height: 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  
  font-size: {{messageSize}}px;
  color: {{messageColor}};
  font-weight: {{fontWeightMessage}};
}
.chat-mssg-container.overflow-hidden.relative {
  z-index: -999;
}

.contenedor-chains {
  z-index: -1 !important;
  position: absolute;
}

.chain_mssg_right {
  width: 79px;
  right: 0px;
  top: 4px;
  bottom: 0;
}
.chain_mssg_left {
  width: 54px;
  left: 0px;
  top: 0px;
  bottom: 0;
}



.chain_right_name {
  width: 42.5px;
  right: 4.5px;
}

.blood_top {
  width: 26px;
  right: 7px;
  bottom: -1px;
}

.chains_left_name {
  left: 6.5px;
  width: 28px;
}

.grid_name {
  width: 50px;
  position: absolute;
  left: -5px;
}

.grid_msg {
  right: -2px;
  width: 67px;
  top: -2px;
}

.streamer_blood_bot {
  width: 46px;
  left: -1px;
  bottom: 1px;
}

.rol_icon_top {
  right: 50px;
  top: -11px;
}

.nombre_user {
  margin-top: -2px;
  padding: 0 60px 0 0;
  width: fit-content;
  white-space: nowrap;

  overflow: hidden;
  text-overflow: ellipsis;
}

.blood_sub {
  width: 27.5px;
  height: 45px;
  left: 3px;
}

.chain_left_sub {
  width: 46px;
  transform: scaleX(-1);
  left: 0;
}

.chat-name-container.bg-blue-500.relative.bg_subscribercolor {
  overflow: hidden;
}

.chain_mssg_right_sub_0 {
  width: 59px;
  right: -1px;
  bottom: 20px;
}
.chain_mssg_right_sub_1 {
  width: 79px;
  right: 5px;
  top: 0px;
  bottom: 0;
}
.chain_mssg_right_sub_2 {
  width: 66px;
  right: -4px;
  top: 0px;
  bottom: 0;
}

/* bg  */
.bg_streamercolor {
  background: rgb(197, 16, 58);
  background: -moz-linear-gradient(
    180deg,
    rgba(197, 16, 58, 1) 0%,
    rgba(48, 2, 4, 1) 100%
  );
  background: -webkit-linear-gradient(
    180deg,
    rgba(197, 16, 58, 1) 0%,
    rgba(48, 2, 4, 1) 100%
  );
  background: linear-gradient(
    180deg,
    rgba(197, 16, 58, 1) 0%,
    rgba(48, 2, 4, 1) 100%
  );
}
.bg_viewercolor {
  background: #8b5cb9;
  background: linear-gradient(
    180deg,
    rgba(139, 92, 185, 1) 0%,
    rgba(75, 47, 104, 1) 100%
  );
}
.bg_vipcolor {
  background: #e3a7f2;
  background: linear-gradient(
    180deg,
    rgba(227, 167, 242, 1) 0%,
    rgba(159, 102, 167, 1) 100%
  );
}
.bg_moderatorcolor {
  background: #d688e1;
  background: linear-gradient(
    180deg,
    rgba(214, 136, 225, 1) 0%,
    rgba(94, 28, 96, 1) 100%
  );
}
.bg_subcolor {
  background: #3c193b;
  background: linear-gradient(
    0deg,
    rgba(60, 25, 59, 1) 0%,
    rgba(15, 6, 15, 1) 100%
  );
}

.shadow_sub {
  left: 5px;
}

.emote {
  display: inline-block;
  margin: 0 2px;
  vertical-align: middle;
}