.zayse-chat-entry {
  --zayse-chat-width: min(calc(100vw - 44px), 430px);
  --zayse-chat-height: min(650px, calc(100vh - 126px));
  --zayse-chat-welcome-height: 150px;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 44%),
    linear-gradient(135deg, #52bdff 0%, #2788ee 62%, #5b68ef 100%);
  color: #fff;
  cursor: pointer;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1010;
  transition: transform .24s ease, filter .24s ease, box-shadow .24s ease;
  transform-origin: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    inset 0 -2px 0 rgba(5, 48, 127, .26),
    0 18px 34px rgba(39, 136, 238, .30);
  filter: none;
}

.zayse-chat-entry img {
  display: none;
}

.zayse-chat-entry::before {
  content: "";
  width: 30px;
  height: 30px;
  display: block;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m174.72 855.68 135.296-45.12 23.68 11.84C388.096 849.536 448.576 864 512 864c211.84 0 384-166.784 384-352S723.84 160 512 160 128 326.784 128 512c0 69.12 24.96 139.264 70.848 199.232l22.08 28.8-46.272 115.584zm-45.248 82.56A32 32 0 0 1 89.6 896l58.368-145.92C94.72 680.32 64 596.864 64 512 64 299.904 256 96 512 96s448 203.904 448 416-192 416-448 416a461.06 461.06 0 0 1-206.912-48.384l-175.616 58.56zM512 563.2a51.2 51.2 0 1 1 0-102.4 51.2 51.2 0 0 1 0 102.4m192 0a51.2 51.2 0 1 1 0-102.4 51.2 51.2 0 0 1 0 102.4m-384 0a51.2 51.2 0 1 1 0-102.4 51.2 51.2 0 0 1 0 102.4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m174.72 855.68 135.296-45.12 23.68 11.84C388.096 849.536 448.576 864 512 864c211.84 0 384-166.784 384-352S723.84 160 512 160 128 326.784 128 512c0 69.12 24.96 139.264 70.848 199.232l22.08 28.8-46.272 115.584zm-45.248 82.56A32 32 0 0 1 89.6 896l58.368-145.92C94.72 680.32 64 596.864 64 512 64 299.904 256 96 512 96s448 203.904 448 416-192 416-448 416a461.06 461.06 0 0 1-206.912-48.384l-175.616 58.56zM512 563.2a51.2 51.2 0 1 1 0-102.4 51.2 51.2 0 0 1 0 102.4m192 0a51.2 51.2 0 1 1 0-102.4 51.2 51.2 0 0 1 0 102.4m-384 0a51.2 51.2 0 1 1 0-102.4 51.2 51.2 0 0 1 0 102.4'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  transition: transform .24s ease;
}

.zayse-chat-entry:hover {
  transform: scale(1.08) translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .38),
    inset 0 -2px 0 rgba(5, 48, 127, .28),
    0 22px 42px rgba(39, 136, 238, .36);
}

.zayse-chat-entry:hover::before {
  transform: scale(1.06);
}

.zayse-chat-entry:active {
  transform: scale(1.06) translateY(1px);
}

.zayse-chat-entry.is-loading {
  cursor: wait;
  opacity: .72;
  transform: scale(.98);
}

.zayse-chat-entry.is-open {
  display: none;
  box-shadow: none;
  filter: none;
}

.zayse-chat-entry.is-open img {
  display: none;
}

.zayse-chat-entry.is-open::before {
  display: none;
}

.zayse-chat-member-toast {
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 1012;
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  max-width: min(320px, calc(100vw - 128px));
  padding: 12px 14px;
  border-radius: 8px;
  background: #101827;
  color: #f8fafc;
  border: 1px solid rgba(251, 191, 36, .28);
  box-shadow: 0 18px 34px rgba(15, 23, 42, .28);
  font-size: 13px;
  font-weight: 800;
  opacity: 0;
  transform: translate(10px, 12px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.zayse-chat-member-toast.show {
  opacity: 1;
  transform: translate(0, 0);
}

.zayse-chat-member-toast::before {
  content: "i";
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 2px solid currentColor;
  color: #f8fafc;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.zayse-chat-close-mark {
  width: 66px;
  height: 66px;
  display: block;
  position: relative;
  border-radius: 50%;
  background: #7458e8;
  box-shadow: none;
}

.zayse-chat-close-mark::before,
.zayse-chat-close-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 29px;
  height: 3px;
  border-radius: 999px;
  background: #fff;
  transform-origin: center;
}

.zayse-chat-close-mark::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.zayse-chat-close-mark::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.zayse-chat-welcome {
  --zayse-chat-width: min(calc(100vw - 44px), 430px);
  --zayse-chat-height: min(650px, calc(100vh - 126px));
  --zayse-chat-welcome-height: 150px;
  position: fixed;
  right: 22px;
  bottom: 108px;
  z-index: 1011;
  width: var(--zayse-chat-width);
  height: var(--zayse-chat-welcome-height);
  padding: 0;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle at 18% 0%, rgba(50, 154, 245, .18), transparent 42%),
    linear-gradient(180deg, rgba(10, 20, 38, .98), rgba(8, 16, 31, .98));
  color: #f5f7fb;
  border: 1px solid rgba(64, 166, 255, .46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(4, 10, 22, .72),
    0 18px 42px rgba(0, 0, 0, .32),
    0 0 0 3px rgba(30, 118, 220, .10),
    0 0 28px rgba(42, 141, 246, .16);
  display: block;
  overflow: hidden;
  font-family: inherit;
  transition: height .32s cubic-bezier(.22, .82, .18, 1), border-radius .32s ease, box-shadow .32s ease;
}

.zayse-chat-welcome.is-launching {
  height: var(--zayse-chat-height);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(4, 10, 22, .72),
    0 18px 42px rgba(0, 0, 0, .42),
    0 0 0 3px rgba(30, 118, 220, .12);
}

.zayse-chat-welcome-track {
  height: calc(var(--zayse-chat-welcome-height) + var(--zayse-chat-height));
  display: grid;
  grid-template-rows: var(--zayse-chat-welcome-height) minmax(0, 1fr);
  transform: translateY(0);
  transition: transform .32s cubic-bezier(.22, .82, .18, 1);
}

.zayse-chat-welcome.is-launching .zayse-chat-welcome-track {
  transform: translateY(calc(var(--zayse-chat-welcome-height) * -1));
}

.zayse-chat-welcome-card {
  position: relative;
  min-height: var(--zayse-chat-welcome-height);
  display: grid;
  gap: 8px;
  align-content: center;
  box-sizing: border-box;
  padding: 18px 20px 18px;
}

.zayse-chat-welcome-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 92% 12%, rgba(78, 183, 255, .18), transparent 28%),
    linear-gradient(90deg, rgba(65, 174, 255, .08), transparent 54%);
}

.zayse-chat-welcome-card > * {
  position: relative;
}

.zayse-chat-welcome strong {
  font-size: 18px;
  font-weight: 760;
}

.zayse-chat-welcome span {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(245, 247, 251, .72);
}

.zayse-chat-welcome-preview {
  min-height: var(--zayse-chat-height);
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr) 82px;
  background:
    linear-gradient(180deg, rgba(17, 32, 56, .98), rgba(9, 16, 31, .98));
}

.zayse-chat-preview-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(64, 166, 255, .24);
  background:
    linear-gradient(180deg, rgba(32, 61, 102, .48), rgba(16, 25, 43, .94));
}

.zayse-chat-preview-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 44%),
    linear-gradient(135deg, #52bdff 0%, #2788ee 62%, #5b68ef 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 8px 18px rgba(39, 136, 238, .26);
}

.zayse-chat-preview-head span:last-child {
  display: grid;
  gap: 2px;
}

.zayse-chat-preview-head strong {
  font-size: 15px;
  font-weight: 760;
}

.zayse-chat-preview-head small {
  color: rgba(224, 236, 255, .62);
  font-size: 11px;
  line-height: 1.2;
}

.zayse-chat-preview-body {
  margin: 16px 18px;
  border: 1px dashed rgba(64, 166, 255, .22);
  border-radius: 9px;
  background: rgba(5, 13, 28, .16);
}

.zayse-chat-preview-compose {
  margin: 11px 10px 10px;
  border-top: 1px solid rgba(64, 166, 255, .20);
  background:
    linear-gradient(90deg, rgba(75, 183, 255, .12) 0 46px, transparent 46px),
    linear-gradient(90deg, transparent 0 calc(100% - 50px), rgba(70, 91, 220, .16) calc(100% - 50px));
}

.zayse-chat-welcome-start {
  margin-top: 6px;
  height: 38px;
  border: 1px solid rgba(129, 207, 255, .58);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, #4bb7ff 0%, #2789ee 62%, #4073f1 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 760;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .36),
    inset 0 -2px 0 rgba(6, 48, 130, .28),
    0 8px 16px rgba(21, 115, 226, .24);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.zayse-chat-welcome-start:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .40),
    inset 0 -2px 0 rgba(6, 48, 130, .30),
    0 11px 18px rgba(21, 115, 226, .28);
}

.zayse-chat-welcome-start:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(5, 28, 84, .28),
    0 5px 10px rgba(21, 115, 226, .18);
}

.zayse-chat-welcome-close {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .055));
  color: rgba(255, 255, 255, .72);
  cursor: pointer;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.zayse-chat-welcome.is-launching .zayse-chat-welcome-close,
.zayse-chat-welcome.is-launching .zayse-chat-welcome-start {
  pointer-events: none;
}

.mobile-chat-modal.buyer-chat-modal {
  --zayse-chat-width: min(calc(100vw - 44px), 430px);
  --zayse-chat-height: min(650px, calc(100vh - 126px));
  inset: auto;
  left: auto;
  top: auto;
  right: 22px;
  bottom: 104px;
  width: var(--zayse-chat-width);
  height: var(--zayse-chat-height);
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0;
  background: transparent;
  pointer-events: none;
  touch-action: auto;
}

.mobile-chat-modal.buyer-chat-modal .mobile-chat-panel {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .42), 0 0 0 3px rgba(30, 118, 220, .12);
  pointer-events: auto;
  animation: zayse-chat-panel-rise .24s cubic-bezier(.22, .82, .18, 1) both;
}

.mobile-chat-modal.seller-chat-modal {
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 6, 23, .16);
}

.mobile-chat-modal.seller-chat-modal .mobile-chat-panel {
  width: min(calc(100vw - 44px), 430px);
  height: min(650px, calc(100vh - 72px));
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .42), 0 0 0 3px rgba(30, 118, 220, .12);
}

@media (max-width: 520px) {
  .zayse-chat-entry,
  .zayse-chat-entry.is-open {
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
  }

  .zayse-chat-entry::before {
    width: 28px;
    height: 28px;
  }

  .zayse-chat-member-toast {
    right: 16px;
    bottom: 84px;
    max-width: calc(100vw - 104px);
    padding: 11px 12px;
  }

  .zayse-chat-welcome {
    right: 12px;
    bottom: 100px;
    --zayse-chat-width: calc(100vw - 24px);
    --zayse-chat-height: min(650px, calc(100vh - 100px));
  }

  .mobile-chat-modal.buyer-chat-modal {
    --zayse-chat-width: calc(100vw - 12px);
    --zayse-chat-height: min(650px, calc(100vh - 100px));
    right: 6px;
    bottom: 86px;
    width: var(--zayse-chat-width);
    height: var(--zayse-chat-height);
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0;
    background: transparent;
  }

  .mobile-chat-modal.seller-chat-modal {
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 6px 86px 6px;
    background: transparent;
  }

  .mobile-chat-modal.buyer-chat-modal .mobile-chat-panel,
  .mobile-chat-modal.seller-chat-modal .mobile-chat-panel {
    width: 100%;
    height: var(--zayse-chat-height, min(650px, calc(100vh - 100px)));
  }
}

@keyframes zayse-chat-panel-rise {
  from {
    opacity: .92;
    transform: translateY(12px) scale(.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}