Propz chat bubble css

styles.css

.chat-message-wrapper {
  background: #240009;
  background: linear-gradient(115deg, rgba(36, 0, 9, 1) 25%, rgba(121, 9, 50, 1) 50%, rgba(255, 0, 77, 1) 100%);
  border: var(–border-size) solid rgba(255, 145, 178, 0.9);
  overflow: clip;
  padding: 10px 10px;
  margin: 20px 0;
  box-shadow:
    0 20px 40px rgba(255, 0, 77, 0.3),
    0 8px 16px rgba(121, 9, 50, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(255, 145, 178, 0.2);
  transform: translateY(-5px) scale(1.02);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-user {
  z-index: 1;
  position: relative;
  background: transparent;
}

.chat-user::after {
  position: absolute;
  content: "";
  top: 0.1rem;
  right: 0.5rem;
  width: 40px;
  height: 40px;
  margin-left: 8px;
  display: inline-flex;
  align-content: center;
  justify-content: center;
  background-size: contain;
  filter: drop-shadow(0 0 8px rgba(255, 145, 178, 0.4));
}

.chat-user-name {
  position: relative;
  color: #ffffff !important;
  font-family: "Inter", Arial, sans-serif;
  font-weight: 800;
  font-size: 1.8rem;
  margin-bottom: 12px;
  line-height: 1.6em;
  max-height: 3.4rem;
  max-width: calc(12 * 2.1rem);
  border: 1px solid rgba(255, 145, 178, 0.3);
  box-shadow:
    0 4px 12px rgba(255, 0, 77, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.1);
  overflow: visible;
  display: inline-block;
  padding: 2px 12px 6px;
  border-radius: 18px;
  transform: scale(.95) rotate(3deg);
  background: linear-gradient(135deg, rgb(171 0 43 / 90%) 0%, rgb(88 6 36 / 80%) 55%, rgb(11 0 3 / 70%) 100%);
  text-shadow:
    0 0 20px rgba(255, 145, 178, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 1.7px;
  z-index: 1;
  transition: all 0.3s ease;
  margin-top: 2.75rem;
  margin-left: 1.5rem;
}

.chat-user-avatar {
  position: absolute;
  left: 0rem;
  top: 0rem;
  z-index: -2;
}

.chat-message {
  position: relative;
  font-family: "Inter", sans-serif;
  color: #f8f9fa;
  font-size: 2.2rem;
  line-height: 1.7;
  font-weight: 600;
  margin-top: -4rem;
  padding: 2.4rem .5em .5rem;
  border-radius: 0.25em;
  letter-spacing: 0.3px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0, rgba(0, 0, 0, 0.25) 100%);
  z-index: 0;
  word-break: break-all;
}

.chat-message:not(:has(span)) img {
  max-width: 6rem !important;
  min-width: 6rem !important;
}

.chat-user::after {
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMzAiIGhlaWdodD0iMTMwIiB2aWV3Qm94PSIwIDAgMTMwIDEzMCIgZmlsbD0ibm9uZSI+CjxtYXNrIGlkPSJwYXRoLTEtaW5zaWRlLTFfOTE0XzYxNTI4IiBmaWxsPSJ3aGl0ZSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNDkuOTc0NiAxMDQuODgyQzQ1LjExNTEgMTA4LjE2NiA0Mi42ODU0IDEwOS44MDcgNDAuNjY4NCAxMDkuNjk2QzM4LjkxMTUgMTA5LjU5OCAzNy4yODU5IDEwOC43MzUgMzYuMjIxNyAxMDcuMzM0QzM1IDEwNS43MjUgMzUgMTAyLjc5MiAzNSA5Ni45Mjc2VjMzLjA3MjVDMzUgMjcuMjA3NyAzNSAyNC4yNzUzIDM2LjIyMTcgMjIuNjY2NkMzNy4yODU5IDIxLjI2NTMgMzguOTExNSAyMC40MDE4IDQwLjY2ODQgMjAuMzA0NUM0Mi42ODU0IDIwLjE5MjkgNDUuMTE1MSAyMS44MzQ2IDQ5Ljk3NDcgMjUuMTE4MUw5Ny4yMjc0IDU3LjA0NTZDMTAxLjE3IDU5LjcwOTggMTAzLjE0MiA2MS4wNDE5IDEwMy44MzEgNjIuNzE1NEMxMDQuNDM0IDY0LjE3ODkgMTA0LjQzNCA2NS44MjEyIDEwMy44MzEgNjcuMjg0N0MxMDMuMTQyIDY4Ljk1ODMgMTAxLjE3IDcwLjI5MDQgOTcuMjI3NCA3Mi45NTQ1TDQ5Ljk3NDYgMTA0Ljg4MlpNMTI2IDIxLjAwMDFDMTI4LjIwOSAyMS4wMDAxIDEzMCAyMi43OTA5IDEzMCAyNS4wMDAxVjEwNUMxMzAgMTA3LjIwOSAxMjguMjA5IDEwOSAxMjYgMTA5SDExNi41QzExNC4yOTEgMTA5IDExMi41IDEwNy4yMDkgMTEyLjUgMTA1VjI1LjAwMDFDMTEyLjUgMjIuNzkwOSAxMTQuMjkxIDIxLjAwMDEgMTE2LjUgMjEuMDAwMUgxMjZaIi8+CjwvbWFzaz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00OS45NzQ2IDEwNC44ODJDNDUuMTE1MSAxMDguMTY2IDQyLjY4NTQgMTA5LjgwNyA0MC42Njg0IDEwOS42OTZDMzguOTExNSAxMDkuNTk4IDM3LjI4NTkgMTA4LjczNSAzNi4yMjE3IDEwNy4zMzRDMzUgMTA1LjcyNSAzNSAxMDIuNzkyIDM1IDk2LjkyNzZWMzMuMDcyNUMzNSAyNy4yMDc3IDM1IDI0LjI3NTMgMzYuMjIxNyAyMi42NjY2QzM3LjI4NTkgMjEuMjY1MyAzOC45MTE1IDIwLjQwMTggNDAuNjY4NCAyMC4zMDQ1QzQyLjY4NTQgMjAuMTkyOSA0NS4xMTUxIDIxLjgzNDYgNDkuOTc0NyAyNS4xMTgxTDk3LjIyNzQgNTcuMDQ1NkMxMDEuMTcgNTkuNzA5OCAxMDMuMTQyIDYxLjA0MTkgMTAzLjgzMSA2Mi43MTU0QzEwNC40MzQgNjQuMTc4OSAxMDQuNDM0IDY1LjgyMTIgMTAzLjgzMSA2Ny4yODQ3QzEwMy4xNDIgNjguOTU4MyAxMDEuMTcgNzAuMjkwNCA5Ny4yMjc0IDcyLjk1NDVMNDkuOTc0NiAxMDQuODgyWk0xMjYgMjEuMDAwMUMxMjguMjA5IDIxLjAwMDEgMTMwIDIyLjc5MDkgMTMwIDI1LjAwMDFWMTA1QzEzMCAxMDcuMjA5IDEyOC4yMDkgMTA5IDEyNiAxMDlIMTE2LjVDMTE0LjI5MSAxMDkgMTEyLjUgMTA3LjIwOSAxMTIuNSAxMDVWMjUuMDAwMUMxMTIuNSAyMi43OTA5IDExNC4yOTEgMjEuMDAwMSAxMTYuNSAyMS4wMDAxSDEyNloiIGZpbGw9ImhzbChmcm9tIHJnYmEoMjU1LCAwLCA3NywgMSkgaCBzIDYwJSkiLz4KPHBhdGggZD0iTTEwMy44MzEgNjIuNzE1NEwxMDQuNzU2IDYyLjMzNDdMMTAzLjgzMSA2Mi43MTU0Wk05Ny4yMjc0IDcyLjk1NDVMOTYuNjY3NSA3Mi4xMjZMOTcuMjI3NCA3Mi45NTQ1Wk0xMDMuODMxIDY3LjI4NDdMMTA0Ljc1NiA2Ny42NjU1TDEwMy44MzEgNjcuMjg0N1pNMzYuMjIxNyAxMDcuMzM0TDM3LjAxODEgMTA2LjcyOUwzNi4yMjE3IDEwNy4zMzRaTTQ5Ljk3NDYgMTA0Ljg4Mkw1MC41MzQ1IDEwNS43MTFMNDkuOTc0NiAxMDQuODgyWk00MC42Njg0IDEwOS42OTZMNDAuNjEzMiAxMTAuNjk0TDQwLjY2ODQgMTA5LjY5NlpNNDAuNjY4NCAyMC4zMDQ1TDQwLjYxMzIgMTkuMzA2MUw0MC42Njg0IDIwLjMwNDVaTTM0IDMzLjA3MjVWOTYuOTI3NkgzNlYzMy4wNzI1SDM0Wk05Ny43ODczIDU2LjIxN0w1MC41MzQ1IDI0LjI4OTVMNDkuNDE0OCAyNS45NDY3TDk2LjY2NzUgNTcuODc0Mkw5Ny43ODczIDU2LjIxN1pNNTAuNTM0NSAxMDUuNzExTDk3Ljc4NzIgNzMuNzgzMUw5Ni42Njc1IDcyLjEyNkw0OS40MTQ4IDEwNC4wNTNMNTAuNTM0NSAxMDUuNzExWk0xMzEgMjUuMDAwMUMxMzEgMjIuMjM4NyAxMjguNzYxIDIwLjAwMDEgMTI2IDIwLjAwMDFWMjIuMDAwMUMxMjcuNjU3IDIyLjAwMDEgMTI5IDIzLjM0MzIgMTI5IDI1LjAwMDFIMTMxWk0xMzEgMTA1VjI1LjAwMDFIMTI5VjEwNUgxMzFaTTEyNiAxMTBDMTI4Ljc2MSAxMTAgMTMxIDEwNy43NjIgMTMxIDEwNUgxMjlDMTI5IDEwNi42NTcgMTI3LjY1NyAxMDggMTI2IDEwOFYxMTBaTTExNi41IDExMEgxMjZWMTA4SDExNi41VjExMFpNMTExLjUgMTA1QzExMS41IDEwNy43NjIgMTEzLjczOSAxMTAgMTE2LjUgMTEwVjEwOEMxMTQuODQzIDEwOCAxMTMuNSAxMDYuNjU3IDExMy41IDEwNUgxMTEuNVpNMTExLjUgMjUuMDAwMVYxMDVIMTEzLjVWMjUuMDAwMUgxMTEuNVpNMTE2LjUgMjAuMDAwMUMxMTMuNzM5IDIwLjAwMDEgMTExLjUgMjIuMjM4NyAxMTEuNSAyNS4wMDAxSDExMy41QzExMy41IDIzLjM0MzIgMTE0Ljg0MyAyMi4wMDAxIDExNi41IDIyLjAwMDFWMjAuMDAwMVpNMTI2IDIwLjAwMDFIMTE2LjVWMjIuMDAwMUgxMjZWMjAuMDAwMVpNOTYuNjY3NSA1Ny44NzQyQzk4LjY1NDkgNTkuMjE3IDEwMC4wODggNjAuMTg2OCAxMDEuMTE3IDYxLjAyNjZDMTAyLjE0MyA2MS44NjQ3IDEwMi42NTYgNjIuNDg4MyAxMDIuOTA2IDYzLjA5NjJMMTA0Ljc1NiA2Mi4zMzQ3QzEwNC4zMTcgNjEuMjY5IDEwMy40OTkgNjAuMzg5OCAxMDIuMzgyIDU5LjQ3NzRDMTAxLjI2NyA1OC41NjY3IDk5Ljc0MjkgNTcuNTM4NCA5Ny43ODczIDU2LjIxN0w5Ni42Njc1IDU3Ljg3NDJaTTk3Ljc4NzIgNzMuNzgzMUM5OS43NDI5IDcyLjQ2MTggMTAxLjI2NiA3MS40MzM1IDEwMi4zODIgNzAuNTIyOEMxMDMuNDk5IDY5LjYxMDQgMTA0LjMxNyA2OC43MzEyIDEwNC43NTYgNjcuNjY1NUwxMDIuOTA2IDY2LjkwNEMxMDIuNjU2IDY3LjUxMTggMTAyLjE0MyA2OC4xMzU1IDEwMS4xMTcgNjguOTczNkMxMDAuMDg4IDY5LjgxMzQgOTguNjU0OSA3MC43ODMyIDk2LjY2NzUgNzIuMTI2TDk3Ljc4NzIgNzMuNzgzMVpNMTAyLjkwNiA2My4wOTYyQzEwMy40MDkgNjQuMzE1OCAxMDMuNDA5IDY1LjY4NDQgMTAyLjkwNiA2Ni45MDRMMTA0Ljc1NiA2Ny42NjU1QzEwNS40NTkgNjUuOTU4MSAxMDUuNDU5IDY0LjA0MjEgMTA0Ljc1NiA2Mi4zMzQ3TDEwMi45MDYgNjMuMDk2MlpNMzQgOTYuOTI3NkMzNCA5OS44NDAxIDMzLjk5OSAxMDIuMDk0IDM0LjE1NjkgMTAzLjgxOEMzNC4zMTM4IDEwNS41MzEgMzQuNjM4NiAxMDYuOTAyIDM1LjQyNTMgMTA3LjkzOEwzNy4wMTgxIDEwNi43MjlDMzYuNTgzMSAxMDYuMTU2IDM2LjI5NzEgMTA1LjI1NyAzNi4xNDg1IDEwMy42MzVDMzYuMDAxIDEwMi4wMjUgMzYgOTkuODc5OSAzNiA5Ni45Mjc2SDM0Wk00OS40MTQ4IDEwNC4wNTNDNDYuOTY4NSAxMDUuNzA2IDQ1LjE5MDkgMTA2LjkwNiA0My43NzM2IDEwNy42ODZDNDIuMzQ3IDEwOC40NyA0MS40NDE5IDEwOC43MzcgNDAuNzIzNyAxMDguNjk3TDQwLjYxMzIgMTEwLjY5NEM0MS45MTE5IDExMC43NjYgNDMuMjMwMiAxMTAuMjY3IDQ0LjczNzUgMTA5LjQzOEM0Ni4yNTQyIDEwOC42MDQgNDguMTIxMiAxMDcuMzQxIDUwLjUzNDUgMTA1LjcxMUw0OS40MTQ4IDEwNC4wNTNaTTM1LjQyNTMgMTA3LjkzOEMzNi42NjY5IDEwOS41NzMgMzguNTYzNSAxMTAuNTgxIDQwLjYxMzIgMTEwLjY5NEw0MC43MjM3IDEwOC42OTdDMzkuMjU5NiAxMDguNjE2IDM3LjkwNDkgMTA3Ljg5NiAzNy4wMTgxIDEwNi43MjlMMzUuNDI1MyAxMDcuOTM4Wk0zNiAzMy4wNzI1QzM2IDMwLjEyMDMgMzYuMDAxIDI3Ljk3NTYgMzYuMTQ4NSAyNi4zNjQ4QzM2LjI5NzEgMjQuNzQzMyAzNi41ODMxIDIzLjg0NDIgMzcuMDE4MSAyMy4yNzE0TDM1LjQyNTMgMjIuMDYxOEMzNC42Mzg2IDIzLjA5NzcgMzQuMzEzOCAyNC40NjkyIDM0LjE1NjkgMjYuMTgyM0MzMy45OTkgMjcuOTA2MSAzNCAzMC4xNiAzNCAzMy4wNzI1SDM2Wk01MC41MzQ1IDI0LjI4OTVDNDguMTIxMiAyMi42NTg5IDQ2LjI1NDIgMjEuMzk2MiA0NC43Mzc1IDIwLjU2MTlDNDMuMjMwMiAxOS43MzI4IDQxLjkxMiAxOS4yMzQyIDQwLjYxMzIgMTkuMzA2MUw0MC43MjM3IDIxLjMwM0M0MS40NDE5IDIxLjI2MzMgNDIuMzQ3IDIxLjUyOTYgNDMuNzczNiAyMi4zMTQ0QzQ1LjE5MDkgMjMuMDkzOSA0Ni45Njg2IDI0LjI5MzggNDkuNDE0OCAyNS45NDY3TDUwLjUzNDUgMjQuMjg5NVpNMzcuMDE4MSAyMy4yNzE0QzM3LjkwNDkgMjIuMTAzNyAzOS4yNTk2IDIxLjM4NCA0MC43MjM3IDIxLjMwM0w0MC42MTMyIDE5LjMwNjFDMzguNTYzNSAxOS40MTk1IDM2LjY2NjkgMjAuNDI3IDM1LjQyNTMgMjIuMDYxOEwzNy4wMTgxIDIzLjI3MTRaIiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXJfOTE0XzYxNTI4KSIgZmlsbC1vcGFjaXR5PSIwLjYiIG1hc2s9InVybCgjcGF0aC0xLWluc2lkZS0xXzkxNF82MTUyOCkiLz4KPG1hc2sgaWQ9InBhdGgtMy1pbnNpZGUtMl85MTRfNjE1MjgiIGZpbGw9IndoaXRlIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjM1OTE0IDEwOC42NzZDNS4zNzQ0IDExMS4zNjkgMCAxMDguNTE0IDAgMTAzLjcwNVYyNi4yOTUzQzAgMjEuNDg2MyA1LjM3NDQyIDE4LjYzMTQgOS4zNTkxNiAyMS4zMjM4TDY2LjY0MjEgNjAuMDI4NUM3MC4xNjMzIDYyLjQwNzcgNzAuMTYzMyA2Ny41OTI1IDY2LjY0MjEgNjkuOTcxNkw5LjM1OTE0IDEwOC42NzZaTTkxIDIxLjAwMDFDOTMuMjA5MSAyMS4wMDAxIDk1IDIyLjc5MDkgOTUgMjUuMDAwMVYxMDVDOTUgMTA3LjIwOSA5My4yMDkxIDEwOSA5MSAxMDlIODEuNUM3OS4yOTA5IDEwOSA3Ny41IDEwNy4yMDkgNzcuNSAxMDVWMjUuMDAwMUM3Ny41IDIyLjc5MDkgNzkuMjkwOSAyMS4wMDAxIDgxLjUgMjEuMDAwMUg5MVoiLz4KPC9tYXNrPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuMzU5MTQgMTA4LjY3NkM1LjM3NDQgMTExLjM2OSAwIDEwOC41MTQgMCAxMDMuNzA1VjI2LjI5NTNDMCAyMS40ODYzIDUuMzc0NDIgMTguNjMxNCA5LjM1OTE2IDIxLjMyMzhMNjYuNjQyMSA2MC4wMjg1QzcwLjE2MzMgNjIuNDA3NyA3MC4xNjMzIDY3LjU5MjUgNjYuNjQyMSA2OS45NzE2TDkuMzU5MTQgMTA4LjY3NlpNOTEgMjEuMDAwMUM5My4yMDkxIDIxLjAwMDEgOTUgMjIuNzkwOSA5NSAyNS4wMDAxVjEwNUM5NSAxMDcuMjA5IDkzLjIwOTEgMTA5IDkxIDEwOUg4MS41Qzc5LjI5MDkgMTA5IDc3LjUgMTA3LjIwOSA3Ny41IDEwNVYyNS4wMDAxQzc3LjUgMjIuNzkwOSA3OS4yOTA5IDIxLjAwMDEgODEuNSAyMS4wMDAxSDkxWiIgZmlsbD0iaHNsKGZyb20gcmdiYSgyNTUsIDAsIDc3LCAxKSBoIHMgOTAlKSIvPgo8cGF0aCBkPSJNNjYuNjQyMSA2OS45NzE2TDY2LjA4MjMgNjkuMTQzTDY2LjY0MjEgNjkuOTcxNlpNOS4zNTkxNCAxMDguNjc2TDguNzk5MjggMTA3Ljg0OEw5LjM1OTE0IDEwOC42NzZaTS0xIDI2LjI5NTNWMTAzLjcwNUgxVjI2LjI5NTNILTFaTTY3LjIwMiA1OS4xOTk5TDkuOTE5MDEgMjAuNDk1Mkw4Ljc5OTMgMjIuMTUyNEw2Ni4wODIzIDYwLjg1NzFMNjcuMjAyIDU5LjE5OTlaTTkuOTE5IDEwOS41MDVMNjcuMjAyIDcwLjgwMDJMNjYuMDgyMyA2OS4xNDNMOC43OTkyOCAxMDcuODQ4TDkuOTE5IDEwOS41MDVaTTk2IDI1LjAwMDFDOTYgMjIuMjM4NiA5My43NjE0IDIwLjAwMDEgOTEgMjAuMDAwMVYyMi4wMDAxQzkyLjY1NjkgMjIuMDAwMSA5NCAyMy4zNDMyIDk0IDI1LjAwMDFIOTZaTTk2IDEwNVYyNS4wMDAxSDk0VjEwNUg5NlpNOTEgMTEwQzkzLjc2MTQgMTEwIDk2IDEwNy43NjEgOTYgMTA1SDk0Qzk0IDEwNi42NTcgOTIuNjU2OSAxMDggOTEgMTA4VjExMFpNODEuNSAxMTBIOTFWMTA4SDgxLjVWMTEwWk03Ni41IDEwNUM3Ni41IDEwNy43NjEgNzguNzM4NiAxMTAgODEuNSAxMTBWMTA4Qzc5Ljg0MzEgMTA4IDc4LjUgMTA2LjY1NyA3OC41IDEwNUg3Ni41Wk03Ni41IDI1LjAwMDFWMTA1SDc4LjVWMjUuMDAwMUg3Ni41Wk04MS41IDIwLjAwMDFDNzguNzM4NiAyMC4wMDAxIDc2LjUgMjIuMjM4NiA3Ni41IDI1LjAwMDFINzguNUM3OC41IDIzLjM0MzIgNzkuODQzMSAyMi4wMDAxIDgxLjUgMjIuMDAwMVYyMC4wMDAxWk05MSAyMC4wMDAxSDgxLjVWMjIuMDAwMUg5MVYyMC4wMDAxWk02Ni4wODIzIDYwLjg1NzFDNjkuMDE2NiA2Mi44Mzk3IDY5LjAxNjUgNjcuMTYwNCA2Ni4wODIzIDY5LjE0M0w2Ny4yMDIgNzAuODAwMkM3MS4zMSA2OC4wMjQ1IDcxLjMxIDYxLjk3NTYgNjcuMjAyIDU5LjE5OTlMNjYuMDgyMyA2MC44NTcxWk0tMSAxMDMuNzA1Qy0xIDEwOS4zMTUgNS4yNzAxNCAxMTIuNjQ2IDkuOTE5IDEwOS41MDVMOC43OTkyOCAxMDcuODQ4QzUuNDc4NjcgMTEwLjA5MSAxIDEwNy43MTIgMSAxMDMuNzA1SC0xWk0xIDI2LjI5NTNDMSAyMi4yODc4IDUuNDc4NjggMTkuOTA4NyA4Ljc5OTMgMjIuMTUyNEw5LjkxOTAxIDIwLjQ5NTJDNS4yNzAxNSAxNy4zNTQxIC0xIDIwLjY4NDggLTEgMjYuMjk1M0gxWiIgZmlsbD0idXJsKCNwYWludDFfbGluZWFyXzkxNF82MTUyOCkiIGZpbGwtb3BhY2l0eT0iMC42IiBtYXNrPSJ1cmwoI3BhdGgtMy1pbnNpZGUtMl85MTRfNjE1MjgpIi8+CjxtYXNrIGlkPSJwYXRoLTUtaW5zaWRlLTNfOTE0XzYxNTI4IiBmaWxsPSJ3aGl0ZSI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNDkuOTc0NiAxMDQuODgyQzQ1LjExNTEgMTA4LjE2NiA0Mi42ODU0IDEwOS44MDcgNDAuNjY4NCAxMDkuNjk2QzM4LjkxMTUgMTA5LjU5OCAzNy4yODU5IDEwOC43MzUgMzYuMjIxNyAxMDcuMzM0QzM1IDEwNS43MjUgMzUgMTAyLjc5MiAzNSA5Ni45Mjc2VjMzLjA3MjVDMzUgMjcuMjA3NyAzNSAyNC4yNzUzIDM2LjIyMTcgMjIuNjY2NkMzNy4yODU5IDIxLjI2NTMgMzguOTExNSAyMC40MDE4IDQwLjY2ODQgMjAuMzA0NUM0Mi42ODU0IDIwLjE5MjkgNDUuMTE1MSAyMS44MzQ2IDQ5Ljk3NDcgMjUuMTE4MUw5Ny4yMjc0IDU3LjA0NTZDMTAxLjE3IDU5LjcwOTggMTAzLjE0MiA2MS4wNDE5IDEwMy44MzEgNjIuNzE1NEMxMDQuNDM0IDY0LjE3ODkgMTA0LjQzNCA2NS44MjEyIDEwMy44MzEgNjcuMjg0N0MxMDMuMTQyIDY4Ljk1ODMgMTAxLjE3IDcwLjI5MDQgOTcuMjI3NCA3Mi45NTQ1TDQ5Ljk3NDYgMTA0Ljg4MlpNMTI2IDIxLjAwMDFDMTI4LjIwOSAyMS4wMDAxIDEzMCAyMi43OTA5IDEzMCAyNS4wMDAxVjEwNUMxMzAgMTA3LjIwOSAxMjguMjA5IDEwOSAxMjYgMTA5SDExNi41QzExNC4yOTEgMTA5IDExMi41IDEwNy4yMDkgMTEyLjUgMTA1VjI1LjAwMDFDMTEyLjUgMjIuNzkwOSAxMTQuMjkxIDIxLjAwMDEgMTE2LjUgMjEuMDAwMUgxMjZaIi8+CjwvbWFzaz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00OS45NzQ2IDEwNC44ODJDNDUuMTE1MSAxMDguMTY2IDQyLjY4NTQgMTA5LjgwNyA0MC42Njg0IDEwOS42OTZDMzguOTExNSAxMDkuNTk4IDM3LjI4NTkgMTA4LjczNSAzNi4yMjE3IDEwNy4zMzRDMzUgMTA1LjcyNSAzNSAxMDIuNzkyIDM1IDk2LjkyNzZWMzMuMDcyNUMzNSAyNy4yMDc3IDM1IDI0LjI3NTMgMzYuMjIxNyAyMi42NjY2QzM3LjI4NTkgMjEuMjY1MyAzOC45MTE1IDIwLjQwMTggNDAuNjY4NCAyMC4zMDQ1QzQyLjY4NTQgMjAuMTkyOSA0NS4xMTUxIDIxLjgzNDYgNDkuOTc0NyAyNS4xMTgxTDk3LjIyNzQgNTcuMDQ1NkMxMDEuMTcgNTkuNzA5OCAxMDMuMTQyIDYxLjA0MTkgMTAzLjgzMSA2Mi43MTU0QzEwNC40MzQgNjQuMTc4OSAxMDQuNDM0IDY1LjgyMTIgMTAzLjgzMSA2Ny4yODQ3QzEwMy4xNDIgNjguOTU4MyAxMDEuMTcgNzAuMjkwNCA5Ny4yMjc0IDcyLjk1NDVMNDkuOTc0NiAxMDQuODgyWk0xMjYgMjEuMDAwMUMxMjguMjA5IDIxLjAwMDEgMTMwIDIyLjc5MDkgMTMwIDI1LjAwMDFWMTA1QzEzMCAxMDcuMjA5IDEyOC4yMDkgMTA5IDEyNiAxMDlIMTE2LjVDMTE0LjI5MSAxMDkgMTEyLjUgMTA3LjIwOSAxMTIuNSAxMDVWMjUuMDAwMUMxMTIuNSAyMi43OTA5IDExNC4yOTEgMjEuMDAwMSAxMTYuNSAyMS4wMDAxSDEyNloiIGZpbGw9InVybCgjcGFpbnQyX2xpbmVhcl85MTRfNjE1MjgpIi8+CjxwYXRoIGQ9Ik0xMDMuODMxIDYyLjcxNTRMMTA0Ljc1NiA2Mi4zMzQ3TDEwMy44MzEgNjIuNzE1NFpNOTcuMjI3NCA3Mi45NTQ1TDk2LjY2NzUgNzIuMTI2TDk3LjIyNzQgNzIuOTU0NVpNMTAzLjgzMSA2Ny4yODQ3TDEwNC43NTYgNjcuNjY1NUwxMDMuODMxIDY3LjI4NDdaTTM2LjIyMTcgMTA3LjMzNEwzNy4wMTgxIDEwNi43MjlMMzYuMjIxNyAxMDcuMzM0Wk00OS45NzQ2IDEwNC44ODJMNTAuNTM0NSAxMDUuNzExTDQ5Ljk3NDYgMTA0Ljg4MlpNNDAuNjY4NCAxMDkuNjk2TDQwLjYxMzIgMTEwLjY5NEw0MC42Njg0IDEwOS42OTZaTTQwLjY2ODQgMjAuMzA0NUw0MC42MTMyIDE5LjMwNjFMNDAuNjY4NCAyMC4zMDQ1Wk0zNCAzMy4wNzI1Vjk2LjkyNzZIMzZWMzMuMDcyNUgzNFpNOTcuNzg3MyA1Ni4yMTdMNTAuNTM0NSAyNC4yODk1TDQ5LjQxNDggMjUuOTQ2N0w5Ni42Njc1IDU3Ljg3NDJMOTcuNzg3MyA1Ni4yMTdaTTUwLjUzNDUgMTA1LjcxMUw5Ny43ODcyIDczLjc4MzFMOTYuNjY3NSA3Mi4xMjZMNDkuNDE0OCAxMDQuMDUzTDUwLjUzNDUgMTA1LjcxMVpNMTMxIDI1LjAwMDFDMTMxIDIyLjIzODcgMTI4Ljc2MSAyMC4wMDAxIDEyNiAyMC4wMDAxVjIyLjAwMDFDMTI3LjY1NyAyMi4wMDAxIDEyOSAyMy4zNDMyIDEyOSAyNS4wMDAxSDEzMVpNMTMxIDEwNVYyNS4wMDAxSDEyOVYxMDVIMTMxWk0xMjYgMTEwQzEyOC43NjEgMTEwIDEzMSAxMDcuNzYyIDEzMSAxMDVIMTI5QzEyOSAxMDYuNjU3IDEyNy42NTcgMTA4IDEyNiAxMDhWMTEwWk0xMTYuNSAxMTBIMTI2VjEwOEgxMTYuNVYxMTBaTTExMS41IDEwNUMxMTEuNSAxMDcuNzYyIDExMy43MzkgMTEwIDExNi41IDExMFYxMDhDMTE0Ljg0MyAxMDggMTEzLjUgMTA2LjY1NyAxMTMuNSAxMDVIMTExLjVaTTExMS41IDI1LjAwMDFWMTA1SDExMy41VjI1LjAwMDFIMTExLjVaTTExNi41IDIwLjAwMDFDMTEzLjczOSAyMC4wMDAxIDExMS41IDIyLjIzODcgMTExLjUgMjUuMDAwMUgxMTMuNUMxMTMuNSAyMy4zNDMyIDExNC44NDMgMjIuMDAwMSAxMTYuNSAyMi4wMDAxVjIwLjAwMDFaTTEyNiAyMC4wMDAxSDExNi41VjIyLjAwMDFIMTI2VjIwLjAwMDFaTTk2LjY2NzUgNTcuODc0MkM5OC42NTQ5IDU5LjIxNyAxMDAuMDg4IDYwLjE4NjggMTAxLjExNyA2MS4wMjY2QzEwMi4xNDMgNjEuODY0NyAxMDIuNjU2IDYyLjQ4ODMgMTAyLjkwNiA2My4wOTYyTDEwNC43NTYgNjIuMzM0N0MxMDQuMzE3IDYxLjI2OSAxMDMuNDk5IDYwLjM4OTggMTAyLjM4MiA1OS40Nzc0QzEwMS4yNjcgNTguNTY2NyA5OS43NDI5IDU3LjUzODQgOTcuNzg3MyA1Ni4yMTdMOTYuNjY3NSA1Ny44NzQyWk05Ny43ODcyIDczLjc4MzFDOTkuNzQyOSA3Mi40NjE4IDEwMS4yNjYgNzEuNDMzNSAxMDIuMzgyIDcwLjUyMjhDMTAzLjQ5OSA2OS42MTA0IDEwNC4zMTcgNjguNzMxMiAxMDQuNzU2IDY3LjY2NTVMMTAyLjkwNiA2Ni45MDRDMTAyLjY1NiA2Ny41MTE4IDEwMi4xNDMgNjguMTM1NSAxMDEuMTE3IDY4Ljk3MzZDMTAwLjA4OCA2OS44MTM0IDk4LjY1NDkgNzAuNzgzMiA5Ni42Njc1IDcyLjEyNkw5Ny43ODcyIDczLjc4MzFaTTEwMi45MDYgNjMuMDk2MkMxMDMuNDA5IDY0LjMxNTggMTAzLjQwOSA2NS42ODQ0IDEwMi45MDYgNjYuOTA0TDEwNC43NTYgNjcuNjY1NUMxMDUuNDU5IDY1Ljk1ODEgMTA1LjQ1OSA2NC4wNDIxIDEwNC43NTYgNjIuMzM0N0wxMDIuOTA2IDYzLjA5NjJaTTM0IDk2LjkyNzZDMzQgOTkuODQwMSAzMy45OTkgMTAyLjA5NCAzNC4xNTY5IDEwMy44MThDMzQuMzEzOCAxMDUuNTMxIDM0LjYzODYgMTA2LjkwMiAzNS40MjUzIDEwNy45MzhMMzcuMDE4MSAxMDYuNzI5QzM2LjU4MzEgMTA2LjE1NiAzNi4yOTcxIDEwNS4yNTcgMzYuMTQ4NSAxMDMuNjM1QzM2LjAwMSAxMDIuMDI1IDM2IDk5Ljg3OTkgMzYgOTYuOTI3NkgzNFpNNDkuNDE0OCAxMDQuMDUzQzQ2Ljk2ODUgMTA1LjcwNiA0NS4xOTA5IDEwNi45MDYgNDMuNzczNiAxMDcuNjg2QzQyLjM0NyAxMDguNDcgNDEuNDQxOSAxMDguNzM3IDQwLjcyMzcgMTA4LjY5N0w0MC42MTMyIDExMC42OTRDNDEuOTExOSAxMTAuNzY2IDQzLjIzMDIgMTEwLjI2NyA0NC43Mzc1IDEwOS40MzhDNDYuMjU0MiAxMDguNjA0IDQ4LjEyMTIgMTA3LjM0MSA1MC41MzQ1IDEwNS43MTFMNDkuNDE0OCAxMDQuMDUzWk0zNS40MjUzIDEwNy45MzhDMzYuNjY2OSAxMDkuNTczIDM4LjU2MzUgMTEwLjU4MSA0MC42MTMyIDExMC42OTRMNDAuNzIzNyAxMDguNjk3QzM5LjI1OTYgMTA4LjYxNiAzNy45MDQ5IDEwNy44OTYgMzcuMDE4MSAxMDYuNzI5TDM1LjQyNTMgMTA3LjkzOFpNMzYgMzMuMDcyNUMzNiAzMC4xMjAzIDM2LjAwMSAyNy45NzU2IDM2LjE0ODUgMjYuMzY0OEMzNi4yOTcxIDI0Ljc0MzMgMzYuNTgzMSAyMy44NDQyIDM3LjAxODEgMjMuMjcxNEwzNS40MjUzIDIyLjA2MThDMzQuNjM4NiAyMy4wOTc3IDM0LjMxMzggMjQuNDY5MiAzNC4xNTY5IDI2LjE4MjNDMzMuOTk5IDI3LjkwNjEgMzQgMzAuMTYgMzQgMzMuMDcyNUgzNlpNNTAuNTM0NSAyNC4yODk1QzQ4LjEyMTIgMjIuNjU4OSA0Ni4yNTQyIDIxLjM5NjIgNDQuNzM3NSAyMC41NjE5QzQzLjIzMDIgMTkuNzMyOCA0MS45MTIgMTkuMjM0MiA0MC42MTMyIDE5LjMwNjFMNDAuNzIzNyAyMS4zMDNDNDEuNDQxOSAyMS4yNjMzIDQyLjM0NyAyMS41Mjk2IDQzLjc3MzYgMjIuMzE0NEM0NS4xOTA5IDIzLjA5MzkgNDYuOTY4NiAyNC4yOTM4IDQ5LjQxNDggMjUuOTQ2N0w1MC41MzQ1IDI0LjI4OTVaTTM3LjAxODEgMjMuMjcxNEMzNy45MDQ5IDIyLjEwMzcgMzkuMjU5NiAyMS4zODQgNDAuNzIzNyAyMS4zMDNMNDAuNjEzMiAxOS4zMDYxQzM4LjU2MzUgMTkuNDE5NSAzNi42NjY5IDIwLjQyNyAzNS40MjUzIDIyLjA2MThMMzcuMDE4MSAyMy4yNzE0WiIgZmlsbD0idXJsKCNwYWludDNfbGluZWFyXzkxNF82MTUyOCkiIGZpbGwtb3BhY2l0eT0iMC42IiBtYXNrPSJ1cmwoI3BhdGgtNS1pbnNpZGUtM185MTRfNjE1MjgpIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfOTE0XzYxNTI4IiB4MT0iMjgiIHkxPSIxMy43MjU1IiB4Mj0iNzAuMDA1OCIgeTI9IjgyLjA1NDUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0id2hpdGUiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJ3aGl0ZSIgc3RvcC1vcGFjaXR5PSIwIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQxX2xpbmVhcl85MTRfNjE1MjgiIHgxPSItNyIgeTE9IjEzLjcwOTQiIHgyPSIzNS4wMjUiIHkyPSI4Mi4wNDgiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0id2hpdGUiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSJ3aGl0ZSIgc3RvcC1vcGFjaXR5PSIwIi8+CjwvbGluZWFyR3JhZGllbnQ+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQyX2xpbmVhcl85MTRfNjE1MjgiIHgxPSI4Mi41IiB5MT0iMjAuMjk5MiIgeDI9IjgyLjUiIHkyPSIxMDkuNzAxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CjxzdG9wIHN0b3AtY29sb3I9IndoaXRlIiBzdG9wLW9wYWNpdHk9IjAuNCIvPgo8c3RvcCBvZmZzZXQ9IjAuNSIgc3RvcC1jb2xvcj0id2hpdGUiIHN0b3Atb3BhY2l0eT0iMC4xIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0id2hpdGUiIHN0b3Atb3BhY2l0eT0iMCIvPgo8L2xpbmVhckdyYWRpZW50Pgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50M19saW5lYXJfOTE0XzYxNTI4IiB4MT0iMjgiIHkxPSIxMy43MjU1IiB4Mj0iNjIuODA0NCIgeTI9IjU1LjE0NCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSJ3aGl0ZSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IndoaXRlIiBzdG9wLW9wYWNpdHk9IjAiLz4KPC9saW5lYXJHcmFkaWVudD4KPC9kZWZzPgo8c2NyaXB0IHhtbG5zPSIiLz48L3N2Zz4=") 0 0 no-repeat;
  background-size: contain;
}

.chat-message-wrapper:before,
.chat-message-wrapper:after,
.chat-message:before,
.chat-message:after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  pointer-events: none;
  animation: float 3s linear infinite;
}

.chat-message-wrapper:before {
  left: 20%;
  animation-delay: 0s;
}

.chat-message-wrapper:after {
  left: 50%;
  animation-delay: 0.5s;
}

.chat-message:before {
  left: 80%;
  animation-delay: 1s;
}

.chat-message:after {
  left: 90%;
  animation-delay: 1.5s;
}

@keyframes float {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  10%,
  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}