:root {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#252927;
  background:#e8ece8;
  font-synthesis:none;
  color-scheme:light;
  --green:#37694c;
  --muted:#7b817c;
  --bubble:#eaece9;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:30px 20px;
}

button,textarea,input {
  font:inherit;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:default;
  opacity:.4;
}

button:focus-visible,textarea:focus-visible,input:focus-visible {
  outline:3px solid #739b7e;
  outline-offset:4px;
}

[hidden] {
  display:none!important;
}

.messenger {
  width:min(100%,490px);
  height:min(800px,calc(100svh - 100px));
  min-height:480px;
  background:#fff;
  border:1px solid #d7dcd6;
  border-radius:25px;
  box-shadow:0 24px 80px #263c2920;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.contact {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-shrink:0;
  position:relative;
  border-bottom:1px solid #e8e9e6;
  padding:21px 24px 15px;
  background:#f7f7f5;
}

.back {
  font-size:40px;
  line-height:1;
  color:var(--green);
  width:70px;
}

.identity {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.avatar {
  width:47px;
  height:47px;
  display:grid;
  place-items:center;
  background:#bec9bb;
  border-radius:50%;
  font-size:23px;
  font-weight:500;
  color:#fff;
}

h1 {
  font-size:13px;
  font-weight:500;
  letter-spacing:.02em;
  margin:0;
}

h1 span {
  margin-left:3px;
  color:#91968f;
}

.void-label {
  width:70px;
  font-size:9px;
  letter-spacing:.16em;
  color:#8b918a;
  text-align:right;
}

.thread {
  padding:24px 25px 10px;
  flex:1;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  display:flex;
  flex-direction:column;
  gap:24px;
}

.timestamp {
  text-align:center;
  font-size:11px;
  color:#8b8f89;
  line-height:1.6;
  font-weight:500;
}

.thread > * {
  flex-shrink:0;
}

.timestamp span {
  font-weight:400;
}

.intro {
  text-align:center;
  margin:55px auto 30px;
  color:#90978f;
}

.little-star {
  font-size:28px;
  color:#aebba9;
}

.intro p {
  font-family:Georgia,serif;
  font-size:29px;
  line-height:1.18;
  letter-spacing:-.025em;
  color:#657360;
  margin:17px 0 12px;
}

.intro>span:last-child {
  font-size:12px;
}

.typing-wrap {
  margin-top:auto;
  align-self:flex-start;
}

.typing {
  border-radius:20px;
  padding:17px 20px;
  background:var(--bubble);
  display:flex;
  gap:5px;
  width:70px;
}

.typing i {
  width:7px;
  height:7px;
  background:#9b9f98;
  border-radius:50%;
  animation:typing 1.2s infinite;
}

.typing i:nth-child(2) {
  animation-delay:.15s;
}

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

.typing-label {
  font-size:11px;
  color:var(--muted);
  margin:7px 0 0 5px;
}

.message {
  align-self:flex-start;
  max-width:100%;
  width:320px;
  animation:arrive .28s ease-out;
}

.sender {
  font-size:10px;
  color:var(--muted);
  margin:0 0 5px 12px;
}

.audio-bubble {
  position:relative;
  background:var(--bubble);
  border-radius:19px 19px 19px 5px;
  padding:18px 17px;
}

.audio-player {
  display:flex;
  align-items:center;
  gap:12px;
}

.play {
  width:37px;
  height:37px;
  border:0;
  border-radius:50%;
  background:var(--green);
  color:white;
  font-size:15px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  padding-left:4px;
}

.play.playing {
  padding-left:0;
}

.wave-and-seek {
  flex:1;
  min-width:0;
}

.wave {
  height:28px;
  display:flex;
  gap:3px;
  align-items:center;
  justify-content:space-between;
}

.wave i {
  width:3px;
  background:#8b9c86;
  border-radius:4px;
}

.wave i:nth-child(4n+1) {
  height:10px;
}

.wave i:nth-child(4n+2) {
  height:22px;
}

.wave i:nth-child(4n+3) {
  height:15px;
}

.wave i:nth-child(4n) {
  height:28px;
}

.seek {
  display:block;
  width:100%;
  height:8px;
  margin:5px 0 0;
  accent-color:var(--green);
}

.duration {
  font-variant-numeric:tabular-nums;
  font-size:10px;
  color:#677161;
  min-width:32px;
}

.clip-title {
  font-size:11px;
  color:#74806e;
  margin:10px 0 0 50px;
}

.reactions {
  display:flex;
  gap:5px;
  padding:10px 2px 0;
}

.reaction {
  border:1px solid #e4e7e1;
  border-radius:20px;
  background:#fff;
  font-size:19px;
  padding:5px 11px;
  transition:background .15s,transform .15s;
}

.reaction:hover {
  background:#f1f4ee;
  transform:translateY(-2px);
}

.reaction[aria-pressed="true"] {
  background:#e4eddf;
  border-color:#91aa82;
}

.reaction:disabled {
  opacity:1;
}

.receipt {
  font-size:10px;
  color:var(--muted);
  margin:6px 3px 0;
}

.reply-bubble {
  align-self:flex-end;
  max-width:85%;
  border-radius:19px 19px 5px 19px;
  background:var(--green);
  color:#fff;
  padding:11px 16px;
  font-size:15px;
  line-height:1.4;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  animation:arrive .2s ease-out;
}

.empty {
  background:var(--bubble);
  border-radius:18px;
  padding:16px;
  line-height:1.5;
  font-size:14px;
  color:#606b59;
  align-self:flex-start;
  max-width:300px;
}

.actions {
  display:flex;
  justify-content:center;
  padding:10px 20px 0;
}

.another {
  color:#75846e;
  border:0;
  background:none;
  font-size:12px;
  padding:9px 14px;
}

.another span {
  margin-left:6px;
  font-size:15px;
}

.another:hover {
  color:var(--green);
}

.notice {
  font-size:12px;
  text-align:center;
  color:#8a593c;
  min-height:17px;
  margin:6px 24px;
}

footer {
  padding:0 20px 19px;
  background:#fff;
}

.composer {
  display:flex;
  gap:10px;
  align-items:flex-end;
  border:1px solid #d9dcd5;
  border-radius:24px;
  padding:6px 6px 6px 16px;
}

.composer textarea {
  width:100%;
  resize:none;
  max-height:100px;
  min-height:29px;
  padding:5px 0;
  border:0;
  background:transparent;
  font-size:14px;
  line-height:19px;
  outline-offset:0;
}

.composer textarea:focus-visible {
  outline:none;
}

.composer:focus-within {
  outline:2px solid #739b7e;
  outline-offset:2px;
}

.composer textarea::placeholder {
  color:#a0a59b;
}

.composer button {
  border:0;
  background:var(--green);
  color:#fff;
  border-radius:50%;
  width:29px;
  height:29px;
  font-size:23px;
  line-height:1;
  flex-shrink:0;
}

.fine-print {
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin:9px 5px 0;
  color:#8a9186;
  font-size:9px;
}

.signature {
  font-size:10px;
  letter-spacing:.03em;
  color:#83917d;
  margin-top:20px;
}

.signature span {
  margin:0 8px;
}

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

@keyframes typing {
  0%,60%,100% {
    transform:translateY(0);
    opacity:.55;
  }
  30% {
    transform:translateY(-4px);
    opacity:1;
  }
}

@keyframes arrive {
  from {
    opacity:0;
    transform:translateY(8px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@media(max-width:540px) {
  body {
    padding:0;
    background:#fff;
  }
  .messenger {
    width:100%;
    height:100svh;
    min-height:0;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  .contact {
    padding-top:max(20px,env(safe-area-inset-top));
  }
  .thread {
    padding-left:20px;
    padding-right:20px;
  }
  footer {
    padding-bottom:max(15px,env(safe-area-inset-bottom));
  }
  .signature {
    display:none;
  }
  .intro {
    margin-top:70px;
  }
  .fine-print {
    font-size:9px;
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    animation:none!important;
    scroll-behavior:auto!important;
    transition:none!important;
  }
}