:root {
  --black: #000000;
  --white: #ffffff;
  --agent: #3a3a3c;
  --agent-text: rgba(255, 255, 255, 0.96);
  --blue-top: #5d95ff;
  --blue-bottom: #3c79f4;
  --caption: rgba(255, 255, 255, 0.56);
  --glass: rgba(255, 255, 255, 0.12);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
  --radius: 8px;
  --sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter,
    ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --bubble-max: min(920px, 91vw);
  --bubble-fs: clamp(1.05rem, 0.92rem + 0.55vw, 1.34rem);
  --bubble-lh: 1.32;
  --bubble-py: clamp(13px, 10px + 0.65vw, 20px);
  --bubble-px: clamp(17px, 12px + 1.1vw, 28px);
  --bubble-shadow: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.24))
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.22));
  --thread-frame-pad: clamp(18px, 3vw, 56px);
  --thread-top-pad: clamp(12px, 2.2svh, 24px);
  --thread-bottom-pad: clamp(14px, 2svh, 20px);
  --thread-gap: clamp(14px, 2.1svh, 22px);
  --stacked-message-gap: 9px;
  --stacked-single-to-payment-adjust: 1.5px;
  --reaction-clearance: clamp(24px, 4.2svh, 38px);
  --first-reaction-clearance: clamp(18px, 3svh, 26px);
  --typing-pad-y: clamp(11px, 9px + 0.45vw, 15px);
  --typing-pad-x: clamp(16px, 12px + 1vw, 22px);
  --typing-dot: clamp(12px, 10px + 0.35vw, 15px);
  --typing-gap: clamp(9px, 7px + 0.5vw, 12px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  --footer-progress: 0;
  --footer-y: 42px;
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  min-height: 142vh;
  min-height: 142svh;
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  letter-spacing: 0;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

.app-shell {
  position: sticky;
  top: 0;
  width: min(1600px, 100%);
  height: 100vh;
  height: 100svh;
  min-height: 0;
  margin: 0 auto;
  padding: 28px 34px 46px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: start;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.access-trigger {
  position: absolute;
  top: 26px;
  right: 34px;
  z-index: 3;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.92);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.055) 46%, rgba(255, 255, 255, 0.12)),
    color-mix(in srgb, var(--glass) 100%, transparent);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: 0;
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.13),
    inset 1.5px 2px 0 -1px rgba(255, 255, 255, 0.28),
    inset -1px -3px 2px -2px rgba(0, 0, 0, 0.5),
    0 10px 24px rgba(0, 0, 0, 0.3);
  transition:
    transform 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.access-trigger:hover,
.access-trigger:focus-visible {
  transform: translateY(-1px);
  color: var(--white);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 1.5px 2px 0 -1px rgba(255, 255, 255, 0.34),
    inset -1px -3px 2px -2px rgba(0, 0, 0, 0.55),
    0 14px 30px rgba(0, 0, 0, 0.34),
    0 0 26px rgba(93, 149, 255, 0.1);
}

.access-trigger:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: 4px;
}

.access-dialog {
  width: min(470px, calc(100vw - 32px));
  margin: auto;
  padding: 0;
  border: 0;
  color: var(--white);
  background: transparent;
  overflow: visible;
}

.access-dialog:not([open]) {
  display: none;
}

.access-dialog::backdrop {
  background:
    radial-gradient(circle at 50% 32%, rgba(93, 149, 255, 0.18), rgba(93, 149, 255, 0) 28%),
    rgba(0, 0, 0, 0.54);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.access-form {
  position: relative;
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  overflow: visible;
  isolation: isolate;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.055) 42%, rgba(255, 255, 255, 0.12)),
    color-mix(in srgb, var(--glass) 96%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 1.8px 2.5px 0 -1.5px rgba(255, 255, 255, 0.34),
    inset -2px -7px 3px -6px rgba(255, 255, 255, 0.18),
    inset -1px -3px 2px -2px rgba(0, 0, 0, 0.56),
    0 18px 40px rgba(0, 0, 0, 0.34),
    0 10px 24px rgba(0, 0, 0, 0.3);
  animation: accessRise 320ms cubic-bezier(0.19, 1, 0.22, 1) both;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.access-form::before,
.access-form::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.access-form::before {
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 16% 10%, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0) 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
  opacity: 0.72;
}

.access-form::after {
  top: 9px;
  left: 18px;
  width: 44%;
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  filter: blur(0.4px);
  opacity: 0.6;
}

.access-form:focus-within,
.access-form:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 1.8px 2.5px 0 -1.5px rgba(255, 255, 255, 0.42),
    inset -2px -7px 3px -6px rgba(255, 255, 255, 0.22),
    inset -1px -3px 2px -2px rgba(0, 0, 0, 0.6),
    0 22px 48px rgba(0, 0, 0, 0.4),
    0 0 34px rgba(93, 149, 255, 0.12);
}

.access-form input,
.access-form button[type="submit"] {
  min-width: 0;
  height: 44px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  letter-spacing: 0;
}

.access-form input {
  width: 100%;
  padding: 0 18px;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(0, 0, 0, 0.12);
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 2px 9px rgba(0, 0, 0, 0.18);
}

.access-form input::placeholder {
  color: rgba(255, 255, 255, 0.52);
}

.access-form input:focus {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 2px 9px rgba(0, 0, 0, 0.2);
}

.access-form button[type="submit"] {
  padding: 0 24px;
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 44%),
    linear-gradient(180deg, var(--blue-top) 0%, var(--blue-bottom) 100%);
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1;
  text-transform: lowercase;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -8px 16px rgba(20, 65, 170, 0.26),
    0 8px 18px rgba(36, 105, 240, 0.26);
  transition:
    transform 160ms ease,
    filter 160ms ease;
}

.access-form button[type="submit"]:hover {
  filter: brightness(1.05);
}

.access-form button[type="submit"]:active {
  transform: translateY(1px);
}

.access-form button[type="submit"]:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.74);
  outline-offset: 2px;
}

.access-close {
  position: absolute;
  top: -16px;
  right: -4px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: none;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.08);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 8px 18px rgba(0, 0, 0, 0.24);
}

.access-dialog[open] .access-close {
  display: grid;
}

.access-close:hover,
.access-close:focus-visible {
  color: var(--white);
  background: rgba(255, 255, 255, 0.14);
}

.access-close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: 3px;
}

.access-form input:-webkit-autofill,
.access-form input:-webkit-autofill:hover,
.access-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--white);
  transition: background-color 9999s ease-out;
  caret-color: var(--white);
}

.brand-stack {
  margin: 0 auto;
  display: grid;
  justify-items: center;
  gap: 10px;
  cursor: pointer;
}

.brand-stack:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}

.brand-mark {
  position: relative;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 34%),
    linear-gradient(180deg, #706a93 0%, #524b78 46%, #2f2a4e 100%);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -14px 24px rgba(19, 15, 37, 0.34),
    0 18px 40px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.brand-mark::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% -8%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  content: "";
}

.brand-mark::after {
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.08);
  content: "";
}

.brand-initial {
  position: relative;
  z-index: 1;
  color: var(--white);
  font-size: 2.8rem;
  font-weight: 720;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

.brand-chip {
  padding: 8px 16px 10px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.94);
  background: color-mix(in srgb, var(--glass) 100%, transparent);
  font-size: 0.88rem;
  font-weight: 650;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 1.5px 2px 0 -1px rgba(255, 255, 255, 0.24),
    inset -1px -3px 2px -2px rgba(0, 0, 0, 0.5),
    0 10px 24px rgba(0, 0, 0, 0.24);
}

.demo-thread {
  display: grid;
  align-content: start;
  gap: var(--thread-gap);
  width: 100%;
  padding: var(--thread-top-pad) var(--thread-frame-pad) var(--thread-bottom-pad);
}

.message-row {
  width: 100%;
  transition: margin-top 180ms ease;
}

.message-row.has-reaction {
  margin-top: var(--reaction-clearance);
}

.message-row.has-reaction:first-child {
  margin-top: var(--first-reaction-clearance);
}

.message-row.payment-row {
  margin-top: 4px;
}

.message-row.follows-stacked-message,
.message-row.payment-row.follows-stacked-message {
  margin-top: var(--stacked-message-gap);
}

.message-row.payment-row.follows-stacked-message.follows-single-message {
  margin-top: calc(
    var(--stacked-message-gap) + var(--stacked-single-to-payment-adjust)
  );
}

.message-row.left {
  justify-content: flex-start;
}

.message-row.right {
  justify-content: flex-end;
}

.message-row[hidden] {
  display: none !important;
}

.message-row.is-visible {
  display: flex;
}

.bubble-wrap {
  position: relative;
  max-width: var(--bubble-max);
  display: inline-block;
}

.bubble-wrap .message {
  max-width: 100%;
}

.message {
  position: relative;
  max-width: var(--bubble-max);
  padding: var(--bubble-py) var(--bubble-px);
  z-index: 0;
  border-radius: 1.5rem;
  background: transparent;
  font-size: var(--bubble-fs);
  font-weight: 650;
  line-height: var(--bubble-lh);
  animation: bubblePop 520ms cubic-bezier(0.19, 1, 0.22, 1) both;
  isolation: isolate;
  overflow: visible;
}

.message::before,
.message::after {
  position: absolute;
  z-index: -1;
  content: "";
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: var(--bubble-shadow);
  pointer-events: none;
}

.message::after {
  opacity: 0;
}

.message.user::before {
  inset: -7px -25px -9px -10px;
  background-image: url("Blobs/bluesingle.svg");
}

.message.agent::before,
.message.pay::before {
  inset: -7px -10px -9px -25px;
  background-image: url("Blobs/darksingle.svg");
}

.message.user.message--multi::before {
  inset: -11px -27px -13px -12px;
  background-image: url("Blobs/bluemulti.svg");
}

.message.agent.message--multi::before,
.message.pay::before {
  inset: -11px -12px -13px -27px;
  background-image: url("Blobs/darkmulti.svg");
}

.message.user::after,
.message.user.message--multi::after {
  inset: -9px -14px -11px -14px;
  border-radius: 9999px;
  background: #007aff;
}

.message.agent::after,
.message.agent.message--multi::after,
.message.pay::after {
  inset: -9px -14px -11px -14px;
  border-radius: 9999px;
  background: var(--agent);
}

.message.message--stacked::before {
  animation: bubbleToStackedBase 360ms cubic-bezier(0.19, 1, 0.22, 1) both;
}

.message.message--stacked::after {
  animation: bubbleToStackedTop 360ms cubic-bezier(0.19, 1, 0.22, 1) both;
}

.message-row.has-reaction.is-visible .bubble-wrap {
  animation: bubbleReact 620ms cubic-bezier(0.2, 1.25, 0.32, 1) both;
}

.bubble-wrap.is-reactable .message {
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.bubble-wrap.is-reactable .message:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: 4px;
}

.bubble-wrap.is-pressing .message {
  transform: scale(0.992);
}

.agent {
  color: var(--agent-text);
}

.user {
  color: var(--white);
}

.pay {
  width: fit-content;
  display: grid;
  gap: 8px;
  color: var(--agent-text);
}

.pay-kicker {
  font-size: clamp(0.74rem, 0.68rem + 0.22vw, 0.84rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  opacity: 0.56;
}

.pay strong {
  font-size: clamp(1.02rem, 0.94rem + 0.35vw, 1.14rem);
  line-height: 1.32;
}

.typing-bubble {
  width: min(220px, 100%);
  max-width: var(--bubble-max);
  min-width: min(190px, 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--typing-gap);
  padding: var(--bubble-py) var(--bubble-px);
  min-height: calc(1lh + var(--bubble-py) + var(--bubble-py));
}

.message.typing-bubble::before {
  inset: -7px -12px -9px -12px;
  border-radius: 9999px;
  background: var(--agent);
  background-image: none;
}

.message.typing-bubble::after {
  inset: auto auto -9px -21px;
  width: 52px;
  height: 30px;
  border-radius: 0 0 28px 8px;
  background: var(--agent);
  opacity: 1;
  clip-path: polygon(0 100%, 18% 92%, 36% 72%, 45% 42%, 48% 0, 100% 0, 92% 100%);
  filter: none;
}

.typing-dot {
  width: var(--typing-dot);
  height: var(--typing-dot);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.68);
  animation: typingPulse 1.05s infinite ease-in-out;
}

.typing-dot:nth-child(2) {
  animation-delay: 0.16s;
}

.typing-dot:nth-child(3) {
  animation-delay: 0.32s;
}

.reaction-badge {
  position: absolute;
  top: -30px;
  z-index: 2;
  width: 50px;
  height: 50px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(14px) scale(0.34);
  animation: reactionBadgePop 760ms cubic-bezier(0.16, 1.24, 0.28, 1) both;
}

.reaction-badge::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.reaction-badge--agent {
  right: -18px;
  left: auto;
}

.reaction-badge--user {
  left: -18px;
  right: auto;
}

.reaction-badge--confirm {
  top: -30px;
  right: -18px;
  left: auto;
}

.bubble-wrap.is-choosing-reaction > .reaction-badge {
  visibility: hidden;
  opacity: 0;
}

.reaction-picker {
  position: absolute;
  top: -52px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 4px 8px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 243, 246, 0.96)),
    rgba(255, 255, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    0 9px 22px rgba(0, 0, 0, 0.24);
  opacity: 0;
  transform: translateY(8px) scale(0.9);
  animation: reactionPickerIn 180ms cubic-bezier(0.19, 1, 0.22, 1) both;
}

.reaction-picker--user {
  left: 8px;
}

.reaction-picker--agent {
  right: 8px;
}

.reaction-option {
  --reaction-icon: #787a7d;

  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  border: 0;
  border-radius: 999px;
  color: var(--reaction-icon);
  background: transparent;
  cursor: pointer;
  transition:
    background 150ms ease,
    transform 150ms ease;
}

.reaction-option:hover,
.reaction-option:focus-visible {
  background: rgba(0, 0, 0, 0.08);
}

.reaction-option:focus-visible {
  outline: 2px solid rgba(47, 117, 255, 0.64);
  outline-offset: 2px;
}

.reaction-option.is-selected {
  background: #007aff;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.94),
    0 1px 4px rgba(0, 0, 0, 0.22);
}

.reaction-option.is-selected:hover,
.reaction-option.is-selected:focus-visible {
  background: #007aff;
}

.reaction-option::before {
  display: block;
  width: 22px;
  height: 22px;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.reaction-badge--agent.reaction-badge--love::before,
.reaction-picker--agent .reaction-option--love::before {
  background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 117 115' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M101.5 51C101.5 59.7503 99.2745 67.9808 95.3586 75.1563C100.193 77.6464 103.5 82.6871 103.5 88.5C103.5 96.7843 96.7843 103.5 88.5 103.5C82.6871 103.5 77.6464 100.193 75.1563 95.3586C67.9808 99.2745 59.7503 101.5 51 101.5C23.1096 101.5 0.5 78.8904 0.5 51C0.5 23.1096 23.1096 0.5 51 0.5C78.8904 0.5 101.5 23.1096 101.5 51ZM108.5 114.5C104.082 114.5 100.5 110.918 100.5 106.5C100.5 102.082 104.082 98.5 108.5 98.5C112.918 98.5 116.5 102.082 116.5 106.5C116.5 110.918 112.918 114.5 108.5 114.5Z' fill='%234C90F7'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M33.704 36.015C32.7885 36.573 31.529 37.54 30.9055 38.1635C30.2815 38.7875 29.3675 39.914 28.874 40.6675C28.38 41.421 27.7565 42.9845 27.488 44.142C27.2195 45.2995 27 47.034 27 47.9965C27 48.959 27.215 50.6465 27.478 51.7465C27.7405 52.8465 28.665 55.1415 29.5315 56.847C30.5665 58.8825 32.6115 61.461 35.4875 64.356C37.897 66.7805 40.6555 69.3155 41.618 69.989C42.5805 70.6625 43.674 71.511 44.0485 71.8745C44.4225 72.238 45.8215 73.0895 47.1565 73.766C48.492 74.443 49.895 74.9965 50.274 74.9965C50.653 74.9965 52.404 74.068 54.1655 72.933C55.927 71.798 57.4805 70.718 57.618 70.534C57.7555 70.3495 58.6555 69.6495 59.618 68.978C60.5805 68.307 62.518 66.6105 63.9235 65.2075C65.329 63.805 67.585 60.9895 68.9365 58.952C70.288 56.914 71.7075 54.3465 72.091 53.2465C72.4745 52.1465 72.7785 49.852 72.766 48.1475C72.754 46.4435 72.437 44.0105 72.0625 42.741C71.6875 41.4715 70.6985 39.688 69.864 38.7775C69.03 37.8665 67.5645 36.644 66.608 36.061C65.243 35.229 64.0595 35 61.118 35C58.188 35 56.991 35.23 55.6445 36.051C54.6965 36.629 53.285 37.7825 52.5075 38.6145C51.7305 39.4465 50.8745 40.492 50.606 40.937C50.1695 41.6615 50.026 41.6355 49.243 40.691C48.762 40.1105 47.918 39.069 47.368 38.377C46.818 37.685 45.5805 36.642 44.618 36.0595C43.248 35.23 42.0535 35 39.118 35C36.23 35 34.9855 35.2335 33.704 36.015Z' fill='%23F77676'/%3E%3C/svg%3E");
}

.reaction-badge--agent.reaction-badge--like::before,
.reaction-picker--agent .reaction-option--like::before {
  background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 117 115' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M101.5 51C101.5 59.7503 99.2745 67.9808 95.3586 75.1563C100.193 77.6464 103.5 82.6871 103.5 88.5C103.5 96.7843 96.7843 103.5 88.5 103.5C82.6871 103.5 77.6464 100.193 75.1563 95.3586C67.9808 99.2745 59.7503 101.5 51 101.5C23.1096 101.5 0.5 78.8904 0.5 51C0.5 23.1096 23.1096 0.5 51 0.5C78.8904 0.5 101.5 23.1096 101.5 51ZM108.5 114.5C104.082 114.5 100.5 110.918 100.5 106.5C100.5 102.082 104.082 98.5 108.5 98.5C112.918 98.5 116.5 102.082 116.5 106.5C116.5 110.918 112.918 114.5 108.5 114.5Z' fill='%234C90F7'/%3E%3Cpath d='M49.8095 31.339C50.523 29.915 51.453 28.3565 51.877 27.875C52.301 27.3935 52.9615 27 53.345 27C53.7285 27 54.6745 27.327 55.447 27.7265C56.2195 28.126 57.1255 29.114 57.4605 29.9225C57.846 30.853 57.987 32.9245 57.845 35.571C57.722 37.8695 57.3775 40.65 57.0795 41.75C56.781 42.85 56.399 44.3125 56.23 45L55.923 46.25L63.492 46.0785C70.26 45.925 71.1675 46.0035 72.068 46.8185C72.8655 47.54 73.008 48.096 72.753 49.49C72.576 50.458 72.2505 53.1625 72.0305 55.5C71.81 57.8375 71.4525 60.285 71.236 60.939C71.0195 61.593 70.0755 63.393 69.1385 64.939C68.2015 66.485 67.318 68.3125 67.175 69C67.032 69.6875 66.6515 70.6045 66.329 71.0375C66.0065 71.4705 65.0965 72.246 64.3065 72.76C63.5165 73.274 61.7165 73.9075 60.3065 74.167C58.8965 74.4265 55.38 74.634 52.4925 74.6275C49.605 74.6215 45.8925 74.4155 44.2425 74.17C42.5925 73.924 40.5415 73.305 39.6855 72.7935C38.829 72.2825 37.704 71.1635 37.1855 70.307C36.5625 69.279 36.114 67.2215 35.865 64.25C35.657 61.775 35.4695 59.1875 35.4485 58.5C35.427 57.8125 35.597 56.455 35.826 55.4835C36.055 54.512 36.887 52.712 37.6745 51.4835C38.462 50.255 39.9245 48.6655 40.9245 47.951C41.9245 47.2365 43.5095 45.3665 44.4465 43.796C45.384 42.225 46.682 39.362 47.3315 37.434C47.981 35.5055 49.096 32.7625 49.8095 31.339Z' fill='white'/%3E%3Cpath d='M24.6985 57.25C25.0785 56.15 26.1065 54.5185 26.983 53.625C28.2215 52.3625 28.9965 52 30.4575 52C31.6865 52 32.643 52.3375 33.22 52.975C33.9175 53.7455 34.028 54.401 33.748 56.1C33.553 57.2825 33.3805 59.9375 33.3645 62C33.3485 64.0625 33.5855 66.65 33.8915 67.75C34.1975 68.85 34.593 70.351 34.771 71.086C35.0455 72.221 34.865 72.5405 33.568 73.211C32.729 73.645 31.486 74 30.807 74C30.014 74 28.7965 73.221 27.407 71.824C26.151 70.5615 24.98 68.781 24.6175 67.582C24.274 66.4455 23.996 64.106 24 62.383C24.004 60.66 24.3185 58.35 24.6985 57.25Z' fill='white'/%3E%3C/svg%3E");
}

.reaction-badge--agent.reaction-badge--haha::before,
.reaction-picker--agent .reaction-option--haha::before {
  background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 117 115' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M101.5 51C101.5 59.7503 99.2745 67.9808 95.3586 75.1563C100.193 77.6464 103.5 82.6871 103.5 88.5C103.5 96.7843 96.7843 103.5 88.5 103.5C82.6871 103.5 77.6464 100.193 75.1563 95.3586C67.9808 99.2745 59.7503 101.5 51 101.5C23.1096 101.5 0.5 78.8904 0.5 51C0.5 23.1096 23.1096 0.5 51 0.5C78.8904 0.5 101.5 23.1096 101.5 51ZM108.5 114.5C104.082 114.5 100.5 110.918 100.5 106.5C100.5 102.082 104.082 98.5 108.5 98.5C112.918 98.5 116.5 102.082 116.5 106.5C116.5 110.918 112.918 114.5 108.5 114.5Z' fill='%234C90F7'/%3E%3Cpath d='M39.1797 30.704C39.3092 30.13 39.8862 29.0615 40.4622 28.329C41.3342 27.2205 41.9007 27.0005 43.8482 27.014C45.1342 27.0225 46.5412 27.304 46.9742 27.639C47.4072 27.974 48.1707 28.876 48.6702 29.6435C49.1697 30.411 49.8117 31.986 50.0967 33.1435C50.3812 34.301 50.6147 38.2855 50.6147 41.998C50.6147 45.7105 50.3752 49.7285 50.0827 50.927C49.7902 52.1255 49.1092 53.7005 48.5697 54.427C47.9242 55.2955 47.0182 55.804 45.9257 55.911C45.0117 56.001 43.7687 55.8095 43.1637 55.486C42.5592 55.162 41.5857 54.0455 41.0007 53.0045C40.4152 51.9635 39.9367 50.625 39.9367 50.03C39.9367 49.435 39.5862 48.2705 39.1577 47.442C38.5917 46.3475 38.0797 45.9785 37.2827 46.092C36.3237 46.2285 36.1457 46.654 35.8607 49.498C35.6812 51.2855 35.3717 53.3755 35.1737 54.142C34.9672 54.9395 34.2077 55.8495 33.3997 56.267C32.6222 56.669 31.2227 56.998 30.2892 56.998C29.2982 56.998 28.2722 56.634 27.8247 56.123C27.4027 55.6415 26.6547 54.4605 26.1627 53.498C25.6707 52.5355 25.0457 50.848 24.7737 49.748C24.5022 48.648 24.1912 44.4435 24.0837 40.405C23.8952 33.368 23.9392 32.9595 25.1362 30.598C26.1182 28.6595 26.7107 28.068 27.9107 27.828C28.7502 27.6605 30.1232 27.6605 30.9627 27.828C32.1572 28.067 32.7542 28.658 33.7127 30.549C34.3857 31.8775 34.9367 33.725 34.9367 34.654C34.9367 35.6865 35.3112 36.682 35.8997 37.2145C36.4292 37.6935 37.2727 38.0075 37.7747 37.912C38.5182 37.7705 38.7102 37.1855 38.8152 34.743C38.8862 33.096 39.0502 31.2785 39.1797 30.704Z' fill='white'/%3E%3Cpath d='M42.9367 62.9885C42.9367 61.1115 43.2037 60.367 44.2547 59.316C45.0347 58.5365 46.1302 57.998 46.9367 57.998C47.7292 57.998 48.8307 58.528 49.5657 59.2635C50.2617 59.959 50.9872 61.3655 51.1782 62.3885C51.3692 63.411 51.6347 66.2445 51.7682 68.6845C51.9267 71.584 51.7817 73.8985 51.3487 75.366C50.9847 76.6005 50.1497 78.148 49.4937 78.8045C48.8372 79.461 47.9047 79.998 47.4212 79.998C46.9372 79.998 46.0282 79.4645 45.4007 78.813C44.7737 78.161 43.8812 76.417 43.4177 74.938C42.9302 73.3805 42.2832 72.248 41.8812 72.248C41.4307 72.248 41.0937 73.0385 40.9217 74.498C40.7757 75.7355 40.2437 77.4415 39.7382 78.289C39.2332 79.1365 38.3932 80.097 37.8707 80.423C37.1222 80.8905 36.6247 80.8625 35.5177 80.29C34.7457 79.8905 33.8897 79.268 33.6152 78.906C33.3412 78.544 32.8607 77.348 32.5472 76.248C32.2342 75.148 31.8277 73.4605 31.6442 72.498C31.4612 71.5355 31.3152 69.2855 31.3202 67.498C31.3252 65.7105 31.4892 63.4185 31.6842 62.4045C31.8792 61.3905 32.4437 60.194 32.9387 59.746C33.5257 59.215 34.5017 58.9865 35.7467 59.09C37.2712 59.216 37.8837 59.5895 38.7957 60.947C39.4847 61.9725 39.9367 63.3975 39.9367 64.5425C39.9367 65.5855 40.1757 66.587 40.4682 66.7675C40.7607 66.948 41.4357 66.7015 41.9682 66.2195C42.6652 65.589 42.9367 64.6825 42.9367 62.9885Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M61.9632 28.0525C61.0152 28.6305 59.5902 29.7985 58.7957 30.649C58.0017 31.499 56.6642 33.5565 55.8237 35.2215C54.9832 36.886 54.0662 38.923 53.7862 39.748C53.5062 40.573 53.0942 43.3855 52.8702 45.998C52.6467 48.6105 52.4017 51.648 52.3252 52.748L52.1867 54.748L54.1867 54.894C55.9217 55.0205 56.4822 54.772 58.4167 53.019C60.4652 51.1625 60.8752 50.998 63.4532 50.998C66.1307 50.998 66.3827 51.113 68.9367 53.498C70.7737 55.2135 72.0352 55.998 72.9572 55.998C73.7417 55.998 74.8482 55.45 75.6187 54.68C76.6082 53.6905 76.9367 52.8575 76.9367 51.3405C76.9367 50.2285 76.7312 48.628 76.4802 47.7835C76.2287 46.939 75.5347 44.7855 74.9377 42.998C74.3412 41.2105 73.5162 38.848 73.1052 37.748C72.6937 36.648 71.5792 34.266 70.6277 32.4545C69.3582 30.036 68.3867 28.873 66.9742 28.0795C65.9162 27.4845 64.7437 26.999 64.3687 27C63.9937 27.001 62.9112 27.4745 61.9632 28.0525ZM65.2517 43.873C65.0862 43.2545 64.9473 42.0165 64.9437 41.123C64.9397 40.2295 64.7252 39.498 64.4662 39.498C64.2072 39.498 63.8157 39.7795 63.5952 40.123C63.3752 40.467 62.9242 41.5205 62.5932 42.465C62.2622 43.4095 62.1047 44.3655 62.2437 44.59C62.3822 44.8145 63.1837 44.998 64.0247 44.998C65.3662 44.998 65.5162 44.86 65.2517 43.873Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M61.1862 57.917C60.3607 58.4205 58.8417 60.253 57.8112 61.99C56.7802 63.7265 55.9367 65.35 55.9367 65.5975C55.9367 65.845 55.5492 66.7675 55.0752 67.648C54.6017 68.528 54.0787 70.9355 53.9142 72.998C53.7492 75.0605 53.4437 77.1265 53.2352 77.589C52.9497 78.2215 53.2472 78.633 54.4322 79.2455C55.7462 79.9255 56.1467 79.9515 56.8387 79.4045C57.2952 79.0435 58.1687 78.262 58.7802 77.6685C59.7537 76.7225 60.2822 76.622 63.0392 76.8565C65.7382 77.0855 66.3522 77.3285 67.3477 78.561C68.1252 79.523 68.9702 79.998 69.9047 79.998C70.7462 79.998 71.8242 79.4745 72.6187 78.68C73.3437 77.955 73.9367 77.127 73.9367 76.8405C73.9367 76.5535 73.7322 75.628 73.4817 74.7835C73.2317 73.939 72.7697 72.348 72.4547 71.248C72.1397 70.148 71.4642 68.2355 70.9537 66.998C70.4427 65.7605 69.7732 64.0655 69.4652 63.232C69.1572 62.398 68.4062 61.135 67.7962 60.425C67.1857 59.7155 65.8992 58.6545 64.9367 58.068C63.9742 57.4815 63.0742 57.0015 62.9367 57.0015C62.7992 57.0015 62.0112 57.4135 61.1862 57.917ZM63.7637 71.385C64.2457 70.9035 64.3812 70.2015 64.1617 69.326C63.9782 68.5955 63.6357 67.998 63.4002 67.998C63.1647 67.998 62.7392 68.433 62.4542 68.965C62.1697 69.497 61.9367 70.2715 61.9367 70.6855C61.9367 71.1 62.1832 71.5915 62.4847 71.7775C62.7862 71.964 63.3617 71.7875 63.7637 71.385Z' fill='white'/%3E%3C/svg%3E%0A");
}

.reaction-badge--user.reaction-badge--love::before,
.reaction-picker--user .reaction-option--love::before {
  background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 117 115' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5 51C15.5 59.7503 17.7255 67.9808 21.6414 75.1563C16.8065 77.6464 13.5 82.6871 13.5 88.5C13.5 96.7843 20.2157 103.5 28.5 103.5C34.3129 103.5 39.3536 100.193 41.8437 95.3586C49.0192 99.2745 57.2497 101.5 66 101.5C93.8904 101.5 116.5 78.8904 116.5 51C116.5 23.1096 93.8904 0.5 66 0.5C38.1096 0.5 15.5 23.1096 15.5 51ZM8.5 114.5C12.9183 114.5 16.5 110.918 16.5 106.5C16.5 102.082 12.9183 98.5 8.5 98.5C4.08172 98.5 0.5 102.082 0.5 106.5C0.5 110.918 4.08172 114.5 8.5 114.5Z' fill='%23E9E9EA'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M49.704 36.015C48.7885 36.573 47.529 37.54 46.9055 38.1635C46.2815 38.7875 45.3675 39.914 44.874 40.6675C44.38 41.421 43.7565 42.9845 43.488 44.142C43.2195 45.2995 43 47.034 43 47.9965C43 48.959 43.215 50.6465 43.478 51.7465C43.7405 52.8465 44.665 55.1415 45.5315 56.847C46.5665 58.8825 48.6115 61.461 51.4875 64.356C53.897 66.7805 56.6555 69.3155 57.618 69.989C58.5805 70.6625 59.674 71.511 60.0485 71.8745C60.4225 72.238 61.8215 73.0895 63.1565 73.766C64.492 74.443 65.895 74.9965 66.274 74.9965C66.653 74.9965 68.404 74.068 70.1655 72.933C71.927 71.798 73.4805 70.718 73.618 70.534C73.7555 70.3495 74.6555 69.6495 75.618 68.978C76.5805 68.307 78.518 66.6105 79.9235 65.2075C81.329 63.805 83.585 60.9895 84.9365 58.952C86.288 56.914 87.7075 54.3465 88.091 53.2465C88.4745 52.1465 88.7785 49.852 88.766 48.1475C88.754 46.4435 88.437 44.0105 88.0625 42.741C87.6875 41.4715 86.6985 39.688 85.864 38.7775C85.03 37.8665 83.5645 36.644 82.608 36.061C81.243 35.229 80.0595 35 77.118 35C74.188 35 72.991 35.23 71.6445 36.051C70.6965 36.629 69.285 37.7825 68.5075 38.6145C67.7305 39.4465 66.8745 40.492 66.606 40.937C66.1695 41.6615 66.026 41.6355 65.243 40.691C64.762 40.1105 63.918 39.069 63.368 38.377C62.818 37.685 61.5805 36.642 60.618 36.0595C59.248 35.23 58.0535 35 55.118 35C52.23 35 50.9855 35.2335 49.704 36.015Z' fill='%23F77676'/%3E%3C/svg%3E%0A");
}

.reaction-badge--user.reaction-badge--like::before,
.reaction-picker--user .reaction-option--like::before {
  background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 117 115' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5 51C15.5 59.7503 17.7255 67.9808 21.6414 75.1563C16.8065 77.6464 13.5 82.6871 13.5 88.5C13.5 96.7843 20.2157 103.5 28.5 103.5C34.3129 103.5 39.3536 100.193 41.8437 95.3586C49.0192 99.2745 57.2497 101.5 66 101.5C93.8904 101.5 116.5 78.8904 116.5 51C116.5 23.1096 93.8904 0.5 66 0.5C38.1096 0.5 15.5 23.1096 15.5 51ZM8.5 114.5C12.9183 114.5 16.5 110.918 16.5 106.5C16.5 102.082 12.9183 98.5 8.5 98.5C4.08172 98.5 0.5 102.082 0.5 106.5C0.5 110.918 4.08172 114.5 8.5 114.5Z' fill='%23E9E9EA'/%3E%3Cpath d='M65.8095 31.339C66.523 29.915 67.453 28.3565 67.877 27.875C68.301 27.3935 68.9615 27 69.345 27C69.7285 27 70.6745 27.327 71.447 27.7265C72.2195 28.126 73.1255 29.114 73.4605 29.9225C73.846 30.853 73.987 32.9245 73.845 35.571C73.722 37.8695 73.3775 40.65 73.0795 41.75C72.781 42.85 72.399 44.3125 72.23 45L71.923 46.25L79.492 46.0785C86.26 45.925 87.1675 46.0035 88.068 46.8185C88.8655 47.54 89.008 48.096 88.753 49.49C88.576 50.458 88.2505 53.1625 88.0305 55.5C87.81 57.8375 87.4525 60.285 87.236 60.939C87.0195 61.593 86.0755 63.393 85.1385 64.939C84.2015 66.485 83.318 68.3125 83.175 69C83.032 69.6875 82.6515 70.6045 82.329 71.0375C82.0065 71.4705 81.0965 72.246 80.3065 72.76C79.5165 73.274 77.7165 73.9075 76.3065 74.167C74.8965 74.4265 71.38 74.634 68.4925 74.6275C65.605 74.6215 61.8925 74.4155 60.2425 74.17C58.5925 73.924 56.5415 73.305 55.6855 72.7935C54.829 72.2825 53.704 71.1635 53.1855 70.307C52.5625 69.279 52.114 67.2215 51.865 64.25C51.657 61.775 51.4695 59.1875 51.4485 58.5C51.427 57.8125 51.597 56.455 51.826 55.4835C52.055 54.512 52.887 52.712 53.6745 51.4835C54.462 50.255 55.9245 48.6655 56.9245 47.951C57.9245 47.2365 59.5095 45.3665 60.4465 43.796C61.384 42.225 62.682 39.362 63.3315 37.434C63.981 35.5055 65.096 32.7625 65.8095 31.339Z' fill='%23808080'/%3E%3Cpath d='M40.6985 57.25C41.0785 56.15 42.1065 54.5185 42.983 53.625C44.2215 52.3625 44.9965 52 46.4575 52C47.6865 52 48.643 52.3375 49.22 52.975C49.9175 53.7455 50.028 54.401 49.748 56.1C49.553 57.2825 49.3805 59.9375 49.3645 62C49.3485 64.0625 49.5855 66.65 49.8915 67.75C50.1975 68.85 50.593 70.351 50.771 71.086C51.0455 72.221 50.865 72.5405 49.568 73.211C48.729 73.645 47.486 74 46.807 74C46.014 74 44.7965 73.221 43.407 71.824C42.151 70.5615 40.98 68.781 40.6175 67.582C40.274 66.4455 39.996 64.106 40 62.383C40.004 60.66 40.3185 58.35 40.6985 57.25Z' fill='%23808080'/%3E%3C/svg%3E");
}

.reaction-badge--user.reaction-badge--haha::before,
.reaction-picker--user .reaction-option--haha::before {
  background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 117 115' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.5 51C15.5 59.7503 17.7255 67.9808 21.6414 75.1563C16.8065 77.6464 13.5 82.6871 13.5 88.5C13.5 96.7843 20.2157 103.5 28.5 103.5C34.3129 103.5 39.3536 100.193 41.8437 95.3586C49.0192 99.2745 57.2497 101.5 66 101.5C93.8904 101.5 116.5 78.8904 116.5 51C116.5 23.1096 93.8904 0.5 66 0.5C38.1096 0.5 15.5 23.1096 15.5 51ZM8.5 114.5C12.9183 114.5 16.5 110.918 16.5 106.5C16.5 102.082 12.9183 98.5 8.5 98.5C4.08172 98.5 0.5 102.082 0.5 106.5C0.5 110.918 4.08172 114.5 8.5 114.5Z' fill='%23E9E9EA'/%3E%3Cpath d='M55.1797 30.704C55.3092 30.13 55.8862 29.0615 56.4622 28.329C57.3342 27.2205 57.9007 27.0005 59.8482 27.014C61.1342 27.0225 62.5412 27.304 62.9742 27.639C63.4072 27.974 64.1707 28.876 64.6702 29.6435C65.1697 30.411 65.8117 31.986 66.0967 33.1435C66.3812 34.301 66.6147 38.2855 66.6147 41.998C66.6147 45.7105 66.3752 49.7285 66.0827 50.927C65.7902 52.1255 65.1092 53.7005 64.5697 54.427C63.9242 55.2955 63.0182 55.804 61.9257 55.911C61.0117 56.001 59.7687 55.8095 59.1637 55.486C58.5592 55.162 57.5857 54.0455 57.0007 53.0045C56.4152 51.9635 55.9367 50.625 55.9367 50.03C55.9367 49.435 55.5862 48.2705 55.1577 47.442C54.5917 46.3475 54.0797 45.9785 53.2827 46.092C52.3237 46.2285 52.1457 46.654 51.8607 49.498C51.6812 51.2855 51.3717 53.3755 51.1737 54.142C50.9672 54.9395 50.2077 55.8495 49.3997 56.267C48.6222 56.669 47.2227 56.998 46.2892 56.998C45.2982 56.998 44.2722 56.634 43.8247 56.123C43.4027 55.6415 42.6547 54.4605 42.1627 53.498C41.6707 52.5355 41.0457 50.848 40.7737 49.748C40.5022 48.648 40.1912 44.4435 40.0837 40.405C39.8952 33.368 39.9392 32.9595 41.1362 30.598C42.1182 28.6595 42.7107 28.068 43.9107 27.828C44.7502 27.6605 46.1232 27.6605 46.9627 27.828C48.1572 28.067 48.7542 28.658 49.7127 30.549C50.3857 31.8775 50.9367 33.725 50.9367 34.654C50.9367 35.6865 51.3112 36.682 51.8997 37.2145C52.4292 37.6935 53.2727 38.0075 53.7747 37.912C54.5182 37.7705 54.7102 37.1855 54.8152 34.743C54.8862 33.096 55.0502 31.2785 55.1797 30.704Z' fill='%23808080'/%3E%3Cpath d='M58.9367 62.9885C58.9367 61.1115 59.2037 60.367 60.2547 59.316C61.0347 58.5365 62.1302 57.998 62.9367 57.998C63.7292 57.998 64.8307 58.528 65.5657 59.2635C66.2617 59.959 66.9872 61.3655 67.1782 62.3885C67.3692 63.411 67.6347 66.2445 67.7682 68.6845C67.9267 71.584 67.7817 73.8985 67.3487 75.366C66.9847 76.6005 66.1497 78.148 65.4937 78.8045C64.8372 79.461 63.9047 79.998 63.4212 79.998C62.9372 79.998 62.0282 79.4645 61.4007 78.813C60.7737 78.161 59.8812 76.417 59.4177 74.938C58.9302 73.3805 58.2832 72.248 57.8812 72.248C57.4307 72.248 57.0937 73.0385 56.9217 74.498C56.7757 75.7355 56.2437 77.4415 55.7382 78.289C55.2332 79.1365 54.3932 80.097 53.8707 80.423C53.1222 80.8905 52.6247 80.8625 51.5177 80.29C50.7457 79.8905 49.8897 79.268 49.6152 78.906C49.3412 78.544 48.8607 77.348 48.5472 76.248C48.2342 75.148 47.8277 73.4605 47.6442 72.498C47.4612 71.5355 47.3152 69.2855 47.3202 67.498C47.3252 65.7105 47.4892 63.4185 47.6842 62.4045C47.8792 61.3905 48.4437 60.194 48.9387 59.746C49.5257 59.215 50.5017 58.9865 51.7467 59.09C53.2712 59.216 53.8837 59.5895 54.7957 60.947C55.4847 61.9725 55.9367 63.3975 55.9367 64.5425C55.9367 65.5855 56.1757 66.587 56.4682 66.7675C56.7607 66.948 57.4357 66.7015 57.9682 66.2195C58.6652 65.589 58.9367 64.6825 58.9367 62.9885Z' fill='%23808080'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M77.9632 28.0525C77.0152 28.6305 75.5902 29.7985 74.7957 30.649C74.0017 31.499 72.6642 33.5565 71.8237 35.2215C70.9832 36.886 70.0662 38.923 69.7862 39.748C69.5062 40.573 69.0942 43.3855 68.8702 45.998C68.6467 48.6105 68.4017 51.648 68.3252 52.748L68.1867 54.748L70.1867 54.894C71.9217 55.0205 72.4822 54.772 74.4167 53.019C76.4652 51.1625 76.8752 50.998 79.4532 50.998C82.1307 50.998 82.3827 51.113 84.9367 53.498C86.7737 55.2135 88.0352 55.998 88.9572 55.998C89.7417 55.998 90.8482 55.45 91.6187 54.68C92.6082 53.6905 92.9367 52.8575 92.9367 51.3405C92.9367 50.2285 92.7312 48.628 92.4802 47.7835C92.2287 46.939 91.5347 44.7855 90.9377 42.998C90.3412 41.2105 89.5162 38.848 89.1052 37.748C88.6937 36.648 87.5792 34.266 86.6277 32.4545C85.3582 30.036 84.3867 28.873 82.9742 28.0795C81.9162 27.4845 80.7437 26.999 80.3687 27C79.9937 27.001 78.9112 27.4745 77.9632 28.0525ZM81.2517 43.873C81.0862 43.2545 80.9473 42.0165 80.9437 41.123C80.9397 40.2295 80.7252 39.498 80.4662 39.498C80.2072 39.498 79.8157 39.7795 79.5952 40.123C79.3752 40.467 78.9242 41.5205 78.5932 42.465C78.2622 43.4095 78.1047 44.3655 78.2437 44.59C78.3822 44.8145 79.1837 44.998 80.0247 44.998C81.3662 44.998 81.5162 44.86 81.2517 43.873Z' fill='%23808080'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M77.1862 57.917C76.3607 58.4205 74.8417 60.253 73.8112 61.99C72.7802 63.7265 71.9367 65.35 71.9367 65.5975C71.9367 65.845 71.5492 66.7675 71.0752 67.648C70.6017 68.528 70.0787 70.9355 69.9142 72.998C69.7492 75.0605 69.4437 77.1265 69.2352 77.589C68.9497 78.2215 69.2472 78.633 70.4322 79.2455C71.7462 79.9255 72.1467 79.9515 72.8387 79.4045C73.2952 79.0435 74.1687 78.262 74.7802 77.6685C75.7537 76.7225 76.2822 76.622 79.0392 76.8565C81.7382 77.0855 82.3522 77.3285 83.3477 78.561C84.1252 79.523 84.9702 79.998 85.9047 79.998C86.7462 79.998 87.8242 79.4745 88.6187 78.68C89.3437 77.955 89.9367 77.127 89.9367 76.8405C89.9367 76.5535 89.7322 75.628 89.4817 74.7835C89.2317 73.939 88.7697 72.348 88.4547 71.248C88.1397 70.148 87.4642 68.2355 86.9537 66.998C86.4427 65.7605 85.7732 64.0655 85.4652 63.232C85.1572 62.398 84.4062 61.135 83.7962 60.425C83.1857 59.7155 81.8992 58.6545 80.9367 58.068C79.9742 57.4815 79.0742 57.0015 78.9367 57.0015C78.7992 57.0015 78.0112 57.4135 77.1862 57.917ZM79.7637 71.385C80.2457 70.9035 80.3812 70.2015 80.1617 69.326C79.9782 68.5955 79.6357 67.998 79.4002 67.998C79.1647 67.998 78.7392 68.433 78.4542 68.965C78.1697 69.497 77.9367 70.2715 77.9367 70.6855C77.9367 71.1 78.1832 71.5915 78.4847 71.7775C78.7862 71.964 79.3617 71.7875 79.7637 71.385Z' fill='%23808080'/%3E%3C/svg%3E");
}

.reaction-picker .reaction-option--love::before {
  --reaction-icon: #f77676;

  width: 20px;
  height: 18px;
  background: var(--reaction-icon);
  background-image: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 29' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.6 0C20.5 0 17.8 1.8 16 4.4 14.2 1.8 11.5 0 8.4 0 3.7 0 0 3.7 0 8.5 0 15.2 16 29 16 29S32 15.2 32 8.5C32 3.7 28.3 0 23.6 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 29' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.6 0C20.5 0 17.8 1.8 16 4.4 14.2 1.8 11.5 0 8.4 0 3.7 0 0 3.7 0 8.5 0 15.2 16 29 16 29S32 15.2 32 8.5C32 3.7 28.3 0 23.6 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.reaction-picker .reaction-option--like::before {
  background: var(--reaction-icon);
  background-image: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 21h4V9H2v12Zm20-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L13.17 1 7 7.17V19c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 21h4V9H2v12Zm20-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L13.17 1 7 7.17V19c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.reaction-picker .reaction-option--haha::before {
  width: auto;
  height: auto;
  color: var(--reaction-icon);
  background: none;
  background-image: none;
  content: "HA\A HA";
  font-family: Arial, var(--sans);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.8;
  text-align: center;
  white-space: pre;
  transform: rotate(-4deg);
}

.reaction-option.is-selected:not(.reaction-option--love) {
  --reaction-icon: #ffffff;
}

.demo-caption {
  margin: 0;
  padding-top: 14px;
  text-align: center;
  color: var(--caption);
  font-family: "Poppins", var(--sans);
  font-size: 0.98rem;
}

.scroll-footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 8;
  min-height: clamp(260px, 38vh, 430px);
  display: flex;
  align-items: flex-end;
  opacity: var(--footer-progress);
  pointer-events: none;
  transform: translate3d(0, var(--footer-y), 0);
  transition:
    opacity 120ms linear,
    transform 120ms linear;
}

.scroll-footer::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.46) 14%,
      rgba(0, 0, 0, 0.92) 34%,
      rgba(0, 0, 0, 0.99) 64%,
      #000000 100%
    );
  content: "";
}

.scroll-footer__inner {
  position: relative;
  width: min(1600px, 100%);
  margin: 0 auto;
  padding: 0 34px 38px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
}

.scroll-footer__brand {
  margin: 0;
  color: var(--white);
  font-size: clamp(3.2rem, 6vw, 5.4rem);
  font-weight: 760;
  line-height: 0.92;
}

.scroll-footer__line {
  margin: 18px 0 0;
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 620;
}

.scroll-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 16px 28px;
}

.scroll-footer__links a {
  color: var(--white);
  font-size: 0.88rem;
  font-weight: 620;
  text-decoration: none;
  transition:
    color 180ms ease,
    transform 180ms ease;
}

.scroll-footer__links a:hover {
  color: var(--white);
  transform: translateY(-1px);
}

body.is-footer-visible .scroll-footer {
  pointer-events: auto;
}

@keyframes bubblePop {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes bubbleReact {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  34% {
    transform: translateY(-4px) scale(1.018);
  }

  62% {
    transform: translateY(1px) scale(0.997);
  }
}

@keyframes bubbleToStackedBase {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.985, 1);
  }
}

@keyframes bubbleToStackedTop {
  0% {
    opacity: 0;
    transform: scale(1.015, 1);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes reactionBadgePop {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.34);
    filter: blur(8px);
  }

  52% {
    opacity: 1;
    transform: translateY(-7px) scale(1.16);
    filter: blur(0);
  }

  74% {
    transform: translateY(2px) scale(0.96);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes reactionPickerIn {
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes typingPulse {
  0%,
  80%,
  100% {
    opacity: 0.34;
    transform: translateY(0) scale(0.9);
  }

  40% {
    opacity: 1;
    transform: translateY(-2px) scale(1);
  }
}

@keyframes accessRise {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (max-width: 980px) {
  :root {
    --bubble-max: min(860px, 92vw);
    --bubble-fs: clamp(1.02rem, 0.9rem + 0.5vw, 1.26rem);
  }
}

@media (max-width: 720px) {
  .app-shell {
    padding: 20px 16px 34px;
  }

  .access-trigger {
    top: 18px;
    right: 16px;
    min-height: 44px;
    padding: 0 16px;
    font-size: 0.84rem;
  }

  .access-form {
    min-height: 54px;
    gap: 6px;
    padding: 6px;
  }

  .access-form input,
  .access-form button[type="submit"] {
    height: 42px;
  }

  .access-form input {
    padding: 0 14px;
    font-size: 0.9rem;
  }

  .access-form button[type="submit"] {
    padding: 0 18px;
    font-size: 0.84rem;
  }

  .brand-mark {
    width: 82px;
    height: 82px;
  }

  .brand-initial {
    font-size: 2.3rem;
  }

  .brand-chip {
    padding: 7px 13px 9px;
    font-size: 0.8rem;
  }

  .demo-thread {
    padding-top: var(--thread-top-pad);
    gap: var(--thread-gap);
  }

  .message-row.payment-row {
    margin-top: 0;
  }

  .message-row.left {
    justify-content: flex-start;
    padding-right: clamp(70px, 20vw, 86px);
  }

  .message-row.right {
    justify-content: flex-end;
    padding-left: clamp(70px, 20vw, 86px);
  }

  :root {
    --bubble-max: min(82vw, 22rem);
    --bubble-fs: clamp(0.95rem, 0.82rem + 0.55vw, 1.04rem);
    --bubble-py: clamp(10px, 8px + 0.65vw, 13px);
    --bubble-px: clamp(14px, 11px + 0.9vw, 18px);
    --thread-frame-pad: 12px;
    --thread-top-pad: clamp(8px, 1.4svh, 14px);
    --thread-bottom-pad: clamp(10px, 1.7svh, 16px);
    --thread-gap: clamp(15px, 2.3svh, 21px);
    --stacked-message-gap: 0px;
    --reaction-clearance: clamp(22px, 3.2svh, 30px);
    --first-reaction-clearance: clamp(18px, 2.7svh, 24px);
    --typing-pad-y: clamp(9px, 7px + 0.55vw, 12px);
    --typing-pad-x: clamp(13px, 10px + 0.9vw, 18px);
  }

  .message.user::before {
    inset: -5px -14px -7px -7px;
  }

  .message.agent::before,
  .message.pay::before {
    inset: -5px -7px -7px -14px;
  }

  .message.user.message--multi::before {
    inset: -7px -14px -9px -7px;
  }

  .message.agent.message--multi::before,
  .message.pay::before {
    inset: -7px -7px -9px -14px;
  }

  .typing-bubble {
    min-height: 58px;
  }

  .message.typing-bubble::before {
    inset: -8px -10px -10px -10px;
  }

  .message.user::after,
  .message.user.message--multi::after {
    inset: -7px -9px -9px -9px;
  }

  .message.agent::after,
  .message.agent.message--multi::after,
  .message.pay::after {
    inset: -7px -9px -9px -9px;
  }

  .pay {
    gap: 6px;
  }

  .pay-kicker {
    font-size: 0.68rem;
  }

  .pay strong {
    font-size: 0.98rem;
    line-height: 1.3;
  }

  .message.typing-bubble::after {
    inset: auto auto -10px -18px;
    width: 48px;
    height: 30px;
  }

  .reaction-badge {
    top: -26px;
    width: 44px;
    height: 44px;
  }

  .reaction-badge::before {
    width: 44px;
    height: 44px;
  }

  .reaction-badge--user {
    left: -12px;
  }

  .reaction-badge--agent,
  .reaction-badge--confirm {
    right: -12px;
  }

  .reaction-badge--confirm {
    top: -26px;
  }

  .reaction-picker {
    top: -50px;
    gap: 7px;
    height: 42px;
    padding: 4px 8px;
  }

  .reaction-option {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .reaction-picker .reaction-option--haha::before {
    font-size: 11px;
  }

  .demo-caption {
    font-size: 0.9rem;
  }

  .scroll-footer {
    min-height: 330px;
  }

  .scroll-footer__inner {
    padding: 0 16px 30px;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .scroll-footer__brand {
    font-size: clamp(3rem, 18vw, 4.8rem);
  }

  .scroll-footer__line {
    margin-top: 14px;
  }

  .scroll-footer__links {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .scroll-footer__links a:hover {
    transform: none;
  }
}