:root {
  --alert-scale: 26px;
}

/* ============================= */
/* Base */
/* ============================= */

body {
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: 'Google Sans','Roboto', sans-serif;
}

/* ============================= */
/* Alert Container */
/* ============================= */

#alert-container {
  position: fixed;
  bottom: 45%;
  font-size: var(--alert-scale);
  pointer-events: none;
  z-index: 9999;
}

#alert-container.layout-right {
  right: 1px;
}

#alert-container.layout-left {
  left: 1px;
}

/* ============================= */
/* Avatar Wrapper */
/* ============================= */

.avatar-wrapper {
  position: relative;
  width: 4.5em;
  aspect-ratio: 1/1;

  opacity: 0;
  transform: scale(0);

  transition: opacity .3s ease, transform .3s ease;
}

.avatar-wrapper.avatar-in {
  opacity: 1;
  transform: scale(1);
}

#alert-container.layout-right .avatar-wrapper {
  right: 0;
}

#alert-container.layout-left .avatar-wrapper {
  left: 0;
}

/* ============================= */
/* Avatar */
/* ============================= */

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  position: relative;

  box-shadow: .2em .3em 1em rgba(0,0,0,.7);
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================= */
/* Avatar Anim */
/* ============================= */

@keyframes avatar-in {
  from {
    transform: translateY(30px) scale(0);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.avatar-in {
  animation: avatar-in .2s ease-out forwards;
}

/* ============================= */
/* Slide Out Anim */
/* ============================= */

@keyframes slide-out-right {
  from { transform: translateX(0); opacity:1; }
  to { transform: translateX(120%); opacity:0; }
}

.slide-out-right {
  animation: slide-out-right .2s ease-in-out forwards;
}

@keyframes slide-out-left {
  from { transform: translateX(0); opacity:1; }
  to { transform: translateX(-120%); opacity:0; }
}

.slide-out-left {
  animation: slide-out-left .2s ease-in-out forwards;
}

/* ============================= */
/* Platform Badge */
/* ============================= */

.platform-badge {
  width: 1.2em;
  aspect-ratio: 1/1;

  position: absolute;
  bottom: 0;

  background-color: #fffbff;
  padding: .2em;

  border-radius: 50%;

  box-shadow: .1em .1em 1em rgba(0,0,0,.7);

  display:flex;
  align-items:center;
  justify-content:center;
}

#alert-container.layout-right .platform-badge {
  left:0;
  transform: translate(0,15%) scale(.9);
}

#alert-container.layout-left .platform-badge {
  right:0;
  transform: translate(0,15%) scale(.9);
}

.platform-logo {
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
}

.message-bubble {
  position: absolute;
  top: 0.2em;

  width: 1em;
  height: 1em;

  opacity: 0;
  overflow: hidden;
  z-index: 3;

  border-radius: 999em;
  background-color: var(--bubble-start, #d8b4fe);
  box-shadow: 0 0 0 rgba(0,0,0,0);

  transform: translateY(0) scale(0);
  transform-origin: center center;

  transition:
    width 520ms cubic-bezier(.16,.84,.22,1),
    height 520ms cubic-bezier(.16,.84,.22,1),
    top 520ms cubic-bezier(.16,.84,.22,1),
    left 520ms cubic-bezier(.16,.84,.22,1),
    right 520ms cubic-bezier(.16,.84,.22,1),
    border-radius 420ms cubic-bezier(.16,.84,.22,1),
    background-color 260ms ease,
    box-shadow 260ms ease,
    opacity 200ms ease,
    transform 520ms cubic-bezier(.16,.84,.22,1);
}

#alert-container.layout-right .message-bubble {
  right: 3.5em;
}

#alert-container.layout-left .message-bubble {
  left: 3.5em;
}

#alert-container.layout-right .message-bubble.is-open {
  right: 5em;
}

#alert-container.layout-left .message-bubble.is-open {
  left: 5em;
}

body.dark #alert-container .message-bubble.is-open {
  background-color: #2D2F31;
}

body.dark #alert-container .bubble-text {
  color: #E8EAED;
}

.message-bubble.is-collapsed {
  opacity: 1;
  width: 1em;
  height: 1em;
  top: 0.2em;
  border-radius: 999em;
  background-color: var(--bubble-start, #d8b4fe);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transform: translateY(0) scale(1);
}

.message-bubble.is-open {
  opacity: 1;
  width: var(--bubble-open-width, 12em);
  height: 5.1em;
  top: 50%;
  transform: translateY(-50%) scale(1);
  border-radius: 2.4em;
  background-color: #f7f7f7;
  box-shadow: 0.08em 0.16em 1em rgba(0,0,0,.16);
}

.message-bubble.is-closing {
  opacity: 1;
  width: 1em;
  height: 1em;
  top: 0.2em;
  border-radius: 999em;
  background-color: var(--bubble-start, #d8b4fe);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transform: translateY(0) scale(1);
}

.message-bubble.no-transition,
.message-bubble.no-transition * {
  transition: none !important;
}

.message-bubble.is-measuring {
  width: max-content;
  height: 5.1em;
  border-radius: 2.4em;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.message-bubble.is-measuring .message-bubble-content {
  opacity: 1;
  transform: none;
  transition: none;
}

.message-bubble-content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 1em 1.2em;
  opacity: 0;
  transform: translateY(0.14em);
  transition:
    opacity 140ms ease,
    transform 180ms ease;
}

.message-bubble.is-open .message-bubble-content {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 40ms;
}

.message-bubble.is-closing .message-bubble-content {
  opacity: 0;
  transform: translateY(0.08em);
  transition-delay: 0ms;
}

.message-bubble.has-bubble-img .bubble-img {
  display: block;
}

/* ============================= */
/* Text */
/* ============================= */

.bubble-username {
  font-weight: 700;
  font-size: 1.08em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  /* text-overflow: ellipsis; */
  margin-bottom: 0.32em;
}

.bubble-message {
  font-size: 1em;
  /* font-weight: 500; */
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
}

.bubble-text {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bubble-img {
  display: none;
  flex: 0 0 auto;
  width: 3.2em;
  height: 3.2em;
  object-fit: contain;
  align-self: center;
  margin-left: 0.7em;
}

.emote {
  height: 1.2em;
  width: auto;
  vertical-align: -0.2em;
}

.bits {
  font-size: 1em;
}

/* ============================= */
/* Platform start colors */
/* ============================= */

.message-bubble.platform-twitch {
  --bubble-start: #d8b4fe;
}

.message-bubble.platform-youtube {
  --bubble-start: #f29b9b;
}

.message-bubble.platform-kick {
  --bubble-start: #7ce87b;
}

.message-bubble.platform-tiktok {
  --bubble-start: #d5475f;
}

/* ============================= */
/* Toast */
/* ============================= */

.toast-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--alert-scale);
  padding: 1em 2em;
  color: black;
  background-color: #f7f7f7;
  border-radius: 2.5em;
  box-shadow: 0.1em 0.1em 1em rgba(0,0,0,.4);
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: .5em;
  padding-left: 3em;

  opacity: 1;
  transition: opacity .5s ease;
}

body.dark .toast-box {
  color: #E8EAED;
  background-color: #2D2F31;
  box-shadow: 0.08em 0.16em 1em rgba(0,0,0,.5);
}

.toast-icon {
  position: absolute;
  left: .8em;
  height: 1.5em;
  width: auto;
}

.fade-out {
  opacity: 0;
  transition: opacity .5s ease;
}

.hidden {
  display: none;
}